Membuat Header WordPress Menggunakan Photoshop

Assalamu ‘alaikum War. Wab..

Hai sob..

Mungkin yang baru pemula membuat website menggunakan wordpress kadang merasa kesulitan, gimana sih membuat header menggunakan Photoshop. Nah pada tutorial kali ini saya mencoba membahas cara membuat header menggunakan Photoshop seperti yang telah saya praktekan sendiri ..

Disini saya menganggap bahwa anda telah dapat menggunakan Photoshop walaupun hanya mengugatik atik gambar. Ok sob, kita langsung aja pada langkah2nya…

Pertama-tama Anda membuka dulu program Photoshop kemudian pilih File dan klik New. Setelah itu anda harus menentukan ukuran Width dan Heightnya sesuai ukuran header pada Web anda terus jangan lupa yach memakai Pixel dan pada bagian color mode gunakan RGB Color selanjutnya pada Background Contents anda harus pilih Transparent dan terakhir klik Save. Nah jika sudah maka akan tampil layer yang siap untuk membuat header, dan disini terserah anda membuat gambar atau menulis kata-kata sesuai dengan keinginan anda untuk dipasang pada header web anda.

Nah, jika sudah selesai membuat headernya kemudian simpan, pilih file dan save. Berikan nama pada file tersebut dan kemudian menggunakan format PNG selanjutnya klik save, maka akan muncul gambar atau keterangan PNG Option, nah pada bagian Interlacenya pilih Interlaced dan klik Ok.

Nah, sekarang header untuk web anda telah jadi dan siap untuk di publikasikan..

Gampang kaannn..!!!! hehehehee.. ^_^

Bagi yang menggunakan web pada localhost atau offline, anda harus mengcopy filenya kemudian paste pada images wordpress anda yang terletak pada themes pilihan pada tampilan web anda. Jika sudah, masuk dulu pada Dashboard anda pilih Aparence kemudian Editor, carilah kata seperti contoh dibawah ini :

/* =HEADER
————————————————————– */
#header {
height: 130px;
padding:20px 0;
background: url(images/topheader2.gif) center top no-repeat;
}

Nah ganti kata yang bertuliskan warna merah sesuai dengan nama file header yang anda buat tadi di photoshop, jika sudah anda pilih Update File paling bawah. Nah silahkan preview website anda maka tampilan headernya berubah sesuai dengan header buatan anda sendiri.

Nah, sedangkan bagi yang menggunakan web online silahkan anda menggunakan FileZilla Client untuk mengeksport file headernya. Caranya yaitu, buka dulu program FileZilla Client kemudian isi nama host/mesin, nama pengguna/username, sandi/password kemudian klik Koneksi. Lihat contoh tampilan FileZilla Client dibawah ini :

Selanjutnya pada bagian sebelah kanan bawah yaitu Nama Berkas ada folder public_html silahkan klik 2 kali dan terus pilih wp-content lalu themes dan pilih file themes yang anda gunakan sebagai tampilan website anda kemudian pilih images. Nah jika sudah sekarang anda pindah pada kolom sebelah kiri, pada kolom Situs Local silahkan anda pilih nama folder tempat anda menyimpan file header yang anda buat di photoshop, kalau sudah silahkan menuju Nama Berkas pilih nama filenya kemudian klik kanan dan pili upload, silahkan tunggu beberapa detik. Jika berkas antrian sudah kosong dan keterangan uploadnya berhasil, Jika sudah masuk dulu pada Dashboard anda pilih Aparence kemudian Editor, carilah kata seperti contoh dibawah ini :

/* =HEADER
-------------------------------------------------------------- */
#header {
height: 130px;
padding:20px 0;
background: url(images/topheader2.gif) center top no-repeat;

}

Nah ganti kata yang bertuliskan warna merah sesuai dengan nama file header yang anda buat tadi di photoshop, jika sudah anda pilih Update File paling bawah. Nah silahkan preview website anda maka tampilan headernya berubah sesuai dengan header buatan anda sendiri.

Yach, mungkin agak rumit sedikit... tapi kalo memang belajar gak ada yang gak bisa, hehehee..

 Sekian tutorialnya,semoga dapat bermanfaat.

Wassalam.