Sådan oprettes en rollover Button

March 2

Rollover knapper bruges til menuer, billeder og image maps på websider. Når du placerer musen over en rollover knap, det ændrer. Afhængig af deres formål, kan det ændre farve, tekst, størrelse eller billede. I denne øvelse vil vi undersøge, hvordan man skaber rollover-knapper ved hjælp af Adobe Image Ready 7.

Instruktioner

1 Åbn Adobe Image Ready og vælg "Filer / Ny" fra menuen. I "Nyt dokument" dialogboksen, skriv en bredde og højde (i pixels), og tryk på OK. Vælg forgrundsfarven fra værktøjskassen, og vælg en farve fra "Color Picker" dialogboksen for din knap. Hit OK.

2 Vælg rektangel værktøj fra værktøjskassen og trække din knap på skærmen billedet. Rektanglet du oprettede vises på sit eget lag i lagpaletten. Kontroller, at rektanglet lag er valgt, og klik på "Tilføj en Layer stil" knappen i bunden af ​​paletten Lag. Vælg "Facet og prægning" for at gøre din rektangel mere ligner en knap.

3 Vælg tekstværktøjet (T) fra værktøjskassen. Vælg en skrifttype, størrelse og farve fra Tekstindstillinger bar til din tekst, og tilføje noget tekst til din knap. Vælg flytteværktøjet (V) fra værktøjskassen for at tilpasse din tekst på knappen. Den tekst, du har oprettet, vises på sit eget lag. Sørg for, at det er over rektanglet lag i lagpaletten.

4 Opret en anden knap ved at vælge rektanglet lag fra paletten Lag og trække den til "Opret et nyt lag" knappen. En kopi af din første lag vises i lagpaletten. Vælg laget for den anden knap, og klik på miniaturen. Ændre sin farve i "Color Picker" dialogboksen, og tryk på OK.

5 Vælg den netop duplikeret lag fra paletten Lag, og dobbeltklik på lagets miniaturebillede for duplikerede rektangel. Vælg en anden farve til din rollover knap fra "Color Picker" dialogboksen, og tryk på OK.

6 Trim nogen ekstra plads fra dit billede ved at vælge "Image> Trim." I "Trim" dialogboksen, skal du vælge "gennemsigtige pixels" til "Based" og placere et hak ved siden top, bund, venstre og højre. Hit OK. Enhver ekstra plads omkring din rektangel skal nu trimmes. Hvis det ikke er, skjule baggrunden lag på paletten Lag, og prøv igen.

7 Vælg "Windows> Rollover" fra menuen for at åbne paletten Overgange. Klik på det lag, du vil føje en rollover effekt fra lagpaletten, og klik på "Opret Layer Baseret Rollover" knap fra Overgange paletten.

8 Vælg "Over stat" lag fra paletten Overgange, og sørg for rollover-knappen lag er synligt i lagpaletten. Den miniature af knappen "Over stat" i paletten Overgange skifter til rollover billede, du har valgt fra lagpaletten.

9 Se et eksempel på dit arbejde ved at vælge "Preview dokument" (V) fra Værktøjskasse. Gem din Image Ready fil (Filer> Gem) som en .psd hvis du har brug for at redigere det senere. Også gemme din fil som en webside ved at vælge "File / Gem optimeret som" fra menuen. Inden for "Gem optimeret som" dialogboksen, vælg "HTML og billeder (* .html)" under "Gem som type". Adobe Image Ready vil generere din JavaScript-kode til knappen rollover.
Du har lige oprettet en rollover-knappen.


relaterede artikler