Membuat Layout Desain Awal dengan Photoshop
jalankan aplikasi photoshop Anda dan siapkan sebuah kanvas baru, caranya pilih file-new lalu gunakan setting berikut:
dan samakan settingan dengan gambar dibawah kemudian buat bidang berbentuk segi panjang vertikal seperti gambar dibawah ini:
click kanan pada shape 1 (bidang yang anda buat) di bagian panel layar
disebelah pojok kanan bawah kemudian pilih blending option --> click
gradien dan pilih gradiasi warna yang Anda sukai.... pastikan warna bawh
adalah warna dasar putih
hasil dari gradasi yang Anda buat akan menghasilkan gambar seperti berikut:
buatlah bidang panel untuk menu dengan rounded rectangle tool pada tool panel seperti
sebelumnya beri sentuhan warna yang berbeda dengan layer pertama tapi
tidak melenceng dari tema Anda, kemudian tempatkan pada sebelah kiri
atas sehingga Anda mendapatkan gambar seperti di bawah ini:
buatkan lagi sebuah bidang untuk daftar menu yang kali ini lebih kecil dari sebelumnya dengan rounded rectangle tool pada tool pane, tempatkan sejajar dengan bidang yang Anda buat sebelumnya putarkan sampai arah kemiringan 250 dengan move tool
isi text pada bidang untuk daftar menu dengan: Halaman Utama, Tentang
Saya, Gallery Foto dan Link. Kemudian pada sebelah kanan diberi logo
dan judul website yang sesuai dengan keinginan Anda. sampai tahap ini
kita sudah berhasil merancang layout websiteku dengan tampilan seperti berikut:
kemudian copy layer bidang dengan cara tekan ctrl+alt+shift dan geser ke bawah sebanyak 4 kali.
Beri sentuhan pada bidang yang telah Anda buat sehingga akan tampak seperti berikut:
ketik daftar menu gunakan Type Tool dengan lambang (T) pada tool panel
gunakan slice tool
kemudian slice layout website menjadi 6 bagian, yaitu: 4 slice untuk
daftar menu, 1 slice untuk logo, dan 1 lagi untuk content/ isi web
sekarang Anda tinggal menyimpan saja:
dan akan muncul wizard seperti berikut:
pilih opsi dibawah save, Anda bisa menentukan format gambar yang akan di save mulai dari gif, png, jpg.
apabila Anda sudah memilih sebelum disave beri nama file Anda dengan index, pilih opsi HTML and Images, simpan layout Anda pada satu folder yang Anda beri nama Websiteku
Sekian..........
Ini contohnya kalau sudah jadi gan!!!!!!
No comments:
Post a Comment