Layout Website Dengan Photoshop
Di artikel sebelumnya saya telah menjelaskan Cara 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.
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.
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.
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.
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.
Setelah kita menentukan tata letak / layout website kita, sekarang saatnya untuk membuat design wesbite‘nya. Silahkan ikuti tutorialnya di “Design Website Dengan Photoshop“
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.
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.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.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
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.
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.
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“
Comments
Post a Comment