Membuat Banner Blog

02.14.2008 by Hakimtea

Postingan ini atas permintaan Zulfikar 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.net" 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: 14% [?]

Category Tips, Tutorial

Recent Comment

Lutfi: Subhannallah̷...

Tika citra pradista: ...

Lirik Lagu Terbaru: Klo aku sih lebih...

Fir'aun NgebLog: Mauuuuuuuuuuuuu&#...

ev dekorasyonu: Salam kenal, saya...

ev dekorasyonu: sandra dewi kamu...

ev dekorasyonu: Bagi saya sih blog...

Mutfak modelleri: Bagi saya sih blog...

mutfak dolabı: caranya verifikasi...

ev dekorasyonu: Mas Aji dan Sphinx:...

madong says:

February 15, 2008 at 12:59 am

Wow,… bener bener lengkap oey!!

hakimtea says:

February 15, 2008 at 1:29 am

Sharing pengalaman saja mas Madong

aguSHery says:

February 15, 2008 at 4:24 am

nice info…

Santi says:

February 15, 2008 at 10:02 pm

nahh iniii iniiiiiiii iniiiiiiiii yg saya cari dari kemaren

Medhy Aginta says:

February 16, 2008 at 10:19 am

pengen belajar Photoshop, belum kesampean.

yhadee says:

February 16, 2008 at 11:49 am

tau tntang joomla ggak kang? sya lgi pngen blajar nih!..

February 16, 2008 at 11:58 am

Kalo masalah joomla tanya dong ahlinya ^_^ tapi bukan saya, heuheu. Tuh yang atasnya kang yhadee ^_^ yupz! mas Medhy

February 17, 2008 at 8:16 pm

*ngintilin mas yhadee*

ikuuuuttt! mau blajar joomla juga!

Novee says:

February 20, 2008 at 5:33 am

seep… seep… tengkyu lah…
lumayan neh, buat bikin banner sendiri kalo blog kedua udah jadi ntar…
sepertinya gampang… mmm… tp ga tau deh, secara katrok ginih apa iya bisa ya…
*menangis di pojokan…*

February 23, 2008 at 8:57 am

gampanglah… dan ga usah nangis dipojokan gituh vee… ^_^

Reorid lyrics says:

February 25, 2008 at 9:00 pm

keren!!!

yudhienairwaves says:

March 8, 2008 at 2:57 am

bagus banget infonya ..gitu toh but banner..thanx assahatea

Hakimtea says:

March 8, 2008 at 7:03 am

Sama2 mas yudhie, jangan lupa berbagi kalo udha dipraktekkan… *blogging & berbagi*

Gradient says:

March 12, 2008 at 10:27 am

aku newbie mas, mau tanya blh kan ? maksud dari link balik ato backlink itu apa ya ? bisa tolong dijelasin ? thanks…

Sudi mampir mas…http://gradient-newgenesis.blogspot.com

March 12, 2008 at 12:06 pm

Makasih kang Gradient sudah berkunjung Sama ko saya juga nubi, masih terus belajar. Sederhananya link balik atau backlink adalah tautan antara website dgn website, blog dgn blog, ataupun di acak, sama saja.

Misalkan kang Gradient menulis sebuah artikel kemudian didalamnya ada salah satu link yg menuju ke saya (misalkan) nah itu menunjukkan saya mendapat backlink dari kang Gradient atau sebaliknya. Semakin banyak orang lain memasang link kpd situs kita itu mengindikasikan bahwa situs atau blog kita cukup populer/bermanfaat. Dan bisa meningkatkan traffic serta pagerank (nilai) di mata SEO (search Engine). Untuk lebih jelasnya kang Gradient bisa membaca di wiki pedia disini.

Jawaban ini sebagai contoh juga saya telah memberikan backlink ke wikipedia.

Demikian mungkin yg saya pahami. Jika yg lain mau menambahkan, silahkan

Firex Santos says:

March 25, 2008 at 2:42 am

mas…..

bagaimana cara menampilkan label blog kita di blog….. minta tolong dong mas… baru belajar nih.. ehm… makasih sebelumnyah…

March 25, 2008 at 2:54 am

Caranya cukup mudah bang Santos, tinggal masuk di elemen halaman dan add a page element terus cari Label dan atur saja sesuai yang disediakan. Moga berhasil.

adi says:

April 2, 2008 at 3:41 am

disini link ‘penyeragaman ukuran banner’

| update sukses… udah cape eungy.. tapi teuteup semangat… nyari lagi di… heuheu, thanks ma pren

willy says:

May 27, 2008 at 9:57 am

tukeran link yuk

Ruly says:

August 10, 2008 at 7:54 pm

Kereeeenn..
Tapi itu kode banner kan bisa langsung link ke website yang ditulis. Gimana kalo buat banner tanpa ada link.. Gimana caranya? Gimana kodenya?
Tx b4 ^_^