Lav Cirkeldiagrammer i Photoshop

At visualisere data er en essentiel del af design, især inden for brugergrænseflader (UI) og dashboards. Et cirkeldiagram er en klassisk metode til at vise forholdet mellem forskellige dele af en helhed. Selvom der findes dedikerede datavisualiseringsværktøjer, kan det være utrolig nyttigt at kunne oprette disse elementer direkte i dit designprogram som Adobe Photoshop. Dette giver dig fuld kontrol over stil, farver og integration med resten af dit design. I denne vejledning vil vi gennemgå en enkel og hurtig metode til at lave et grundlæggende cirkeldiagram i Photoshop ved hjælp af lagstilen Overgangsoverlejring (Gradient Overlay).

https://www.youtube.com/watch?v=0gcJCfcAhR29_xXO

Denne teknik er især praktisk, når du hurtigt skal lave et mockup eller en simpel illustration af data, uden at skulle importere fra eksterne kilder. Vi fokuserer på en metode, der udnytter Photoshops kraftfulde lagstilarter til at opnå resultatet.

Trin 1: Opret Basisformen – Cirklen

Ethvert cirkeldiagram starter med en cirkel. I Photoshop bruger vi Værktøjet Ellipse. Find Ellipse-værktøjet (U) i værktøjslinjen; det kan være gemt under Rektangel-værktøjet. Vælg værktøjet, og klik og træk på dit lærred. For at sikre, at du får en perfekt rund cirkel og ikke en ellipse, skal du holde Skift-tasten nede, mens du trækker. Slip museknappen først og derefter Skift-tasten, når cirklen har den ønskede størrelse.

Den farve, din cirkel har på dette stadie, er faktisk ikke afgørende. Den vil blive erstattet af overgangen, vi tilføjer senere. Du kan derfor vælge en hvilken som helst farve. Sørg for, at du opretter cirklen som et 'Formlag' (Shape Layer) – dette er standardindstillingen, når du bruger Formværktøjerne, men det er værd at dobbelttjekke i indstillingsbjælken øverst.

Trin 2: Anvend Lagstilen Overgangsoverlejring

Nu hvor vi har vores cirkelform, skal vi anvende den magi, der forvandler den til et cirkeldiagram: Overgangsoverlejring. Dobbeltklik på dit Ellipse-lag i Lag-panelet. Dette åbner dialogboksen Lagstil (Layer Style). I listen til venstre skal du finde og markere Overgangsoverlejring (Gradient Overlay). Sørg for, at der er et flueben ud for indstillingen, og klik derefter på selve teksten 'Overgangsoverlejring' for at få adgang til dens specifikke indstillinger.

Inden for indstillingerne for Overgangsoverlejring er der flere muligheder. Standardindstillingen er sandsynligvis 'Lineær'. For et cirkeldiagram har vi brug for en overgang, der strækker sig rundt om et centralt punkt – en vinkel. Skift derfor Stilen (Style) til Vinkel (Angle). Dette er kritisk for at få overgangen til at opføre sig som de sektorer, vi forventer i et cirkeldiagram.

Trin 3: Rediger Overgangen for at Skabe Sektorer

Når stilen er sat til Vinkel, skal vi definere selve overgangen. Klik på forhåndsvisningen af overgangen (den farvede bjælke) i indstillingerne for Overgangsoverlejring. Dette åbner Overgangseditor (Gradient Editor). Det er her, vi definerer farverne og placeringen af de forskellige 'stop', der repræsenterer vores diagramsektorer.

I bunden af Overgangseditor ser du en række farvede stop. Klik på det nederste venstre stop (farvestop). Klik på Farve-feltet og indtast den første farve, vi ønsker. Lad os bruge farven #6caba3 som i eksemplet. Klik OK. For at oprette en skarp adskillelse mellem sektorerne skal vi bruge flere stop. Hold musepegeren over den nederste kant af overgangsbjælken, lige til højre for det stop du netop redigerede. Du vil se et lille håndikon; klik for at tilføje et nyt stop. Sørg for, at dette stop også har farven #6caba3. Flyt dette nye stop så tæt på det foregående stop som muligt ved at trække det. Dette skaber en meget brat overgang, hvilket er præcis, hvad vi ønsker for at definere en sektor.

Tilføj nu endnu et stop lige ved siden af det stop, du netop oprettede. Skift farven på dette nye stop til den næste ønskede farve, f.eks. #a24d6a. Flyt også dette stop så tæt på det foregående stop som muligt. Vi gentager processen for den tredje sektor. Tilføj endnu et stop med farven #a24d6a. Tilføj derefter et stop lige ved siden af med den tredje farve, f.eks. #42505d. Flyt det tæt på det foregående stop.

Det sidste stop helt til højre i overgangsbjælken skal også have farven på den sidste sektor, altså #42505d i dette eksempel. Sørg for, at det er sat til denne farve.

Trin 4: Juster Stoppenes Placering for at Repræsentere Data

Nu har vi farverne, men de repræsenterer endnu ikke dataens relative størrelser. I Overgangseditor, når du klikker på et stop, kan du se og redigere dets Placering (Location %) i bunden af vinduet. Denne procentværdi bestemmer, hvor på overgangen stoppet er placeret. I en vinkelovergang svarer 0% til starten (typisk klokken 12-positionen), 25% til 90 grader (klokken 3), 50% til 180 grader (klokken 6), 75% til 270 grader (klokken 9) og 100% tilbage til 0 grader (klokken 12). Hele cirklen er 100% af overgangen.

For at repræsentere procenter i dit cirkeldiagram skal du placere stoppene strategisk. Husk, at overgangen går fra 0% til 100% rundt om cirklen (360 grader). Hvis du har en sektor på 20%, skal den strække sig over 20% af overgangen. Hvis den næste sektor er 20%, skal den strække sig fra slutningen af den første sektor (ved 20%) til 40% (20% + 20%). Den sidste sektor på 60% vil så strække sig fra 40% til 100% (40% + 60%).

Baseret på tabellen skal du justere dine stop således:

• Det første stop (#6caba3) skal være ved 0%.
• Det næste stop (#6caba3) skal være ved 20%.
• Det stop, der starter næste farve (#a24d6a), skal også være ved 20%.
• Det stop, der afslutter den anden sektor (#a24d6a), skal være ved 40%.
• Det stop, der starter den tredje farve (#42505d), skal også være ved 40%.
• Det sidste stop (#42505d) skal være ved 100%.

Ved at placere stoppene, der definerer overgangen mellem to farver, på præcis samme Placering (%) værdi, skaber du de skarpe opdelinger, der er nødvendige for et cirkeldiagram. Klik OK i Overgangseditor og derefter OK i Lagstil-dialogboksen for at se resultatet på dit lærred.

Trin 5: Tilføj Afsluttende Detaljer

Dit cirkeldiagram er nu funktionelt, men du kan tilføje visuelle forbedringer. En almindelig detalje er en kant eller streg omkring cirklen. Du kan tilføje dette i Lagstil-dialogboksen ved at markere og konfigurere Streg (Stroke). Vælg en farve (f.eks. hvid), en tykkelse og placering (typisk 'Udenfor' eller 'Indenfor').

For at adskille sektorerne visuelt kan du tilføje linjer. En simpel måde at gøre dette på er at bruge Linjeværktøjet (gemt under Formværktøjerne) eller Penneværktøjet til at tegne streger fra centrum af cirklen til kanten ved de punkter, hvor sektorerne mødes. Tegn linjerne på nye lag over cirkeldiagramlaget. Sæt farven til hvid (eller en anden ønsket farve) og juster stregtykkelsen i indstillingsbjælken for Formværktøjet eller i Egenskaber-panelet for Penneværktøjets stier.

Variation: Det Justerbare Kransediagram (Donut Chart)

Den metode, vi har beskrevet, skaber et solidt cirkeldiagram. Hvis du er interesseret i et kransediagram (donut chart), som har et hul i midten, er processen meget lig den, vi har beskrevet, men kræver et ekstra trin for at "udskære" midten. Dette kan typisk gøres ved at oprette en mindre cirkel ovenpå den store cirkel og bruge den som en maske eller ved at trække et område fra formen. En mere avanceret metode involverer at bruge Stier (Paths) og justere stregindstillinger, hvilket kan give et mere fleksibelt og justerbart resultat, som den mere omfattende vejledning du måske er stødt på, beskriver.

Tips og Fejlfinding

• Sørg altid for, at din cirkel er et Formlag, da lagstilarter fungerer bedst med vektorelementer.
• Hvis overgangen ser forkert ud, dobbelttjek at Stilen i Overgangsoverlejring er sat til Vinkel.
• Nøjagtigheden af dine datarepræsentationer afhænger fuldstændigt af, hvor præcist du placerer stoppene i Overgangseditor ved hjælp af Placering (%) værdien.
• For at flytte hele diagrammet eller ændre størrelse på det efterfølgende, skal du bruge Flytteværktøjet (V) og sikre dig, at du har det korrekte lag valgt. Hvis du vil ændre størrelsen på selve formen uden at skalere lagstilen mærkeligt, kan du vælge Formværktøjet igen og bruge Transformationshåndtagene, eller gå via Rediger > Fri Transformering Sti.

Ofte Stillede Spørgsmål (FAQ)

Q: Hvordan ændrer jeg procenterne, efter jeg har lavet diagrammet?
A: Dobbeltklik på laget, gå ind i Overgangsoverlejring, klik på overgangen for at åbne Overgangseditor, og juster Placering (%) værdierne for stoppene, der definerer sektorerne.

Q: Kan jeg have mere end tre sektorer?
A: Ja, absolut! Du tilføjer blot flere stop i Overgangseditor ved at klikke under overgangsbjælken, hvor du ønsker at tilføje et nyt stop. Husk at tilføje to stop med samme farve lige ved siden af hinanden for hver ny farves sektorafgrænsning.

Q: Er denne metode præcis nok til professionel datavisualisering?
A: Denne metode er fremragende til designmockups og illustrationer, hvor visuel præsentation er vigtigere end absolut datanøjagtighed på pixel-niveau. For meget præcise, interaktive datavisualiseringer bruges typisk dedikeret software eller webbaserede biblioteker.

Q: Hvordan laver jeg et hul i midten for at få et kransediagram?
A: Den nemmeste måde er at tegne en mindre cirkel ovenpå din cirkel og bruge den til at maskere eller trække fra formen. Alternativt kan du bruge Penneværktøjet til at tegne stier, der definerer kransen, og anvende stregindstillinger på stien.

Konklusion

At mestre oprettelsen af cirkeldiagrammer direkte i Photoshop ved hjælp af Overgangsoverlejring er en værdifuld færdighed for enhver designer, der arbejder med UI eller informationsgrafik. Det giver dig mulighed for hurtigt at integrere datavisualisering i dine designs med fuld kontrol over det visuelle udtryk. Selvom metoden er enkel, er den kraftfuld og fleksibel nok til mange almindelige designbehov. Øv dig med forskellige farver og datapunkter for at blive fortrolig med teknikken, og du vil hurtigt kunne tilføje professionelt udseende diagrammer til dine Photoshop-projekter.

Hvis du vil læse andre artikler, der ligner Lav Cirkeldiagrammer i Photoshop, kan du besøge kategorien Photoshop.