U ovom tutorialu ću vam objasniti kako napraviti jednostavni rollover u programu Adobe Imageready koji dolazi uz Adobe Photoshop.

Korak 1:
Napravite novi dokument ovih dimenzija u Imagereadyu:



Korak 2:
Sada odaberite Rounded Rectangle tool. Ako ga nema u alatnoj traci, naći ćete ga ovako:



Korak 3:
Koristite neki od layer style-ova i nacrtajte jedan rounded rectangle (pravouganik zaobljenih uglova (kutova)) kao na slici.

Sada vam neću objasnjavati kako napraviti layer style, nego ću samo pisati o procesu izrade rollover buttona.



Korak 4:
Sada se morate pobrinuti da imate "Web content" podprozor otvoren. To ćete naći na ovaj način; idite na meni Window -> Web content.

Sada bi vam se trebao pojaviti ovaj prozor:



Korak 5:
Sada idite na Slice tool.



Korak 6:
Slice toolom obilježite cijeli dokument, ovako:



Korak 7:
Sada idite na web content podprozor. Označite slice koji ste upravo napravili.



Korak 8:
Desnim klikom na označeni slice kliknite "Add rollover state"



Korak 9:
Pobrinite se da vam je označeni Rollover state na sliceu.



Sada označite layer(e) na kojem radite da dobijete rollover (ako radite na više layera to trebate uraditi; u ovom tutorijalu to nije slučaj)

Layeru dodajte neki drugi style.

Korak 10:
Usnimite ovako: File -> Save Optimized As... -> Html and images (.html)

Finished!



Sada to otvorite u vasem internet browseru i probajte :) .
Uz malo maštovitosti i malo vježbe, možete dobiti interesante rezultate. Kasnije, kada postanete bolji sa Photoshopom i ImageReadyem, to mozete kombinirati u izradi weba.