Cara Setting Layout Web dari Photoshop


Dalam pembuatan tampilan website sebaiknya dirancang dan dikerjakan secara skematis karena akan mengurangi kesalahan konsep. Jadi buatlah sketsa terlebih dahulu dalam pembuatan sebuah web. Ini bisa dijadikan gambaran dan petunjuk dalam proses pembuatan web nya.

Langkah 1
Perancangan sketsa awal.
web
Langkah 2
Sebelum membuat dokumen baru, kita harus mengetahui bahwa tidak semua resolusi monitor pengguna sama dengan yang kita miliki. Sebagai contoh, resolusi monitor kita menggunakan ukuran 1024 x 768 pixel sedangkan pengguna (user) hanya memiliki resolusi 800 x 600 pixel. Apabila Anda membuat ukuran dokumen 900 x 600 pixel maka menimbulkan ketidaknyamanan pengunjung karena harus sering menggulung halaman website akibat ukuran dokumen terlalu lebar. Sebaiknya lebar tidak melebihi 800 pixel. Maka buatlah dokumen baru dengan ukuran ukuran Width 800 pixel dan Height 600 Pixel dan resolusi 72 pixel.
image
Langkah 3
Gunakan garis bantu (guide) untuk membagi halaman menjadi beberapa bagian. Untuk garis bantu, pilih skala yang ada diatas dam bagian kiri, tarik dan lepaskan pada dokumen. Untuk Header buat 2 inch, membagi garis guide vertical disesuaikan dengan kebutuhan tombol navigasi, tombol navigasi kali ini saya buat 7 bagian. Untuk Guide untuk navigasi dibuat dengan jarak 0.5 inch.
image
Langkah 4
Buatlah sebuah contoh desain template seperti dibawah ini, atau dengan kreasi anda sendiri. Disini saya anggap langkah-langkah desain dengan Photoshop sudah selesai, karena yang akan saya bahas adalah proses slicing layout, yaitu proses pemotongan gambar menjadi beberapa bagian agar dapat dengan mudah diisi kode html tertentu pada Dreamweaver.
webslice
Langkah 5
Slicing(pemotongan) image pada desain digunakan untuk memotong rancangan situs agar menjadi bagian bagian yang lebih kecil. Hal ini bisa bermanfaat untuk optimalisasi situs web sehingga akses menjadi lebih cepat, serta memudahkan pembuatan halaman web. Hanya saja jangan terlalu banyak melakukan pemotongan karena browser terbatas menampilkan gambar secara pararel.
Dalam pemotongan kita bisa menggunakan garis bantu, kemudian pilih slice tool, kemudian pilih tombol slice from guides. Jangan lupa untuk menampilkan slice dengan memilih menu View – Show-Slice.
image
Langkah 6
Setelah kita potong dengan slice, sebenarnya secara default tiap-tiap potongan sudah diberi nama secara urut oleh Photoshop. Namun agar teratur lebih baik kita beri nama sendiri dengan cara, klik kanan pada setiap slice.
image
image
Langkah 7
Untuk mengekspor gambar desain menjadi halaman web caranya adalah dengan cara pilih menuFile – Save For Web & Devices dan beri nama index.
image
image
Secara default hasil penyimpanan gambar, akan otomatis membuat folder dengan nama image untuk menyimpan seluruh gambar yang telah dipotong oleh slice tool.
Langkah 8
Buka template yang sudah disimpan melalui adobe dreamweaver untuk mengisi bagian content.
webcontent
Hilangkan image di bagian content, jadikan image bagian content menjadi background cell, kemudian isi bagian content dengan tulisan atau berita.
web2
Jadilah sebuah layout website, untuk membuat link dan yang lain, klik tombol tombol navigasi sesuai dengan tujuan link tersebut. Kemudian silahkan isi bagian yang lain sesuai dengan keinginan. Tidak hanya memotong gambar, proses slicing juga membantu kita membuat sketsa tabel yang disesuaikan dengan rancangan layout anda.
Demikian.  Selamat mencoba dan berkreasi.

Sumber Referensi : http://news.palcomtech.com/2011/03/membuat-layout-web-dari-photoshop/

Label: