Adobe Photoshop CS2 og dens ImageReady følgesvend program er stærke værktøjer til brugere, der ønsker at tage en visuel tilgang til web- design. Brugere kan oprette JavaScript rollovers uden nogensinde at skulle indtaste en kode ved at kombinere de grafiske design kapaciteter Photoshop og adfærd indstilling kapaciteter i ImageReady . Nøglen til en vellykket rollovers ligger i at forstå lag i Photoshop. Hvad du har brug
Computer
Adobe Photoshop CS2 software
Vis Flere Instruktioner
Oprettelse din Button
1
Åbn Photoshop og oprette et nyt dokument ved at vælge "Filer > Ny" fra programmenuen. Indstil størrelsen af dit dokument og klik på " OK".
2
Vælg " Type Tool " fra Tools panelet til venstre for dit lærred , og klik et vilkårligt sted på lærredet for at skabe nogle point tekst til din knap ( "about " eller " portefølje ", for eksempel ) . Indstil din ønskede skrifttype indstillinger i Indstillinger for værktøjet Panel over dit lærred og skriv ud din knap tekst. Du kan flytte denne tekst rundt ved at flytte markøren væk fra selve teksten og derefter klikke og trække i den retning, du ønsker at flytte den.
3
Duplicate din tekst lag ved at klikke og trække det til " Opret nyt lag " ikonet i " Lag " paletten til højre for dit lærred . Ikonet ligner en firkant, hund- eared side .
4
Vælg " kopi"- lag, du lige har lavet og højreklik ( Ctrl + klik på en Mac) på laget titel i " lag " paletten. Vælg " Blending Options" fra den resulterende undermenu . Dette vil åbne en " Layer Style" dialogboksen.
5.
Klik på ordet " Drop Shadow " i " Styles " kolonnen til venstre i dialogboksen . Klik på "Preview " afkrydsningsfeltet til højre i dialogboksen og justere indstillingerne for drop shadow som ønsket.
Indstilling Rollovers i ImageReady
6
Vælg ImageReady ikonet nederst på Tools Panel. Dette starter et separat program fra Photoshop , der kommer med det at optimere Photoshop-billeder til internettet.
7
Vælg " Slice Tool " fra Tools panelet i venstre side af skærmen og klikke og trække et slice omkring din knap fra øverste venstre til nederste højre .
8
Vælg " Web Content " palette i højre side af skærmen, og klik på din knap.
9
Mouse ned til " lag " palette , hvor de forskellige lag af din knap vises. Klik på øjet ikonet ved siden af det øverste lag , som indeholder drop shadow på din knap . Dette deaktiverer synligheden af det lag , så kun den ikke- drop shadow version af din knap vises på din webside , når musen ikke svæver over det.
10
Retur til "Web indhold " paletten, og klik på æselører side ikon nederst til at oprette en ny rollover stat. Ordet " over" vises ved siden af den nye stat , hvilket betyder , at udseendet , du vælger for det vil blive vist , når musen svæver over det på din webside .
11
Retur til " lag " paletten og sluk for synligheden af den ikke- drop shadow lag ved at klikke på øjet ikon til venstre . Tænd for synligheden af drop shadow laget.
Sammenkædning Din Rollover
12
Vælg "Window > Slice " for at vise "Udsnit " palette til højre for din skærm. Vælg denne palet.
13
Indtast et navn til din knap i "Name " feltet og indtaste en URL -adresse til din rollover at linke til , når folk klikker på det.
14
Vælg " Filer> Gem optimeret som " i programmenuen og skabe et navn for din rollover . Vælg " HTML og billeder " fra "Format " dropdown og klik på " Gem".
