Lektion 37 - knapper til din hjemmeside 
   
lav dem selv i Photoshop Elements - v9 er anvendt her, men alle billedprogrammer kan anvendes.
   
 
 
 
 
Det er slet ikke så svært, bare tag det stille og roligt - trin for trin.
 
     

   
   
   
GØR SÅDAN
   
    1 
Åbn din PSE og klik på filer og vælg New Blank File. Nu kommer dette vindue op:
 

   
Udfyld Width og Height med de mål dine knapper skal have. Her har jeg valgt 150 x 35 pixel.
 
 
      
  2
Nu skal du vælge farven til knappen i feltet Background Color. Du kan vælge mellem hvid og den baggrundsfarve du har, eller vælger i din PSE. Her har jeg valgt den farve siden har her Hex: #1a1a1a 
 
    Her er jeg nødt til at lave en hvid kant, ellers kan du jo ikke se den! :o)


   
  3 
Klik OK og nu har du en grundskabelon til dine knapper og den skal gemmes i din hjemmesidemappe i Image mappen.  Du skal jo bruge den når skal igang med de øvrige knapper til din hjemmeside.
     
     
     
   
  4
Åbn nu din knapskabelon i PSE igen og vælg Rektangle Tool


 
 
 
   
 5
Nu går du i Style Menu øverst og vælger f.eks. stylen Simpel Pillow

 
     
Lav en markering på din knap med + tegnet (musen) og vær omhyggelig med at ramme hjørnerne øverste venstre og nederste højre - slip og vupti, nu begynder det at ligne noget.


 
 
 
 
  4
Nu skal du have noget tekst på.  Klik på T for tekstværktøj i venstre side af dit skærm- billede. Vælg skrifttype, farve m m i menuerne over skærmbilledet.
 

 
Når du er tilfreds, klikker du på menuen Layers og vælger Flatten image og nu er lagene lagt sammen til ét lag. Hvis du vil gemme lagene, så gem i formatet PSD før du gemmer i JPG.  
   
   
   
   
     
 5
Klik nu File og Gem Som og gem din knap med et filnavn uden STORE bogstaver og uden MELLEMRUM i filnavnet .jpg
   
Gem til  imagemappen i din hjemmesidemappe på din PC.
   
 
********** 
 
 

 
Sådan laver du en OVAL knap
 
   

 
 
 
1
Åbn

din rektangulære knap i dit billedprogram.
   
 
 
 
 
 
2
Vælg farve
klik på Forgrundsfarven og vælg den farve din hjemmeside har som bundfarve.
 

   
 
 
 
   
 3
Set Color for New Layer
finder du øverst i menulinien over skærmbilledet. Her vælger du den farve din knap skal have.


 
 
 
 
 
4
Elipse Tool
Vælg nu værktøjet Elipse Tool og træk en elipse på din rektangulære knapskabelon. I eksemplet her er baggrundsfarve og knapfarve ens: Hex:  #1a1a1a


   
   
 
 
 
5
Style menu
Her vælger du den style din knap skal have f.eks. Simple Pillow Emboss.


 
 
 
 
 
6
Gem knappen
Klik nu Flatten image nederst i Layers menuen og gem knappen i din knappemappe og du har en skabelon du kan bruge når du skal lave nye knapper.


 
   
   
7
Tekst på knappen
Nu åbner du din knap skabelon igen og vælger værktøjet Text Type Tool i venstre  side.
 

   
 
 
 
  8
Tekst farve
Nu skal du i Color menu igen og vælge den farve din tekst skal have. Når du har skrevet  tekst på knappen klikker Layer og Flatten image for at lægge tekst laget sammen med knaplaget - og klik Gem igen.


 
    
Nu ser den sådan ud
 

 
 
 
9
Klar til hjemmesiden
Når du nu indsætter den på din hjemmeside, går farven udenom ovalen i ét med baggrundsfarven på din hjemmeside og det ser bare flot ud.                                
       
 
 
      Rigtig god fornøjelse - og vær ikke bange for at det bliver knap så godt!
          
TILBAGE