Kako dizajnirati ikonu u Vectornatoru

Želite da zaradite nešto novca sa strane prodajom vaših paketa ikona? Ili želite postati punopravni dizajner ikona?

Nećete daleko stići bez poznavanja osnova.

Izvor slike: Unsplash

Prije kada počnete da radite sa ikonama, morate razumeti šta je ikonografija. odakle dolazi? kuda ide? I zašto je to važno?

Sve ove točke ćemo pokriti u ovom članku. Zatim ćemo pokriti sve vrste ikona koje možete izabrati. Bez obzira koji je vaš stil grafičkog dizajna, za vas će biti ikona. Nakon toga ćemo naučiti o principima dobrog dizajna ikona.

I na kraju, pružit ćemo vam vodič korak po korak koji će vam pomoći da svoju viziju ikona pretvorite u stvarnost ikone. Mnogo je za pokriti, pa hajde da zaronimo!

Šta je ikona?

Razmotrite način na koji ikona 'kante za smeće' označava gdje idu svi vaši izbrisani fajlovi. Ova ikona će u osnovi značiti istu stvar na bilo kojem jeziku, kulturi i svim uzrastima i spolovima.

Dakle, ako razmislite o tome, ikona je najuniverzalniji jezik na svijetu.

Istorija ikona

Za sve naše latino-glave vani, riječ 'ikona' dolazi od latinske riječi 'eikṓn' što znači 'sličnost' ili 'slika'. Moderni oblikznajte, sve ikone su vektori!

Slojevi

Naš glavni savjet je da kreirate novi sloj za sve nove grafičke elemente koje unesete u svoj komad. Dodajete li mrežu? Napravite novi sloj. Da li dodajete vektorske linije? Tako je. Napravite novi sloj. Vrijeme je za farbanje? Pogodili ste.

Posebno kada pratite svoju skicu, pomaže u smanjenju transparentnosti vektorskog sloja kako biste lakše vidjeli svoj temeljni rad.

Mreža

Neki umjetnici mogu smatrati da su precijenjene, ali mreže su korisne u nekoliko situacija.

Ako kreirate skup ikona, mreža će vam pomoći da održite dosljednost.

Drugi scenario koji je koristan je kada kreirate ikone za platforme (iOS ili Android) koje već imaju postojeću mrežu. Ikone sistema materijala, na primjer, koriste mrežu ikona od 24 dp.

Evo vrste mreže koju predlažemo. Način na koji ga kreirate je lak. Upotrijebite Shape Builder Tool da kreirate dva kvadrata - jedan je maksimalna visina i širina mreže, a jedan postavlja vaše margine. Imajte na umu da vaša ikona ne mora dodirivati ​​sve četiri strane margine. Zatim nacrtajte linije simetrije.

Da biste to učinili još lakšim, ovdje možete preuzeti naš praktični predložak mreže.

Alat za oblikovanje

Baš kao i vaša skica, vaša vektorska umjetnost neće pasti daleko od drveta. Takođe će biti napravljen od iste osnoveoblici.

Možete lako izgraditi različite oblike koristeći Vectornatorov Shape Tool. Možete promijeniti broj strana svog poligona korištenjem klizača koji se pojavljuje nakon odabira oblika. Ili mu možete pristupiti putem izbornika Brze radnje nakon što se oblik nacrta.

Postoji i pitanje zaokruživanja uglova, a to je funkcija Corner Radius. Također dostupno putem klizača ili menija Brze radnje.

Da biste zadržali omjer širine i visine vašeg oblika, jednostavno držite platno dodatnim prstom dok radite na iPad-u ili pritiskate tipku shift.

Pen Tool

Pen Tool nije najlakši alat za savladavanje, ali je neophodan u vektorskom dizajnu. Posebno je nevjerovatno za crtanje glatkih zakrivljenih linija.

Da biste to učinili, samo dodirnite platno na mjestu gdje želite započeti krivulju i povucite olovku ili miša dok dvije ručke povezane s točkom ne postignu željenu vrijednost. dužinu koju želite. Zatim ponovo dodirnite i povucite da vidite kako kriva dobija oblik.

Ova uputstva zvuče čudno ako nikada ranije niste koristili alatku za olovku. Ali kada jednom probate, znaćete na šta mislimo. A ako još niste pogledali video na vrhu ovog članka, svakako to učinite. Svi ovi koraci su bolje objašnjeni vizuelno.

Korak 5: Izvoz SVG

Naravno, posljednji korak je izvoz vašeg umjetničkog djela.

Možete se zapitati koja bi veličina trebala biti vaša ikona.To je zaista manje važno. Vektor je visokog kvaliteta bez obzira na veličinu. Jedno od glavnih pravila kojih se treba pridržavati prilikom kreiranja ikona je da one moraju stati u kvadrat.

Da li se osjećate ugodnije da radite s vrlo određenom veličinom? Koristite bilo koju od ovih zadanih veličina: 16x16, 24x24, 32x32, 48x48, 64x64, 96x96, 128x128, 256x256, 512x512. Ali pazite da uvijek provjerite smjernice ili zahtjeve vašeg određenog projekta, posebno ako dizajnirate ikone aplikacija za iOS ili Android.

Ikone su SVG fajlovi koji je format koji podržava bilo koji alat za vektorski dizajn kao što je Vectornator.

Idite na File, Export i odaberite SVG. I to je to! Sada imate potpuno novu originalnu ikonu.

Nadamo se da vam je ovaj vodič pomogao! Koliko god jednostavno izgledale, ikone nije tako lako dizajnirati. Ali sa svim našim smjernicama, principima, savjetima i trikovima, nekoliko ste koraka bliže tome da to učinite profesionalno.

Podijelite svoje dizajne s nama i mi ćemo vas predstaviti na našim kanalima društvenih medija! Jedva čekamo da pročitamo šta mislite o ovom članku u odeljku za komentare ispod.

Zapanjujuće je koliko informacija sadrži ikone. Još je nevjerovatnije koliko brzo ga isporučuju. Zato se ikone vekovima koriste za komunikaciju. Koje su prve istorijske ikone koje vam padaju na pamet? Hijeroglifi iz starog Egipta! I nisu samo oni, to su i pećinske slike ili vikinške rune. Sve su to ikone.

Ali, krećući se prema našim milenijumima, ikone su postajale sve istaknutije kako smo počeli koristiti uređaje i imati potrebu za komunikacijom s njima. Ako se fokusiramo na noviju istoriju ikona, jasno je koliko su one definisale i uticale na razvoj koncepta korisničkog iskustva.

Ako želite da pogledate detaljnu istoriju ikona iz prvog foldera ikone skeuomorfnim onima koje danas vidimo, pogledajte ovu nevjerovatnu web stranicu.

Izvor slike: FusionGroup

Zašto su ikone važne?

Kako svijet postaje sve užurbaniji i luđi, ikone su prijeko potreban dio naših života koje pomažu da se poruke jednostavno, elegantno i brzo prenesu.

Bilo da trebate pronaći pravu funkciju aplikacije, ili kada tražite kupatilo na stranom aerodromu, ikone vam štede mnogo vremena. I ne samo!

Svi saobraćajni znakovi su ikone. Zamislite da ste u Japanu i da ne znate da li možete preći ulicu u određenom trenutku. Ikone su doslovno spasioci u situacijama kada to svi trebamokomunicirajte na istom jeziku bez stvarnog govora.

Ako ste dizajner korisničkog sučelja, korištenje pravih ikona će osigurati da funkcionalnost vaše aplikacije ostane dosljedna u cijelom svijetu.

Ikone ujedinjuju svijet .

Prilično moćno, zar ne? Sada kada znamo koliko su ovi mali simboli važni, krenimo s njihovim dizajnom. Iako su mnoge ikone kreirane i stvaraće se i dalje, uvijek će postojati potražnja za još. Više tema, različite boje, različiti stilovi, različiti brendovi.

Pa hajde da naučimo kako možete nahraniti zvijer kreiranjem vlastite.

Principi dizajna ikona

Proces stvaranja je najuzbudljiviji, a mi ćemo stići tamo. Ali prvo, moramo pokriti nekoliko osnovnih principa koje dizajneri ikona obično slijede da bi stvorili nezaboravnu ikonu.

Pixel Perfection

Nije dovoljno samo dizajnirati oko- hvatanje ikona. Morate učiniti svoje ikone skalabilnim, prilagodljivim i prikladnim za stvarne uređaje. Postavite svoje ikone na mrežu piksela kako biste bili sigurni da nema zamućenja.

Koristite širinu poteza koja je paran broj (kao dva ili četiri piksela) i neka bude dosljedna u cijelom paketu ikona ili ikona.

Ako mijenjate veličinu ikone za različite aplikacije, možda ćete morati malo promijeniti dizajn za svaku veličinu kako ne biste ostali s pola piksela koji mogu unijeti zamućenost u vaš dizajn.Ovo će vam pomoći da održite piksel - savršenstvo.

Izvor slike: Icons8 Blog

Geometrijski oblici

Koristite geometrijske oblike onoliko često koliko i vi može dizajnirati vašu ikonu. To će vašim ikonama dati moćniji, uvjerljiviji i organskiji oblik. Osim toga, povećat će čitljivost.

Uglovi

Osim ako nije pravi ugao, pokušajte se držati uglova od 45 stepeni u većini slučajeva. Rezultat će biti oštar, a savršena dijagonala je lako prepoznatljiv uzorak.

Uglovi

Radijus od 2 piksela je vrlo čest u dizajnu ikona. Dovoljno je velik da jasno definira vaše zaobljene uglove, ali ne omekšava uglove toliko da vaš dizajn dobije potpuno novu estetiku. Ali sve ovisi o osobnosti koju želite dati svom dizajnu.

Tanji potez od samo jednog piksela izgledat će oštrije, dok tri piksela čine vrlo zaobljen oblik, dok 0dp Corner Radius daje vrlo oštre ikone .

Izvor slike: Smashing Magazine

Neka bude jednostavno

Vaša ikona mora jednim pogledom prenijeti svoju poruku. To je njegova svrha. Ne može biti previše apstraktno, ili previše složeno, jer će u suprotnom izgubiti svoje značenje.

Ovo se odnosi i na njegovu kompoziciju - pokušajte da ne ulazite previše u detalje. Efikasan dizajn ikona trebao bi biti čitljiv u malim ili velikim veličinama.

Oslobodite svoje ikone svih nepotrebnih detalja koji ne pomažu u prenošenju koncepta.Umjesto toga, učinite ga teškim i bučnim.

White Space

Na isti način, iskoristite bijeli prostor da svom dizajnu date više prostora za disanje. To će pomoći vašoj ikoni da brže prenese svoje značenje.

Perspektiva

Perspektiva je teško čitati na nečemu tako malom kao što je ikona. Uvijek pokušajte gledati objekte svog dizajna pravo naprijed.

Održavajte ikone dosljednim

Paketi ikona moraju izgledati dosljedno u cijelom, tako da morate provjeriti da li su težine poteza , uglovi poteza, paleta boja, nivo složenih detalja, razmaci i elementi stila ostaju isti u cijelom skupu ikona.

Dakle, ako koristite potez od 2 piksela za svoju prvu ikonu, morate zadržati koristeći ga svuda.

Međutim, nemojte čitati između redova. Vaše ikone ne moraju imati potpuno istu širinu ili visinu. Umjesto toga, oni moraju biti pojedinačno skalirani kako bi se osigurala ujednačena vizualna težina.

Vizualna težina je pojam da se određeni zajednički elementi mogu činiti težim od drugih. Kao da je tamni element teži od svijetlog. To nije egzaktna nauka, i ima mnogo veze sa individualnom percepcijom.

Stoga, ne postoje instrumenti za mjerenje ovih sila. Vjerujte svojim očima i intuiciji kada poravnate svoje ikone u liniji.

Izvor: Designoxy

Ličnost

Morate dati svoje ikona ličnost. Postoji toliko mnogo različitih profesionalnih skupova ikonavani, i moraš se istaći kao umjetnik. To možete učiniti vlastitim stilom crtanja ili jedinstvenom paletom boja.

Slično, klonite se zastarjelih metafora, kao što je predstavljanje filma pomoću kamere stare škole. Izuzetak je, naravno, kada je to ono što projekat zahtijeva. Ostanite moderni i nemojte samo ponavljati ono što su drugi uradili bez razmišljanja.

Sada kada smo pokrili sve principe, zaronimo u svih pet koraka potrebnih za dizajn ikona.

13>

Izvor: Designoxy

Korak 1: Istraživanje

Osnova svakog kreativnog projekta, zar ne? Morate shvatiti koju ikonu trebate dizajnirati da bi predstavljala određenu ideju.

Je li namijenjen aplikaciji za djecu, univerzitetu ili kompaniji? Vaš dizajn to treba da prenese.

‍Ako trebate kreirati ikonu koja predstavlja sam objekat, to je prilično lako. Ali šta ako trebate kreirati apstraktnu ikonu koja predstavlja 'rutinu'. Ovo je mjesto gdje trebate staviti kapu za razmišljanje i razmišljati o mogućim simbolimamožeš koristiti. Zapišite sve asocijacije kojih se možete sjetiti kako biste dočarali suštinu ili značenje vaše ikone.

Koristite rječnik, tezaurus, asocijacije riječi ili Google pretragu, ne samo da bolje razumijete šta vam je potrebno prikazati, ali i dobiti inspiraciju. Teže nego što zvuči, ali trebate pojednostaviti ideju apstraktnog koncepta u uobičajene objekte koji prenose značenje u trenu.

Govoreći o inspiraciji, nemojte se obeshrabriti ako ne možete pronaći način da predstavite koncept vaše ikone odmah. Postoji mnogo dizajna ikona koji vam mogu pružiti prijeko potreban vizualni stimulans.

Jedna od najvećih platformi je Icon Finder, a ono što je fantastično kod ove platforme je to što vam omogućava da tražite ikone u na više načina.

Korak 2: Definirajte svoj stil

Dizajniranje ikona je tako zabavno! To čini još ugodnijim činjenicom da postoji toliko mnogo stilova za biranje.

• Ocrtane ikone se kreiraju samo od obrisa. Ovo je najlakši stil za početnike za početak, pa ga preporučujemo svim mladim dizajnerima ikona.

• Ručno nacrtane ikone su oblik istaknutih ikona, ali izgledaju kao da su ručno nacrtane.

• Popunjene ikone sadrže boje , sjenčanje, gradijenti i sve te zabavne stvari. Ali postoje vrlo specifičnepodkategorije u zavisnosti od toga kako odaberete da ispunite svoju ikonu.

• Ikone glifa su ispunjene jednobojnom bojom.

• Platne ikone , kao što ime sugerira, poštuju principe ravnog dizajna u smislu da imaju minimalno ili nimalo sjenčanja, senki ili preliva.

• Skeuomorfne ikone (koje se nazivaju i 3D ikone) dizajnirane su da imitiraju svoje parnjake iz stvarnog života.
  Vidi_takođe: Kako nacrtati tigra

Smatrate li sebe minimalistom, ravnim dizajnerom ili volite skeuomorfni dizajn? Bez obzira na vaše želje, postoji stil ikone s vašim imenom.

Ali ne možete uzeti u obzir samo svoj lični stil kada dizajnirate ikone. Vaša odluka ovisi o općim zahtjevima za tip sučelja na kojem će se vaše ikone prikazivati ​​(na primjer, Apple iOS ili Material), kao i od stilskog izbora određenog izgleda korisničkog sučelja za koji dizajnirate. Odluke, odluke.

Korak 3: Skicirajte

Svi dizajni, jednostavni ili složeni, počinju s najjednostavnijim oblicima.

Važno je početi održavajte dobru mrežu i raspored dok radite na ikonama. Preuzmite datoteku mreže ikona za lak početak.

Prilikom skiciranja, shvatite koje glavne oblike trebate koristiti da biste kreirali sadržaj ikone. Da biste razumjeli ove osnovne oblike, možete koristiti referentnu sliku ili jednostavno početi skiciratiglavne komponente vaše ikone u obiljem poteza.

Dakle, ako skiciramo ikonu sladoleda, na primjer, znamo da ćemo koristiti trokut za kornet i ovalne za kuglice i kapljice.

Možete odabrati skiciranje u svojoj bilježnici, ali Procreate je nevjerojatan alat za ilustracije zasnovan na pikselima koji vam omogućava da skicirate digitalno. A odatle možete uvesti datoteku direktno u svoj softver za vektorski dizajn, kao što je Vectornator, gdje oživljavate svoju ikonu.

U ovoj fazi, trebate odabrati šemu boja koja predstavlja karakter vaše ikone ili tema vaše serije ikona. Imamo cijeli članak koji objašnjava kako stvoriti jedinstvenu paletu boja koja definira vaš stil umjetnika. Ali evo osnova:

• Pobrinite se da vaša boja ostane dosljedna u cijelom paketu ikona.
• Provjerite da li je svaka boja vidljiva i na svijetloj i na tamnoj pozadini.
• Provjerite da li su vaše boje u suprotnosti jedna s drugom. To možete provjeriti tako što ćete svoju ikonu pretvoriti u nijanse sive. Ako su boje u kontrastu u sivim tonovima, one će biti kontrastne u bilo kojem drugom okruženju.
• Teorija boja je vaš prijatelj. Odaberite tople i hladne nijanse da ispričate priču.
• Koristite boje da definirate vizualnu hijerarhiju odabirom samo jedne boje fokusa.

4. korak: vektorizirajte

Nakon što završite skicu, vrijeme je da vektorizirate svoju ikonu. U slučaju da niste