Cara membuat layout desain halaman atas(header)



Sebelum memulai pembuatan layout untuk halaman atas website terlebih dahulu silahkan anda grup layer yang telah anda kerjakan sebelumnya kedalam grup navigation ,pembuatan grup untuk masing-masing bagian layout desain akan memudahkan anda dalam mengatur dan mengorganisasikan semua layer,text dan shape dipanel layer.

Dibagian panel layer klik icon create a new group kemudian klik kanan folder grup menjadi grup navigation.

Pindahkan semua layer ,shape dan text yang telah anda buat dibagian navigasi dengan cara klik layer yang mau dipindahkan dibagian layer panel lalu geser ke folder grup navigation ,dengan demikian jumlah layer yang ditampilkan bisa anda minimalis dengan menutup grup bagian layout desain yang sudah selesai.

Sekarang anda sudah siap untuk melakukan layout desain pada bagian halaman atas website.Halaman atas website akan diisi dengan penempatan logo website  disebelah kiri dan form pencarian disebelah kanan.Untuk logo website saya menggunakan font berjenis forte kemudian dengan type tool saya mengetik kata ''Make Website'' didalam batas ruler dilengkapi dengan hiasan icon diatasnya silahkan berkreasi membuat logo anda sendiri.

Untuk menu pencarian buat shape berbentuk persegi dengan sudut lengkung ,klik agak lama di rectangle tool sampai muncul opsi rectangle yang diinginkan ,pilih rounded rectangle tool untuk membuat persegi dengan sudut lengkung.

Ubah opsi radius sudut lengkung ke 35 pixel lalu bentuk shape dibagian header didalam batas layer ruler sebelah kanan dengan ukuran lebar 280 pixel dan tinggi 34 pixel.

Pada panel layer ganti nama shape tersebut menjadi search input kemudian tambahkan icon pencarian disebelah kiri ,ubah opsi pada blending option search input menjadi seperti pada gambar berikut:

Setelah itu centang kotak inner shadow dan stroke ,isi opacity 20% ,isi angle 90 ,pada distance isi 2 pixel ,choker 0%,size 5 pixel .

Pada kotak centang tool Stroke untuk size isikan 1 pixel,untuk position ''outside''Blend Mode Normal saja dan opacity 100% dan Untuk color atau warna isikan FFFFFF(warna putih).

Dengan penambahan effect diatas anda akan mendapatkan tampilan input pencarian seperti berikut

Sampai dengan tahap ini anda sudah mendapatkan layaout desain website dengan tampilan input pencarian.

Buat grup baru untuk menyimpan layer ,shape dan text yang baru anda kerjakan dengan nama header ,kemudian pindahkan layer ,shape dan text yang anda buat kedalam folder grup header.