Tips Membuat Header Website atau Blog dengan Mudah

Bagi penyuka design web atau yang suka ngeblog mungkin tips ini bisa memberi sedikit manfaat. Kadang kita gak dapet ide untuk bikin Header untuk website atau blog kita..

Syaratnya :

• Kita musti tau ukuran Header template blog kita,  biasanya berkisar antara 720 – 760 px lebarnya.. untuk standar panjang nya 150 -200 px.
• Kita harus tahu file Nama file header template blog kita ( biasanya header.jpg) , kalo yang sering utak atik blog pasti tau.. yang gak tau, belajar ngeblog dulu ya .. hehehe..
• Kita juga musti tahu Text judulnya berada disisi mana, ini gunanya untuk menempatkan gambar supaya gak ketimpa sama Text.
• Tau juga Tema blog nya apa  ( misal : photography, computer, camera, celebrity, dll)
• Kita juga harus tahu warna dasar blog nya biar nanti pas diberi header tidak Saltum ( salah kostum )
• Itu aja kayaknya syarat yang penting.

Kalo udah tau lebar blog nya… bikin dokumen baru sesuai lebar nya ..

Tau tema website / blog, tujuannya untuk mencari gambar-gambar yang berkaitan dengan blog atau website nya.

saya biasa nyari gambar di Google Images ketikan keyword nya , misal photography > Enter .. deredettt.. banyak kan hasil search nya.. kita pilih beberapa gambar yang sesuai dengan selera kita.. misalkan saya udah pilih beberapa gambar yang berhubungan dengan photography.

Buka salah satu gambar untuk diedit sebelum dimasukan ke dokumen header,

Gunakan rectangle marquee tool untuk menyeleksi bagian sisi gambar, ini tujuannya untuk membuat batas putih di setiap sisi.

Klik Select > Inverse  sehingga yang terseleksi sekarang adalah selain seleksi sebelumnya. Delete deh..

Tekan CTRL+ D untuk menghilangkan seleksi..

Drag ( Klik + Tahan + tarik ) gambar camera tadi ke dalam dokumen header baru.

Puter (rotate), modifikasi ukuran gambar ( resize) secara manual, sehingga keliatan menarik. Misalkan Text  di template website / blog nya berada kiri, maka kita tempatin gambar nya di kanan.

Untuk pemberian efek, cukup dengan memberi bayangan alias pake DROP Shadow aja.

Klik 2x layer 1 atau klik kanan > blending Option,

Klik Ok.

Untuk mempermudah pemberian efek yang sama untuk gambar yang lainnya, Klik kanan layer 1 > copy layer style

Skarang ulangi langkah mengedit gambar, lalu drag ke dokumen header.

untuk pemberian efek, cukup klik kanan di gambar yang mau diberi efek > Paste layer style.

hasilnya nanti :

Untuk pemberian warna background supaya sesuai tema, tinggal klik Layer background, warnai dengan Paint Bucket tool atau gradient tool

Hasil akhir nya

Kalo mau ditambah tulisan, silahkan tambahin sendiri. hehehe.

Save sesuai nama file header di template nya, misal : header.jpg ,

Selesai… sekarang tinggal UPLOAD deh ke server website / blog nya.

Ini contoh website saya yang headernya pake photoshop : online-photography-school.blogspot.com

Selamat mencoba..

INGIN MEMPUBLIKASIKAN ULANG POSTINGAN INI DI WEB / BLOG ANDA? <h2>Tips Membuat Header Website atau Blog dengan Mudah</h2> <p>Bagi penyuka design web atau yang suka ngeblog mungkin tips ini bisa memberi sedikit manfaat. Kadang kita gak dapet ide untuk bikin Header untuk website atau blog kita..</p> <p>Syaratnya :</p> <ul> <li>Kita musti tau ukuran Header template blog kita,  biasanya berkisar antara 720 - 760 px lebarnya.. untuk standar panjang nya 150 -200 px.</li> <li>Kita harus tahu file Nama file header template blog kita ( biasanya header.jpg) , kalo yang sering utak atik blog pasti tau.. yang gak tau, belajar ngeblog dulu ya .. hehehe..</li> <li>Kita juga musti tahu Text judulnya berada disisi mana, ini gunanya untuk menempatkan gambar supaya gak ketimpa sama Text.</li> <li>Tau juga Tema blog nya apa  ( misal : photography, computer, camera, celebrity, dll)</li> <li>Kita juga harus tahu warna dasar blog nya biar nanti pas diberi header tidak Saltum ( salah kostum ) :)</li> <li>Itu aja kayaknya syarat yang penting.</li> </ul> <p>Kalo udah tau lebar blog nya… bikin dokumen baru sesuai lebar nya ..</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header1.jpg"><img class="alignnone size-full wp-image-1918" title="header1" src="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header1.jpg" alt="header1" width="365" height="288" /></a></p> <p>Tau tema website / blog, tujuannya untuk mencari gambar-gambar yang berkaitan dengan blog atau website nya.</p> <p>saya biasa nyari gambar di <a href="http://images.google.com/">Google Images</a> ketikan keyword nya , misal photography > Enter .. deredettt.. banyak kan hasil search nya.. kita pilih beberapa gambar yang sesuai dengan selera kita.. misalkan saya udah pilih beberapa gambar yang berhubungan dengan photography.</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header2.jpg"><img class="alignnone size-full wp-image-1919" title="header2" src="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header2.jpg" alt="header2" width="399" height="436" /></a></p> <p>Buka salah satu gambar untuk diedit sebelum dimasukan ke dokumen header,</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header3.jpg"><img class="alignnone size-full wp-image-1920" title="header3" src="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header3.jpg" alt="header3" width="368" height="413" /></a></p> <p>Gunakan rectangle marquee tool untuk menyeleksi bagian sisi gambar, ini tujuannya untuk membuat batas putih di setiap sisi.</p> <p>Klik Select > Inverse  sehingga yang terseleksi sekarang adalah selain seleksi sebelumnya. Delete deh..</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header4.jpg"><img class="alignnone size-full wp-image-1921" title="header4" src="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header4.jpg" alt="header4" width="351" height="365" /></a></p> <p>Tekan CTRL+ D untuk menghilangkan seleksi..</p> <p>Drag ( Klik + Tahan + tarik ) gambar camera tadi ke dalam dokumen header baru.</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header5.jpg"><img class="alignnone size-full wp-image-1922" title="header5" src="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header5.jpg" alt="header5" width="484" height="364" /><br /> </a></p> <p>Puter (rotate), modifikasi ukuran gambar ( resize) secara manual, sehingga keliatan menarik. Misalkan Text  di template website / blog nya berada kiri, maka kita tempatin gambar nya di kanan.</p> <p>Untuk pemberian efek, cukup dengan memberi bayangan alias pake DROP Shadow aja.</p> <p>Klik 2x layer 1 atau klik kanan > blending Option,</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header6.jpg"><img class="alignnone size-full wp-image-1923" title="header6" src="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header6.jpg" alt="header6" width="457" height="406" /></a></p> <p>Klik Ok.</p> <p>Untuk mempermudah pemberian efek yang sama untuk gambar yang lainnya, Klik kanan layer 1 > copy layer style</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header7.jpg"><img class="alignnone size-full wp-image-1924" title="header7" src="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header7.jpg" alt="header7" width="278" height="485" /></a></p> <p>Skarang ulangi langkah mengedit gambar, lalu drag ke dokumen header.</p> <p>untuk pemberian efek, cukup klik kanan di gambar yang mau diberi efek > Paste layer style.</p> <p>hasilnya nanti :</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header8.jpg"><img class="alignnone size-full wp-image-1925" title="header8" src="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header8.jpg" alt="header8" width="459" height="203" /></a></p> <p>Untuk pemberian warna background supaya sesuai tema, tinggal klik Layer background, warnai dengan Paint Bucket tool atau gradient tool</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header9.jpg"><img class="alignnone size-full wp-image-1926" title="header9" src="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header9.jpg" alt="header9" width="490" height="372" /></a></p> <p>Hasil akhir nya</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header10.jpg"><img class="alignnone size-full wp-image-1927" title="header10" src="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header10.jpg" alt="header10" width="486" height="131" /></a></p> <p>Kalo mau ditambah tulisan, silahkan tambahin sendiri. hehehe.</p> <p>Save sesuai nama file header di template nya, misal : header.jpg ,</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header11.jpg"><img class="alignnone size-full wp-image-1928" title="header11" src="http://ilmuphotoshop.com/wp-content/uploads/2009/10/header11.jpg" alt="header11" width="394" height="373" /></a></p> <p>Selesai… sekarang tinggal UPLOAD deh ke server website / blog nya.</p> <p>Ini contoh website saya yang headernya pake photoshop : <a href="http://online-photography-school.blogspot.com/">online-photography-school.blogspot.com</a></p> <p>Selamat mencoba..</p> <p> Artikel <a href="http://ilmuphotoshop.com/2009/10/19/tips-membuat-header-website-atau-blog-dengan-mudah/">Tips Membuat Header Website atau Blog dengan Mudah</a> ini dipersembahkan oleh <a href="http://ilmuphotoshop.com" title="Tutorial Photoshop Gratis">Tutorial Photoshop Gratis</a>. Kunjungi <a href="http://desktop.93vs.com" title="Wallpaper, Font, Desktop Theme Gratis"> Wallpaper, Font, Desktop Theme Gratis</a> Pokoknya Serba Gratis. Baca Juga <a href="http://photoshopedit.com" title="Adobe Photoshop Tutorial"> Adobe Photoshop Tutorials</a> </p>
*copy-paste kode di atas ke dalam form posting blog Anda