Att göra en knapp i Photoshop CS2

ett

1. Skapa ett nytt dokument. (Arkiv - Nytt) Om du vet hur stor knappen skall vara skriver du in det här. Annars är 100 x 50 ett bra startmått; större knappar behövs sällan. Upplösning 72. Bakgrundsinnehåll: Vit. Klicka OK.


tva

2. Gör ett nytt lager. På lagerpaletten klickar du på Skapa ett nytt lager; en liten ikon i nedre kanten av paletten.


tre

3. Se till att det nya lagret - som heter Lager 1 - är markerat och välj rektangulär markering från verktygsmenyn. På egenskapsmenyn (ovanför arbetsytan) kan du som Stil välja Fastställd Storlek och därefter ett bra mått på knappen, till exempel 80 px gånger 20 px. Klick någonstans mitt på arbetsytan så får du en markeringsram i de fastställda måtten. Om ramen blev väldigt liten, zooma in något med förstoringsglaset.

 

4. Se till att lagret 1 fortfarande är markerat. Klicka på Förgrundsfärgen (Ange förgrundsfärg) och välj en lämplig färg för knappen.


5. Se till att lagret 1 fortfarande är markerat (tjatigt men viktigt). Välj hinken (Färgpyts) från verktygsmenyn. Hinken kan vara dold bakom Övertoning men är placerad till höger om suddgummit. Klicka en gång innuti markeringen. När du har målat rektangeln, tryck Ctrl D för att bli av med markeringsramen.

 


6. Kontrollera nu att du bara har två lager och att miniatyren av Bakgrund är helt vitt och att miniatyren av Lager 1 innehåller en färgad rektangel. Om inte - börja om.


7. Dubbelklicka på Lager 1's tomma, markerade fält i lagerpaletten. Alltså: Bakgrundslagret har en liten lås-ikon för att visa att lagret är låst (!); Lager 1 har ingenting på motsvarande plats. Dubbelklicka ungefär där lås-ikonen skulle befunnit sig om Lager 1 varit låst. Du får nu upp lagerstilspaletten. Dubbelklicka (obs dubbel) på Avfasning och Relief och lek med inställningarna. (Lagerstils-fönstret går att flytta så att du hela tiden kan se din knapp och vad de olika inställningarna gör.) När du är nöjd klickar du på OK.


 

8. Se till att lagret 1 fortfarande är markerat (fortfarande tjatigt men viktigt). Välj Textverktyget från verktygspaletten. OBS! Innan du börjar skriva så ändrar du färg på texten, annars kommer du att skriva bokstäver som har samma färg som knappen och alltså bli osynliga. Ändra också storlek vid behov (ex 24 punkter om du använde mina mått ovan) Båda dessa inställningar gör du från egenskapsmenyn ovanför arbetsytan. Klicka därefter någonstans på knappen och börja skriva. När du skrivit klart väljer du Flytta från verktygspaletten (översta högra verktyget) och flyttar onkring texten så att den ligger rätt på knappen.


9. Lägg märke till att du nu har tre lager. Spara knappen i detta läge (Spara som... från Arkiv-menyn) och spara som Photoshop-dokument (.psd). Detta för att du enkelt ska kunna göra ändringar på kanppen senare.


10. När knappen ser klar ut, välj Bild -Rensa från översta rullgardinsmenyerna. I fönstret som dyker upp skall alla fyra kryssrutorna i nedre halvan vara förbockade. De övre radioknapparna spelar ingen roll. Klicka OK


11. Välj nu "Spara för webben..." Då öppnas ett nytt fönster och du kan kontrollera om GIF eller JPG ger minsta storlek på filen. Inte så superviktigt. Välj spara och se till att du sparar knappen inmne på sajten i katalogen "bilder" eller "knappar" eller vad du nu förberett med.
Tänk på att ge knappen ett bra namn. Ska du göra roll-overknappar är följande standard lämplig: knapptext_läge.format. Tex: hem_over.jpg eller hem_upp.jpg. OBS! Inga å ä ö, mellanslag, versaler eller konstiga tecken annat än underscore.


12. För att göra rollover, gå tillbaks till photoshop (om du lämnat programmet). Gör ändringar för alternativt knappläge, tex: Dubbelklicka på den lilla ikonen som ser ut som ett F på Lager 1 i lagermenyn för att ändra skuggningen (glöm inte att se till att raden Avfasning och relief är markerad) eller byt färg på rektangeln i Lager 1. Upprepa punkt 11 och byt ordet för läge i filnamnet.
   
13. Här är den färdiga knappen.
 
- Tillbaks -