Gränssnittsdesign · område 1

Guide – Photoshop för webb

Här står allt du behöver för uppgift 1, och guiden fungerar utan att du varit på lektionen. Slå upp i den när du fastnar i stället för att leta på nätet; mycket av det du hittar där handlar om tryck, inte om webb.

Vad du kan efter guiden

• Avgöra hur stor en bild ska vara för att fungera på webben
• Arbeta med lager så att allt du gör går att ångra i morgon
• Beskriva en färg med tre siffror i stället för en känsla
• Rätta ljus, kontrast och färgstick med justeringslager
• Välja rätt bildformat och motivera valet
• Redovisa varifrån dina bilder kommer och vad licensen tillåter

1. Pixel, upplösning och den enda regel du behöver

En digital bild är ett rutnät av pixlar. Inget annat.

Att 72 ppi skulle vara webbupplösning är en myt från nittiotalet. Skärmen bryr sig inte. Ändrar du bara ppi-siffran, utan att röra pixeldimensionen, händer ingenting alls med hur bilden ser ut på en webbsida.

En bild ska vara ungefär dubbelt så bred i pixlar som den yta den ska visas i, aldrig mycket mer.

Ska bilden visas i en spalt som är 600 px bred, exportera den i 1200 px. Dubbleringen finns där för skärmar med hög pixeltäthet — på dem ser en bild i exakt rätt storlek suddig ut.

Och åt andra hållet: pixlar som inte finns går inte att skapa. Förstorar du en bild på 400 × 300 till 1600 px gissar programmet fram de nya pixlarna, och resultatet blir mjukt och grynigt. Leta upp en större originalbild i stället.

2. Arbetsytan

Har paneler försvunnit: Fönster → Arbetsyta → Återställ Essentials. Det är det första du ska prova när något ser konstigt ut.

Ångra: Ctrl+Z en gång, Ctrl+Alt+Z upprepade gånger bakåt.

3. Lager

Ett lager är ett genomskinligt ark ovanpå bilden. Det som ligger överst syns.

Praktiska vanor:

• Döp lagren. Dubbelklicka på namnet. bakgrund-himmel säger något, Lager 12 kopia gör det inte.
• Ögat till vänster slår av och på synligheten. Använd det för att jämföra före och efter.
• Ordningen spelar roll. Ett justeringslager påverkar bara det som ligger under det.

4. Icke-förstörande arbete

Det här är kursens viktigaste arbetsvana, och ett krav i uppgift 1.

Menyn Bild → Justeringar finns kvar i Photoshop, men den ska du inte använda i den här kursen. Allt som går att göra där går att göra som justeringslager i stället.

Arbetsfilen sparas som .psd med alla lager kvar. Exporten är en kopia, aldrig originalet.

Du lämnar in båda: arbetsfilerna i bildpaket/arbetsfiler/ och exporten i bildpaket/export/.

5. Färglära: HSL

En färg går att beskriva med tre siffror.

Varför HSL och inte RGB? För att HSL går att resonera om. Vill du ha samma färg fast mörkare sänker du L. I RGB måste du gissa på tre tal samtidigt och hoppas att nyansen inte glider.

hsl(210, 80%, 25%)   mörk blå
hsl(210, 80%, 45%)   mellanblå     ← samma nyans, samma mättnad
hsl(210, 80%, 65%)   ljus blå
hsl(210, 80%, 92%)   nästan vit blå

Det är en färgskala. Nyansen och mättnaden står stilla, bara ljusheten ändras. Precis så bygger du färgskalan i uppgift 3, och samma skrivsätt fungerar rakt av i CSS när du kommer dit i Webbutveckling i november.

RGB och varför skärmen blandar ljus

Skärmen har tre lampor per pixel: röd, grön, blå. Alla tre på fullt ger vitt, alla av ger svart. Det är tvärtom mot färg på papper, där mer färg ger mörkare.

Det du behöver ta med dig: det som ser rätt ut på din skärm ser inte likadant ut på någon annans. Därför mäter vi kontrast med siffror senare i kursen i stället för att tycka till.

Färgläget ska vara RGB. Kontrollera under Bild → Läge. Ligger filen i CMYK ser färgerna matta ut och exporten blir fel.

6. Justeringslager och Nivåer

De flesta bilder blir bättre av en enda justering: Nivåer.

Histogrammet

Nivåer visar ett histogram — en kurva över hur många pixlar som finns vid varje ljushet. Vänsterkanten är svart, högerkanten är vit.

• Kurvan slutar långt från kanterna → bilden är platt och grådaskig
• Kurvan är hoptryckt mot vänster → bilden är mörk
• Kurvan är hoptryckt mot höger → bilden är ljus

De tre reglagen

Så här gör du:

1. Lagerpanelen → Nytt justeringslager → Nivåer.
2. Dra in svart- och vitpunkten till kurvans ändar.
3. Justera mittpunkten tills ljusheten känns rätt.
4. Klicka ögat av och på för att jämföra.

Tio sekunder, och det räcker för de flesta bilder.

Vitbalans

I Nivåer finns tre pipetter. Mittenpipetten sätter gråpunkten: klicka på något i bilden som ska vara neutralgrått — en betongvägg, en asfaltsyta, en vit vägg i skugga — så försvinner färgsticket. Hittar du inget grått, lägg ett justeringslager Färgbalans och dra försiktigt.

Kurvor

Kurvor är samma sak som Nivåer fast med fler handtag: du kan flytta mörka och ljusa partier oberoende av varandra. Behöver du det märker du det. Innan dess räcker Nivåer.

7. Beskärning och uppräting

Beskärning är inte att ta bort det som är i vägen. Det är att bestämma vad bilden handlar om.

1. Välj beskärningsverktyget, C.
2. Bocka ur Radera beskurna pixlar i alternativfältet. Då går beskärningen att ändra senare.
3. Välj bildförhållande medvetet i alternativfältet: 16:9, 4:3, 1:1. Frihandsbeskär inte allt — ett gemensamt förhållande får bilderna att se ut att höra ihop.
4. För att räta upp: klicka Räta upp och dra en linje längs något som ska vara vågrätt.

Tredjedelsregeln i korthet: tänk dig rutnätet 3 × 3 över bilden och lägg det viktiga längs linjerna eller i korsningarna, inte mitt i. Det är en tumregel, inte en lag. Layout och komposition går vi igenom ordentligt i Figma-blocket i oktober.

8. Bildformaten

Så väljer du:

• Är det ett foto? WebP i första hand, JPG som reserv.
• Är det ritat, med skarpa kanter och få färger? SVG om du har vektorfilen, annars PNG.
• Behöver bakgrunden vara genomskinlig? WebP, PNG eller SVG. Aldrig JPG.

Om komprimering. JPG och WebP kastar bort information för att göra filen mindre. Det kallas destruktiv komprimering. Kvalitet 100 är slöseri — skillnaden mot 80 syns nästan aldrig, medan filen ofta blir dubbelt så stor. Prova 80, titta noga på detaljer och mjuka övergångar som himmel, och gå ner till 70 om det håller.

Spara aldrig om en JPG flera gånger. Varje omsparning kastar bort mer. Arbeta i .psd och exportera på nytt när du behöver ändra.

9. Export för webb

Använd Arkiv → Exportera → Exportera som. Där ser du filstorleken innan du sparar.

Kryssen sparas i din webbläsare. Nollställ alla kryss

Filnamn

Kursens standard är tema-motiv-bredd.format:

hamn-kran-1200.webp
hamn-kran-600.webp
hamn-bat-morgon-1200.jpg

Namnet ska gå att förstå om ett halvår, och det ska sortera sig självt i en lista.

Exportloggen

I uppgiften ska du redovisa dina val. En tabell i bildpaket/exportlogg.md:

Kolumnen längst till höger är den som skiljer C från E. Det räcker inte att välja rätt — du ska kunna säga varför.

10. Bildrättigheter

Creative Commons

Attribution

Så här ser en korrekt källhänvisning ut:

Titel – av Fotografens Namn, CC BY-SA 4.0, hämtad från exempel.se/bild/123, 2026-08-25

Fyra delar: vad, vem, vilken licens, var och när.

AI-genererade bilder

Rättsläget är oklart och skiljer sig mellan länder. I den här kursen gäller: du får använda AI-genererat material, men det ska anges i källförteckningen med vilket verktyg och vilken prompt. Behandla det som vilken annan källa som helst.

11. Ta det längre

• Lagermasker. I stället för att sudda bort något målar du på en mask: svart döljer, vitt visar. Ångra genom att måla vitt igen. Klicka på maskikonen längst ner i lagerpanelen.
• Smarta objekt. Högerklicka på ett lager → Konvertera till smart objekt. Nu kan du skala ner och upp igen utan kvalitetsförlust, och filter går att ändra i efterhand.
• Justeringslager på bara ett lager. Håll Alt och klicka mellan justeringslagret och lagret under. Justeringen urklippas och påverkar bara det lagret.
• Testa tre kvalitetsnivåer. Exportera samma bild i kvalitet 60, 75 och 90. Titta på dem i 100 % och jämför filstorlekarna. Välj den lägsta som fortfarande håller. Det är ett A-krav i uppgiften.
• Skriv alt-texten redan nu. En mening som beskriver vad bilden visar, för någon som inte ser den. Två fiskebåtar vid kaj i morgondimma, inte bild och inte foto av båtar. Du behöver den i Webbutveckling om tre veckor.

12. Felsökning

13. Snabbreferens

Kortkommandon

Arbetsordning för en bild

1. Öppna originalet
2. Beskär och räta upp          (Radera beskurna pixlar urbockat)
3. Lägg justeringslager         Nivåer: svart, vit, mitt
4. Vitbalansera vid behov       gråpipetten
5. Spara som .psd               bildpaket/arbetsfiler/
6. Exportera                    bildpaket/export/, rätt format och bredd
7. Anteckna i exportloggen      format, bredd, storlek, varför
8. Anteckna i källförteckningen källa och licens

Kraven i uppgift 1, i korthet