155 besökare, 2 medlemmar och 1 Student är online nu
Loopia

Photoshop

Rollover-knappar (5/5.5)

Klicka på meny-knapparna nedan!

För att få "rollover-funktionen" behöver du ett Javascript. Du hittar några exempel i guiden Javascript »

OBS! Denna guide är en fortsättning på guiden Menyknappar »

 

Skapa meny-knapparna

Skapa meny-knapparna nedan guiden Menyknappar » eller spara filerna nedan:

menyknappar.psd  

menyknappar.zip  

 

 

 

Skapa "Rollover-effekterna"

Tillämpa en Layer-stil (Layer Style) på en av meny-knapparna. I exemplet har vi valt meny-knappen till meny-texten "Webdesignskolan".

  1. Högerklicka på Layer-namnet och välj menyn "Effekter" (Effects):



    OBS! I senare versioner av Photoshop kallas funktionen "Layer-stil" (Layer Style).



    Inaktivera "Skugga" (Drop Shadow) och välj "Avfasning och Relief" (Bevel and Emboss).

    Välj "Yttre Avfasning" (Outer Bevel) och läget "Ner" (Down):






  2. För att lägga till en ny "Avfasnings och Relief-effekt" utan att den tidigare försvinner, kan du flytta denna till egna Layer.

    Högerklicka på menyn i Layer-paletten:



    Välj menyn "Skapa Lager" (Create Layers).

    2 nya Layerskapas som innehåller "Bevel and Emboss":




  3. Tillämpa en nyLayer-stil på meny-knappen.

    Inaktivera "Skugga" (Drop Shadow) och välj "Avfasning och Relief" (Bevel and Emboss) och "Inre Avfasning" (Inner Bevel):

     



  4. Flytta denna Layer-stil till egna Layermed samma metod som ovan:




  5. Här visas en metod för att ge meny-knappen ett läge där den ser "intryckt".

    Dölj Layermed Layer-stil så att du bara ser meny-knappen:






    Välj en ny Layer-stil.

    Inaktivera "Skugga" (Drop Shadow) och välj "Innerskugga" (Inner Shadow).

    Ändra "Avstånd" (Distance) för att få ett mörkt "nedsänkt" utseende runt hela meny-knappen:





  6. Flytta denna Layer-stil till egna Layermed samma metod som ovan:

 

 

Prova nya "knapplägen"

Nu kan du prova dina 2 knapp-lägen.

Göm Layermed "Innerskugga" (Inner Shadow) och visa de 2 Layer med "Inre Avfasning" (Inner Bevel):

Så här ser meny-knappen ut när den inte är nedtryckt:



 

Visa Layermed "Innerskugga" (Inner Shadow):

Så här ser meny-knappen ut när den är nedtryckt:

 

Rollover-effekten kontrolleras av ett Javascript och exemplet består av 3 bilder. En bild visas i start-läget , en bild visas i "rollover-läget" och en bild visas vid klickning på meny-knappen.

Klicka på länken nedan för att prova exemplet!

Klicka här för att se exempel Öppnas i nytt fönster (Open in new window) 

 

För att få själva funktionen behöver du ett Javascript. Läs mer i guiden Javascript »