Knappdesign

Av Jonas Byström

Gör så här

• Skapa nytt dokument med vit bakgrundsfärg. Välj FILE/NEW, ange Background Color WHITE och Image Type 16.7 MILLION COLORS (24 BIT).
  
• Det kan vara lämpligt att zooma in när vi gör en knapp. Klicka på förstoringsglaset i verktygsfältet. För markören (förstoringsglas) in i bildytan och klicka med vänsterknappen ett par gånger tills skalan är 4:1 eller mer.
  
• Välj förgrundsfärg. D.v.s. klicka med vänsterknappen i övre vänstra rutan under färgpaletten. Ange Röd:0, Grön:128, Blå:128 (blågrön). Klicka på OK.
  
• Välj SHAPES (klicka på fyrkantig ruta i verktygsraden). Line 1, Shape RECTANGLE, Style FILLED.
  
• Rita en rektangel som är 85x21 pixlar genom att hålla vänsterknappen nedtryckt och dra. Storleken 85x21 indikeras i statusrutan längst ner till vänster.
  
• Klicka på MACIG WAND i verktygsfältet. (Tolerance 0, Feather 0.) Klicka i rektangeln för att aktivera den. En streckad ram syns nu runt rektangeln.
  
• Välj IMAGE/SPECIAL EFFECTS/CUTOUT. Disable FILL, Shadow color WHITE, Opacity 255, Blur 5, Vertical 1, Horizontal 1. Klicka på OK.
  
• Välj IMAGE/SPECIAL EFFECTS/CUTOUT. Shadow color BLACK, Vertical -1, Horizontal -1. Klicka på OK.
  
• Välj bakgrundsfärg. D.v.s. klicka med högerknappen i undre högra rutan under färgpaletten. Ange Röd:128, Grön:128, Blå:128 (mellangrå). Klicka på OK.
  
• Välj IMAGE/SPECIAL EFFECTS/ADD DROP SHADOW. Color BACKGROUND COLOR, Opacity 180, Blur 10, Vertical 5, Horizontal 5. Klicka på OK.
  
  Nu ser knappen ut så här:
  

  

• Spara undan knappen för återanvändning för ytterligare knappar.
  Välj FILE/SAVE AS. Ange valfritt filnamn, Filformat GIF, Subtype VERSION 89A - NONINTERLACED. Klicka på Spara.
  
  Nu skriver vi texten.
  
  
• Välj vit förgrundsfärg. (Klicka med vänster knapp på övre vänstra rutan under färgpaletten. RGB=255,255,255.)
  
• Klicka på textrutan ("A") i verktygsfältet.
  
• Placera textkorset mitt på den gröna knappen, klicka med vänster knapp.
  
• Skriv texten "Knapp", och ange font ARIAL, style FET KURSIV, size 7. Rekommenderas: deaktivera ANTIALIAS. Klicka på OK.
  Textens placering kan korrigeras genom att flytta markören över texten, håll ner vänster knapp och dra.
  
  Knappen är nu klar men vi kan lägga på lite skuggfärg för visst perspektivdjup.
  
  
• Väj IMAGE/SPECIAL EFFECTS/ADD DROP SHADOW. Color BLACK, Opacity 180, Blur 10, Vertical 1, Horizontal 1. Klicka på OK.
  
  Den färdiga knappen ser ut så här:
  

  

• Spara knappen under valfritt namn. Välj FILE/SAVE AS. Valfritt filnamn, Filformat GIF, Subtype VERSION 89A - NONINTERLACED.
  

För att göra fler knappar så hämtar du den tidigare sparade tomma knappen (FILE/OPEN) och skriver ny text.

Alternativ:

Man kan som alternativ istället skugga texten lite annorlunda och då skapa ett intryck av att vara "utstansad" ur knappen.

• Skriv texten enligt ovan. Välj IMAGE/SPECIAL EFFECTS/CUTOUT. Disable FILL, Shadow color BLACK, Opacity 255, Blur 0 (eller 1), Vertical 1, Horizontal 1.
  

  

Upp

Knappgalleri

• Gray marble
     

• Blue marble
     

• Purple marble
     

• Småknappar
  
               

• 88x31-Knappar
  
  

  Gray
  Blue
  Green
  Red
  Yellow
  Transparent

• JB Button program
  
  

  Knyck gärna bilder för privat bruk från mina sidor. Som tack uppskattas en länk till min hemsida. Kopiera HTML-koden: <A HREF="http://hem.passagen.se/jonasby/"> <IMG SRC="http://hem.passagen.se/jonasby/img/dsgntipslogo.gif" WIDTH=88 HEIGHT=32 BORDER=0 ALT="JB Design Logo"></A>

Upp

[ Hemsida | Skapa hemsida | HTML-Guide | WEB-design | Knappdesign | FTP-tips | Idésida | Länkar ]
Till hemsidan	Skicka gärna kommentarer till © Jonas Byström	Gästbok     Utmärkelser