N I N E Q U A D R A T BY:IIEN SOLIHIN

Tutorial Rollover Image Photoshop

How To Make Rollover Image With Photoshop
Kelebihan Rollover Image pada Photoshop adalah bisa dibuat nya Rollover Button untuk Script HTML yang berbasiskan image (gambar) dari dua jenis gambar yang berbeda, adapun gambar tersebut adalah gambar utuh yang tersusun dari potongan-potongan gambar baru (rollover slice) yang dibuat dengan Photoshop.
Untuk lebih memudahkan dalam mem-parsing link Original Image dengan Rollover Image, maka rollover image yang di buat menggunakan Dreamweaver juga agar kode HTML yang tercipta mudah di modifikasi dan ditampilkan di website.


Contoh sederhana Rollover Image Bumblebee Transformers  Robot yang dibuat dengan Adobe Photoshop dan Adobe Dreamweaver.

Semoga Bermanfaat
Posted By : Ninequadrat

THE TUTORIAL

Step 1
  1. Open File Gambar yang akan dibuat Rollover Image dengan Photoshop.
  2. Gunakan Slice Tool (K) untuk membuat potongan-potongan bagian rollover image.
  3. lalu buatlah area Slice Rollover Image menjadi 6 bagian :
    • Kepala
    • Tangan Kanan
    • Tangan Kiri
    • Badan
    • Kaki Kanan
    • Kaki Kiri
Step 2
Setelah semua area rollover sudah terbagi bagi, langkah selanjutnya adalah simpan File Image menjadi file Web HTML : Save for Web & Devices (Alt + Shift + Ctrl + S).
Step 3
Maka muncul lah window dialog Save for Web & Devices,
  1. Gunakan lah setting pengaturan type file GIF dengan Color BIT Depth sesuai keinginan, pada gambar dibawah ini menggunakan 16 Colors, agar ukuran file nya tidak terlalu besar.
  2. Dilanjutkan dengan klik tombol Save.
Step 4
Setelah menekan tombol save maka akan mucul window dialog lokasi (folder) tempat penyimpanan, yang harus dilakukan adalah :
  1. Buatlah folder baru dengan Click Icon New Folder dengan nama folder "button-off".
  2. Kemudian simpan file HTML nya juga dengan nama "button-off", pada gambar dibawah ini contoh file HTML dengan nama "tutorial-rollover-image-button-off.html".
  3. Diakhiri dengan klik tombol Save.
Dengan demikian terciptalah file HTML Rollover Image dengan Button OFF
Step 5
Sekarang adalah tahap membuat rollover image dengan Button ON
  1. Gunakan perintah Duplicate Image pada menu Image > Duplicate Image.
  2. Maka akan muncul Window Dialog Duplicate Image, Duplikasikan gambar dengan memberi nama file "tutorial-rollover-image-button-on".
  3. Diakhiri dengan klik tombol OK.
Step 6
  1. Pilih layer Bumblebee pada menu susunan Layers di pojok kanan bawah
  2. Gunakan Menu Layers
  3. Gunakan Layer Style
  4. Lalu gunakan layer style Outer Glow
Step 7
Pada setting pengaturan Outer Glow, gunakan warna yang berbeda, pada contoh ini menggunakan warna Hijau dengan Blend Mode Normal dan Opacity 100%
Step 8
Gunakan juga layer style Color Overlay dengan warna yang di inginkan, pada contoh ini menggunakan warna Hijau dengan Blend Mode Overlay dan Opacity 50%. Lalu dilanjutkan dengan klik tombol OK
Step 9
Kemudian simpanlah gambar yang telah di duplikasi (tutorial-rollover-image-button-on) seperti pada Step 2 to Step 4.
Ini adalah akhir pembuatan dari program Photoshop, jangan lupa menyimpan juga semua file Photoshop nya (PSD) dengan nama yang sejenis (tutorial-rollover-image-button-off dan tutorial-rollover-image-button-on), agar di lain waktu bisa di edit kembali.
Step 10
  1. Buka file "tutorial-rollover-image-button-off.html" dengan program Dreamweaver, lalu pilih bagian rollover image klik bagian Kepala Bumblebee.
  2. Kemudiah hapus gambar rollover Kepala Bumblebee dengan menekan Keyboard DELETE. Pada tahap ini adalah menghapus satu persatu bagian-bagian rollover yang sudah ada lantas menggantinya dengan file GIF image yang dibuat dengan Photoshop, lihat Step 11.
Step 11
Pada contoh gambar dibawah ini memperlihatkan hanya bagian Kepala Bumblebee yang sudah dihapus, dalam hal ini diperlukan menghapus semua bagian-bagian Bumblebee seperti Kepala, Tangan Kiri, Tangan Kanan, Badan, Kaki Kanan dan Kaki Kiri semuanya dihapus.
Kemudian pada slot kosong yang sudah dihapus di isi kembali dengan Rollover Image di Dramweaver.
  1. Pilih bagian bagian Kepala Bumblebee, lalu hapus dengan menekan Keyboard DELETE.
  2. Klik icon menu Image
  3. Lalu klik Rollover Image
Step 12
  1. Beri nama Rollover Image Name : kepala
  2. Browse Image letakan file GIF Original Image kepala Bumblebee, pada contoh ini kepala Bumblebee dengan nama : "tutorial-rollover-image-button-off_04.gif".
  3. Browse Image letakan file GIF Rollover Image kepala Bumblebee, pada contoh ini kepala Bumblebee dengan nama : "tutorial-rollover-image-button-on_04.gif".
  4. Isi Alternate Text dengan : Kepala Bumblebee
  5. Masukkan juga URL yang dikehendaki (When clicked, Go to URL)
  6. Lalu diakhiri klik tombol OK.
Lakukan Step 12 ini pada bagian tubuh Bumblebee yang lainnya, seperti Tangan Kanan, Tangan Kiri, Badan, Kaki Kanan dan Kaki Kiri. Pastikan juga selalu memberi nama Rollover Image Name dengan nama yang berbeda-beda dan tidak salah Browse dalam menempatkan file GIF Original Image dan Rollover Image.


Dibawah ini adalah potongan-potongan file GIF Rollover Image (Rollover Slice)
yang terletak di folder images file HTML dari Photoshop
tutorial-rollover-image-button-off.html
dan
tutorial-rollover-image-button-on.html

ORIGINAL IMAGE
(ROLLOVER OFF)
ROLLOVER IMAGE
(ROLLOVER ON)
tutorial-rollover-image-button-off_04.gif tutorial-rollover-image-button-on_04.gif
tutorial-rollover-image-button-off_03.gif tutorial-rollover-image-button-on_03.gif
tutorial-rollover-image-button-off_05.gif tutorial-rollover-image-button-on_05.gif
tutorial-rollover-image-button-off_07.gif tutorial-rollover-image-button-on_07.gif
tutorial-rollover-image-button-off_08.gif tutorial-rollover-image-button-on_08.gif
tutorial-rollover-image-button-off_09.gif tutorial-rollover-image-button-on_09.gif
Step 13
Jika seluruh Rollover Image dari nomor 1 sampai nomor 6 sudah dihubungkan semuanya, maka selesailah pembuatan Rollover Image dari kombinasi dua program yang berbeda, Adobe Photoshop dan Adobe Dreamweaver. Simpanlah Rollover yang sudah dibuat sebagai file web agar kode HTML nya bisa digunakan di Website ataupun Blog seperti contoh diatas.

18 comments:

Shahriar mengatakan... Creative Multimedia Design

Hi...nice blog.i visit here support u and follow your blog.hope u follow me back. thanks for your great info.have a nice day.

Tips Trick mengatakan... Creative Multimedia Design

Blognya bagus, artikelnya keren :)

intan mengatakan... Creative Multimedia Design

sebuah karya yang kreatif,, dicoba dulu ya

amatechx3 mengatakan... Creative Multimedia Design

blogwalking need friends list folow me i will folow you back :) natamp3

Hana Ferry mengatakan... Creative Multimedia Design

muantab, ninggalin jejak gan TV Program

Ngalor Ngidul mengatakan... Creative Multimedia Design

KEren GAn...
boleh Di coba neh..

Mufied mengatakan... Creative Multimedia Design

wowwww.... keren banget dah sob... thanks for share ....

cissreal mengatakan... Creative Multimedia Design

Members (458) follow u

TEKINFO mengatakan... Creative Multimedia Design

nice post friend...
i want try this at home..

baby care tips mengatakan... Creative Multimedia Design

nice tutorial.... keep posting

Bisnis Online Blog mengatakan... Creative Multimedia Design

Amazing gan.Salam kenal gan.http://peluangbisnisonline-dahsyat.blogspot.com

Dapatkan review seputar bisnis online di blog saya dan tips terkini

Bisnis Online Blog mengatakan... Creative Multimedia Design

Mangstab gan tutornya gan.

dapatkan review hosting domain tangguh di blog saya
http://hostingmurahjogja.blogspot.com

Halaman Kuning mengatakan... Creative Multimedia Design

horeee.. tengkyu gan, ane udah bisa praktekin nya tapi cuma pake dreamweaver nya aja, step 12 dan 13.
http://halamankuning.blogspot.com/

amri lawak kelakar mengatakan... Creative Multimedia Design

keren banget tutorial ini gan..thanks yach

Ninequadrat mengatakan... Creative Multimedia Design

@all.. thx brada sista to visit here again :)
-salaaam-

Yogabama mengatakan... Creative Multimedia Design

Tutorialnya hebat-hebat, thx dah berbagi ilmu n salam kenal!

Noorani mengatakan... Creative Multimedia Design

wooow thats cool :D tutorialnya baguuus banget. thanks udah bagi bagi ilmu :)

Zainul Ahsanudin mengatakan... Creative Multimedia Design

ALUMNI DARUL ANGKLATAN BERAPA,,,?ajari desain web seperti nine kuadrat dunk..bagi2 ilmu...?

Posting Komentar

Related Posts
(c) Copyright 2010 Ninequadrat . Blogger template by Bloggermint | Powered by Blogger
Sponsored by Ninequadrat