Adobe Photoshop CS2 og ImageReady følgesvenn program er kraftige verktøy for brukere som ønsker å ta en visuell tilnærming til web design. Brukere kan opprette JavaScript- velt uten å måtte oppgi noen koden ved å kombinere grafisk design mulighetene i Photoshop og oppførselen sette mulighetene i ImageReady . Nøkkelen til vellykket velt ligger i å forstå lag i Photoshop. Du trenger
Computer
Adobe Photoshop CS2
Vis mer Instruksjoner
Lage din Button
en

Åpne Photoshop og lage et nytt dokument ved å velge "File > New " fra applikasjonsmenyen . Angi størrelsen på dokumentet og klikk " OK ".
2

Velg "Type Tool" fra Verktøy Panel til venstre for lerretet og klikke hvor som helst på lerretet for å skape et tidspunkt tekst for din -knappen ( " om" eller " portefølje ", for eksempel) . Still dine ønskede font innstillingene i Tool Options Panel over lerretet og skriv ut -knappen tekst. Du kan flytte denne teksten rundt ved å flytte markøren bort fra selve teksten og deretter klikke og dra i den retningen du ønsker å flytte den .
3

Duplicate teksten lag ved å klikke og dra den til " Create New Layer "-ikonet i "Layers " palett til høyre for lerretet . Ikonet ser ut som en firkant, fillete side .
4

Velg " kopi " laget du nettopp opprettet, og høyreklikk ( Ctrl + klikk på Mac ) på laget tittelen i " Layers "palett . Velg " Blending Options " fra den resulterende flyout menyen . Dette vil åpne en " Layer Style"- dialogboksen.
5

Klikk på ordet " Drop Shadow " i " stiler" kolonnen til venstre i dialogboksen . Klikk på " Preview " boksen til høyre i dialogboksen og justere innstillingene for skygge som ønsket.
Innstilling Rollovers i ImageReady
6

Velg ImageReady ikonet nederst i Verktøy- panelet . Dette starter et eget program fra Photoshop som følger med det å optimalisere Photoshop-bilder for web.
7

Velg " Slice Tool" fra Verktøy Panel til venstre på skjermen, og klikk og dra en slice rundt knappen din fra øverst til venstre til nederst til høyre .
8

Velg " Web Content " palett på høyre side av skjermen din og klikk på knappen din .
9

Mouse ned til " Layers " palett , der de forskjellige lag av knappen din vises. Klikk på øyet ved siden av det øverste laget , som inneholder skyggen av knappen din . Dette vil deaktivere synligheten for at laget slik at bare den ikke- skygge -versjonen av knappen din vises på websiden når musen ikke er hovering over det .
10

Tilbake til " Web innhold " paletten og klikk på fillete side nederst for å lage en ny rollover stat . Ordet "over" vises ved siden av den nye staten , noe som betyr at utseendet du velger for det som skal vises når musen svever over det på websiden.
11

Tilbake til "Layers " palett og slå av synligheten av ikke- skygge lag ved å klikke på øyet ikonet til venstre . Slå på synlighet av skyggen lag .
Linking Din Rollover
12

Velg "Window > Slice " for å vise " Slice " palett på høyre side av skjermen . Velg denne paletten .
13

Skriv inn et navn til knappen i "Navn "-feltet og skriver inn en URL-adresse for din rollover å koble til når folk klikker på den.
14

Velg "File > Lagre optimalisert som " fra programmenyen og skape et navn for rollover din . Velg " HTML og bilder " fra " Format" dropdown og klikk " Lagre" .