48 besökare, 1 medlem och 1 Student är online nu
Loopia

Photoshop

Menyknappar (5/5.5)

         

Gör en meny med knappar till din webbsida.

 

Skapa meny-texterna

Börja med att skapa den form och storlek du vill ha på knappen. En bra metod är att ta reda på vilket som kommer att vara ditt längsta ord i menyn, och anpassa knappstorleken efter detta.

  1. Skapa ett dokument.

    Fyll bakgrunds-Layer med samma färg du kommer att ha som bakgrund på webbsidan.

    I exemplet har vi valt en blå färg (R=182, G=102, B=30):






  2. Byt färg till den färg du vill ha på din text. Använd verktyget "Text" (Type) och skriv dina meny-texter.

    OBS! Använd ett Layer till varje meny-text:





  3. Använd "Stödlinjer" (Guides) för att få meny-texterna i samma position.

    Visa " Linjaler" (Rulers) med menyn "Visa/Visa Linjaler" (View/Show Rulers) och Klicka+Dra ut en vertikal "Stödlinje" (Guide):






    Om du behöver flytta en "stödlinje" (Guide) använder du verktyget "Flytta" (Move) eller snabbkommando CTRL+Dra.

  4. Dra ut en horisontell "Stödlinje" (Guide) från den övre Linjalen:





  5. Flytta alla meny-texter med verktyget "Flytta" (Move) och placera dem så att de fäster mot den vertikala stödlinjen och den horisontella stödlinjen, de ska alltså vara exakt överliggande varandra.

    Om inte meny-texterna "fäster" mot stödlinjerna (Guides) så kan du välja menyn "Visa/Fäst mot Stödlinjer" (View/Snap to Guides).

    I exemplet är alla meny-texter placerade exakt överliggande varandra :

 

Skapa knapparna

  1. Photoshop 6 och senare versioner:
    Skapa knappen från vektorformer enligt i guiden Layer, former och fyllning »

    Photoshop 5/5.5:
    Skapa knappen från en rektangel med runda hörn enligt nedan.

    Du hittar fler tips i guiderna:
    Runda hörn »
    Runda hörn 2 »
    Form med font »


    Skapa ett nytt Layer och placera det längst ned så att knappen inte döljer meny-texten.

    Skapa knappar som är minst lika långa som din längsta meny-text.

    I exemplet är "Dreamweaverskolan" den längsta texten.

    Skapa markeringsområden med 2 Cirklar och 1 Rektangel.

    Skapa en "cirkel":




    Fyll ditt markeringsområde med färg.

    Flytta markeringsområdet åt höger med "pil-tangent". Använd SHIFT+Pil för steg om 10 pixlar:



    Fyll ditt markeringsområde med färg.


    Placera ut "stödlinjer" (Guides) och skapa ett rektangulärt markeringsområde:



    Fyll markeringsområdet med färg och avmarkera med CTRL+D.

    Göm "stödlinjer" (Guides) med menyn "Visa/Göm Stödlinjer" (View/Hide Guides):

 

 

Skapa en 3D-knapp

För att få en "3D-knapp" kan du använda menyn "Layer/Effekter" (Layer/Effects) eller genom att högerklicka på Layer-namnet. OBS! I senare versioner av Photoshop kallas detta för Layer-stil (Layer Style).

Inaktivera "Skugga" (Drop Shadow) och använd "Avfasning och Relief" (Bevel and Emboss).

Läs mer i guiderna Inre Avfasning » och Yttre Avfasning »

 

 

Använd endast en knapp men flera meny-texter

När du sparar dina meny-knappar så behöver du bara använda en enda meny-knapp till alla meny-texterna. Flytta alla menytexter till samma position och beskär dokumentet (Crop).

  1. Beskär ditt dokument runt din "meny-knapp" med verktyget "Beskär" (Crop).

    Zooma ordentligt, i exemplet används 200% zoom:




  2. Spara meny-texterna tillsammans med meny-knappen.

    I exemplet visas bara Bakgrunds-Layer, meny-knappen och en av meny-texterna:

      

     

    Spara bilden i webbformat.