Photoshop tutorial: Brug Layer comps til at lave forskellige versioner af dit webdesign

Træt af at skulle skjule de samme 12 layers, samtidig med at du skal synliggøre 4 andre? Ville du ønske man kunne gøre det med et enkelt klik? I denne korte gennemgang af Layer comps-funktionen i Photoshop, vil du lære hvordan du nemt kan skifte mellem forskellige udgaver af din psd-fil, og til sidst et lille trick til når du skal gemme dit layout i forskellige versioner, hvor forskellige layers er synlige.

Især når man arbejder med prototyper, wireframes og webdesign står man i den situation, at man skal overskue eller præsentere sin kunde for mange forskellige versioner af sin psd-fil. Det kan f.eks. være at man skal vise et web-design i forskellige farve-versioner, at man skal lave nye sideskabeloner, hvor store dele af designet skal genbruges eller at man skal præsentere forskellige interaktionsmuligheder (drop-downs, mouse-overs osv.). I sådanne situationer er ’Layer comps’ et godt værktøj at have ved hånden.

Layer comps er faktisk et forholdsvist enkelt værktøj, men det kan spare dig rigtig mange klik, når du arbejder med komplekse psd-filer. Funktionaliteten går i al sin enkelthed ud på at hjælpe dig, med at administrere hvilke af dine layers der er synlige og hvilke der er skjult. Med et enkelt klik, kan du tage et snapshot af hvilke layers du har aktive. Hvis du herefter skjuler og synliggør en række andre layers, kan du også gemme denne visning, og hurtigt vende tilbage til dit forrige snapshot. Lad os tage et konkret eksempel.

I dette eksempel arbejder jeg på at lave et meget enkelt website, men jeg har allerede en del elementer i spil, og jeg er ikke helt sikker på hvilken version, jeg vil arbejde videre med. Som du kan se, har jeg gjort mig umage med at navngive mine layers. Men til trods for besværet med at holde de mange layers overskuelige, kræver det stadig, at jeg holder tungen lige i munden og en smule tålmodighed at skifte mellem forskellige versioner af mit design.

Jeg synes nu at have fundet en idé til at design, som jeg synes om, og denne vil jeg gerne kunne vende tilbage til. Jeg åbner derfor min Layer comps-palette (Windows > Layer Comps). Det eneste jeg behøver at gøre på nuværende tidspunkt er, at trykke på ’Create New Layer Comp’ – ikonet ligner det man bruger til at skabe et nyt layer i Layers-palletten. Jeg får nogle valgmuligheder. Jeg kan vælge at give min Layer comp et navn (hvilket anbefales), og jeg skal vælge hvorvidt jeg vil gemme Visibility, Position og Appearance. I første omgang er jeg kun interesseret i at gemme Visibility, så jeg trykker blot ok efter at have navngivet min nye Layer comp ’Grønt design’.

Jeg vil dog også lave en version, hvor jeg i stedet for den grønne grotesque-font benytter mig af den en stor grå antiqua-font. Derfor deaktiverer jeg det ene tekst-layer og aktiverer det andet. Herefter gemmer jeg en ny Layer comp og kalder den ’Gråt design’.Jeg kan nu springe mellem de forskellige designs, ved at klikke på det lille ikon til højre for min Layer comp.

Derefter laver jeg også versioner, med en pil der peger til højre. Jeg har også mulighed for at lege med opaciteten i den hvide bjælke – jeg skal blot huske at ændre opaciteten på selve layeret, og huske at sætte hak i Appearance når jeg laver min Layer comp.

Hvis jeg senere hen finder ud af at min skrifttype i en af kompositionerne var for stor, så skal man naturligvis være opmærksom på, at skrifttypen ikke er en del af de informationer som gemmes i en Layer comp, og derfor vil ændringen af skrifttypen slå igennem i alle de Layer comps hvor det pågældende layer er aktivt.

Hvis du tilføjer nye layers efter du har lavet en Layer comp, så vil disse naturligivs ikke pludselig blive en del af din Layer comp. Men hvis du ønsker at opdatere en Layer comp, kan du gøre dette på det lille ikon for ’Update Layer Comp’ i bunden af Layer comp-paletten.

Sletter du et layer, som blev brugt i en Layer comp, eller laver du andre ændringer der har betydning for en Layer comp, så vil der fremkomme en lille gul advarsels-trekant til højre for titlen på din Layer comp. Dette betyder at din Layer comp er ude af sync, og du skal opdatere kompositionen. Det betyder blot, at du bør tjekke om alt er som det skal være i din Layer Comp før du trykker på ’Update Layer Comp’-knappen.

Og til sidst: tippet du ville ønske du havde kendt, sidste gang du arbejde med et webdesign. Når du har lavet en række Layer comps af dit webdesign, og du skal til at gemme hver enkelt Layer comp til din kunde, kan du med ganske få klik eksportere samtlige layercomps til individuelle png eller jpeg-billeder! Ja endda en pdf-præsentation. Og det er helt automatisk! Og hvis der er noget vi godt kan lide, så er det automatik. Du skal blot vælge ’Files > Scripts > Layer comps to files/PDF’ og følge de respektive guides. Det er meget enkelt. Denne funktion er også guld værd, hvis du skal behandle en lang række billeder på næsten samme måde. Skal du f.eks. lægge det samme layer oven på 10 billeder, så læs dine billeder ind i en psd-fil, så hver fil ligger som et layer (File > Scripts > Load files into Stack), placer det ønskede layer øverst og lav en Layer comp for hver fil du vil lave. Et voila, så har du en bunke filer baseret på dine Layer comps. I mange tilfælde vil du kunne opnå det samme med en action, men jeg synes ofte dette er både nemmere, hurtigere og du har langt højere kontrol over det endelige resultat.

God Photoshop-lyst!