-
Membuat header dengan Photoshop
Salah satu hal yang tidak bisa dianggap remeh dan perlu perhatikan saat membuat header dengan Photoshop adalah ukuran file header, karena semakin besar akan semakin memberatkan loading blog. Aturlah format file dan kualitas gambar secara proporsional.
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.
B. Proses upload header pada blog yang menggunakan Blogspot
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.
Cara ke-2 : Header disisipkan pada kode CSS atau HTML.
(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).
----------------------------
Mengenai Slice (pemotongan gambar) dengan Photoshop yang bisa digunakan sebagai header, background sidebar, footer, menu, dan sebaginya, Insya Allah akan saya tulis pada postingan lain.
Selamat mencoba dan semoga bermanfaat.
Artikel yang perlu dikoreksi :
4 comments:
-
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
-
mantap sob tut-nya..
mudah dimengerti ;)
Siapapun boleh berkomentar termasuk kritik dan koreksi untuk perbaikan blog. Bagi yang awam, jangan malu untuk bertanya karena sayapun masih belajar. Tetapi saya mohon maaf karena tidak semua komentar dan email dapat saya reply.
Langgan:
Poskan Komentar (Atom)
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.