Indholdsfortegnelse
Vil du tjene lidt penge ved siden af ved at sælge dine ikonpakker? Eller ønsker du at blive en fuldgyldig ikondesigner?
Du kommer ikke langt uden at kende de grundlæggende ting.
Billedkilde: Unsplash
Før du begynder at arbejde med ikoner, skal du forstå, hvad ikonografi er: Hvor kommer det fra, hvor skal det hen, og hvorfor er det vigtigt?
Vi vil dække alle disse punkter i denne artikel. Og derefter vil vi dække alle de ikon-typer, du kan vælge imellem. Uanset hvilken grafisk designstil du har, vil der være et ikon til dig. Bagefter vil vi lære om principperne for godt ikon-design.
Og til sidst vil vi give dig en trin-for-trin-guide, som vil hjælpe dig med at omdanne din ikonvision til en ikonvirkelighed. Det er meget at dække, så lad os komme i gang!
Hvad er et ikon?
Ordet "ikon" i ordbogen beskriver grundlæggende et tegn eller en repræsentation af en genstand i kraft af dens lighed eller analogi.Tænk på den måde, hvorpå et "papirkurv"-ikon angiver, hvor alle dine slettede filer havner. Dette ikon betyder stort set nøjagtig det samme på alle sprog, i alle kulturer og for alle aldre og køn.
Så hvis du tænker over det, er et ikon det mest universelle sprog i verden.
Se også: Er AI virkelig en kunst- og designdræber?Ikonets historie
Til alle de latin-orienterede derude: ordet "ikon" kommer af det latinske ord "eikṓn", der betyder "billede" eller "lignelse". Den moderne form af værket stammer fra 1565.
Det er utroligt, hvor meget information ikoner indeholder, og det er endnu mere utroligt, hvor hurtigt de leverer den. Derfor har man i århundreder brugt ikoner til at kommunikere med. Hvad er de første historiske ikoner, jeg kommer til at tænke på? Hieroglyffer fra det gamle Egypten! Og det er ikke kun dem, det er også hulemalerier eller vikingernes runer. Det er alle ikoner.
Men på vej mod vores årtusinder blev ikonerne mere og mere fremtrædende, da vi begyndte at bruge og skulle kommunikere med enheder. Hvis vi fokuserer på ikonernes nyere historie, er det tydeligt, hvor meget de definerede og påvirkede udviklingen af begrebet brugeroplevelse.
Hvis du vil se en detaljeret ikonhistorie fra det allerførste mappeikon til de skeuomorfe ikoner, vi ser i dag, kan du besøge dette fantastiske websted.
Billedkilde: FusionGroup
Hvorfor er ikoner vigtige?
I takt med at verden bliver mere og mere travl og skør, er ikoner en meget nødvendig del af vores liv, som hjælper med at formidle budskaber enkelt, elegant og hurtigt.
Uanset om du skal finde den rigtige funktion i en app, eller om du leder efter toilettet i en fremmed lufthavn, sparer ikoner dig meget tid. Og ikke kun!
Alle trafikskilte er ikoner. Forestil dig at være i Japan og ikke vide, om du må krydse gaden på et bestemt sted. Ikoner er bogstaveligt talt livreddere i situationer, hvor vi alle har brug for at kommunikere på samme sprog uden at tale sammen.
Hvis du er designer af brugergrænseflader, kan du ved at bruge de rigtige ikoner sikre, at appens funktionalitet forbliver ensartet i hele verden.
Ikoner forener verden.
Det er ret kraftfuldt, ikke? Nu hvor vi ved, hvor vigtige disse små symboler er, skal vi gå i gang med at designe dem. Selv om der er blevet skabt og fortsat vil blive skabt mange ikoner, vil der altid være efterspørgsel efter flere. Flere emner, forskellige farver, forskellige stilarter, forskellige branding.
Så lad os lære, hvordan du kan fodre dyret ved at skabe dit eget.
Principper for design af ikoner
Oprettelsesprocessen er den mest spændende, og det skal vi nok komme til. Men først skal vi gennemgå nogle få grundlæggende principper, som ikondesignere normalt følger for at skabe et mindeværdigt ikon.
Pixel-perfektion
Det er ikke nok bare at designe iøjnefaldende ikoner. Du skal sørge for, at dine ikoner er skalerbare, lydhøre og egnede til de aktuelle enheder. Placer dine ikoner på et pixelgitter for at sikre, at der ikke er nogen sløring.
Brug en stregbredde, der er et lige antal (f.eks. to eller fire pixels), og hold den ensartet i hele ikonet eller ikonpakken.
Hvis du ændrer størrelsen på dit ikon til forskellige programmer, skal du måske ændre designet en smule for hver størrelse, så du ikke sidder tilbage med halve pixels, der kan gøre dit design sløret. Dette vil hjælpe dig med at opretholde pixelperfektion.
Billedkilde: Icons8 Blog
Geometriske figurer
Brug geometriske former så ofte som muligt til at designe dit ikon. Det vil give dine ikoner en mere kraftfuld, overbevisende og organisk form. Desuden vil det øge læsbarheden.
Vinkler
Medmindre der er tale om en lige vinkel, skal du i de fleste tilfælde forsøge at holde dig til 45-graders vinkler. Resultatet bliver skarpt, og den perfekte diagonal er et let genkendeligt mønster.
Hjørner
En radius på 2 pixels er meget almindelig i ikondesign. Den er stor nok til klart at definere dine afrundede hjørner, men blødgør ikke hjørnerne så meget, at dit design får en helt ny æstetik. Men det afhænger alt sammen af den personlighed, du ønsker at give dit design.
En tyndere streg på blot én pixel vil se mere spids ud, mens tre pixels giver en meget afrundet form, mens en hjørneradius på 0dp giver dig meget skarpe ikoner.
Billedkilde: Smashing Magazine
Hold det enkelt
Dit ikon skal formidle sit budskab med ét blik. Det er dets formål. Det må ikke være for abstrakt eller for komplekst, for ellers mister det sin betydning.
Dette gælder også for sammensætningen - prøv ikke at gå for meget i detaljer. Et effektivt ikondesign skal kunne læses i små og store størrelser.
Fjern alle unødvendige detaljer fra dine ikoner, som ikke hjælper med at formidle konceptet. Gør dem i stedet tunge og støjende.
Det hvide rum
På samme måde skal du gøre brug af hvidt område for at give dit design mere plads til at ånde. Det vil hjælpe dit ikon med at formidle sin betydning hurtigere.
Perspektiv
Perspektivet er svært at aflæse på noget så lille som et ikon. Prøv altid at se objekterne i dit design lige fremad.
Hold ikonerne konsistente
Ikonpakker skal se ensartede ud, så du skal kontrollere, at stregvægtene, stregehjørnerne, farvepaletten, niveauet af komplekse detaljer, afstanden og stilelementerne er de samme på tværs af hele ikonpakken.
Så hvis du bruger en streg på 2 pixel til dit første ikon, skal du fortsætte med at bruge den hele tiden.
Du skal dog ikke læse mellem linjerne, for dine ikoner behøver ikke at have nøjagtig samme bredde eller højde, men skal i stedet være individuelt skaleret for at sikre ensartet visuel vægt.
Visuel vægt er den opfattelse, at visse almindelige elementer kan virke tungere end andre. Et mørkt element føles f.eks. tungere end et lyst. Det er ikke en nøjagtig videnskab, og det har meget at gøre med den individuelle opfattelse.
Derfor findes der ingen instrumenter til at måle disse kræfter. Stol på dine øjne og din intuition, når du skal tilpasse dine ikoner i en opstilling.
Kilde: Designoxy
Personlighed
Du skal give dit ikon en personlighed. Der findes så mange forskellige professionelle ikon-sæt, og du skal skille dig ud som kunstner. Det kan du gøre med din egen tegnestil eller en unik farvepalet.
Hold dig ligeledes fra forældede metaforer, som f.eks. at repræsentere film med et gammeldags spolekamera. Undtagelsen er naturligvis, når det er det, projektet kræver. Hold dig moderne og gentag ikke bare, hvad andre har gjort uden at tænke over det.
Nu hvor vi har gennemgået alle principperne, kan vi dykke ned i alle de fem trin, der er nødvendige for ikondesign.
Kilde: Designoxy
Trin 1: Forskning
Det er grundlaget for ethvert kreativt projekt, ikke sandt? Du skal finde ud af, hvilket ikon du skal designe for at repræsentere en bestemt idé.
Først og fremmest skal du forstå formålet med dit ikon. Hvor det skal bruges, og hvad det skal repræsentere. Du skal tænke på dit ikon som en karakter.Er den beregnet til en børneapp, et universitet eller en virksomhed, skal dit design afspejle dette.
Men et ikon er også en metafor, så du skal også fokusere på, hvilke ikoner der kræver mere fantasi i forhold til, hvordan de repræsenteres, og hvilke der blot er et alternativ til deres virkelige genstande.Hvis du skal skabe et ikon, der repræsenterer selve objektet, er det ret nemt. Men hvad nu, hvis du skal skabe et abstrakt ikon, der repræsenterer "rutine"? Det er her, du skal tage din tænkehue på og brainstorme over de mulige symboler, du kan bruge. Skriv alle de associationer ned, du kan komme i tanke om for at skildre essensen eller betydningen af dit ikon.
Brug en ordbog, en synonymordbog, ordforbindelser eller en Google-søgning for ikke blot at få en bedre forståelse af det, du skal skildre, men også for at få inspiration. Det er sværere, end det lyder, men du skal forenkle idéen om et abstrakt koncept til almindelige genstande, der kan formidle betydningen på et øjeblik.
Når vi taler om inspiration, skal du ikke lade dig nedslå, hvis du ikke kan finde en måde at repræsentere konceptet for dit ikon på med det samme. Der findes mange ikondesigns derude, som kan give dig den tiltrængte visuelle stimulans.
En af de største platforme er Icon Finder, og det fantastiske ved denne platform er, at den giver dig mulighed for at søge efter ikoner på flere forskellige måder.
Trin 2: Definer din stil
Det er så sjovt at designe ikoner, og det bliver endnu sjovere af, at der er så mange stilarter at vælge imellem.
- Skitserede ikoner Denne stil er den nemmeste stil for begyndere at starte med, så vi anbefaler den til alle nye ikondesignere derude.
- Håndtegnede ikoner er en form for skitserede ikoner, men de ser ud som om, de er håndtegnet.
- Udfyldte ikoner Der er dog meget specifikke underkategorier, afhængigt af hvordan du vælger at udfylde dit ikon.
- Glyph-ikoner er udfyldt med en ensfarvet farve.
- Flade ikoner , som navnet antyder, overholder de flade designprincipper i den forstand, at de har minimal eller ingen skygger, skygger eller gradienter.
- Skeuomorfe ikoner (også kaldet 3D-ikoner) er designet til at efterligne deres virkelige modstykker.
Er du minimalistisk, en flad designer eller elsker du skeuomorphic design? Uanset hvad du foretrækker, er der et ikon med dit navn på.
Men du kan ikke bare tage hensyn til din egen personlige stil, når du designer ikoner. Din beslutning afhænger af de generelle krav til den type grænseflade, dine ikoner skal vises på (f.eks. Apple iOS eller Material), samt det stilistiske valg af det særlige brugergrænsefladelayout, som du designer til. Beslutninger, beslutninger.
Trin 3: Skitse
Alle designs, uanset om de er enkle eller komplekse, starter med de mest enkle former.
Det er vigtigt at starte med at opretholde et godt gitter og layout, mens du arbejder på ikonerne. Download ikongitterfilen for at komme let i gang.
Når du skitserer, skal du forstå, hvilke hovedformer du skal bruge for at skabe dit ikonindhold. For at forstå disse grundlæggende former kan du bruge et referencebillede, eller du kan simpelthen begynde at skitsere hovedkomponenterne i dit ikon med store streger.
Så hvis vi f.eks. skitserer et isikon, ved vi, at vi skal bruge en trekant til keglen og ovaler til kuglerne og dråberne.
Du kan vælge at skitsere i din egen notesbog, men Procreate er et fantastisk pixelbaseret illustrationsværktøj, som giver dig mulighed for at skitsere digitalt. Og derfra kan du importere filen direkte til dit vektordesignprogram, f.eks. Vectornator, hvor du giver dit ikon liv.
På dette stadie skal du vælge et farveskema, der repræsenterer karakteren af dit ikon eller temaet for din ikon-serie. Vi har en hel artikel, der forklarer, hvordan du skaber en unik farvepalet, der definerer din stil som kunstner. Men her er det grundlæggende:
- Sørg for, at farven er ensartet i hele din ikonpakke.
- Kontroller, om hver farve er synlig både på en lys og en mørk baggrund.
- Kontroller, om dine farver står i kontrast til hinanden. Du kan kontrollere det ved at konvertere dit ikon til gråtoner. Hvis farverne står i kontrast til hinanden i gråtoner, vil de også stå i kontrast til hinanden i ethvert andet miljø.
- Farvelære er din ven. Vælg varme og kolde nuancer for at fortælle en historie.
- Brug farver til at definere et visuelt hierarki ved at vælge én enkelt fokusfarve.
Trin 4: Vektorisering
Når du er færdig med din skitse, er det tid til at vektorisere dit ikon. Hvis du ikke vidste det, så er alle ikoner vektorer!
Lag
Vores bedste tip er at oprette et nyt lag for alle nye grafiske elementer, som du tilføjer til dit værk. Tilføjer du et gitter? Lav et nyt lag. Tilføjer du vektorlinjer? Ja, lav et nyt lag. Tid til at farve? Du har gættet det.
Især når du tegner din skitse, hjælper det at reducere gennemsigtigheden af vektorlaget for at gøre det lettere at se det underliggende arbejde.
Gitter
Nogle kunstnere finder dem måske overvurderede, men gitter er nyttige i nogle få situationer.
Se også: Hvad er et Mood Board, og hvordan opretter du et?Hvis du opretter et sæt ikoner, kan et gitter hjælpe dig med at bevare konsistensen.
Et andet scenarie, hvor dette er nyttigt, er, når du opretter ikoner til platforme (iOS eller Android), der allerede har et eksisterende gitter. Material System-ikoner bruger f.eks. et 24dp-ikongitter.
Her er den type gitter, som vi foreslår. Det er nemt at lave det. Brug værktøjet Shape Builder til at lave to firkanter - den ene er gitterets maksimale højde og bredde, og den anden er til at indstille dine margener. Husk på, at dit ikon ikke behøver at røre alle fire sider af margenen. Tegn derefter symmetrilinjerne.
For at gøre det endnu nemmere kan du downloade vores smarte skabelon her.
Værktøj til form
Ligesom din skitse vil din vektorkunst ikke falde langt fra træet, og den vil også være lavet af de samme grundlæggende former.
Du kan nemt bygge forskellige former ved hjælp af Vectornators formværktøj. Du kan ændre antallet af sider på din polygon ved hjælp af den skyder, der vises, når formen er valgt. Du kan også få adgang til den via menuen Quick Action, når formen er tegnet.
Der er også spørgsmålet om afrunding af hjørner, som er funktionen Corner Radius, der også er tilgængelig via skyderen eller menuen Quick Actions.
Hvis du vil bevare formatforholdet for din form, skal du blot holde lærredet med en ekstra finger, når du arbejder på en iPad, eller ved at trykke på shift-tasten.
Pen-værktøj
Penværktøjet er ikke det nemmeste værktøj at mestre, men det er vigtigt i vektordesign. Det er især fantastisk til at tegne glatte buede linjer.
Det gør du ved at trykke på lærredet på det punkt, hvor du vil starte kurven, og trække din pen eller mus, indtil de to håndtag, der er knyttet til punktet, har den ønskede længde. Tryk og træk derefter igen for at se, hvordan kurven tager form.
Disse instruktioner lyder mærkelige, hvis du aldrig har brugt Pen Tool før. Men når du først har prøvet det, vil du vide, hvad vi mener. Og hvis du ikke har set videoen øverst i denne artikel endnu, skal du sørge for at gøre det. Alle disse trin forklares bedre visuelt.
Trin 5: Eksporter SVG
Det sidste trin er naturligvis at eksportere dit kunstværk.
Du spørger måske dig selv, hvilken størrelse dit ikon skal have. Det er egentlig mindre vigtigt. En vektor er af høj kvalitet uanset størrelsen. En af de vigtigste regler, du skal overholde, når du laver ikoner, er, at de skal passe ind i et kvadrat.
Hvis du føler dig mere tryg ved at arbejde med en meget specifik størrelse, kan du bruge en af disse standardstørrelser: 16x16, 24x24, 32x32, 48x48, 64x64, 96x96, 128x128, 256x256, 512x512. Men sørg for altid at tjekke retningslinjerne eller kravene til dit specifikke projekt, især hvis du designer applikationsikoner til iOS eller Android.
Ikoner er SVG-filer, som er et format, der understøttes af ethvert vektordesignværktøj som Vectornator.
Gå til Filer, Eksporter, og vælg SVG. Og det er det! Du har nu et helt nyt originalt ikon.
Vi håber, at denne vejledning har hjulpet jer! Ikoner er ikke lige så enkle som de ser ud, men med alle vores retningslinjer, principper, tips og tricks er du et par skridt nærmere på at gøre det professionelt.
Del dine designs med os, og vi vil vise dig på vores sociale medier! Vi glæder os til at læse, hvad du synes om denne artikel i kommentarfeltet nedenfor.
