Perindah BLOG mu

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):

1. Buka Adobe Photoshop CS2
2. 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

1. Perbesar ukuran window kanvas dengan menarik ujung bagian bawah.
2. Perbesar kanvas dalam dengan menggunakan Zoom Tool (Z) (+).
3. 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).
4. Buatlah teks nama Blog Anda (contoh, Hakimtea) di tengah-tengah bingkai menggunakan Horizontal Type Tool (T). Sesuaikan ukuran teks dengan bingkai menggunakan Move Tool.
5. 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.
6. Save dahulu pekerjaan Anda bagian pertama ini.

Bagian Kedua (Membuat Animasi Teks Banner "berkedip-kedip")

1. Masih di Adobe Photoshop CS2 dengan banner Anda yang sudah setengah jadi pada bagian pertama di atas.
2. 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.
3. Perhatikan, untuk membuat animasi "teks berkedip" Windows Animasi harus tersedia, jika belum ada, Anda bisa memunculkannya dengan mengklik menu Window>Animation.
4. 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.
5. 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.
6. 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.
7. Untuk mencoba animasi teks Anda klik Plays/Stops Animation masih di jendela animation.
8. Kalau waktu berkedipnya sudah terasa cukup (tidak terlalu cepat juga tidak terlalu lambat)
9. 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):

1. 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.
2. 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)

1. 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)
2. 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,


zenzen-asgar.blogspot.com


Tukeran Link Yuk...!
Silahkan copy kode di atas...!
Saya akan segera link balik...!

Tag HTMLnya sebagai berikut,


<a href="/URL-BLOG-ANDA"> <img border="0" alt="ZENZEN-ASGAR.BLOGSPOT.COM" src="/URL-GAMBAR-ANDA"/> </a>
Tukeran Link Yuk...!
Silahkan copy kode di atas...!
Saya akan segera link balik...!



Anda tinggal mengganti:

* URL-BLOG-ANDA: (contoh, URL blog saya http://zenzen-asgar.blogspot.com)*
* ZENZEN.ASGAR.BLOGSPOT.COM: (contoh nama blog saya, zenzen-asgar.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,


<a href="http://zenzen-asgar.blogspot.com"> <img border="0" alt="zenzen-asgar.blogspot.com" src="http://i27.servimg.com/u/f27/11/83/04/92/banner10.gif"/> </a>
Tukeran Link Yuk...!
Silahkan copy kode di atas...!
Saya akan segera link balik...!


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 :)

Buat Banner Sendiri Yuk…

Yuhu… kali ini kita akan belajar bikin banner… biasanya kalo bikin banner saya paling sering pake Adobe ImageReady untuk hasil berupa file animasi GIF. Secara default jika kita install Photoshop pasti neh software pasti ngikut (saya lebih seneng nyebut ImageReady ini sebagai adiknya Photoshop). Sebenarnya selain ImageReady, buaanyaak banget lho software pembuat banner yang tak kalah seru. Sebagai contoh kita bisa pake Xara webstyle, GIF Animator dari Ulead, bahkan dari Macromedia Flash pun kita bisa buat animasi GIF. Dari sekian banyak software, pilihan saya ya ke adiknya Photoshop ini. Berhubung saya sudah familiar dengan Photoshop maka untuk mengoperasikan ImageReady-pun jadi lebih mudah karena tampilan dan tool-toolnya gak jauh beda (maklumlah satu perusahaan dengan Adobe jadi biasanya sudah kompatibel satu sama lain). Hehehe… sekian dulu basa-basinya… tu de poin aja yak…

Kita siapkan dulu lembar kerjanya. Ukuran banner kira-kira 100 x 54 pixel aja kayaknya dah cukup. Langkah kedua kita siapkan gambar pendukung dan teks untuk banner, jangan lupa setiap object gambar serta teks harus dipisahkan kedalam layer sendiri-sendiri. Kira-kira kayak gini:


Adapun tampilan banner jika kita lihat di panel preview adalah sbb:



Lho kok tampilannya cuma gambar Emoticon dan Background hijau saja??? Hehehe… yup itu karena visibility pada layer yang saya aktifkan cuma dua layer tersebut (lihat gambar Gbr.1 diatas, gambar mata yang aktif ada di layer Emoticon dan layer Background). Untuk mengaktifkan visibility layer cukup klik gambar mata begitu-pun sebaliknya jika kita ingin me-non-aktifkannya.

Satu lagi panel yang tak kalah penting adalah panel Animation yang tampilannya sbb:



Sebenarnya sebelum muncul 8 frame seperti diatas, frame aslinya cuma ada satu yakni frame nomor 1. Kemudian saya klik tombol “tambah frame” untuk melakukan duplikat frame nomor 1 menjadi sebanyak 8 frame. Selanjutnya kita setting kemunculan gambar pada setiap frame dengan cara mengaktifkan maupun me-non-aktifkan visibility layernya sehingga tampak seperti gambar Gbr.3 diatas.

Langkah terakhir yakni kita mengatur delay kemunculan setiap frame. (bukan kacang kedelai lho… bukan juga keledai… hehehehe… hayah…). Untuk mengatur delay setiap frame cukup klik tombol nomor yang ada di bawah frame. Format satuan delay adalah detik. Jika sudah selesai klik tombol play untuk melihat previewnya. Dan yang puuuaaaling akhir adalah save dokumen ini menjadi file animasi GIF, caranya adalah sbb:
Pada menu klik file?Save Optimized atau langsung aja pake shortcut dengan cara tekan tombol Ctrl+Alt+S pada keyboard. Jadi deh… ^^V

Sekarang tinggal naruh kode untuk menampilkan banner ini di kotak textarea. Kira-kira kodenya kayak gini:
<a href="http://www.alamatweblog.com" target="_blank"><img src="http://www.alamatgambar.com/banner.gif" border="0" title="Ini Blog Saya :D"></a>

Pada gambar Gbr.3 skenario bannernya adalah sbb:
Frame 1 : gambar emoticon dengan background warna hijau ditampilkan selama 1 detik
Frame 2 : background warna hijau ditampilkan selama 0,1 detik. Ini berfungsi sebagai transisi agar perubahan dari frame nomor 1 ke frame nomor 3 menjadi lebih enak dilihat
Frame 3 : gambar anak-anak SD, ditampilkan selama 1 detik
Frame 4 : background warna putih ditampilkan selama 0,1 detik berfungsi sebagai transisi juga
Frame 5 : gambar warna-warni ditampilkan selama 0,5 detik
Frame 6 : gambar warna-warni dan teks Zawa ditampilkan selama 0,5 detik
Frame 7 : gambar warna-warni, teks Zawa, teks Blog ditampilkan selama 1 detik
Frame 8 : background putih ditampilkan selama 0,1 detik. Karena animasi GIF yang bersifat looping (muter terus…) maka frame 8 ini dibutuhkan sebagai transisi frame nomor 7 ke frame nomor 1 agar lebih enak dimakan eh dilihat hehehehe…

Satu lagi fitur ImageReady yang paling saya suka yakni adanya fasilitas tweening. Oops… apa yak tweening itu??? Hmmm… tweening sebenarnya berasal dari kata between, kalo gak salah artinya “diantara” yak??? Hehehe… maklum bahasa inggris saya payah… :P. Intinya adalah dengan fasilitas tweening ini kita cuma disuruh buat frame awal dan akhirnya saja, sedangkan frame diantara frame awal dan akhir otomatis dibuatkan oleh si komputer. Misalkan kayak gini:



Pada gambar diatas terlihat bahwa pada frame awal terdapat tulisan “Cilukba” yang hanya terlihat huruf “a” karena huruf lainnya tertutup oleh canvas gambar yang memang sempit. Kemudian pada frame nomor 2 (frame ini sementara dianggap sebagai frame akhir) tulisan “Cilukba” digeser ke kanan sehingga terlihat full. Langkah selanjutnya klik tombol “tweening” sehingga akan muncul kotak dialog sbb:



Masukkan jumlah frame yang akan dijadikan tweening pada kotak “Frames to Add” kemudian klik OK.




Hmmm… hasilnya seperti gambar diatas yakni muncul 3 buah frame baru diantara frame awal dan akhir (kini frame nomor 2 yang bertuliskan “Cilukba” bergeser ke frame nomor 5). Klik tombol play untuk melihat preview banner.

Sebagai contoh, ini adalah avatar saya yang menggunakan teknik tweening seperti diatas…
Wawa Zawa

Yup… met nyoba yak… sampai ketemu di tutorial-tutorial selanjutnya… thatha… :-h

Banner Blog

hay temen-temen yuk ngramein ajang pasang banner di blog buat para blog holic !!!

banner2 ini aq dapat dari mas ANTO

kalo pengen jadi perkumpulan blog holic yuk kita tampilkan banner2 blog berikut pada blog2 kita yuk !!!

kalo emang kamu mau temenan ama blog aq yuk pasang banner ini !!!


nih buat preman2 dan temen aq di sekolah karena mereka selalu minta jatah traktiran tiap kali dapat cek !!! itu termasuk pungutan liar tahu !!!


wah cukup gerah juga dengar ada yang meninggal di IPDN yuk pajang banner ini yuk !!!


Blogger km Anti narkoba yuk pasang ini yuk



dah ah banner blog nya itu dulu aja yah !!!

Cara Buat Logo dan Banner

Bagi yg bisa program photoshop, membuat banner dan badge/chicklet itu mudah. Bagi yg agak males latihan otak-atik photoshop seperti saya tidak usah kuatir. Di internet banyak penyedia program pembuat chicklet dan banner online secara gratis dan instan. Sebagai pembuka, logo atau chicklet adalah banner kecil yg biasa buat link-button seperti yg di sidebar blog saya. Sementara banner ukurannya lebih besar dan biasa ditaruh di header blog/website. Ikuti panduan buat logo/chicklet/banner berikut:

A. Cara Membuat Chicklet

1. Kunjungi http://button.blogflux.com/

2. Di LEFT-BLOCK (bagian kiri atas) ada menu “Text”, ganti tulisan “w3c” sesuai dg yg Anda inginkan. Contoh, tulis Blog;

3. Di RIGHT-BLOCK (bagian kanan atas) ada menu “Text”, ganti tulisan “xhtml” dg yg sesuai dg keinginan Anda, contoh, “Tutorial”

4. Di GENERATE-BUTTON (bagian kanan bawah) klik tulisan Generate Button. Maka akan muncul chicklet seperti ini:

5. Nah, arahkan mouse ke gambar, klik kanan –> save picture as –> kasih nama file (contoh: blog-tutorial –> save di komputer Anda.

6. Setelah di saving di komputer, masukkan / upload gambar chicklet tsb di situs online seperti googlepages.com. Dalam kasus ini, gambar disimpan di http://fatihsyuhud.googlepages.com/ jadi alamat chicklet gambar tsb. adalah http://fatihsyuhud.googlepages.com/ blog-tutorial.gif

Note: Apabila belum daftar di googlepages.com, Anda tinggal kunjungi alamat URL googlepages.com and login dengan account gmail Anda.

7. Setelah tersimpan secara online, Anda bisa gunakan sesuai kebutuhan Anda seperti untuk linkbutton tukar link dg teman-teman blogger lain, atau sekedar buat pajangan di sidebar.

Tip: bentuk font dan background warna dapat dirubah sesuai selera. Tinggal klik menu “color” dan “background” di situs di atas.

B. Cara Buat Banner Online

1. Kunjungi situs http://cooltext.com/
2. Klik menu DESIGN A LOGO (bagian atas).
3. Di menu CHOOSE A LOGO DESIGN pilih gambar yg Anda suka, contoh, klik EMBOSSED.
4. Di menu LOGO TEXT saya tulis “Blog Tutorial”
5. Klik menu RENDER LOGO DESIGN (bagian paling bawah).
6. Save ke komputer (caranya, klik kanan gambar tersebut –>save picture as –>kasih nama file )

7. Setelah itu upload ke googlepages.com milik Anda. (lihat poin A.5 dan A.6).

Catatan: Mengupload image / gambar logo atau banner tentu saja tidak harus di googlepages.com, bagi pengguna wordpress.com Anda bisa juga menguploadnya di wordpress.com, di blogger.com bagi pengguna blogspot, atau di mana saja hosting online gratis.