Adobe Photoshop CS2 och dess ImageReady följeslagare program är kraftfulla verktyg för användare som vill ta en visuell inflygning till webbdesign . Användare kan skapa JavaScript rollovers utan att någonsin behöva ange någon kod genom att kombinera grafisk design kapacitet Photoshop och beteendet inställningsmöjligheter i ImageReady . Nyckeln till framgångsrik rollovers ligger i att förstå lager i Photoshop . Saker du behöver
Computer
Adobe Photoshop CS2
Visa fler instruktioner
Skapa din Knapp
1
Öppna Photoshop och skapa ett nytt dokument genom att välja " Arkiv > Nytt " från programmenyn . Ange storleken på dokumentet och klicka på " OK . "
2
Välj " Type Tool " från panelen Verktyg till vänster om arbetsytan och klicka någonstans på arbetsytan för att skapa någon gång text för din knapp ( " om " eller " portfölj ", till exempel ) . Ange önskade teckensnitt inställningar i Verktyg Alternativ panelen ovanför arbetsytan och skriv ut din knapp text . Du kan flytta denna text runt genom att flytta bort markören från själva texten och sedan klicka och dra i den riktning du vill flytta den .
3
Duplicera din text lagret genom att klicka och dra det till " Skapa nytt lager " -ikonen i "Lager " paletten till höger om din duk . Ikonen ser ut som en fyrkant , hundöron sidan .
4
Välj "kopiera " lagret du just skapade och högerklicka ( Ctrl + klicka på en Mac ) på lagret titeln i " lager "paletten . Välj " Blandningsalternativ " från den resulterande utfällbara menyn . Detta kommer att öppna en " Layer Style " dialogruta .
5
Klicka på ordet " Skugga " i " Styles " kolumnen till vänster i dialogrutan . Klicka på " Preview" till höger i dialogrutan och justera inställningarna i skuggan och returresa .
Setting Rollovers i ImageReady
6
Välj ImageReady längst ned på panelen Verktyg . Detta startar ett separat program från Photoshop som kommer med det att optimera Photoshop-bilder för webben .
7
Välj " Slice Tool " från panelen Verktyg till vänster på skärmen och klicka och dra en slice runt knappen från övre vänstra till nedre högra .
8
Välj " Web Content " paletten till höger på skärmen och klicka på knappen .
9
musen ner till " lager" paletten , där de olika lagren av din knapp visas . Klicka på ögat bredvid det översta lagret , som innehåller skuggan av din knapp . Detta kommer att inaktivera synligheten för det lagret så att endast icke - skugga version av din knapp visas på din webbsida när musen inte svävar över det .
10
tillbaka till " webben innehåll " paletten och klicka på hundöron sida längst ned för att skapa en ny överrullningsläge . Ordet " över " kommer att visas intill den nya staten , vilket innebär att utseendet du väljer för det kommer att visas när musen svävar över den på din webbsida .
11
tillbaka till " lager" paletten och stänga av synligheten av den icke - skugga lager genom att klicka på ögat ikonen till vänster . Slå på synlighet skuggan lagret . Addera länka din Rollover
12
Välj " Fönster > Slice " för att visa " Slice " paletten till höger om skärmen . Välj denna palett .
13
Ange ett namn för knappen i fältet "Namn" och skriv in en URL- adress för din rollover att länka till när folk klickar på den .
14
Välj " Arkiv > Spara optimerad som " från programmenyn och skapa ett namn för din rollover . Välj " HTML och bilder " från " Format " rullgardinsmenyn och klicka på " Spara " .
