Hvordan lage en Rollover Button

Roll knappene brukes for menyer, bilder og bildekart på nettsider. Når du plasserer musepekeren over en rollover knapp, endrer det. Avhengig av formålet, kan det endre farge, tekst, størrelse eller bilde. I denne øvelsen skal vi utforske hvordan å lage rollover-knapper ved hjelp av Adobe Image Ready 7.

Bruksanvisning

1 Åpne Adobe Image Ready og velg "File / New" fra menyen. I "Nytt dokument" dialogboksen, skriver i en bredde og høyde (i piksler), og trykk OK. Velg forgrunnsfarge i verktøykassen, og velg en farge fra "Color Picker" dialogboksen for knapp. Hit OK.

2 Velg rektangelverktøyet fra verktøykassen og trekke ut knappen på bildeskjermen. Rektangelet du opprettet vises på sitt eget lag i lagpaletten. Sjekk at rektangelet laget er valgt, og klikk på "Legg til en Layer style" -knappen på bunnen av lagpaletten. Velg "Skråkant og preg" for å gjøre rektangelet ser mer ut som en knapp.

3 Velg tekstverktøyet (T) fra verktøykassen. Velg en font, størrelse og farge fra teksten alternativlinjen for teksten, og legg til litt tekst til knappen. Velg flytteverktøyet (V) fra verktøykassen for å justere teksten på knappen. Teksten du opprettet vises på sitt eget lag. Sørg for at det er over rektangelet lag i lagpaletten.

4 Opprett en ny knapp ved å velge rektangel lag fra lagpaletten og dra det til "Opprett et nytt lag" -knappen. En kopi av det første laget vil vises i lagpaletten. Velg laget for den andre knappen, og klikk på miniatyrbildet. Endre farge i "Color Picker" i dialogboksen, og klikk OK.

5 Velg den nylig duplisert lag fra lagpaletten, og dobbeltklikk på lag thumbnail for duplisert rektangel. Velg en annen farge for roll knappen fra "Color Picker" i dialogboksen, og klikk OK.

6 Trim noen ekstra plass fra bildet ved å velge "Image> Trim." I "Trim" i dialogboksen, velg "gjennomsiktige punkter» på "Based" og plassere en hake ved siden øverst, nederst, venstre og høyre. Hit OK. Eventuelle ekstra plass rundt rektangelet skal nå være trimmet. Hvis det ikke er det, skjule bakgrunnslaget i lagpaletten og prøv igjen.

7 Velg "Windows> Roll" fra menyen for å åpne Velt paletten. Klikk på laget du vil legge til en rollover effekt fra lagpaletten, og klikk på "Create Layer Basert Roll" -knappen fra Velt paletten.

8 Velg "Over stat" lag fra klikk palett, og sørge for at rollknappen laget er synlig i lagpaletten. Miniatyrbildet av "Over State" -knappen i Velt paletten endres til roll bildet du valgte fra lagpaletten.

9 Forhåndsvise arbeidet ved å velge "Forhåndsvis dokument" (V) fra verktøyboksen. Lagre Image Ready fil (Fil> Lagre) som en .psd i tilfelle du trenger å endre det senere. Også lagre filen som en nettside ved å velge "Fil / Lagre optimalisert som" fra menyen. Innenfor "Lagre optimalisert som" dialogboksen, velg "HTML og bilder (* .html)" under "Lagre som type." Adobe Image Ready vil generere Javascript-koden for roll knappen.
Du har nettopp opprettet en velt knapp.