Forud for Photoshop CS3 , webdesignere skabte rollover-knapper ved hjælp af Photoshop og Image Ready, som tidligere blev pakket sammen . Adobe ophørte hjælp af Image Ready , da det købte Macromedia Dreamweaver , forudsat at webdesignere kan bruge dette specialiserede program med Photoshop til at skabe deres overgange . Du opretter de rollover-knapper i Photoshop på samme måde. Derefter kan du bruge Dreamweaver, andre webredaktører eller en tekst editor til at oprette rollover -koden. Lær hvordan du opretter rollover-knapper i Photoshop CS3. Ting du skal en Web editor
Vis Flere Instruktioner
1

Åbn et nyt dokument , der er passende størrelse for dine knapper . Dette kan være på størrelse med hjemmesiden eller størrelsen af knappen banner. Klik på " Filer> Ny" og indtaste størrelsen i de tilsvarende felter.
2

Opret den første knap , som det vises , når det ikke er valgt. Vælg den rigtige form værktøjet fra " Tools Palette " og trække knappen. Vælg derefter "Type " værktøj og indtaste teksten i knappen.
3

Anvend de ønskede virkninger til knap eller tekst. Adobe har udsendt flere måder for dig at anvende effekter. At anvende dine egne brugerdefinerede effekter , skal du vælge lag fra " Lag " paletten. Vælg derefter den ønskede effekt fra " FX " drop- down boks, der er placeret på bunden af ​​" Lag " palette.Photoshop CS3 giver forudindstillede web stilarter designet specielt til web-knapper . Hvis " Styles " palette ikke er synlig , skal du vælge "Windows > Styles ". Fra " Styles " drop- down menuen, vælg " Web Styles ". Sørg for, at knappen lag er valgt, og vælg den ønskede lag fra " typografier" paletten.
4

Opret de resterende knapper. Hold tasten " Control" for at vælge teksten og knappen . Højreklik inde i " Layer " palette og vælg " Duplicate Layer ". Flyt de kopierede lag til placeringen af ​​den næste knap . Ændre teksten til den nye knap navn. Gentag dette trin for at oprette alle knapperne .
5.

Skær knapperne. Vælg " Slice " værktøj og tegne en boks rundt om hver knap. Dobbeltklik på hver knap for at tilføje udsnitsindstillinger . Sørg for, at "Image " er valgt i " Slice Type" drop- down boks . Indtast et navn, der beskriver knappen slukket , såsom " [ knap ] _off . " Indtast alle oplysninger om hjemmesiden i de resterende felter.
6

Vælg " Filer> Gem til web ... " Tryk på " Gem" knappen . I " Gem optimeret som " dialogboks , vælge placering til dine billeder . Opret en ny mappe kaldet "Off". Hvis du har indtastet oplysningerne til hjemmesiden, ændre " Format " til " HTML og billeder . " Klik på "OK".
7

Vælg " Windows> Layer Comp . " Opret et nyt lag comp ved at vælge "Opret ny lagsammensætning " knappen. Navngiv det noget der beskriver den aktuelle sæt knapper såsom "Off ".
8

Rediger knapperne til at anvende rollover tilstand. Anvend stilarter, farver eller effekter til de nuværende knapper. Opret endnu et lag comp og navngive den " On". Gentag trin 7 for at spare på knapperne i en ny mappe kaldet " On". Åbn den mappe , der indeholder disse knapper og omdøbe dem til at afspejle den "on " tilstand.
9

Opret rollover kode i en webredaktør . Brug Dreamweaver, anden web editor eller en tekst editor til at oprette rollover -koden. Her er JavaScript-kode til hjemmet knap i denne tutorial : < img alt = " home_off " name = " home_off " src = " billeder /off /home_off.jpg " width = " 130 " height = " 47" class = " style9 " border = "0" /> < /a>