Lebih mudah membuat website dengan photoshop

Assalamu’alaikum kembali lagi di postingan blog saya, kali ini saya akan membawakan materi tentang Lebih mudah membuat website dengan photoshop.

Apa itu Website?

Website adalah kumpulan informasi/kumpulan page yang biasa diakses lewat jalur internet. Setiap orang di berbagai tempat dan segala waktu bisa menggunakannya selama terhubung secara online di jaringan internet. Secara teknis, website adalah kumpulan dari page, yang tergabung kedalam suatu domain atau subdomain tertentu. Website-website yang ada berada di dalam World Wide Web(WWW) Internet.

Aplikasi apa saja ya yang digunakan dalam Pembuatan Website?

Banyak sekali software pembuat website, website yang bagus pasti di tunjang oleh software yang bagus pula, yang bisa anda gunakan untuk membuat sebuah website diantaranya :

  1. Web Builder Visual (Wysiwyg editor)
  2. Dreamweaver
  3. Notepad++
  4. CoffeeCup HTML Editor
  5. WordPress
  6. PageBreeze
  7. Bluefish Editor
  8. KompoZer

Pertanyaannya sekarang, sebenarnya susah nggak sih membuat desain website, kalau sebelumnya kita tidak memiliki background web desainer? Jawabannya, gampang-gampang susah, karena tidak seperti desain grafis, desain website memiliki detail yang cukup banyak, apalagi kalau kita mau membuat sendiri icon-icon dan button-button webnya. Kabar baiknya adalah, sama seperti desain grafis, desain website juga banyak menggunakan program desain yang umum, seperti Adobe Photoshop.

Secara teknis, Photoshop adalah aplikasi untuk memanipulasi citra tetapi juga dikemas dengan alat untuk membangun grafis dari awal. Bentuk, vektor, tipe, isi dan efek, semua ini (dan banyak lagi) sangat cocok untuk membangun tata letak grafis.

Membangun untuk web juga relatif kompleks sehingga mockup tata letak di Photoshop selalu akan lebih mudah. Mengapa Anda tidak mendesain dalam aplikasi grafis, mendapatkan persetujuan dari client kemudian benar-benar membuat untuk web? Desainer masa kini telah tumbuh menggunakan Photoshop karena menawarkan cara tercepat untuk memvisualisasikan konsep desain hi-fidelity.

Sebelum kita memulai silahkan instal aplikasi Photoshop pada operating system anda. untuk membeli aplikasi ini anda dapat men-download-nya di situs resmi Adobe.Mari kita memulai tutorial pembuatan website apabila anda sudah memiliki aplikasi tersebut.

Tutorial Cara membuat tampilan website dengan photoshop

  1. Membuat Layout Desain Awal dengan Photoshop

jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file –new lalu gunakan setting berikut: Width : 700 pixel Height : 875 pixel Resolution : 72 pixel/inch Background Content : Transparent

  1. Pilih rounded retangle tool pada tool panel

3. dan samakan setingan dengan gambar dibawah kemudian buat bidang berbentuk segi panjang vertical seperti pada gambar dibawah ini

4. klik kanan pada shape 1 (bidang yang anda buat) di bagian panel layer disebelah pojok      kanan bawah kemudian pilih blending option -> click gradient dan pilih gradasi  warnayang anda sukai… pastikan warna bawah adalah warna dasar putih.

5. buatlah bidang untuk panel menu dengan rounded retangle tool pada tool panel sepertisebelumnya beri sentuhan warna yang berbeda dengan layer pertama tetapi tidak melenceng dari tema anda, kemudian tempatkan pada sebelah kiri atas sehingga andamendapatkan gambar seperti dibawah ini.

6. buatkan lagi sebuah bidang untuk daftar menu yang kali ini lebih kecil dari sebelumnya dengan rounded retangle tool pada tool panel tempatkan sejajar dengan bidang yanganda buat sebelumnya putarkan sampai arah kemiringan 250 dengan move tool.

7. kemudian copy layer bidang dengan cara tekan ctrl+alt+shift dan geser kebawahsebanyak 4 kali. Beri sentuhan warna pada bidang yang telah anda buat sehingga akantampak seperti berikut:

8. Ketik daftar menu gunakan Type Tool dengan lambing (T) pada tool panel

9. Isi text pada bidang untuk daftar menu dengan : Halaman Utama, Tentang Saya, GalerryFoto dan Link. Kemudian pada sebelah kanan beri Logo dan judul Website yang sesuaidengan keinginan anda . Sampai tahapan ini kita sudah berhasil merancang layout

10. Gunakan Slicetool

11. kemudian slice Layout website menjadi 6 bagian yaitu : 4 slice untuk daftar menu, 1 sliceuntuk logo, dan 1 lagi untuk untuk content/ isi web.

12. Sekarang anda tinggal menyimpanya saja Pilih File->Save For Web

13. pada opsi dibawah save, anda bisa menentukan format gambar yang akan di save mulaidari gif, png, jpg.

14. apabila sudah memilih sebelum di save beri nama file anda dengan index, pilih opsiHTML and Images, simpan layout anda pada satu folder yang anda beri nama Webkita.

Semoga Bermanfaat Postingan blog saya ini, Hanya ini yang dapat saya share silahkan dibaca dan dipahami ya teman-teman….

Wassalamualaikum…….

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.