Gränssnittsdesign · område 1

Justerings- och fyllningslager

Nitton verktyg ligger i menyn Nytt justeringslager. Här står vad var och en är till för, när du tar den och hur du använder den. Läs inte framifrån – slå upp det du står inför.

Menyerna heter samma sak i svensk Photoshop som här. Kör du engelsk version står det engelska namnet inom parentes vid varje verktyg.

1. Det som gäller alla nitton

Fem saker fungerar likadant oavsett vilket lager du väljer. Kan du dem är halva jobbet gjort innan du öppnat något verktyg.

Lagret ligger ovanpå, originalet är orört

Ett justeringslager ändrar ingenting i bilden. Det lägger sig ovanpå som ett färgat glas och påverkar allt som ligger under det i lagerpanelen. Släng lagret och bilden är tillbaka som den var.

Masken följer med

Varje justeringslager får en vit ruta bredvid sig – en mask. Den bestämmer var justeringen syns.

• Vitt – justeringen syns
• Svart – justeringen syns inte
• Grått – justeringen syns delvis

Klicka på masken, ta en pensel och måla med svart där effekten inte ska gälla. Det är så du gör en justering lokal i stället för global: mörka ner himlen utan att mörka ansiktet.

Vill du börja tvärtom – dölj allt och måla fram effekten – markera masken och tryck Ctrl+I för att invertera den. Då är den svart, och du målar med vitt.

Urklippsmask begränsar till ett enda lager

Ligger flera bilder i dokumentet påverkar justeringen alla under sig. Vill du att den bara ska gälla lagret precis under: håll Alt och klicka på linjen mellan de två lagren i panelen. En liten pil visar att lagret är fastklippt.

Opacitet doserar

Blev effekten för stark? Sänk lagrets opacitet i stället för att dra tillbaka reglagen. 50 % opacitet är en halv effekt, och det går att ändra i efterhand.

Blandningsläge styr vad som påverkas

• Färg – lagret ändrar bara färgen, inte ljusheten
• Luminans – lagret ändrar bara ljusheten, inte färgen

Ett Kurvor-lager i läget Luminans höjer kontrasten utan att färgerna blir starkare på köpet. Det är skillnaden mellan en bild som ser justerad ut och en som ser bra ut.

2. Vad vill du göra

Slå upp problemet, få verktyget.

3. Arbetsordningen

Verktygen är inte utbytbara mot varandra, och ordningen spelar roll. Justera i den här följden så motarbetar inte stegen varandra.

1. Beskär och räta upp. Innan något annat – det ändrar vad histogrammet visar.
2. Ton. Nivåer eller Kurvor. Sätt svart, vitt och mellantoner.
3. Färgstick. Gråpipetten i Nivåer, annars Färgbalans.
4. Färgstyrka. Lyster, sparsamt.
5. Lokala justeringar. Samma verktyg igen, men med mask.
6. Look, om du vill ha en. Toningskarta eller Färgsökning, sist av allt.

Skälet till att looken kommer sist: den förutsätter att bilden redan är korrekt. Lägger du en look på en gulstucken bild får du en gulstucken look.

4. Fyllningslager

Tre av de nitton fyller en yta i stället för att justera det som finns.

Heltäckande färg (Solid Color)

När du tar den. Du behöver en färgplatta: bakom en textrubrik, som tonplatta i ett gränssnitt, som bakgrund i en mockup. Också när du snabbt vill prova tre olika bakgrundsfärger mot samma layout utan att måla om något.

Så gör du. Lagerpanelen → Nytt fyllningslager → Heltäckande färg. Välj färgen; dubbelklicka på lagret för att byta den senare. Måla på masken med svart där färgen inte ska synas.

Tricket värt att kunna. Sätt blandningsläget till Färg och lägg lagret över en bild, så färgas bilden om i din färg men behåller alla sina detaljer. Sänk opaciteten till 20–30 % för en tonad variant.

Toning (Gradient)

När du tar den. Den vanligaste webbanvändningen av alla nitton: mörka ner underkanten på en bild så att vit text går att läsa ovanpå. Också mjuka övergångar bakom en hjältebild, och vinjetter.

Så gör du.

1. Nytt fyllningslager → Toning.
2. Välj en toning som går från svart till genomskinlig.
3. Sätt Typ till Linjär och Vinkel till 90°.
4. Medan rutan är öppen: dra i bilden för att flytta var övergången ligger.

Varför det är rätt lösning. Alternativet är att mörka hela bilden, och då tappar du motivet. En toning mörkar bara där texten står. Kontrast mellan text och bakgrund är ett krav senare i kursen, och det här är sättet att klara det utan att förstöra bilden.

Mönster (Pattern)

När du tar den. Sällan. En textur på en yta, ett papperskorn bakom en layout, en platshållare för något du inte ritat än.

Så gör du. Nytt fyllningslager → Mönster, välj ur listan, ställ Skala.

Var ärlig mot dig själv här. Mönster på webben görs nästan alltid som en liten upprepad bildfil eller i CSS, inte som ett inbränt lager. Använd den för att skissa, inte för att leverera.

5. Ton och ljus

Fyra verktyg som styr hur ljus bilden är och hur stor skillnaden är mellan mörkt och ljust. De gör delvis samma sak, med olika precision.

Ljusstyrka/kontrast (Brightness/Contrast)

När du tar den. Bilden är nästan rätt och behöver en knuff. Du har bråttom. Två reglage, inget att lära sig.

Varför den ändå inte är förstahandsvalet. Den är trubbig. Den flyttar hela bilden på en gång, och drar du för långt klipps de ljusaste och mörkaste partierna bort – detaljerna i himlen eller i skuggan blir ren vit och ren svart, och de går inte att få tillbaka.

Ta den när bilden ska bli lite ljusare. Ta Nivåer när den ska bli bra.

Nivåer (Levels)

När du tar den. Nästan alltid, som första justering. En bild som ser grådaskig, platt eller livlös ut har nästan alltid ett histogram som inte når ut till kanterna.

Så gör du. Se Photoshop för webb, avsnitt 6 – där står histogrammet och de tre reglagen.

Det som ofta missas: pipetterna. Tre stycken, till vänster i rutan. Mittenpipetten sätter gråpunkten – klicka på något i bilden som ska vara neutralgrått och färgsticket försvinner. En betongvägg, en asfaltsyta, en vit skjorta i skugga.

Nivåer per kanal. I menyn överst kan du byta från RGB till Röd, Grön eller Blå och sätta svart- och vitpunkt för en färg i taget. Det är den exakta metoden mot färgstick när pipetten inte hittar något grått.

Kurvor (Curves)

När du tar den. När Nivåer inte räcker. Nivåer ger dig tre handtag; Kurvor ger dig så många du vill, och du kan flytta mellantonerna utan att röra svärtan.

Så gör du. Klicka på linjen för att sätta en punkt. Dra upp för ljusare, ned för mörkare. Den vågräta axeln är hur ljus pixeln är nu, den lodräta hur ljus den blir.

De två formerna du behöver kunna.

• S-kurva – en punkt som dras ned i den mörka fjärdedelen, en som dras upp i den ljusa. Ger kontrast utan att klippa någonting. Den vanligaste kurvan som finns
• Lyft mellantonerna – en enda punkt mitt på kurvan, dragen uppåt. Ljusar upp bilden utan att svärtan blir grå

Kurvor per kanal. Precis som Nivåer har Kurvor en kanalmeny. En kurva på Blå-kanalen som dras ned i skuggorna gör skuggorna varmare. Det är så en filmisk färgsättning byggs.

Tips. Sätt blandningsläget till Luminans så höjer kurvan kontrasten utan att mättnaden ökar på köpet.

Exponering (Exposure)

När du tar den. Egentligen bara på HDR-material i 32 bitar. På ett vanligt foto gör den mer skada än nytta.

Rådet. Hoppa över den. Nivåer och Kurvor gör allt den gör, med bättre kontroll och utan att klippa högdagrarna. Den står här för att du ska veta vad den är när du ser den i menyn, inte för att du ska använda den.

6. Färg

Sju verktyg som styr vilken färg bilden har. Skillnaden mellan dem är hur mycket de träffar: allt på en gång, en färgfamilj, eller ett tonområde.

Lyster (Vibrance)

När du tar den. Bilden känns blek och du vill ha mer färg – särskilt om det finns människor i den.

Så gör du. Två reglage: Lyster höjer bara de färger som redan är svaga och skonar hudtoner. Mättnad höjer allt lika mycket, trubbigt. Dra i det övre. Låt det undre vara.

Regeln. Vill du ha mer färg: ta Lyster först. Nyans/mättnad är nästa steg, inte det första. Lyster är svår att förstöra med; Mättnad är lätt.

Nyans/mättnad (Hue/Saturation)

När du tar den. Tre helt olika jobb: byta färg på ett föremål, dämpa en enskild färg som drar all uppmärksamhet, eller göra bilden enfärgad.

Så gör du.

1. För allt på en gång: dra i reglagen direkt.
2. För en enda färg: byt från Standard i menyn till exempelvis Röda. Nu gäller reglagen bara det färgområdet. Använd pipetten för att peka ut exakt vilken färg i bilden du menar.
3. För enfärgat: kryssa i Färglägg, ställ sedan Nyans och Mättnad.

Färgbalans (Color Balance)

När du tar den. Det finns ett färgstick kvar som gråpipetten inte tog. Eller du vill medvetet ge bilden en temperatur.

Så gör du. Välj Skuggor, Mellantoner eller Högdagrar i menyn – reglagen gäller bara det tonområdet. Tre reglage: Cyan–Röd, Magenta–Grön, Gul–Blå. Dra bort från sticket. Låt Behåll ljushet vara ikryssat.

Det som gör den värd att kunna. Att kunna justera skuggor och högdagrar var för sig. Kalla skuggor och varma högdagrar är hela den look folk kallar filmisk, och det är två reglage.

Svartvitt (Black & White)

När du tar den. Bilden ska bli gråskala.

Så gör du. Sex reglage, ett per färgfamilj. Varje reglage bestämmer hur ljust den färgen blir i gråskala. Höj Röda för ljusare hudtoner. Sänk Blå för en dramatisk, mörk himmel.

Varför inte bara dra ner mättnaden. Mättnad −100 ger en platt grå soppa där en röd och en grön yta med samma ljushet blir exakt samma grå – och all skillnad mellan dem försvinner. Svartvitt låter dig bestämma översättningen färg för färg. Det är skillnaden mellan en avfärgad bild och en svartvit bild.

Bonus. Kryssa i Nyans längst ned för en tonad svartvit – sepia eller kylig blå.

Fotofilter (Photo Filter)

När du tar den. Bilden ska bli ett snäpp varmare eller kallare, och du vill inte hålla på med tre reglage.

Så gör du. Välj Värmefilter (85) för varmare, Kylfilter (80) för kallare. Ställ Täthet – 20–25 % räcker nästan alltid. Låt Behåll ljushet vara ikryssat.

Skillnaden mot Färgbalans. Fotofilter lägger samma ton över hela bilden. Färgbalans låter dig skilja på skuggor och högdagrar. Fotofilter är enklare och räcker oftare än man tror.

Kanalblandare (Channel Mixer)

När du tar den. Avancerad svartvit-konvertering, eller för att rädda en bild där en av färgkanalerna är brusig.

Rådet. Ligger utanför vad den här kursen behöver. Svartvitt gör samma jobb med begrepp som går att resonera om. Ta den om du blir nyfiken, inte för att lösa en uppgift.

Färgsökning (Color Lookup)

När du tar den. Bilden är färdigjusterad och du vill lägga en färdig look över den. En LUT (Look-Up Table) är en färdig översättningstabell: varje färg i bilden byts mot en annan enligt en fil som någon annan gjort.

Så gör du. Välj en fil i listan 3DLUT-fil. Sänk opaciteten till 30–50 % – full styrka är nästan alltid för mycket.

Varningen. Det här är ett filter, inte en korrigering. Korrigera bilden med Nivåer först. En LUT på en dålig bild ger en dålig bild med en look.

7. Omtolkning

Fem verktyg som inte justerar bilden utan översätter den till något annat. De flesta används sällan som effekt, men två av dem är verktyg du kommer att behöva.

Invertera (Invert)

När du tar den. Som effekt: nästan aldrig. Nyttan ligger i masker – markera en mask och invertera den för att vända på vad som döljs och vad som syns.

Så gör du. Det finns inga inställningar. Lagret vänder alla värden: svart blir vitt, gult blir blått.

Posterisera (Posterize)

När du tar den. Två skäl. Grafisk effekt – ett foto blir en affisch med få, platta toner. Och kontroll före export – du vill se hur bilden klarar sig med få färger. Det är exakt vad som händer i en PNG-8 eller GIF.

Så gör du. Ett enda reglage: antal nivåer. 4–8 ger tydlig grafisk effekt, 16 och uppåt syns knappt.

Tröskelvärde (Threshold)

När du tar den. Två användningar, och den andra är den viktiga.

1. Som effekt. Bilden blir ren svartvit utan gråtoner – ett stencilklipp.
2. Som mätverktyg. För att hitta bildens ljusaste och mörkaste punkt innan du sätter svart- och vitpunkt i Nivåer.

Så gör du – som mätverktyg. Lägg ett Tröskelvärde överst. Dra reglaget hela vägen åt höger så allt blir svart, backa sedan tills bara några få vita fläckar syns. Där ligger bildens ljusaste punkt. Gör tvärtom för den mörkaste. Släng lagret och sätt punkterna i Nivåer där du nu vet att de hör hemma.

Det är en av få saker i Photoshop som gör gissning till mätning.

Selektiv färg (Selective Color)

När du tar den. Du vill finjustera en enda färgfamilj utan att röra resten – ta bort ett gulstick i gröna växter, rensa upp hudtoner, justera en himmel.

Så gör du. Välj färgfamilj i menyn: Röda, Gula, Gröna, Cyan, Blå, Magenta, Vita, Neutrala, Svarta. Fyra reglage – Cyan, Magenta, Gult, Svart – styr hur mycket av varje som ska ingå i just den färgen. Relativ ändrar försiktigt i förhållande till vad som finns; Absolut ändrar med fasta steg och tar i mer.

Rådet. Kraftfull men fipplig, och den tänker i tryckfärger snarare än skärmfärger. Nyans/mättnad med en vald färgfamilj löser samma problem enklare i nio fall av tio.

Toningskarta (Gradient Map)

När du tar den. Det här är det verktyg i listan som har mest med webbdesign att göra.

Toningskarta översätter bildens ljushet till en färgskala: det mörkaste i bilden får toningens första färg, det ljusaste får den sista. Resultatet är en duotone – en bild i två färger. Använd den när en bild ska bära ett varumärkes färger.

Så gör du.

1. Nytt justeringslager → Toningskarta.
2. Klicka på toningen för att redigera den.
3. Sätt vänstra färgstoppet till din mörka varumärkesfärg, det högra till din ljusa. Ordningen spelar roll – mörkt till vänster.
4. Vill du behålla mer av originalet: sänk opaciteten, eller sätt blandningsläget till Färg.

Kopplingen framåt. Färgerna du sätter här är samma färger som blir CSS-variabler i Webbutveckling i november. Det är samma stilguide, i två olika verktyg.

8. Kombinationer

Enskilda verktyg löser sällan ett helt problem. Fyra recept som gör det.

En platt bild med färgstick

1. Nivåer – svartpunkt och vitpunkt indragna
2. Nivåer, gråpipetten – klicka på något som ska vara grått
3. Lyster – +10 till +20

Vit text som ska ligga på en bild

1. Toning – svart till genomskinlig, 90°, dragen från underkanten
2. Sänk opaciteten tills texten är läsbar men bilden inte är död
3. Kontrollera att texten går att läsa, inte att den ser läsbar ut

Bilden ska bära varumärkets färger

1. Nivåer – korrigera först
2. Svartvitt – bestäm hur färgerna översätts till grått
3. Toningskarta – mörk varumärkesfärg till ljus

Steg 2 är det som skiljer ett bra resultat från ett grötigt: du bestämmer bildens ljushetsstruktur innan du färgar om den.

En enda färg i bilden ska dämpas

1. Nyans/mättnad
2. Byt från Standard till färgfamiljen, eller peka ut färgen med pipetten
3. Dra Mättnad ned, inte Nyans
4. Behöver det bli exakt: Selektiv färg i stället

9. Vanliga fel