Hvordan lage klikkbare i Photoshop CS3

Hvordan lage klikkbare i Photoshop CS3


Før Photoshop CS3, webdesignere opprettet roll 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 denne 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 roll kode. Lær hvordan du oppretter roll knapper i Photoshop CS3.

Bruksanvisning

1 Å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 de tilsvarende boksene.

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 trekke på knappen. Deretter velger du "Type" -verktøyet og skriv inn teksten inne knappen.

3 Hvordan lage klikkbare i Photoshop CS3

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

4 Hvordan lage klikkbare i Photoshop CS3


Lag de resterende knappene. Hold nede "Control" for å velge tekst og knappen. Høyreklikk inne i "Layer" 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 Hvordan lage klikkbare i Photoshop CS3


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

6 Hvordan lage klikkbare i Photoshop CS3


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

7 Velg "Windows> Layer Comp." Lag et nytt lag comp ved å velge "Create New Layer Comp" -knappen. Name it noe som beskriver den nåværende sett med knapper som "Off".

8 Hvordan lage klikkbare i Photoshop CS3

Rediger knappene for å bruke roll staten. Påfør stiler, farger eller effekter til dagens knappene. Opprett en ny lagsammensetning og gi den navnet "On". Gjenta trinn 7 for å spare på knappene i en ny mappe som heter "On". Åpne mappen som inneholder disse knappene og endre navn på dem for å reflektere den "på".

9 Lag roll kode i en web-redaktør. Bruk Dreamweaver, en annen web redaktør eller en tekst editor for å lage roll kode. Her er en Javascript-kode for hjem-knappen i denne opplæringen: <a href = "index.html" onmouseover = "home_off.src =" images / på / home_on.jpg '; " onmouseout = "home_off.src =" images / off / home_off.jpg '; "> <img alt =" home_off "name =" home_off "width =" 130 "height =" 47 "class =" style9 "border =" 0 "/> </a>