Hvordan lage klikkbare i Photoshop

En roll knappen er en knapp på nettstedet som endrer sin tilstand når musen svever over det. Staten endringen kan være en rekke endringer, inkludert farge, font, størrelse eller en kombinasjon av disse. Roll knapper finpusse og profesjonalitet til nettstedet ditt, og kan lages enkelt i Adobe Photoshop og Imageready. Disse trinnene detalj hvordan å lage en enkel roll knapp, men prosessen kan endres for mer stiliserte grafikk.

Bruksanvisning

Gi knappen Bilder i Photoshop

1 Gå til Fil> Ny og angi bildestørrelsen til 80 x 25 piksler med en oppløsning på 72 piksler per tomme.

2 Klikk på forgrunnsfargen swatch nær bunnen av verktøypaletten på høyre side av skjermen. Velg en farge for teksten på knappen. Klikk deretter på bakgrunn kartet og velger en farge.

3 Trykk "" Ctrl + Backspace for å fylle bildeområdet med valgt bakgrunnsfarge.

4 Velg "Type" verktøy fra verktøypaletten, og angi skrifttype og -størrelse i verktøymenyen øverst på skjermen. Klikk på dokumentområdet og skriv navnet på knappen, for eksempel "Portfolio" eller "Home".

5 Bruk "Move" verktøyet for å justere teksten til din smak.

6 Kopier både bakgrunnen og type lag. Lag en kopi av et lag ved å høyreklikke på et lag i lag paletten og velge "Duplicate".

7 Slå sammen de opprinnelige bakgrunn og tekst lag ved å holde "Shift" -tasten mens du klikker begge lag i lagpaletten. Deretter går du til Edit> Slå sammen lag. Endre navn på lag "Normal State."

8 Dobbeltklikk på "T" bildet til venstre for den kopierte typen laget for å markere teksten. Klikk på fargekartet i verktøymenyen øverst på skjermen, og velg en annen farge for teksten når musen svever over knappen.

9 Endre fargen på bakgrunnslaget, om ønskelig.

10 Slå sammen de to kopierte lagene, og endre navn på lag "Roll State." Filen skal nå inneholde to lag: den "Normal State" lag på bunnen og "Rollover stat" lag på toppen. Du kan forhåndsvise hvordan knappen endringen vil se ved å slå synligheten av det øverste laget av og på. Klikk på øyet grafikken til venstre for laget å vise eller skjule den.

Opprett Roll Button i Imageready

11 Klikk på "Gå til Imageready" -knappen nederst på verktøypaletten med knapp filen fortsatt åpen.

12 Gå til utseendet paletten (i CS eller nyere) eller roll paletten (i eldre versjoner); hvis den ikke allerede er åpen, kan du gå til Window-menyen og velg paletten fra rullegardinmenyen.

1. 3 Skjule "Rollover stat" lag; dette vil sette normal tilstand av knappen til "Normal" lag.

14 Klikk på "Create New State" -ikonet nederst i «Utseende» eller «Rollover" paletten. Slå på synlighet på "Rollover stat" lag for å angi det som roll staten.

15 Gå til stykket paletten; hvis den ikke allerede er åpen, kan det bli funnet i vindusmenyen. Tildele en URL til din roll knappen; Dette er nettsiden vil brukeren bli tatt til når han klikker på knappen.

16 Test din roll knappen ved å klikke på "Forhåndsvisning i standardleser" -knappen nederst på verktøypaletten.

17 Gå til Fil> Lagre optimalisert for å lagre HTML-fil og bildemappen.

Hint

• Trinnene er beskrevet her hvordan du lager en enkel roll knapp, men du kan gjøre de normale og rollover bilder så forseggjort som du vil.