Layout Website Dengan Photoshop


Di artikel sebelumnya saya telah menjelaskanCara Install XAMPP di windows untuk menjalankan server local / localhost di komputer kita, dan kali ini saya akan memberikan sedikit tutorial pembuatan layout website menggunakan Adobe Photoshop, saat ini saya masih menggunakan Adobe Photosop CS 3.

Sebelum membuat website lebih baik kita membuat layout website terlebih dahulu, arti kata layout adalah tata letak, jadi sebelum kita membangun sebuah website kita membuat sketsa tata letaknya terlebih dahulu. Sama seperti sebelum membangun rumah, kita pastinya sudah menyiapkan skesa tata letak rumah kita, tidak mungkin anda akan membuat rumah tanpa sketsa, atau bisa di bilang asal-asalan dan asal main tebak ukurannya.

Disini nantinya kita akan menentukan lebar dari website kita, seperti lebar body website, lebar header, lebar navigasi/menu website, lebar konten, lebar footer, dan lebar sidebar/kolom samping. Disamping itu kita akan membuat beberapa background agar nantinya tampilan website kita lebih enak di pandang mata.

Pada kali ini kita akan membuat layout website yang simple – simple saja, untuk kedepannya anda bisa mengolah sendiri tampilannya, mau seperti apa terserah anda, yang penting konsep awalnya sudah anda mengerti.

Website yang kita buat nantinya akan seperti gambar di bawah ini.

sketsa web Layout Website Dengan Photoshop

Nantinya kita akan membuat website menjadi 5 bagian, yaitu ada header, menu / navigasi, ada konten website, ada sidebar / kolom samping yang nantinya bisa anda isikan dengan menu tambahan seperti kategori dalam website, berita terbaru dan lain lain.

Membuat Layout Website, langkah pertama

Pertama kita menentukan lebar website kita, buka program Adobe Photoshop anda, kemudian klik File -> New atau tekan Ctrl + N, isikan width 900 pixel, height 600 pixel, dan resolusi 72 pixel/inch, kemudian klik ok. Lihat pengaturannya pada gambar berikut.

setting awal file Layout Website Dengan Photoshop

Membuat Layout Website, langkah ke-2

Buatlah guideline / garis bantu, pada menu bar Photoshop anda klik View -> New Guide, pada Oreientation pilih Horizontal, pada Position ketikkan 150px, kemudian klik OK.

new guide1 Layout Website Dengan Photoshop

Ulangi langkah tadi, klik View -> New Guide, pada Oreientation pilih Vertical, pada Position ketikkan 20px, kemudian klik OK. Ini adalah batas kedalam dari kiri website sebesar 20 pixel.

Ulangi lagi  langkah diatas, klik View -> New Guide, pada Oreientation pilih Vertical, pada Position ketikkan 880px, kemudian klik OK. Ini adalah batas kedalam dari kanan website sebesar 20 pixel.

Karena lebar total website yang akan kita buat itu lebarnya 900pixel dan kita akan memberikan jarak kedalam dari sisi kanan dan kiri sebesar 20pixel maka kita membuat guidenya 900px – 20px = 880px.

Lakukan lagi hal yang sama, klik View -> New Guide, pada Oreientation pilih Horizontal, pada Position ketikkan 185px, kemudian klik OK. Kali ini kita membuat batas untuk menu / navigasi website.

Tinggi dari menu / navigasi website yang akan kita buat adalah 35pixel, dan tadi tinggi dari header yang kita buat adalah 150pixel, jadi untuk membuat garis bantu atau garis batas navigasi website adalah tinggi header + tinggi navigasi (150pixel + 35pixel ) =185pixel.

Sampai disini, saya harap anda mengerti konsep membuat garis bantu untuk layout website yang akan kita buat. Yuk lanjutin lagi buat garis bantunya icon smile Layout Website Dengan Photoshop

Sekarang kita membuat garis bantu untuk footer, tadi di awal kita membuat tinggi dari layout website kita adalah 600 pixel, dan sekarang kita akan membuat garis bantu untuk bagian footer / bagian bawah website yaitu tingginya 80 pixel, jadi hitungan-hitungannya total tinggi website dikurangi footer (600 px – 80px) = 520px.

Klik View -> New Guide, pada Oreientation pilih Horizontal, pada Position ketikkan 520px, kemudian klik OK.

Untuk membuat kolom  sidebar / kolom samping dari website, View -> New Guide, pada Oreientation pilih Vertical, pada Position ketikkan 680px, kemudian klik OK.

Terakhir kita akan membuat garis bantu untuk konten, View -> New Guide, pada Oreientation pilih Vertical, pada Position ketikkan 660px, kemudian klik OK.

Selesai sudah kita membuat garis bantu / guide line untuk layout website kita, jika anda melakukannya dengan benar maka akan tampak seperti gambar di bawah, setelah di berikan backgound.

guide line 1 Layout Website Dengan Photoshop

Lho.. punya anda belum berisi background? yups, karena di awal kita tadi membuat Background Contens‘nya transparant. Saya anggap anda sudah bisa mengisi warna background pada layar kerja di photoshop. Dan untuk lebih jelasnya bagian-bagian dari layout kita, coba anda perhatikan gambar di bawah.

guide line 2 Layout Website Dengan Photoshop

ket: lebar header sama dengan lebar navigasi / menu

Kalau kita perhatikan, konten dan sidebar tidak memiliki tinggi, itu karena nantinya tinggi dari konten dan sidebar akan menyesuaikan dari isinya.

Setelah kita menentukan tata letak / layout website kita, sekarang saatnya untuk membuat design wesbite‘nya. Silahkan ikuti tutorialnya di “Design Website Dengan Photoshop“

Posted on 1 Maret 2013, in CSS, Materi SMK, PHP, Web Desain. Bookmark the permalink. Tinggalkan komentar.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: