Membuat Banner Blog
Postingan ini atas permintaan Teuku Zulfikar Amin yang ingin membuat banner blognya. Karena saya tahu sedikit tentang pembuatan banner blog ini maka saya coba membantu semampu yang saya bisa. Mudah-mudahan bermanfaat untuk para blogger newbie yang ingin membuat banner blog.
Jika kita perhatikan hasil jadi desain banner saya yang sederhana meski kecil tapi cukup bisa menarik perhatian (benarkah?) ^_^ mungkin karena tulisan pada banner kecil tersebut berkedip-kedip. Susah membuatnya? Tidak juga, malahan mudah kok! Syaratnya Anda bisa mengoperasikan dasar-dasar penggunaan Adobe PhotoShop CS2 dan Image Ready. Silahkan ikuti tutorialnya di bawah ini.
Ukuran banner pada tutorial ini disesuaikan dengan postingan saya terdahulu tentang Penyeragaman ukuran Banner Blogger. Jika Anda ingin banner yang lebih besar silahkan saja setelah Anda mempelajari tutorial ini.
Oke, kita langsung saja,
Bagian Pertama (Membuat Bingkai dan Teks):
- Buka Adobe Photoshop CS2
- Buka file baru dengan mengklik menu File>New. Pada kotak dialog New
a. Name: Beri nama file dengan nama Anda.
b. Width: 81 pixels
c. Height: 16 pixels
d. Resolution: 72 pixels/inch
e. Color mode: RGB 8 bit
f. Background Content: Transparent.(*)
g. Color Profile: Working RGB: sRGB IEC61966-2.1
h. Pixel Aspect Ratio: Square
i. Klik OK
- Perbesar ukuran window kanvas dengan menarik ujung bagian bawah.
- Perbesar kanvas dalam dengan menggunakan Zoom Tool (Z) (+).
- Buatlah background untuk banner Anda dengan menggunakan Rectangle Tool (U). Sesuaikan dengan ukuran kanvas. Jika sudah ubahlah menjadi Shape dengan mengklik menu Layer >Raterized >Shape.Buatlah bidang seleksi berbentuk Marquee (kotak) dengan menggunakan Rectangular Marquee Tool (M) di atas background lalu klik menu Edit >Clear, sehingga background Anda berbentuk list kotak (bingkai) seperti pada banner saya (contoh).
- Buatlah teks nama Blog Anda (contoh, Hakimtea) di tengah-tengah bingkai menggunakan Horizontal Type Tool (T). Sesuaikan ukuran teks dengan bingkai menggunakan Move Tool.
- Tambahkan efek Bavel and Embos dengan mengklik menu Layer >LayerStyle >Bevel and Embos (tambahkankan pengaturan lain jika Anda mau seperti drop shadow, inner shadow, outer glow, dll) klik OK jika sudah.
- Save dahulu pekerjaan Anda bagian pertama ini.
Bagian Kedua (Membuat Animasi Teks Banner “berkedip-kedip”)
- Masih di Adobe Photoshop CS2 dengan banner Anda yang sudah setengah jadi pada bagian pertama di atas.
- Berpindahlah sekarang ke dalam menu editing Adobe ImageReady CS2 dengan mengklik menu File >Edit in ImageReady (Ctrl+Shift+M). Tunggu sebentar, maka lembar kerja Adobe ImageReady CS2 akan terbuka.
- Perhatikan, untuk membuat animasi “teks berkedip” Windows Animasi harus tersedia, jika belum ada, Anda bisa memunculkannya dengan mengklik menu Window>Animation.
- Untuk membuat animasi, pertama-tama kita akan bekerja dengan menu Layers. Klik ikon mata pada layer teks nama Anda. Sehingga ikon mata tidak terlihat dan otomatis teks nama Anda pun tidak terlihat. Sedangkan untuk bingkai biarkan saja terlihat.
- Pindahlah ke jendela Animation, lalu klik ikon Duplicate Current Frame. Anda sekarang mempunyai dua frame di jendela animation. Klik ikon mata pada layer teks nama Anda sehingga terlihat. Hasilnya frame pertama teks nama Anda tidak terlihat sedangkan pada frame yang kedua teks nama Anda terlihat.
- Sekarang aturlah waktu “teks berkedip” pada jendela Animation. Klik pada Selects Frame Delay Time di bawah frame pertama dan kedua di jendela animation. Contoh: Beri waktu 0.5 pada kedua frame.
- Untuk mencoba animasi teks Anda klik Plays/Stops Animation masih di jendela animation.
- Kalau waktu berkedipnya sudah terasa cukup (tidak terlalu cepat juga tidak terlalu lambat)
- Langkah berikutnya, simpan pekerjaan Anda dengan mengklik menu File >Save Optimized (Ctrl+Alt+S). Pada Save as Type Anda pilih extensi Image Only (*.gif) klik Save.
Bagian Ketiga (Ubah File GIF Anda Dalam Bentuk URL):
- Untuk mengubah file gif dalam bentuk URL, Anda memerlukan web yang menyediakan layanan tersebut. Dan ternyata banyak sekali web yang menyediakan layanan secara gratisan, free atau orang malay biang ‘percuma’ ^_^ diantaranya Photobucket, servimg, dan layanan gratis lainnya. Atau jika Anda sudah memiliki account gmail Anda bisa mengaktifkan googlepages dan mengupload file photo disana, atau bisa juga dengan menggunakan layanan Picasa dengan menggunakan account gmail juga.
- Namun untuk mempermudah saya anjurkan untuk menggunakan layanan dari servimg karena Anda cukup mendaftar dengan account email yang manapun dan tanpa adanya email aktivasi. Cukup mendaftar, login dan Anda bisa langsung mengupload photo.
Bagian Keempat (Memasang Banner Di Blog Sendiri dan Menyediakan Tag HTML untuk Tukar Link)
- Diantara keempat bagian ini, rasanya bagian terakhir yang paling menarik dan mendebarkan ^_^. Khususnya untuk saya. (karena salah sedikit saja memberikan tag HTML bisa hancur semuanya)
- Ok, setelah mempunyai URL banner, Anda memerlukan Tag HTML agar bisa disimpan pada elemen html yang ditempatkan di sidebar blog sekaligus untuk memudahkan bertukar link. Dan saat seseorang mengklik banner Anda di blog lain (yang telah bertukar link) langsung di arahkan menuju blog Anda, seperti halnya di bawah,
Tukeran Link Yuk…!
Silahkan copy kode di atas…!
Saya akan segera link balik…!
Tag HTMLnya sebagai berikut,
<center>
<a href="URL-BLOG-ANDA"><img border="0" alt="NAMA-ANDA.BLOGSPOT.COM" src="URL-GAMBAR-ANDA"/></a><br/>
<textarea rows="3" cols="15" name="code"><a href="URL-BLOG-ANDA"> <img border="0" alt="NAMA-ANDA.BLOGSPOT.COM" src="URL-GAMBAR-ANDA"/> </a>
</textarea><br/>
Tukeran Link Yuk...! <br/>Silahkan copy kode di atas...!<br/>Saya akan segera link balik...!
</center>
Anda tinggal mengganti:
- URL-BLOG-ANDA: (contoh, URL blog saya yang “dulu” http://hakimtea.blogspot.com)*
- NAMA-ANDA.BLOGSPOT.COM: (contoh nama blog saya, Hakimtea.Blogspot.Com)*
- URL-GAMBAR-ANDA: (contoh URL gambar saya, http://i27.servimg.com/u/f27/11/83/04/92/banner10.gif)*
* NOTE: perhatikan pergantiannya 2 kali; satu agar tampil langsung sebagai banner Anda dan yang satu lagi tampil di teks area untuk memudahkan blogger lain mengcopy-paste kode HTML banner Anda.
Sebagai contoh saya masukan URL Blog, Nama blog, dan URL gambar “saya” ke dalam tag HTML di atas, maka kodenya jadi seperti di bawah ini,
<center>
<a href="http://hakimtea.blogspot.com"><img border="0" alt="hakimtea.blogspotcom" src="http://i27.servimg.com/u/f27/11/83/04/92/banner10.gif"/></a><br/>
<textarea rows="3" cols="15" name="code"><a href="http://hakimtea.blogspot.com"> <img border="0" alt="hakimtea.com" src="http://i27.servimg.com/u/f27/11/83/04/92/banner10.gif"/> </a>
</textarea><br/>
Tukeran Link Yuk...! <br/>Silahkan copy kode di atas...!<br/>Saya akan segera link balik...!
</center>
Perhatikan penyimpanan URL BLOG ANDA, NAMA BLOG ANDA dan URL GAMBAR ANDA… silahkan dicoba! Saya rasa cukup mudah dan tidak akan ada masalah! Seandainya ada, tinggalkan komentar di bawah 
______________
(*) Transparent: Agar banner Anda bisa menyesuaikan diri (warna) di blog mana saja dia berada.
Edit: 21 Maret 2008 by hakimtea atas usulan dari W15n’U (sorry ma pren baru sempet, kemaren tuh abiz sunat lupa)
Popularity: 17% [?]
Themocracy
TERIMA KASIH ATAS ILMUNYA
makasih ilmunya …. saya akan coba…..
makasih !!
ngebantu bgt.
it work’s .. mksh ya pak
Salam Kenal Kang…
link anda sudah saya pasang di blog saya….
http://bradda-daus.blogspot.com/2010/04/tuker-link-yuuu.html/
salam kenal sebelumnya..
thank bnget nich ats tutorialx….mdh2an bermanfaat.
kunjungan blik yoo..
thanks mas… ^^ infonya sangat berguna untuk newbie spt saya…
http://shreddysteff.blogspot.com/
salam kenal \o/
nice info mas..kbtulan lagi cari info ttg banner…
thanks tutuornya..
Salam kenal mas…saya sangat tertarik dengan tampilan tutorial punya anda….saya sudah pasang link anda di blog saya….
linknya sudah aku pasang gan, pasang balik linkq juga yaaa…….
thankz………..
thanks atas infonya,,,, saya dah pake dan mengiku titutorial ini…. pak hakimtea josss pokoknyah…….
thx ea,sangat membantu…….
Hai!!!
Pertamax gan!!!
Keren buanget nih blog!!!! (Terkagum2)
Bos tukeran link yuk’z!!!
gw udah pasang link anda di blog q!!!
thx!!!
endigolabs.blogspot.com, full free stuff of Full Version Software, jgn lupa mampir!!! hihihi
akhirnya ketemu juga, thx artikel yang lengkap dan bagus
salam kenal. thanks atas info and triknya, sangat bermanfaat buat yang baru belajar.
terima kasih.. artikelnya bermanfaat sekali. saya yang gaptek saja bisa melakukannya. hehe
terima kasih… semoga ilmunya berkah.
^_^
susah buanget…..!!!!!!! ya……….!!!!!!!!!
salam kenal sob. sangat bermanfaat artikelnya.
aku coba nanti pak untuk website saya
slm kenal gan yuk tukar link haaha
terima kasih, salam kenal link sdh saya psng..
Wah makasih bgt infonya…bermanfaat sekali,,,,akan ane coba gan
nanti saya coba mas,,,makasih infonya
udah aq coba boss. terima kasih atas informasinya
ma kasih.. buat tutorialnya..
saya udah paste kodenya di blog saya..
mohon di link balik.. hehe..
say coba untuk buat dulu ya sob…mudah-mudahan berhasil
salam
terima kasih atas tutorialnya…
ulasan yang sangat menarik, yox rame2 bikin banner
udah muter-muter cari cara buat link exchange tapi berhasilnya dari sini. Makasih mas..
makasih bro…
sangat membantu untuk blog saya….
saya pemula dalam masalah blogging, saya mau bertanya mas, bagaimana kita tahu blog mana yang telah memasang banner dari blog saya misalnya… ???
banner sdh terpasang…bannerku ada di http://slimberfamily.blogspot.com/^_^
salam kenal kang ane pendatang baru ni
kang ane dah coba simpen poto di picasa tp saat disave di blog
og gambarnya ga muncul ya kang???
trimz infonya
Salama kenal mas….pembahasan yang sangat menarik…
sukses bang….
mudah-mudah blog anda rame di kunjungi orang
tukeran link yuk gan.. .
ane masukkin banner anda ke banner berjlan ane trus sbliklnya gan . ..
langsung ke TKP gan
wuih mantap mas admin tutornya, langsung menuju ke TKP coba bikin banner di blog…matur tengkyu mas admin
Salam Blogger…Linknya sdh sy pasang sobat…Tq….
Tq sobat……salam
udah ane pajang benner ente gan
di tunggu konfirmasini nya
mas kalo lewat photobucket gimana cara dapatin linknya mas???
aq bingung banget nihhhh aq otak2 gak bisa2, tolongin donk mas plizzzzzz
ok.
gue udah pasang linknya gan, mohon tuker balik
Thank’s ilmunya, lam kenal gan….
thanx ya. ilmu nya bermanfaat….. ^^
gan mampir* dnk di http://www.fakultas-hukum.co.cc join + like ea tq.
linknya sudah aku pasang gan, pasang balik linkq juga yaaa…
salam knal ..mantabbb pisan
thank’s gan dah bagi-bagi ilmunya.. semoga makin JAYA!
mantap bro artikelnya, semoga ini menjadi pacuan buat saya untuk tetap eksis di dunia bloging
sukses buat anda
Free Download Software Hack Full for Free, Hack Gmail, Hack Yahoo, Hack Facebook. And More Trick n Tutorial Hacking