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

1. Buka program photoshop dan buat canvas baru dengan ukuran sesuai dengan ukuran header template misalnya (width 950px, height 200px, resolusi 300px/in).
2. Buatlah gambar, text, dan warna sesuai selera Anda. Di sini Anda bebas berkreasi (langkah detailnya Insya Allah akan saya publish pada postingan lain)
   
   
3. 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.

1. Buka file gambar yang akan dijadikan header dengan Photoshop. Anda bisa menggunakan sumber foto gratis untuk keperluan ini.
2. Crop bagian gambar yang akan dijadikan header sesuai ukuran yang akan dibuat misalnya (width 950px, height 200px, resolusi 300px/in).
   
   
3. Agar kualitas gambar bagus, sebaiknya ukuran gambar yang akan di-crop lebih besar dari ukuran header yang akan dibuat.
   
   
4. 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

1. Login ke blogger.com atau blogspot.com dengan username dan password Anda.
2. 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.
   
   
3. 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)

1. Upload file header yang sudah dibuat tadi dengan beberapa cara di antaranya :
   
   1. 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).
   2. 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.
   3. 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.
      
      
2. Sisipkan URL file header pada HTML atau CSS pada bagian header misalnya :
   
   1. Contoh URL file header pada Blogspot yang disisipkan pada HTML :
      <div id="header"><a href="http://DomainAnda.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35WmyZuqH6t-cfpk9xU98ku1FYZ0Qhmt6sowlPkh0w7-I2EzwgQihfh2XIgdEa6H5XU8D1zwKQy4dTyn7Mfjb57tiyIxmzv0O-xKoA0P8F6R5YGSb1cbI7FnXCEIrHiGdaUh-mugGjDY/s400/header.jpg" width="950" height="200"/></a></div>
      (nilai width dan height harus sama dengan ukuran header sebelumnya yaitu 950px X 200px). Bisa juga tanpa "a href"
   2. Contoh URL file header pada Blogspot yang disisipkan pada CSS :
      #header h1 a{color:#000; text-decoration:none; display:block; text-indent:-9999px; outline:none; width:950px; height:200px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35WmyZuqH6t-cfpk9xU98ku1FYZ0Qhmt6sowlPkh0w7-I2EzwgQihfh2XIgdEa6H5XU8D1zwKQy4dTyn7Mfjb57tiyIxmzv0O-xKoA0P8F6R5YGSb1cbI7FnXCEIrHiGdaUh-mugGjDY/s400/header.jpg) no-repeat 0 0}
   3. 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.
   4. Contoh URL file header pada Picasa Web Album yang disisipkan pada CSS :#header h1 a{color:#000; text-decoration:none; display:block; text-indent:-9999px; outline:none; width:950px; height:200px; background:url(httphttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-NQXnCtRWmHu8H0YW16LjFe6UNr4Ll4rEafKZO9v5H1LatkIafy5_p0A7-6VcnBizIlFF-4mY2QRQe3IfTol2-SaW4XCxKeTfzjuYAmm1RKHM1SeBPI6NgDs3W1Lc79E5KZlM0tsbQgo/s640/header.jpg) no-repeat 0 0}
   5. Penggunaan CSS dan HTML setiap template berbeda namun pada umumnya hampir saya.

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.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: