|
Adobe
Photoshop saknar en del viktiga funktioner för att skapa webbgrafik.
För att råda bot på detta har Adobe valt att skapa
ytterligare ett grafikprogram, ImageReady. Detta program skall ses
som ett komplement till Photoshop när det gäller att skapa
grafik för webb.
Denna
stödsida visar några exempel på hur ImageReady
kan användas för att skapa grafik för webben. För
att du skall kunna tillgodogöra dig informationen bör
du känna till de grundläggande funktionerna hos ett bildbehandlingsprogram.
Rollover-effekt
Begreppet rollover (även mouseover) innebär att ett
objekt på en webbsida (vanligtvis en bild) byts ut i samband
med att muspekaren "rullar över" något objekt
på sidan. Denna funktion byggs upp med hjälp av JavaScript.
Numera behöver man inte sitta och knappa ner denna kod manuellt,
utan kan istället tryggt lämna skapandet av denna kod
i händerna på programvaran man ritar objekten i.
| Steg
för att skapa en rollover-effekt i ImageReady:
|
| 1. |
Starta
ImageReady och välj Nytt under Arkiv-menyn. |
| 2. |
Rita
därefter två bilder, en för "normalläge"
och en "rollover-läge". Det är viktigt
att bilderna ritas på separata lager. Enklast
är att välja textverktyget och skriva en text.
Sedan duplicerar man detta textlager (kalla kopian rollover)
och gör de förändringar man vill ska ske
när muspekaren rullar över.
|
| 3. |
När
du ritat dina bilder (i samma bildfil, men olika lager)
väljer du Visa Rollover i Fönster-menyn.
Då syns en palett för att jobba med rollover-funktionen
(se bild nedan). Där kan du bestämma vad bildens
normalläge skall vara genom att med hjälp av lagerpaletten
se till att rätt lager visas. Hur rollover-läget
skall se ut definierar du genom att klicka på knappen
till vänster om soptunnan i rollover-paletten för
att skapa ett rollover-läge, och därefter se till
att de lager som skall visas i rollover-läget är
markerade.
|
| 4. |
Förhandsgranska
i webbläsare via knappen på verktygspaletten.
|
|
| 5. |
För
att använda din rollover-funktion kan du låta ImageReady
skapa html-koden med tillhörande JavaScript samt de båda
bilderna åt dig. Detta gör du genom att i Arkivmenyn
välja Spara optimerade som. Välj därefter
om du vill spara bilder och html, endast bilder, eller endast
html. |
| 6. |
För
att sedan använda detta i något annat html-dokument
är det enklaste att öppna det html-dokument ImageReady
skapat i den html-editor man använder (t ex Dreamweaver)
och sedan klippa & klistra. Börja med att klippa
ut själva JavaScript-koden (avgränsas av <script>kod</script>)
klistra in den innan body-taggen i dokument du vill ha rollover-funktionen
i. Därefter kompletterar du body-taggen med preload-funktionen.
Till sist placerar du den kod som kallar på själva
bilderna på valfri plats.
|
Den färdiga rolloverknappen i detta exempel ser ut så
här:
Vill
du se hur denna enkla rollover ser ut i ImageReady kan du ladda
ner originaldokumentet (litu_umu.psd) och därefter öppna
det i programmet.
|
Institutionen för interaktiva medier och lärande