Photoshop-guiden

Välkommen till Webbdesignguidens Photoshop-guide! Photoshop är ett mycket lättanvänt och kraftfullt verktyg för att göra grafik till hemsidor.

Vad är Photoshop?

Photoshop är världens mest använda bildbehandlingsprogram, och utvecklas av Adobe. Förutom bildbehandling så är Photoshop också ett mycket kraftfullt program för att skapa grafik till hemsidor. Photoshop gör det väldigt enkelt att skapa snygg webbdesign och exportera bilder för att användas på webben.
Eftersom Webbdesignguiden handlar om just webbdesign kommer denna guide att rikta in sig på webbdesign snarare än bildbehandling i Photoshop.

Shapes

Man använder Shapes ofta när man jobbar med webbdesign i Photoshop. Förutom vanliga rektanglar och cirklar finns även ett användbart verktyg för att skapa rektanglar med rundade hörn, samt Custom shapes med ett stort antal inbyggda shapes som är väldigt användbara.
När du ska göra en rektangel med rundade hörn är ”radius” en viktig inställning att hålla reda på. Det är här du ställer in hur pass rundade dina hörn ska vara.

När du ska infoga en Custom shape så dyker det upp en meny längst upp där du kan bläddra bland olika Custom shapes. Ett tips är att klicka på den lilla pilen och sedan välja ”All”. Då kommer alla inbyggda Custom shapes att synas i listan.
Det finns massor med gratis Custom shapes att ladda ner från nätet som man kan ladda in i Photoshop. Hur man laddar in dessa går vi in på senare i denna kurs.
Det är enkelt att lägga till snygga grafiska effekter på sina Shapes via Layer styles. Mer om detta under Layer styles.

Text

Att jobba med text i Photoshop påminner en hel del om t.ex. Word. Du kan välja teckensnitt, göra texten fet eller kursiv, centrera eller vänster- eller högerställa samt ändra storlek.

Det man ska känna till vad gäller text i Photoshop är någonting som heter anti-aliasing (kantutjämning på svenska). Utan anti-aliasing så blir texten väldigt kantig. Photoshop har ett par olika sätt som programmet jämnar ut kanter på och du bläddra mellan dem i menyn. Det finns ingen inställning som är ”den rätta”, utan här får man experimentera lite och se vilken typ som man tycker passar bäst för den text man arbetar med.

Det finns ett händigt fönster där du kan göra finjusteringar på din text. Du får fram fönstret genom att klicka på Window i huvudmenyn och sen Character. När man arbetar med stor text, t.ex. i en logotyp, kan det vara smidigt att t.ex. kunna ändra på avståndet mellan bokstäverna eller höjden på teckensnittet.

Jobbar man med brödtext kan man ofta göra texten trevligare att se på samt mer lättläst genom att öka radavståndet.
Precis som med Shapes kan man lägga till läckra grafiska effekter på sin text, med hjälp av Layer styles.

Jobba med lager

I Layers-panelen arrangerar du dina lager, tar bort lager och lägger till nya lager, ändrar opacitet, sorterar lager i mappar etc. Allting du skapar i Photoshop läggs på ett lager och kan nås från Layers-fönstret.
Du kan ta tag i ett lager och dra-och-släppa för att placera ett lager längre upp eller längre ner i listan.
Du kan också döpa dina lager, vilket gör ditt projekt mycket mer lättarbetat om du har många lager.

Här kommer en förklaring av de mest användbara funktionerna i Layers-fönstret:

1. ”fx” syns om du har Layer styles på ditt lager. Dubbelklicka för att öppna Layer styles. Dina olika Layer styles syns i en lista under lagret. Du kan dölja alla dessa genom att klicka på uppåtpilen längst till höger.
2. Dubbelklicka här för att öppna Layer styles, även om du inte har några Layer styles på lagret. Mycket praktisk genväg!
3. Ställ in lagrets opacitet/genomskinlighet.
4. Dra-och-släpp ett lager hit för att ta radera det.
5. Klicka här för att skapa ett nytt lager.
6. Klicka här för att skapa en mapp. Mappar är händiga när man har många lager och behöver gruppera dem.
7. Klicka på ögat för att dölja ett lager. Klicka igen för att visa.

Layer styles

Med layer styles kan man applicera snygga effekter på sina lager. Du når panelen Layer styles genom Layer -> Layer Style -> Blending options i huvudmenyn, eller genom att dubbelklicka till höger om ditt lager i Layers-fönstret.

Namnen på de olika effekterna är ganska självförklarande och det bästa sättet att lära sig mer om Layer styles är antagligen genom att leka runt med de olika effekterna på egen hand. När det kommer till webbdesign är det mycket vanligt att jobba med Drop shadow, Color/Gradient overlay och Stroke.

Om man har gjort en Layer style med en blandning av flera olika effekter och vill kunna använda denna Layer style på andra lager i framtiden finns det en smidig möjlighet att spara sina inställningar med hjälp av knappen ”New Style…” till höger. Ge din Layer style ett namn och spara. Nu kan du snabbt applicera din Layer style genom panelen Styles.
Om du inte har Styles-panelen öppet kan du öpna det genom att klicka på Window i huvudmenyn och välja Styles.

Ladda in nya Presets

Presets gör att man kan använda tillgångar som andra skapat i sina egna projekt. Man kan också skapa egna Presets för enklare återanvändning i olika projekt, samt för att dela med sig till andra. Exempel på vanliga Presets är Custom shapes, Styles och Gradients, men det finns en hel uppsjö.
Det finns en mängd gratis Presets att ladda ner från Internet. Använd Google för att hitta Presets, och ladda ner dem till datorn.

För att visa hur man laddar in en ny Preset i Photoshop använder vi i detta exempel en Custom shape som vi laddat ner från Adobe’s hemsida. Eftersom det är en Custom shape så ska den ligga i Custom shape-mappen under Presets. Först måste du gå in i din Adobe-mapp, vilken oftast ligger under Program på din hårddisk (Exempelvis Dator -> Enhet C (C:) -> Program). Dubbelklicka sen på din Photoshop-mapp, och sen på Presets. Sen lägger du din Preset i motsvarande mapp; i detta exempel hade vi ju en Custom shape så vi lägger den i Custom shapes-mappen

Nu när våran Custom shape ligger inlagd i rätt mapp så att Photoshop kan komma åt den måste vi ladda in den i själva programmet. Inne i Photoshop, i Shape-menyn, klickar du på den lilla pilen för att få fram menyn som hanterar alla Preset-inställningar. Välj ”Load Shapes…”, och navigera dig fram till din Custom shapes-mapp inne i Presets-mappen, och dubbelklicka på den Custom shape du vill ladda in. Nu är du klar att använda din nya Custom shape!

Några snabba tips

  • Hotkeys gör det snabbare att jobba med Photoshop, exempel: Move tool: V. Shape tool: U. Marquee tool: M. Text tool: T.
  • Du kan vrida, vända och flippa över lager genom Edit -> Transform, eller snabbkommando Ctrl + T.
  • När du ändrar storlek på ett lager kan du hålla ner shift-tangenten för att bibehålla proportionerna.
  • För att snabbt skapa en kopia av ett lager kan du hålla ner shift och alt och sen dra i det lager du vill kopiera.
  • För att sammanfoga/slå ihop lager, markera de lager du vill sammanfoga i Layers-panelen och tryck Ctrl + E.
  • Kopieras inte det du vill när du använder Edit -> Copy eller Ctrl + C? Prova Copy merged istället.
  • Sätt på och stäng av lager-snappande via View -> Snap.