Oprettelse af simple menu med rollover i ImageReady

..menuer er nu en gang ikke til at komme udenom. De menuer der IMHOP ser bedst ud, har en eller anden rollovereffekt, enten når musen føres over, og/eller når der klikkes.
I denne tut, lærer du hvordan man opretter en af de mere primitive af slagsen, så du kommer til at forstå hvordan dette gøres i ImageReady.

1. Start med at oprette en ny fil i PhotoShop. Størrelse 300 x 80 px i 72 dpi.

Navngiv laget "Home knap".
Med det firkantede markeringsværktøj opret et firkant på 40 x 100 px og fyld den med sort (#000000). Skriv Home med hvid.

Dubler din knap, navngiv laget "Links knap" og skriv en anden tekst på den.

Min menu ser nu sådan her ud:

Dubler de 2 sorte knapper og skift baggrundsfarven til blå (#0000FF). Navngiv knapperne h.h. "Home knap OVER" og "Links knap OVER".

Din Lagpalette skulle nu gerne se sådan her ud:

2. Lagsæt to the rescue
Inden vi går videre, skal vi lige have bragt lidt orden i kaos.
Det er her lag sæt kommer ind i billedet.

Du kan ikke lave en rollover, hvis du ikke har oprettet nogen lag sæt.
Nederst i bunden af lagpaletten finder du lige det ikon du skal bruge.

Klik på ikonet og navngiv den mappe der oprettes "Normal".

Træk de sorte knapper og de tilhørende tekster ind i lagsættet, der så gerne skulle se sådan her ud:

Du skal nu have oprettet et lagsæt til din Home knap og et lagsæt til til Links knap.

Opret et lagsæt kaldet Home. Træk den blå Home knap ind i lagsættet.
Dubler teksten Home fra lagsættet Normal og træk den ind i lagsættet Home.

Opret et nyt lagsæt og kald det Links. Træk den blå Links kanp ind i lagsættet.
Dubler teksten Links fra lagsættet Normal og træk den ind i lagsættet Links.

OBS! i alle lagsæt - teksten skal være øverst.

Din Lagpalette skulle nu meget gerne se sådan her ud:

3. Slice dine links ud
Nu skal du i gang med at slice :)
Klik på Udsnitsværktøjet...

..og gå i gang med at slice din menu.
Dine knapper skal slices ud i hver deres stykke. Du skulle gerne ende med at have 6 slices:

(Du kan højreklikke på de enkelte slices og bl.a. omdøbe dem OG vælge om der skal være et billede på baggrunden eller ej. Der er ingen grund til at der er et billede på andre slices end nr. 3 og 4, som er de eneste der indeholder noget - nemlig dine knapper).

Skjul lagsættene Home og Links ved at klikke på øje-ikonet ud for dem begge 2.

4. Oprettelse af rollover i ImageReady
Skift til ImageReady. (Crtl + Shift + M).
Overgangspaletten skal være synlig. Er den ikke det, vælger du i menulinien: Vindue -> Overgange.

I Overgangs-paletten lokaliser den slice der hedder Links.
Klik på den og klik på knappen "Opret lagbaseret overgang".

Nu har du oprettet en overgang, men er ikke tilknyttet nogen ændring til den.

I Lagpaletten klik og sæt øje-ikonet ud for lagsættet Links.
Du kan nu se at knappen links skifter til blå.

I Animations-paletten:
Under navn: kald den Links.

URL = skriv en adresse ex. http:\\www.suza.dk :)

Klik på overgangen Links og klik igen på knappen "Opret overgangstilstand". Som standard oprettes en OVER tilstand. Højreklik på den og vælg UD.

I Lagpaletten klik og fjern øje-ikonet ud for lagsættet Links. Du kan nu se at Links knappen igen er sort.

Opret på samme måde 2 overgange for knappen Home.

Tag en preview i browseren ved at klikke på ikonet i værktøjspaletten.

Dit endelige resultat skulle se sådan her ud:

Siden er sidst opdateret, den 05-12-2006