En rollover knap er en knap på hjemmeside, der ændrer sin tilstand, når musen svæver over det. Staten ændring kan være mange ændringer, herunder farve, skrifttype , størrelse eller en kombination af disse. Rollover-knapper tilføjer polish og professionalisme til din hjemmeside og kan nemt oprettes i Adobe Photoshop og ImageReady . Disse trin detaljer, hvordan du opretter en simpel rollover -knap , men processen kan ændres for mere stiliseret grafik . Ting du skal
Adobe Photoshop
ImageReady
Vis Flere Instruktioner
oprette knappens Billeder i Photoshop
1

Gå til Filer > Ny og indstil billedstørrelsen til 80 af 25 pixels med en opløsning på 72 pixels per tomme .
2

Klik på forgrunden farveprøve nær bunden af ​​værktøjspaletten på højre side af skærmen. Vælg en farve til teksten på din knap. Klik derefter på baggrunden farveprøve , og vælg en farve.
3

Tryk på " " Control + Backspace for at fylde billedet område med din valgte baggrundsfarve.
4

Vælg "Type" værktøj fra værktøjskassen og indstille skrifttype og størrelse i værktøjet menuen øverst på skærmen. Klik på dokumentet området og skriv knappens navn , såsom " Portefølje " eller "Home ".
5

Brug " Move" værktøjet for at tilpasse teksten til din smag.
< Br > 6

Kopier både baggrunden og type lag. Opret en kopi af et lag ved at højreklikke på et lag i lagpaletten og vælge " Dupliker ".
7

Flet den oprindelige baggrund og tekstlag ved at holde "Shift "-tasten , mens du klikker både lag i lag paletten . Så gå til Rediger> Flet lag. Omdøb laget "Normal stat. "
8

Dobbeltklik på " T" billedet til venstre for den kopierede typen lag for at fremhæve teksten . Klik på farveprøven i værktøjet menuen øverst på skærmen , og vælg en anden farve til teksten , når musen svæver over knappen.
9

ændre farven i baggrunden lag , hvis det ønskes.
10

Flet de to kopierede lag og omdøbe laget " Rollover stat. " Din fil skal nu indeholde to lag: "Normal stat" lag på bunden og " Rollover stat" lag på toppen. Du kan se , hvordan knappen ændringen vil se ved at dreje synligheden af ​​det øverste lag til og fra. Klik på øjet grafikken til venstre for laget for at vise eller skjule den.
Opret Rollover Button i ImageReady
11

Klik på " Gå til ImageReady " knappen . nederst værktøjspaletten med din knap filen stadig åben
12

Gå til udseendet paletten ( i CS eller nyere ) eller rollover paletten ( i ældre versioner ), og hvis det ikke er allerede er åben, skal du gå til menuen Vindue og vælg paletten fra drop -down menu
13

Skjul " Rollover stat" lag; . det vil sætte den normale tilstand for din knap til " normal" lag.
14

Klik på " Opret ny stat" nederst i " Udseende " eller " Rollover " paletten. Tænd synlighed på " Rollover stat" lag for at angive det som rollover state
15

Gå til skive paletten . Hvis det ikke allerede er åbent, kan det findes i Window menu . Tildel en URL til din rollover -knap , det er den webside vil brugeren blive taget til, når han klikker på din knap
16

Test din rollover -knap ved at klikke på "Preview i Standard Browser" knappen. nær bunden af ​​værktøjskassen.
17

Gå til Filer > Gem optimeret for at gemme HTML -filen og billedmappe.