Membuat header dengan Photoshop
A. Langkah-langkah membuat header dengan Photoshop.
Sebelum proses pembuatan, sebaiknya back-up dulu template atau file header Anda. Tentukan ukuran header yang sesuai dengan template blog dalam pixel. Apabila pada header tersebut memakai border, maka sebaiknya ukuran header yang akan dibuat harus dikurangi ketebalan border yang digunakan.
Cara ke-1 : Membuat header sendiri
- Buka program photoshop dan buat canvas baru dengan ukuran sesuai dengan ukuran header template misalnya (width 950px, height 200px, resolusi 300px/in).
- Buatlah gambar, text, dan warna sesuai selera Anda. Di sini Anda bebas berkreasi (langkah detailnya Insya Allah akan saya publish pada postingan lain)
- Simpan file header tersebut. Pada menu File pilih Save for Web (Alt+Shift+Ctrl+S). Tentukan format file gambar yang paling tepat (JPG, GIF, PNG, WBMP) dan atur nilai quality-nya agar ukuran file gambar tidak terlalu besar tetapi kualitasnya masih bagus dan enak dipandang.
Cara ke-2 : Membuat header dari file gambar lain.
- Buka file gambar yang akan dijadikan header dengan Photoshop. Anda bisa menggunakan sumber foto gratis untuk keperluan ini.
- Crop bagian gambar yang akan dijadikan header sesuai ukuran yang akan dibuat misalnya (width 950px, height 200px, resolusi 300px/in).
- Agar kualitas gambar bagus, sebaiknya ukuran gambar yang akan di-crop lebih besar dari ukuran header yang akan dibuat.
- Simpan bagian gambar yang sudah di-crop dan siap dijadikan header blog. Caranya sama dengan point ke-3 pada Cara ke-1 : Membuat header sendiri di atas.
Cara ke-1 : Upload header langsung
- Login ke blogger.com atau blogspot.com dengan username dan password Anda.
- Pada Dashboard, click Layout kemudain click Edit pada bagian widget header (jika tidak ada, coba cara ke-2). Pada Window Configure Header, click Browse dan pilih file header tadi.
- Click Save kemudian lihat hasilnya pada blog Anda.
(Untuk keperluan ini, file header harus diupload terlebih dahulu)
- Upload file header yang sudah dibuat tadi dengan beberapa cara di antaranya :
- Opsi-1 : Upload langsung pada kotak posting. Atur ukuran gambar sebesar mungkin Large atau X-Large (kecuali header yang dibuat kecil), kemudian copy URL file tersebut pada bagian HTML. Setelah di-paste, ganti width dan height pada kode HTML dengan ukuran header aslinya (950px X 200px).
- Opsi-2 : Upload file header pada situs yang melayani keperluan tersebut misalnya Photobucket.com, Imageshack.com dan sebagianya, kemudian copy-paste URL file header tersebut untuk disisipkan pada CSS atau HTML.
- Opsi-3 : Upload file header pada Picasa Web Album. caranya, buka Picasa Web Album, click Upload, Select Album, Browse, kemudin Start Upload. Setelah berhasil, click kanan pada gambar tersebut kemudian pilih "Copy Image Location" atau "Copy Image Address" (tergantung browser yang digunakan). Paste URL tersebut pada HTML atau CSS seperti pada langkah berikutnya.
- Sisipkan URL file header pada HTML atau CSS pada bagian header misalnya :
- Contoh URL file header pada Blogspot yang disisipkan pada HTML :
(nilai width dan height harus sama dengan ukuran header sebelumnya yaitu 950px X 200px). Bisa juga tanpa "a href" - Contoh URL file header pada Blogspot yang disisipkan pada CSS :
- Apabila file header diupload pada Photobucket, Imageshack, Picasa, atau situs sejenis lain, maka Anda hanya perlu menggati URL file header di atas dengan URL baru yang disediakan situs tersebut.
- Contoh URL file header pada Picasa Web Album yang disisipkan pada CSS :
- Penggunaan CSS dan HTML setiap template berbeda namun pada umumnya hampir saya.
- Contoh URL file header pada Blogspot yang disisipkan pada HTML :
Perhatian :
Apabila file header diupload pada postingan langsung, kemunginan ukuran gambar tidak akan sesuai dengan Aslinya (kecuali gambar header kecil), oleh karena itu gunakan opsi Large atau X-large. Setelah URL file header tersebut dicopy, width dan height harus diganti dengan ukuran sebenarnya (seperti sebelum diupload).----------------------------
Selamat mencoba dan semoga bermanfaat.
7 comments:
Sudah lama saya tidak otak-atik photoshop, mandek krn g' sukses buat header dl.
Dulu sy praktekin tutorial dari ilmu photoshop dot com, mudah tapi ya mslhnya sy krg ngerti save filenya dlm format apa agar sesuai dgn header template.
InsyaAllah sy akn coba lagi. postingan berikutnya saya tunggu.
Klu blh nitip pertanyaan baru? apa code PHP bisa diterapkan pada template blogger? Klu bisa bgm carax?
Syukron, jazaakumullahu khrn.
Tutorial Photoshop lagi, Mas Yuda. Saya perlu belajar banyak dengan Mas Yuda kalau sudah urusan yang begini.
Wah, saya nyoba login ke feedjit pakai account Twitter terus berkunjung kesini. Kok, avatar saya di Twitter bisa muncul di jejak Feedjit blog Mas Yuda. He2
@Amatullah: Saya bukan ahli PHP tetapi setahu saya Blogspot hanya support HTML dan Java Script, pernah saya mencoba menyisipkan code PHP sederhana tetapi malah hilang dan tidak dieksekusi. Tetapi kalau Ukhti lebih dulu tahu trik ini tolong kasih tahu saya. Terima kasih.
Joko: Saya juga baru tahu bahwa Feedjit bisa pakai account Twitter. Setelah saya coba memang Avatar saya juga muncul di jejak Feedjit Diptara.
mantap sob tut-nya..
mudah dimengerti ;)
kalo buat file kecil dgn gambar yg bagus gimana ya?
Pak Yuda mantap tutorialnya, karena saya sedang mencari cara ganti header dengan photoshop.
btw ada nggak yang free download photoshop installer ? mohon kasih tau ya?
@Excellentera Shop: Kebetulan saya pakai Photoshop punya kantor tempat saya kerja jadi gak usah beli. Mengenai Photoshop gratis itu tidak ada tetapi banyak yang mengakalinya dengan software bajakan dengan cara crack nomor seri dsb, bisa dicari di Search Engine.
Yang penting buat belajar, kalau sudah mampu baru beli yang original :D
Thanks.
Poskan Komentar
Mohon maaf jika saya terlambat atau tidak dapat me-reply komentar Anda. Terima kasih.