Brug Ikonfonte i Photoshop & Illustrator

At integrere ikoner i dine grafiske designs kan ofte føles som en tidskrævende proces. Skal du downloade dem som billedfiler i forskellige størrelser? Hvad med skalering og redigerbarhed? Heldigvis findes der en langt mere effektiv metode, især når du arbejder i Adobe Photoshop eller Illustrator (som i version CC 2015, men metoden gælder bredt for nyere versioner også) på et Windows-system: brug af ikonfonte. Disse fonte indeholder ikke bogstaver, men i stedet et væld af ikoner, som du kan indsætte, skalere og farvelægge lige så nemt som almindelig tekst.

Find og Installer Dine Ikonfonte

Det første skridt er at skaffe de ikonfonte, du ønsker at bruge. Der findes mange udbydere af ikonfonte, både gratis og betalte. Du kan finde dem på hjemmesider, der specialiserer sig i fonte, eller via designressource-sider. Når du har fundet en font, du kan lide – for eksempel en .ttf-fil (TrueTypeFont) – skal du downloade den til din computer.

Installationen er heldigvis meget ligetil på Windows. Find den downloadede .ttf-fil i din Stifinder og dobbeltklik på den. Windows vil typisk åbne et forhåndsvisningsvindue for fonten, hvor du også finder en 'Installer'-knap. Klik på denne knap, og Windows vil installere fonten i din systemmappe for fonte. Når installationen er færdig, vil fonten være tilgængelig i de fleste programmer, der understøtter brug af installerede systemfonte, herunder Adobe Photoshop og Illustrator.

Det er vigtigt at sikre dig, at fonten er korrekt installeret, før du fortsætter. Du kan eventuelt genstarte dine Adobe-programmer, hvis de var åbne under installationen, for at sikre, at de genkender den nye font.

Brug Ikoner i Adobe Illustrator

Adobe Illustrator er et vektorbaseret program, hvilket gør det ideelt til arbejde med skalerbare ikoner. Processen for at indsætte ikoner fra en font er intuitiv:

1. Åbn Adobe Illustrator og opret et nyt dokument eller åbn et eksisterende projekt.
2. Find Glyphs-panelet. Dette panel giver dig adgang til alle tegn (glyffer) i en given font. Gå op i menulinjen og vælg Vindue > Skrifttype > Glyffer (Window > Type > Glyphs). Glyphs-panelet vil åbne, og du kan placere det et passende sted i dit arbejdsområde.
3. For at kunne indsætte ikoner skal du bruge Tekstværktøjet. Vælg Tekstværktøjet fra værktøjslinjen (tastaturgenvej: T) og klik et sted på din tegneflade for at oprette et tekstobjekt.
4. I Glyphs-panelet skal du nu vælge den ikonfont, du har installeret. Øverst i panelet er der en rullemenu, hvor du kan vælge fontfamilie. Rul ned eller søg efter navnet på din ikonfont (f.eks. 'Material Icons').
5. Når du har valgt den korrekte font, vil Glyphs-panelet vise alle de ikoner, der er inkluderet i fonten. Du kan justere størrelsen på ikonerne i panelet ved hjælp af skyderen eller knapperne nederst til højre for at få et bedre overblik.
6. For at indsætte et ikon i dit dokument skal du blot dobbeltklikke på det ønskede ikon i Glyphs-panelet. Ikonet vil blive indsat ved din tekstmarkør på tegnefladen.
7. Nu behandles ikonet som tekst. Du kan markere det med Tekstværktøjet og ændre dets størrelse ved at justere skriftstørrelsen i Tegn-panelet (Vindue > Skrifttype > Tegn) eller kontrolpanelet øverst. Du kan også ændre farven via farvevælgeren eller Farveprøver-panelet.

Denne metode er utroligt effektiv, især når du designer brugerflader, mobilapps eller webgrafik, hvor du skal bruge mange konsistente ikoner.

Brug Ikoner i Adobe Photoshop

Processen i Photoshop minder meget om den i Illustrator, selvom Photoshop primært er et rasterbaseret program. Ikoner indsat som font vil dog stadig bevare deres vektor-egenskaber (i hvert fald indtil de rasteriseres, hvilket vi straks skal tale om).

1. Åbn Adobe Photoshop og opret et nyt dokument eller åbn et eksisterende projekt.
2. Find Glyphs-panelet. Gå op i menulinjen og vælg Vindue > Glyffer (Window > Glyphs). Panelet vil åbne, og du kan placere det i dit arbejdsområde.
3. Vælg Tekstværktøjet (tastaturgenvej: T) og klik på dit lærred for at oprette et tekstlag.
4. I Glyphs-panelet skal du nu vælge den ikonfont, du har installeret, fra rullemenuen øverst.
5. Du vil se ikonerne fra fonten i panelet. Du kan justere visningsstørrelsen som i Illustrator.
6. Dobbeltklik på det ikon i Glyphs-panelet, du ønsker at indsætte. Ikonet vil blive indsat på dit tekstlag.
7. Ligesom i Illustrator kan du ændre størrelse og farve på ikonet ved at behandle det som tekst på tekstlaget.

Brug af ikonfonte i Photoshop er en praktisk måde at tilføje skalerbare grafiske elementer uden at skulle importere separate billedfiler. Dette kan strømline din arbejdsgang betydeligt.

Et Kritisk Trin: Konvertering til Omrids eller Symboler

Nu kommer vi til et yderst vigtigt punkt, som kan spare dig for megen frustration. Selvom det er praktisk at indsætte ikoner som fonte, er der en stor ulempe ved at lade dem forblive som redigerbar tekst:

Hvis du på et senere tidspunkt installerer en opdateret version af den samme ikonfont, eller hvis fonten afinstalleres eller erstattes med en anden version, kan de ikoner, du har indsat i dit dokument, ændre sig. Et ikon, der tidligere viste et 'hjem', kan pludselig blive til et 'tandhjul' eller et helt andet symbol, fordi fontens interne 'kortlægning' af tegn er blevet ændret. Dette kan fuldstændig ødelægge dit design.

For at undgå dette problem, er det stærkt anbefalet at konvertere dine indsatte ikoner til omrids (outlines) eller gemme dem som symboler i Illustrator, umiddelbart efter du har indsat dem og justeret deres størrelse og placering. I Photoshop kan du konvertere tekstlaget til en form (shape).

I Illustrator: Konverter til Omrids eller Opret Symbol

• Konverter til Omrids: Markér tekstobjektet med dit ikon. Højreklik på det og vælg Opret omrids (Create Outlines) eller gå til Skrifttype > Opret omrids (Type > Create Outlines). Dette omdanner ikonet fra redigerbar tekst til en vektorform, som ikke længere er afhængig af fontfilen. Du kan nu redigere ankerpunkterne og stierne i ikonet, som var det en hvilken som helst anden vektorform.
• Opret Symbol: Hvis du bruger det samme ikon flere gange i dit dokument, kan det være endnu smartere at oprette et Symbol. Konverter først ikonet til omrids som beskrevet ovenfor. Træk derefter den konverterede form ind i Symbols-panelet (Vindue > Symboler). Giv symbolet et navn. Nu kan du trække instanser af dette symbol ud på din tegneflade. Fordelen er, at hvis du redigerer 'master'-symbolet i Symbols-panelet, opdateres alle instanser automatisk. Dette er fantastisk for konsistens og effektivitet.

I Photoshop: Konverter til Form

• Markér tekstlaget, der indeholder ikonet, i Lag-panelet.
• Højreklik på laget og vælg Konverter til form (Convert to Shape).

Dette omdanner tekstlaget til et formlag, hvor ikonet nu er en vektorform. Ligesom i Illustrator er ikonet nu uafhængigt af fontfilen og kan skaleres uden tab af kvalitet. Du kan redigere formens farve og andre egenskaber via egenskabspanelet.

At tage dette ekstra skridt med at konvertere til omrids/form eller symboler er afgørende for at sikre, at dine designs forbliver intakte, selv hvis du deler filen med andre, der ikke har den specifikke font installeret, eller hvis du selv opdaterer dine fonte. Jeg har selv lært dette på den hårde måde, hvor et helt layout pludselig blev fyldt med forkerte symboler efter en fontopdatering!

Fordele ved at Bruge Ikonfonte

Der er flere væsentlige fordele ved at bruge ikonfonte frem for traditionelle billedfiler (som PNG eller JPG) til dine ikoner:

Som tabellen illustrerer, tilbyder ikonfonte en fleksibilitet og effektivitet, som rasterbaserede ikoner sjældent kan matche i et designworkflow.

Ofte Stillede Spørgsmål om Ikonfonte i Adobe Programmer

Kan jeg bruge enhver .ttf font som en ikonfont?

Nej. En font skal specifikt være designet som en ikonfont, hvilket betyder, at tegnene i fonten er tegnet som ikoner frem for bogstaver eller tal. Almindelige tekstfonte indeholder ikke ikoner på denne måde.

Hvor kan jeg finde gode ikonfonte?

Der findes mange kilder. Populære gratis muligheder inkluderer Material Icons (fra Google), Font Awesome, og Feather Icons. Der findes også et stort marked for betalte ikonfonte af høj kvalitet på platforme som Adobe Fonts (hvis dit abonnement inkluderer det), MyFonts, og andre fontbutikker online.

Skal jeg installere fonten på systemniveau, eller kan jeg indlæse den direkte i Adobe?

For at bruge fonten via Glyphs-panelet, som beskrevet her, skal fonten være installeret på dit operativsystem (Windows i dette tilfælde). Nogle programmer understøtter midlertidig indlæsning af fonte, men systeminstallation er den mest pålidelige metode for denne workflow.

Hvad sker der, hvis jeg ikke konverterer ikonerne til omrids/form?

Hvis du beholder ikonerne som redigerbar tekst, vil de være afhængige af, at den specifikke version af fonten er tilgængelig på den computer, filen åbnes på. Hvis fonten mangler, erstattes ikonerne med standardtegn (ofte små firkanter), eller hvis fonten opdateres, kan ikonerne skifte til at vise andre symboler, hvilket ødelægger dit design.

Kan jeg redigere et ikon efter det er konverteret til omrids/form?

Ja, absolut! Når et ikon er konverteret til omrids (Illustrator) eller form (Photoshop), er det en standard vektorform. Du kan bruge direkte markeringsværktøjet til at redigere ankerpunkter og stier, ændre farver, tilføje streger, effekter osv., præcis som med enhver anden form, du selv har tegnet.

Er denne metode kun for Windows CC 2015?

Nej. Selvom guiden tager udgangspunkt i Windows CC 2015, er processen med at installere .ttf-fonte på Windows og bruge Glyphs-panelet i Photoshop og Illustrator stort set identisk i nyere versioner af programmerne og på andre styresystemer som macOS.

Konklusion

At mestre brugen af ikonfonte i Adobe Photoshop og Illustrator åbner op for en langt mere effektiv og fleksibel måde at arbejde med ikoner i dine designs på. Ved at følge de simple trin for at finde, installere og indsætte ikoner via Glyphs-panelet, og ikke mindst ved at huske at konvertere dine ikoner til omrids/form eller symboler for at sikre fremtidig kompatibilitet, kan du spare tid og skabe mere konsistente og redigerbare grafiske elementer. Gør ikonfonte til en fast del af din designværktøjskasse, og oplev forskellen i din arbejdsgang.

Hvis du vil læse andre artikler, der ligner Brug Ikonfonte i Photoshop & Illustrator, kan du besøge kategorien Design.