Før Photoshop CS3 , skapte webdesignere rollover-knapper ved hjelp av Photoshop og Image Ready, som tidligere ble pakket sammen . Adobe avviklet ved hjelp av Image Ready når det kjøpte Macromedia Dreamweaver , forutsatt at webdesignere kunne bruke dette spesialisert program med Photoshop for å lage sine velt . Du oppretter rollover-knapper i Photoshop på samme måte. Deretter kan du bruke Dreamweaver , andre webredaktører eller en tekst editor for å lage rollover koden . Lær hvordan du oppretter rollover-knapper i Photoshop CS3 . Du trenger en Web redaktør
Vis flere instruksjoner
en

Åpne et nytt dokument som er størrelse som passer til dine knapper. Dette kan være størrelsen på nettsiden eller størrelsen på knappen banner. Klikk på " File > New" og skriv inn størrelsen i tilsvarende bokser .
2

Lag den første knappen som det vil vises når det ikke er valgt. Velg riktig form verktøyet fra " Tools Palette " og tegne på knappen . Deretter velger du "Type" verktøyet og skriv inn teksten inne knappen .
3

Påfør de ønskede effekter på knappen eller teksten . Adobe har gitt flere måter å bruke effekter . Hvis du vil bruke dine egne effekter, velger laget fra "Lag" -paletten. Deretter velger du ønsket effekt fra " FX " drop -down boks som er plassert på bunnen av " Layer " palette.Photoshop CS3 gir forhåndsinnstilte web stiler designet spesielt for web knapper . Hvis " Styles " palett ikke er synlig , velger du " Windows> Styles. " Fra " Styles " drop -down menyen, velg " Web Styles. " Kontroller at knappen laget er valgt og velg ønsket lag fra " Styles " palett .
4

Lag de resterende knappene. Hold nede " Control" for å velge teksten og knappen . Høyreklikk inne i "Lag" -paletten og velg " Duplicate Layer. " Flytt de kopierte lagene til plasseringen av neste -knappen . Endre teksten til den nye knappen navn. Gjenta dette trinnet for å lage alle knappene .
5

Skjær knappene . Velg " Slice "-verktøyet og tegne en boks rundt hver knapp. Dobbeltklikk på hver knapp for å legge slice alternativer. Kontroller at " bilde" er valgt i " Slice Type" drop- down boks . Skriv inn et navn som beskriver knappen slått av , for eksempel " [ knapp ] _off . " Skriv inn eventuell informasjon knyttet til nettstedet i de resterende boksene.
6

Velg "File > Save for web ... " Trykk på " Lagre"-knappen . I " Lagre optimalisert som " dialogboksen velger du plasseringen for bildene . Opprett en ny mappe som heter " Off". Hvis du har oppgitt informasjon for nettstedet, endrer du "Format " til " HTML og bilder . " Klikk "OK".
7

Velg "Windows > Layer Comp . " Lag et nytt lag komp ved å velge " Create New Layer Comp "-knappen . Navnet noe som beskriver dagens sett med knapper som " Off ".
8

Rediger knappene for å bruke rollover staten. Påfør stiler, farger eller effekter til de aktuelle knappene. Lag et nytt lag comp og gi den navnet "On ". Gjenta trinn 7 for å lagre knapper i en ny mappe som heter " On". Åpne mappen som inneholder disse knappene og endre navn på dem for å reflektere "på" .
9

Opprett rollover kode i en web-redaktør . Bruk Dreamweaver , en annen web-redaktør eller en tekst editor for å lage rollover koden . Her er JavaScript-kode for hjem-knappen i denne opplæringen : < img alt = " home_off " name = " home_off " src =" images /off /home_off.jpg "width = " 130 "height = " 47 "class = " style9 " border = " 0 " /> < /a >