Effektivt design: Artboards i Photoshop

At arbejde med komplekse designprojekter i Photoshop kan hurtigt blive uoverskueligt. Især når du designer til flere skærmstørrelser, opretter flows til mobilapps, eller endda forsøger at simulere et flersidet dokument. Mange designere har traditionelt håndteret dette ved at bruge laggrupper til at adskille 'sider' eller 'skærme'. Selvom det kan fungere til simple opgaver, støder man hurtigt på begrænsninger, især når det kommer til eksport og organisering.

Forestil dig at skulle designe ti forskellige sider af en brochure eller ti skærmbilleder til en app. At holde styr på alle lagene for hver 'side' i én stor fil ved hjælp af grupper kan blive et mareridt. Eksportprocessen, hvor man typisk skal skjule og vise grupper manuelt for at gemme dem som separate billedfiler, er tidskrævende og ineffektiv. Og hvis dit mål er et flersidet dokument som en PDF, ender du ofte med en samling af billeder, hvor tekst ikke kan markeres, og interne links er umulige. Dette er her, Photoshops Artboards-funktion træder i karakter som en gamechanger.

Hvad er Artboards i Photoshop?

Artboards (på dansk ofte oversat til 'tegnelærreder' eller simpelthen Artboards) er som individuelle, uafhængige lærreder inden for ét enkelt Photoshop-dokument. Tænk på dem som separate arbejdsområder, der kan have forskellige størrelser og orienteringer, alt sammen samlet i én fil. Hvert Artboard fungerer som en container for dine designelementer (lag, grupper, smarte objekter osv.), der er specifikke for netop det Artboard.

Denne funktion blev introduceret for at gøre Photoshop mere egnet til moderne digitalt design, hvor behovet for at arbejde med flere skærme eller iterationer samtidig er almindeligt. I stedet for at have separate .PSD-filer for hver skærm eller side, kan du have dem alle samlet og organiseret under ét tag ved hjælp af Artboards.

Hvorfor bruge Artboards? Fordele i workflowet

Brugen af Artboards revolutionerer måden, mange designere arbejder på i Photoshop, især i forhold til flersidede eller multi-skærm projekter. Her er nogle af de primære fordele:

• Organisation: Alle dine 'sider' eller 'skærme' er samlet i én fil, men holdt pænt adskilt i Artboards-panelet. Du kan navngive Artboards, omarrangere dem og nemt navigere imellem dem. Dette reducerer rod og gør det nemt at finde det, du leder efter.
• Effektiv iteration: Du kan hurtigt duplikere et Artboard for at skabe en ny version eller en ny skærm i et flow. Ændringer på ét Artboard påvirker ikke de andre, medmindre du bruger delte elementer som Smart Objects på tværs af Artboards.
• Strømlinet eksport: Dette er en af de største fordele. Photoshop kan eksportere *alle* Artboards i et dokument samtidigt. Du kan eksportere hvert Artboard som en separat fil (PNG, JPG, SVG, PDF) med blot få klik. Dette sparer utrolig meget tid sammenlignet med manuel eksport af laggrupper.
• Bedre præsentation: Artboards giver en klar struktur, der er nem at præsentere for kunder eller teammedlemmer. Du kan vise hele flowet eller alle varianter i én fil.
• Integration med andre værktøjer: Som nævnt i den originale forespørgsel, kan Artboards i Photoshop nemt importeres i værktøjer som Zeplin, der bruges til design-handoff til udviklere. Hvert Artboard repræsenterer typisk en skærm.

Sådan opretter du Artboards i Photoshop

Der er flere måder at komme i gang med Artboards på, afhængigt af om du starter et nyt projekt eller arbejder med en eksisterende fil:

Opret et nyt dokument med Artboards

Dette er den nemmeste måde at starte et nyt projekt, der fra begyndelsen er tænkt med Artboards.

1. Gå til Filer > Ny... (File > New...).
2. I dialogboksen 'Nyt dokument' vælger du en forudindstilling eller indtaster dine ønskede mål.
3. Sørg for at markere afkrydsningsfeltet 'Artboards'.
4. Klik på 'Opret'.

Dit nye dokument vil nu indeholde et enkelt Artboard som standard. Du kan tilføje flere Artboards ved at vælge Artboard-værktøjet (det ligger typisk sammen med Flytteværktøjet) og klikke på plus-ikonerne, der vises rundt om det eksisterende Artboard, eller ved at tegne et nyt Artboard på lærredet.

Konverter eksisterende lag eller grupper til Artboards

Dette er løsningen på den specifikke problemstilling beskrevet i forespørgslen – hvordan man konverterer eksisterende 'sider', der er organiseret i laggrupper, til Artboards.

Processen er meget ligetil:

1. Åbn dit Photoshop-dokument, der indeholder de lag eller grupper, du vil konvertere.
2. Gå til 'Lag'-panelet (Layers panel) i højre side af skærmen.
3. Find den laggruppe, der repræsenterer en af dine 'sider'.
4. Højreklik (Ctrl+klik på Mac) på laggruppen.
5. Vælg 'Artboard fra gruppe...' (Artboard from Group...) fra genvejsmenuen.

Photoshop vil nu konvertere den valgte gruppe til et Artboard. Alle lagene, der var inde i gruppen, vil nu være indeholdt i det nye Artboard. Gentag denne proces for hver laggruppe, du vil omdanne til et Artboard.

Alternativt, hvis du har individuelle lag (der ikke er samlet i en gruppe), som du vil omdanne til et Artboard, kan du vælge disse lag i Lag-panelet, højreklikke og vælge 'Artboard fra lag...' (Artboard from Layers...). Photoshop vil så oprette et nyt Artboard, der omkranser de valgte lag.

Når du har konverteret dine grupper/lag til Artboards, vil du bemærke en ændring i Lag-panelet. Hvert Artboard vil have sin egen post, og lagene, der tilhører det, vil være indrykket under Artboardets navn. Dette giver en meget klarere struktur og overblik.

Arbejde med Artboards

Når dine Artboards er oprettet, kan du arbejde med dem ligesom med ethvert andet lærred i Photoshop, men med den fordel, at du nemt kan skifte mellem dem og se dem alle i kontekst.

• Navngivning: Dobbeltklik på navnet på et Artboard i Lag-panelet for at omdøbe det. Gode, beskrivende navne er afgørende for organisationen.
• Omarrangering: Klik og træk Artboards i Lag-panelet for at ændre deres rækkefølge. Dette påvirker rækkefølgen ved eksport til f.eks. PDF.
• Flytning af elementer: Du kan nemt trække lag eller grupper fra ét Artboard til et andet i Lag-panelet. Du kan også bruge Flytteværktøjet til at trække elementer direkte på lærredet; når du trækker et element over grænsen til et andet Artboard, vil det automatisk blive flyttet til det nye Artboard i Lag-panelet.
• Ændring af størrelse: Vælg Artboard-værktøjet. Klik på det Artboard, du vil ændre størrelse på. Du vil se håndtag rundt om Artboardet, som du kan trække i. Du kan også indtaste præcise mål i indstillingslinjen øverst.

Eksport af Artboards

Den virkelige kraft ved Artboards viser sig ved eksporten. I stedet for at eksportere hele dokumentet eller manuelt gemme laggrupper, kan du eksportere Artboards individuelt eller som et sæt.

Den mest almindelige metode er 'Eksportér som...' (Export As...).

1. Gå til Filer > Eksportér > Eksportér som... (File > Export > Export As...).
2. I dialogboksen 'Eksportér som' vil du se en liste over alle dine Artboards i venstre side.
3. Du kan vælge, hvilke Artboards du vil eksportere ved at markere dem.
4. Vælg filformat (PNG, JPG, GIF, SVG) og indstillinger for hvert Artboard eller for alle valgte.
5. Klik på 'Eksportér alle'.

Photoshop vil nu gemme hvert valgt Artboard som en separat fil i den mappe, du vælger. Filnavnene vil typisk være baseret på Artboardets navn.

For at oprette et flersidet PDF-dokument fra dine Artboards, skal du bruge en anden eksportfunktion:

1. Gå til Filer > Eksportér > Artboards til PDF... (File > Export > Artboards to PDF...).
2. Vælg destinationsmappe og filnavn.
3. Vælg dine indstillinger (f.eks. om alle Artboards skal medtages, om de skal være i rækkefølge efter navn eller placering, komprimeringsindstillinger osv.).
4. Klik på 'Kør'.

Photoshop vil nu automatisk generere et flersidet PDF-dokument, hvor hvert Artboard bliver en side. Dette løser problemet med manuel kompilering af PNG-filer og bevarer (hvis indstillingerne er korrekte og lagene er tekstlag) muligheden for at markere tekst i PDF'en (dog er Photoshop stadig primært et billedredigeringsprogram, ikke et layoutprogram som InDesign, så komplekse tekstformateringer og interne links er stadig begrænsede sammenlignet med InDesign).

Artboards vs. Laggrupper til 'Sider'

Lad os se på en direkte sammenligning mellem den gamle metode med laggrupper og den nye metode med Artboards, når målet er at håndtere flere sider eller skærme.

Ofte Stillede Spørgsmål om Artboards

Her er svar på nogle almindelige spørgsmål vedrørende brugen af Artboards i Photoshop:

Q: Kan jeg have Artboards med forskellige størrelser i samme dokument?
A: Ja, absolut! Dette er en af de store fordele ved Artboards. Hvert Artboard kan have sine egne dimensioner og opløsning, hvilket gør det perfekt til at designe til forskellige skærmstørrelser eller enheder i én fil.

Q: Hvordan flytter jeg lag fra ét Artboard til et andet?
A: Du kan enten trække laget eller gruppen fra et Artboard i Lag-panelet og slippe det ind i et andet Artboard i panelet. Alternativt kan du vælge laget/grupperne med Flytteværktøjet og trække dem visuelt fra ét Artboard til et andet på lærredet. Photoshop vil automatisk omplacere laget i det korrekte Artboard i Lag-panelet.

Q: Kan jeg bruge Smart Objects på tværs af Artboards?
A: Ja, og det er en meget kraftfuld teknik! Hvis du opretter et Smart Object og placerer kopier af det på flere Artboards, vil en redigering af det originale Smart Object opdatere alle dets forekomster på tværs af Artboards. Dette er ideelt for gentagende elementer som headere, footere eller logoer.

Q: Er Artboards kun til web/app design?
A: Nej, selvom de er særligt populære til digitalt design, kan de bruges til enhver opgave, hvor du har brug for at organisere flere separate designområder i én fil. Dette kunne være forskellige versioner af et print-design, sider i en simpel brochure, eller slides til en visuel præsentation.

Q: Er Photoshop med Artboards et fuldt udbygget alternativ til InDesign for flersidede dokumenter?
A: Ikke helt. Photoshop er stadig primært et billedredigerings- og rastergrafikværktøj. Artboards gør det *muligt* at håndtere flere sider mere effektivt, især hvis designet er meget visuelt og billedtungt. Men for dokumenter med komplekst tekstflow, typografi, master pages, indholdsfortegnelser, indeks og avancerede printindstillinger, er InDesign stadig det overlegne værktøj.

Konklusion

At konvertere dine laggrupper til Artboards er et simpelt skridt, der kan have en enorm positiv indvirkning på dit workflow i Photoshop, især hvis du regelmæssigt arbejder med designprojekter, der strækker sig over flere 'sider' eller 'skærme'. Det forbedrer organisationen, gør iteration nemmere og, vigtigst af alt, strømliner eksportprocessen markant. Ved at udnytte Artboards fuldt ud, kan du spare tid, reducere frustration og fokusere mere på selve designet i stedet for manuel filhåndtering.

Hvis du vil læse andre artikler, der ligner Effektivt design: Artboards i Photoshop, kan du besøge kategorien Design.