Hvordan designe et ikon i Vectornator

Vil du tjene litt penger ved å selge ikonpakkene dine? Eller vil du bli en fullverdig ikondesigner?

Du kommer ikke langt uten å kunne det grunnleggende.

Bildekilde: Unsplash

Før du begynner å jobbe med ikoner, du må forstå hva ikonografi er. Hvor kommer det fra? Hvor går det? Og hvorfor er det viktig?

Vi vil dekke alle disse punktene i denne artikkelen. Og så dekker vi alle ikontyper du kan velge mellom. Uansett hvilken grafisk designstil du har, vil det være et ikon for deg. Etterpå lærer vi om prinsippene for god ikondesign.

Og til slutt vil vi gi deg en trinn-for-trinn-veiledning som vil hjelpe deg å transformere ikonvisjonen din til en ikonvirkelighet. Det er mye å dekke, så la oss dykke inn!

Hva er et ikon?

Vurder måten et "søppelbøtte"-ikon angir hvor alle dine slettede filer går. Dette ikonet vil i bunn og grunn bety nøyaktig det samme i alle språk, kulturer og for alle aldre og kjønn.

Så hvis du tenker på det, er et ikon det mest universelle språket i verden.

Ikonhistorie

For alle våre latinske hoder der ute, kommer ordet 'ikon' fra det latinske ordet 'eikṓn' som betyr 'liknelse' eller 'bilde'. Den moderne formen forvet, alle ikoner er vektorer!

Lag

Vårt beste tips er å lage et nytt lag for alle nye grafiske elementer du tar med i stykket ditt. Legger du til et rutenett? Lag et nytt lag. Legger du til vektorlinjene? Det er riktig. Lag et nytt lag. På tide å fargelegge? Du gjettet det.

Spesielt når du sporer skissen din, hjelper det å redusere gjennomsiktigheten til vektorlaget for å gjøre det lettere å se det underliggende arbeidet ditt.

Rutenett

Noen artister kan finne dem overvurdert, men rutenett er nyttige i noen få situasjoner.

Hvis du lager et sett med ikoner, vil et rutenett hjelpe deg å opprettholde konsistens.

Et annet scenario dette er nyttig er når du lager ikoner for plattformer (iOS eller Android) som allerede har et eksisterende rutenett. Materialsystemikoner, for eksempel, bruker et 24dp-ikonrutenett.

Her er typen rutenett vi foreslår. Måten du lager det på er enkelt. Bruk Shape Builder-verktøyet til å lage to firkanter - en er den maksimale høyden og bredden på rutenettet, og den andre angir margene dine. Husk at ikonet ditt ikke trenger å berøre alle fire sidene av margen. Tegn deretter symmetrilinjene.

For å gjøre det enda enklere kan du laste ned vår handy-dandy rutenettmal her.

Shape Tool

Akkurat som skissen din, vil vektorkunsten ikke falle langt fra treet. Det kommer også til å bli laget av det samme grunnleggendeformer.

Du kan enkelt bygge forskjellige former ved å bruke Vectornators formverktøy. Du kan endre antall sider av polygonet ditt ved å bruke glidebryteren som vises når formen er valgt. Eller du kan få tilgang til den via Quick Action-menyen etter at formen er tegnet.

Det er også spørsmål om avrunding av hjørner, som er funksjonen Corner Radius. Også tilgjengelig via glidebryteren eller hurtighandlingsmenyen.

For å beholde størrelsesforholdet til formen din, hold ganske enkelt lerretet med en ekstra finger når du arbeider på en iPad eller trykker ned shift-tasten.

Pennverktøy

Penneverktøyet er ikke det enkleste verktøyet å mestre, men det er viktig i vektordesign. Det er spesielt fantastisk for å tegne jevne buede linjer.

For å gjøre det, trykk bare på lerretet på punktet der du vil starte kurven, og dra pennen eller musen til de to håndtakene som er knyttet til punktet oppnår lengden du ønsker. Trykk deretter og dra igjen for å se hvordan kurven tar form.

Disse instruksjonene høres rart ut hvis du aldri har brukt pennverktøyet før. Men når du først har prøvd det, skjønner du hva vi mener. Og hvis du ikke har sett videoen øverst i denne artikkelen ennå, sørg for at du gjør det. Alle disse trinnene forklares bedre visuelt.

Trinn 5: Eksporter SVG

Naturligvis er det siste trinnet å eksportere kunstverket ditt.

Du kan spørre deg selv hvilken størrelse ikonet ditt skal ha.Det er egentlig mindre viktig. En vektor er av høy kvalitet uansett størrelse. En av hovedreglene for å følge når du lager ikoner, er at de må passe inn i en firkant.

Føler du deg mer komfortabel med å jobbe med en veldig spesifikk størrelse? Bruk en av disse standardstørrelsene: 16x16, 24x24, 32x32, 48x48, 64x64, 96x96, 128x128, 256x256, 512x512. Men sørg for å alltid sjekke retningslinjene eller kravene til ditt spesielle prosjekt, spesielt hvis du designer applikasjonsikoner for iOS eller Android.

Ikoner er SVG-filer som er et format som støttes av ethvert vektordesignverktøy som f.eks. Vectornator.

Gå til Fil, Eksporter og velg SVG. Og det er det! Du har nå et helt nytt originalikon.

Vi håper denne opplæringen hjalp dere! Så enkle som de ser ut, er ikke ikoner like enkle å designe. Men med alle våre retningslinjer, prinsipper, tips og triks er du en rekke skritt nærmere å gjøre det profesjonelt.

Del designene dine med oss, så viser vi deg på våre sosiale mediekanaler! Vi gleder oss til å lese hva du synes om denne artikkelen i kommentarfeltet nedenfor.

Det er utrolig hvor mye informasjon ikoner inneholder. Det er enda mer utrolig hvor raskt de leverer det. Det er derfor ikoner har blitt brukt i århundrer for å kommunisere. Hva er de første historiske ikonene som dukker opp? Hieroglyfer fra det gamle Egypt! Og det er ikke bare dem, det er også hulemalerier eller vikingruner. De er alle ikoner.

Men i retning av våre årtusener ble ikoner mer og mer fremtredende etter hvert som vi begynte å bruke og trengte å kommunisere med enheter. Hvis vi fokuserer på en nyere historie med ikoner, er det tydelig hvor mye de definerte og påvirket utviklingen av konseptet brukeropplevelse.

Hvis du vil sjekke ut en detaljert ikonhistorikk fra den aller første mappen ikon til de skeuomorfe vi ser i dag, sjekk ut denne fantastiske nettsiden.

Bildekilde: FusionGroup

Hvorfor er ikoner viktige?

Når verden blir travlere og sprøere, er ikoner en sårt tiltrengt del av livene våre som hjelper til med å formidle meldinger enkelt, elegant og raskt.

Enten du trenger å finne den rette funksjonen til en app, eller når du søker etter badet på en utenlandsk flyplass, sparer ikoner deg for mye tid. Og ikke bare!

Alle trafikkskilt er ikoner. Tenk deg å være i Japan og ikke vite om du kan krysse gaten på et bestemt tidspunkt. Ikoner er bokstavelig talt livreddere i situasjoner når vi alle trenger detkommuniser på samme språk uten å egentlig snakke.

Hvis du er en brukergrensesnittdesigner, vil bruk av de riktige ikonene sørge for at funksjonaliteten til appen din forblir konsistent over hele verden.

Ikoner forener verden .

Ganske kraftig, ikke sant? Nå som vi vet hvor viktige disse små symbolene er, la oss begynne å designe dem. Selv om mange ikoner har blitt opprettet og vil fortsette å bli opprettet, vil det alltid være etterspørsel etter flere. Flere emner, forskjellige farger, forskjellige stiler, forskjellig merkevarebygging.

Så la oss lære hvordan du kan mate dyret ved å lage dine egne.

Ikondesignprinsipper

Opprettingsprosessen er den mest spennende, og vi skal nå dit. Men først må vi dekke noen grunnleggende prinsipper som ikondesignere vanligvis følger for å lage et minneverdig ikon.

Pixel Perfection

Det er ikke nok å bare designe øye- fange ikoner. Du må gjøre ikonene dine skalerbare, responsive og egnet for faktiske enheter. Plasser ikonene dine på et pikselrutenett for å sikre at det ikke er uskarphet.

Bruk en strekbredde som er et partall (som to eller fire piksler), og hold det konsekvent gjennom hele ikonet eller ikonpakken.

Hvis du skalerer ikonet ditt for ulike applikasjoner, må du kanskje endre designet litt for hver størrelse slik at du ikke sitter igjen med halve piksler som kan gjøre designet ditt uskarpt.Dette vil hjelpe deg å opprettholde piksel - perfeksjon.

Bildekilde: Icons8 Blog

Geometriske former

Bruk geometriske former like ofte som du kan for å designe ikonet ditt. Det vil gi ikonene dine en kraftigere, overbevisende og organisk form. I tillegg vil det øke lesbarheten.

Vinkler

Med mindre det er en rett vinkel, prøv å holde deg til 45-graders vinkler i de fleste tilfeller. Resultatet blir skarpt, og den perfekte diagonalen er et lett gjenkjennelig mønster.

Hjørner

En 2-pikslers radius er veldig vanlig i ikondesign. Den er stor nok til å tydelig definere dine avrundede hjørner, men myker ikke hjørnene så mye at designet ditt tar en helt ny estetikk. Men alt avhenger av personligheten du vil gi designet ditt.

Et tynnere slag på bare én piksel vil se pekere ut, mens tre piksler gir en veldig avrundet form, mens en hjørneradius på 0 dp gir deg veldig skarpe ikoner .

Bildekilde: Smashing Magazine

Keep it Simple

Ikonet ditt må formidle budskapet med ett blikk. Det er dens hensikt. Det kan ikke være for abstrakt eller for komplekst, for ellers vil det miste sin betydning.

Dette gjelder også komposisjonen - prøv å ikke gå inn for mye i detaljene. Et effektivt ikondesign bør kunne leses i små eller store størrelser.

Fjern ikonene dine for unødvendige detaljer som ikke hjelper til med å kommunisere konseptet.Gjør det i stedet tungt og bråkete.

White Space

På samme måte kan du bruke hvitt mellomrom for å gi designet ditt mer plass til å puste. Det vil hjelpe ikonet ditt til å formidle betydningen raskere.

Perspektiv

Perspektiv er vanskelig å lese på noe så lite som et ikon. Prøv alltid å se objektene i designet ditt rett frem.

Hold ikonene konsekvente

Ikonpakker må se konsistente ut hele veien, så du må sjekke at streken veier , strekhjørner, fargepalett, nivå av komplekse detaljer, avstand og stilelementer forblir de samme over hele ikonsettet.

Så hvis du bruker et 2-pikslersstrøk for det første ikonet ditt, må du beholde bruker det hele veien.

Men ikke les mellom linjene. Ikonene dine trenger ikke å ha nøyaktig samme bredde eller høyde. I stedet må de skaleres individuelt for å sikre ensartet visuell vekt.

Visuell vekt er forestillingen om at visse vanlige elementer kan se ut til å være tyngre enn andre. Som et mørkt element føles tyngre enn et lett. Det er ikke en eksakt vitenskap, og det har mye med individuell persepsjon å gjøre.

Derfor finnes det ingen instrumenter for å måle disse kreftene. Stol på øynene og intuisjonen når du setter ikonene dine på linje.

Kilde: Designoxy

Personlighet

Du må gi din ikon en personlighet. Det er så mange forskjellige profesjonelle ikonsettder ute, og du må skille deg ut som artist. Du kan gjøre det med din egen tegnestil eller en unik fargepalett.

På samme måte holder du deg unna foreldede metaforer, som å representere film med et gammeldags spolekamera. Unntaket er selvsagt når det er det prosjektet krever. Hold deg moderne og ikke bare gjenta det andre har gjort uten å tenke over det.

Nå som vi har dekket alle prinsippene, la oss dykke ned i alle de fem trinnene som trengs i ikondesign.

Kilde: Designoxy

Trinn 1: Forskning

Grunnlaget for ethvert kreativt prosjekt, er det ikke? Du må finne ut hvilket ikon du må designe for å representere en bestemt idé.

Er det ment for en barneapp, et universitet eller et selskap? Designet ditt må formidle det.

‍Hvis du trenger å lage et ikon som representerer selve objektet, er det ganske enkelt. Men hva om du trenger å lage et abstrakt ikon som representerer «rutine.» Det er her du må sette på deg en tenkehette og idédylde de mulige symbolenedu kan bruke. Skriv ned alle assosiasjonene du kan tenke deg for å skildre essensen eller betydningen av ikonet ditt.

Bruk en ordbok, en synonymordbok, ordassosiasjoner eller Google-søk, for ikke bare å forstå hva du trenger bedre. å skildre, men også for å få inspirasjon. Vanskeligere enn det høres ut, men du må forenkle ideen om et abstrakt konsept til vanlige objekter som formidler betydningen på et øyeblikk.

Apropos inspirasjon, ikke bli motløs hvis du ikke finner en måte å representere på. konseptet med ikonet ditt rett fra balltre. Det er mange ikondesign der ute som kan gi deg den sårt tiltrengte visuelle stimulansen.

En av de største plattformene er Icon Finder, og det som er fantastisk med denne plattformen er at den lar deg søke etter ikoner i flere måter.

Trinn 2: Definer stilen din

Det er så gøy å designe ikoner! Det er gjort enda morsommere av det faktum at det er så mange stiler der ute å velge mellom.

• Ikoner med konturer er kun laget av konturer. Dette er den enkleste stilen for nybegynnere å begynne med, så vi anbefaler den til alle nye ikondesignere der ute.

• Håndtegnede ikoner er en form for skisserte ikoner, men de ser ut som de er håndtegnet.

• Utfylte ikoner inneholder farger , skyggelegging, gradienter og alt det morsomme. Men det er veldig spesifikkeunderkategorier avhengig av hvordan du velger å fylle ut ikonet ditt.

• Glyfikoner fylles ut med en solid farge.

• Flate ikoner , som navnet antyder, respekterer flate designprinsipper i den forstand at de har minimal eller ingen skyggelegging, skygger eller gradienter.

• Skeuomorfe ikoner (også kalt 3D-ikoner) er utformet for å imitere deres virkelige motparter.

Betrakter du deg selv som en minimalist, en flat designer, eller elsker du skeuomorf design? Uansett hva du foretrekker, er det en ikonstil med navnet ditt på.

Men du kan ikke bare vurdere din egen personlige stil når du designer ikoner. Avgjørelsen din avhenger av de generelle kravene for typen grensesnitt ikonene dine skal vises på (for eksempel Apple iOS eller Materiale), samt det stilistiske valget av den spesielle UI-layouten du designer for. Beslutninger, beslutninger.

Trinn 3: Skisse

Alle design, enkle eller komplekse, starter med de enkleste formene.

Det er viktig å starte opprettholde et godt rutenett og oppsett mens du arbeider med ikonene. Last ned ikonrutenettfilen for en enkel start.

Når du skisserer, må du forstå hvilke hovedformer du må bruke for å lage ikoninnholdet ditt. For å forstå disse grunnleggende formene kan du bruke et referansebilde, eller du kan ganske enkelt begynne å skisserehovedkomponentene i ikonet ditt i mange streker.

Så hvis vi for eksempel skisserer et isikon, vet vi at vi kommer til å bruke en trekant for kjeglen og ovaler for øsene og dryppene.

Du kan velge å skissere i din egen notatbok, men Procreate er et fantastisk pikselbasert illustrasjonsverktøy som lar deg skissere digitalt. Og derfra kan du importere filen direkte til vektordesignprogramvaren, som Vectornator, hvor du gir liv til ikonet ditt.

På dette stadiet må du velge et fargeskjema som representerer karakteren til ikonet ditt eller temaet til ikonserien. Vi har en hel artikkel som forklarer hvordan du lager en unik fargepalett som definerer stilen din som kunstner. Men her er det grunnleggende:

• Sørg for at fargen din forblir konsistent gjennom hele ikonpakken.
• Sjekk om hver farge er synlig både på en lys bakgrunn og på en mørk bakgrunn.
• Sjekk om fargene dine står i kontrast til hverandre. Du kan bekrefte det ved å konvertere ikonet til gråtoner. Hvis fargene kontrasterer i gråtoner, vil de kontrastere i et hvilket som helst annet miljø.
• Fargeteori er din venn. Velg varme kontra kalde nyanser for å fortelle en historie.
• Bruk farger for å definere et visuelt hierarki ved å velge én fokusfarge.

Trinn 4: Vektoriser

Etter at du er ferdig med skissen din, er det på tide å vektorisere ikonet ditt. I tilfelle du ikke gjorde det