Advertisement
  1. Design & Illustration
  2. Icon Design
Design

Kako Izraditi Animirane Vektorske Ikone u Adobe Illustratoru i Photoshopu

by
Difficulty:IntermediateLength:LongLanguages:

Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)

Final product image
What You'll Be Creating

Animiranje vektorskih ikona i dizajna je vrlo lako ako koristite Adobe Illustrator i Photoshop. Jednostavno izradite obične flat ikone i importirajte ih u Photoshop za laku GIF izradu. Napraviti ćemo tri ikone i istražiti nekoliko tehnika za izradu laganih, vrlo jednostavnih animacija.

1. Nacrtajte Omotnicu

1. korak

Izradite New Document (novi dokument) u Adobe Illustratoru. Ja ću koristiti Adobe Illustrator CC ali vi možete ove tehnike prilagoditi ranijim verzijama.

Sa Rectangle Tool (M) alatom nacrtajte svijetlo plavi pravokutnik. Selektirajte donje dvije točke sidrišta sa Direct Selection Tool (A) alatom i povucite Live Corners unutra da ta dva kuta učinite oblima. Upotrijebite Pen Tool (P) da nacrtate liniju plave boje srednjeg intenziteta koja će definirati otvor omotnice.

Draw the basic envelope shape

2. korak

Sa Pen Tool ili Line Segment Tool (/) alatom nacrtajte dvije linije koje se sastaju blizu sredine omotnice. Selektirajte linije i u Object kliknite Expand da ih ekspandire te upotrijebite Shape Builder Tool (Shift-M) da selektirate dijelove linija pravokutnika koji se ne presijecaju, kako biste ih obrisali. To je baza naše omotnice.

Draw two more lines to complete the envelope

3. korak

Kopirajte/Copy (Control-C) i zalijepite/Paste (Control-V) dizajn omotnice. Od gornjeg kuta do gornjeg kuta nacrtajte trokut za otvor omotnice. Selektirajte trokut i dok držite tipku Alt povucite prema van da dobijete duplikat trokuta. Rotirajte/Rotate (R) ga da izradite otvor omotnice i podesite boju ispune na tamniju plavu. Čisto zbog demonstracije, moje linije nedostaju na donjem dizajnu ali u konačnoj verziji će biti upotrijebljene.

Create the flap and opening of the envelope with a triangle

4. korak

Sada bi trebali imati dvije omotnice: jednu otvorenu i jednu zatvorenu. Cilj nam je napraviti nekoliko različitih omotnica sa raznim stadijima praznine između zatvorene i otvorene omotnice za konačnu animaciju. Grupirajte/Group (Control-G) zajedno svaku komponentu omotnice.

Open and closed envelopes

2. Izradite Različite Oblike Omotnice

1. korak

Duplicirajte/Duplicate otvorenu omotnicu. Upotrijebite Direct Selection Tool da uzmete gornju točku sidrišta gornjeg trokuta i povučete je dolje dok gotovo ne prekrije tamni trokut. Duplicirajte/Duplicate ovu grupu omotnice i malo povucite donju točku svjetlijeg trokuta prema gore tako da omotnica izgleda kao da je više otvorena. Nastaviti ćemo duplicirati svaku omotnicu i pomicati trokut prema gore dok se ne vrati opet na početnu točku.

Create multiple iterations of the envelope opening and closing

2. korak

Na kraju, uključujući zatvorene i otvorene omotnice, imamo devet omotnica koje su nam potrebne za animranu ikonu. Ispod možete vidjeti kako su smješteni trokuti i njihove točke sidrišta. Pripazite da vam je svaka omotnica grupirana zasebno u vlastitu grupu kako biste ih kasnije lakše importirali u Photoshop.

Group together your envelope components

3. Izradite Pismo

1. korak

Nacrtajte svijetlo žuti pravokutnik i Pomoću Copy i Paste ga prenesite na svaku omotnicu. Cilje je dobiti pravokutnik koji će se micati gore u jednakim razmacima kao i otvor. Odlučila sam za svoj dizajn napraviti ukupno sedam pravokutnika.

Draw rectangles over each envelope

2. korak

Selektirajte prvu omotnicu i njezin preklapajći pravokutnik. Koristeći Shape Builder Tool alat selektirajte dio žutog pravokutnika koji se presijeca sa unutrašnjosti omotnice. Obrišite dijelove žutog pravokutnika koji se ne presijecaju tako da vam od žutog pravokutnika ostane samo mali trokut. Ponovite istu tehniku na ostalim omotnicama.

Use the Shape Builder Tool to define the intersecting shape

3. korak

Nastavite definirati oblik žutog pisma za svaku omotnicu. Ispod možete vidjeti kako izgledaju moja pisma sa njihovim odgovarajućim omotnicama.

Define each letter with their coresponding envelope

4. korak

Nacrtajte nekoliko tankig pravokutnika da simulirate linije teksta ispisanog na pismu. U Align kartici kliknite Align i Distribute da poravnate pravokutnike. Zatim, u Pathfinder kartici kliknite Unite.

Draw rectangles to simulate writing on your letter

5. korak

Smjestite višebrojne setove pravokutnika preko svake omotnice. Primijetiti ćete da je u nekim pismima vidljivo više linija teksta nego u drugima. Setove pravokutnika sam smjestila na šest od ukupno devet omotnica.

place rectangles over each envelope

6. korak

Selektirajte oblik pisma i pravokutnike. Koristeći Shape Builder Tool, na svakom pravokutniku selektiajte dijelove koji se ne presijecaju i obrišite ih. Ponovite ovaj korak za sve omotnice.

Delete the rectangles from each letter using the shape builder tool

7. korak

Grupirajte/Group zajedno svaku omotnicu i njezine komponente i trebali biste imati ukupno devet zasebnih grupa. Sada smo spremni za animiranje dizajna!

Group each of your envelopes to prepare them for animating

4. Animirajte Omotnicu

1. korak

Otvorite Adobe Photoshop i izradite New Document (novi dokument). Pošto radimo jednostavnu web grafiku, veličinu dokumenta sam podesila na 72 dpi (nema razloga za veću rezoluciju pošto rad nećemo printati), širinu na 250 px i visinu na 300 px. Ako želite možete napraviti veću ili manju datoteku i također obrezati dokument kad god je to potrebno.

U Adobe Illustratoru, kopirajte/Copy svaku omotnicu i zalijepite/Paste ih u Adobe Photoshop dokument. Ako želite promijeniti veličinu slike bez gubitka kvalitete, zalijepite svaku grupu kao Smart Object. Ako ste zadovoljni veličinom, zalijepite/Paste ih na novi sloj kao Pixels.

Paste each object into your document

2. korak

Pripazite da je svaki objekt na zasebnom sloju. Zatim, možete selektirati svih devet sojeva i poravnati ih u sredini i sa donjim rubovima pomoću Align značajke.

Arrange your layers sequentially

3. korak

Otvorite Timeline karticu i izradite New Frame Animation (novi animacijski okvir). Počevši sa slojem zatvorene omotnice (sakrijte ostale), izradite New Frame i podesite "delay" (odgodu) frame-a (okvira) na 0.1 second. Za svaki frame, otkrijte sljedeći sloj i sakrijte prethodni sloj sve dok omotnica neće biti otvorena. Zatim, podesite delay na 0.2-0.5 seconds.

Ponovite skrivanje i otkrivanje slojeva, ali ovaj puta idite obrnutim redoslijedom tako da se omotnica opet zatvori. Svakako podesite luping na "Forever" kako bi se animacija nastavljala otvarati i zatvarati.

Create your simple timeline loop

4. korak

Nalsonite se i kliknite Play na Timeline kartici te pogledajte svoj gif video. Možete podesiti odgodu frame-a za sporiji ili brži gif, kao i koliko dugo je zatvorena ili otvorena omotnica vidljiva na Timeline kartici. Nastavimo dalje na sljedeću ikonu i dodatne tehnike za animaciju.

Its mail time

5. Nacrtajte Ikonu za Chat

1. korak

Ponovno u Adobe Illustratoru, na novom dokumentu ili na novom sloju, nacrtajte krug koristeći Ellipse Tool (L). Zatim, preklopite krug sa malim trokutom i klikom na Unite spojite zajedno ta dva oblika: ovo je osnovni chat oblak. Nacrtajte tri kruga za elipse koje ćemo kasnije koristiti u animaciji.

Draw basic chat shapes

2. korak

Kopirajte/Copy i zalijepite/Paste chat oblak i reflektirajte/Reflect ga preko vertikalne osi/Vertical Axis. Promijenite boju drugog oblaka u tamniji ton. Pomoću Scale funkcije podesite veličinu elipsi kako bi odgovarale unutar chat oblaka. Zatim ćemo dodati tekst.

Draw chat bubbles and their contents

3. korak

Nacrtajte ili upišite jednostavnu riječ poput "hey" ili "hi", koristeći font u stilu rukom pisanih slova ili nacrtajte svako slovo sa Paint Brush (B) alatom koristeći neki od zadanih kaligrafskih kistova. Pazite da nijednu liniju ili tekst ne prebacite u objekt i da je svako slovo zaseban objekt.

Draw separate letters within your chat bubbles

4. korak

Upišite ili samo nacrtajte emotikone unutar chat okvira. Umjesto emotikona možete nacrtati i neki emoji. Ovo je vaš chat oblak i cjelokupni stil ovisi potpuno o vama. Ukupno, ovdje imamo 14 zasebnih komponenti: tri elipse, pet slova, dva chat okvira, i četiri objekta koji čine emotikone. Svaki od njih će biti kopiran/Copy i zalijepljen/Paste na novi dokument u Adobe Photoshopu, kao zaseban sloj.

Complete your chat icon components

6. Animirajte Chat Ikonu

1. korak

Zalijepite/Paste u Adobe Photoshop svaku od 14 komponenti ikone u vaš dokument kao novi sloj. Grupirajte zajedno kao objekte, kao što sam učinio ispod u Layers kartici: komponente za svaku riječ, emotikon, elipse i chat oblake. To održava organizaciju dokumenata i općenito vam olakšava animiranje GIF-a.

Organize your layers panel

2. korak

Za početak, želim da moj prvi chat oblak dođe s lijeve strane. Sakrila sam sve komponente osim prvog chat oblaka i smjestila ga izvan okvira dokumenta za prvi Timeline frame. U sedam okvira, pomaknula sam chat oblak u sredinu dokumenta počevši od lijeve strane. Možete micati i uređivati sloj za svaki frame bez straha da će prije toga utjecati na frame.

Kada je chat oblak vidljiv, počinjem novi efekt "tipkanja" slova. Svaka je elipsa vidljiva jedna po jedna unutar prvog chat oblaka, praćena prvom porukom "hi". Zatim počinjem dodavanjem drugog chat oblaka u frame, dok je prvoj chat poruci (grupiranoj zajedno u Layers kartici kao "hi") smanjen opacity (za 20% svaki frame) u Layers kartici.

Creating the animation

3. korak

Pogledajte moju Timeline karticu za cijeli GIF. Imam ukupno preko 30 frame-ova i većina njih ima 0.1 second delay. Neke komponente, poput elipsi, idu "točka, točka, točka" na 0.3 second delay, dok je nestajanje riječi ili tipkanje slova i emotikona brže kada je moguće. Možete podesiti delay odgode po želji, kako vam odgovara. Tekst mora bit jasan i čitljiv, a opet ne previše spor i "uzburkan".

Check out the timeline panel

4. korak

Ispod možete pogledati moju konačnu animaciju: ulazi prvi chat oblak i počinje tekst, odgovara drugi oblak, i oba šalju emotikone te se zatim opet povlače iz okvira. Još moramo napraviti jednu posljednju animaciju koja kombinira prethodno korištene ideje i tehnike.

The final chat bubble design

7. Nacrtajte Foto Aparat

1. korak

U Adobe Illustratoru, nacrtajte pravokutnik. Sa Direct Selection Tool alatom selektirajte dvije gornje točke sidrišta i povucite Live Corners prema van. Nacrtajte drugi, tamniji pravokutnik ispod prvog i zaokružite mu donje kutove. Obratite pozornost na drugi pravokutnik, koji je manji od prvog, ali oba imaju istu širinu.

Drawing the camera base

2. korak

Tamno sivom bojom nacrtajte pravokutnik za otvor instant filma na donjoj polovici aparata. Nacrtajte pravokutnik zaobljenih kutova i krug za leću kamere, vizir/tražilo i dodatni dizajn na prednjem dijelu kamere.

Add shapes to your camera

3. korak

Dodajte crveni krug i krug tamne, tople sive nijanse za gumb kamere. Za leće, poredajte sive i plave krugove jedne iznad drugih, izmjenjujući ih između svijetle i tamne. Upotrijebite Direct Selection Tool da povučete gornju točku sidrišta unutarnjeg kruga prema dolje kako bi leća izgledala sjajno (pogledajte dizajn ispod).

complete the camera design

8. Izradite Komponente Animacije Fotoaparata

1. korak

Za animaciju zatvarača sam željela jednostavnu animaciju otvaranja i zatvaranja. Možete, naravno, napraviti i kompleksnije oblike ako želite. Ja sam za svoj zatvarač nacrtala tamno sivi krug. Kopirajte/Copy i zalijepite/Paste krug te ga prepolovite na dva dijela (preklopite horizontalni centar kruga sa linijom, te u Pathfinder kartici kliknite Divide da razdvojite dva oblika).

Kopirajte/Copy i zalijepite/Paste dvije polovice kruga. Pomaknite svaku polovicu dalje od sredine i upotrijebite Direct Selection Tool da pomaknete donje dvije točke sidrišta kako biste malo spljoštili svaku polovicu kruga. Ponovite za ostalih šest izmijenjenih polukruga koji čine faze od otvorenog do zatvorenog poklopca (zatvarača). Svih šest grupa ćete kopirati/Copy i zalijepiti/Paste na Photoshop dokument tijekom izrade animacije.

Creating the shutter animation

2. korak

Sada možemo raditi na instant filmu. Ustvari crtate seriju pravokutnika koji postaju sve veći i veći. Počnite tankim, svijetlo sivim pravokutnikom u sredini donje polovice ikone fotoaparata. Nakon nekoliko pravokutnika, na svijetlo sivi pravokutnik ćete dodati tamno sivi. Oba postaju sve duža i duža.

Create the film coming out of the camera

3. korak

Evo konačnog izgleda svih komponenti koje čine fotoaparat: aparat, šest oblika zatvarača, i osam (uključujući onaj na aparatu) oblika filma. Sve ukupno, u sljedećoj fazi ću u Photoshop dokument kopirati i zalijepiti 15 komponenti. Animirajmo ovaj fotoaparat!

The camera components

9. Animirajte Fotoaparat

1. korak

Kao i sa prethodnim ikonama, kopirajte/Copy i zalijepite/Paste svaku komponentu u Photoshop dokument. Najlakše je da svaka ikona ima vlastiti dokument u Photoshopu kako bismo se koncentrirali na jednu po jednu animaciju zasebno.

U Layers kartici iznad sloja fotoaparata grupirajte zajedno slojeve zatvarača i slojeve filma. Počela sam sa animacijom zatvarača: zatvorite i otvorite zatvarač tako da leće izgledaju kao da trepere.

Animate the shutter of the camera

2. korak

Zatim animirajte film koji izlazi i ulazi u otvor za film  (ako želite može i padati iz aparata, kao što bi to u stvarnosti bio slučaj). Još jednom ćete proći kroz svaku komponentu filma, jednu nakon druge, i zatim za svaku izraditi frame obratno.

Animate the film coming out of the camera

3. korak

I na kraju, kratki savjet o pohrani GIF datoteka. Idite na File > Export > Save for Web (Legacy) (Alt-Shift-Control-S) i odaberite GIF u padajućem izborniku. Ograničite GIF na 32 boje ili manje, ako je moguće. Možete pregledati animaciju, promijeniti veličinu datoteke i odlučiti o njezinoj kvaliteti prije nego što kliknete Save.

Save your GIF

4. korak

Evo moje ikone fotoaparata u akciji!

The camera icon in action

Odličan posao, završili ste!

Neovisno o tome radite li gif sa svakim frame-om nacrtanim u Adobe Illustratoru, manipulirate li komponente u tijeku procesa izrade GIF-a, ili kombinirate obje tehnike, animiranje vektorskih grafika je jednostavno i zabavno. Ispod u komentarima možete podijeliti svoje kreacije, ili pomaknite ideje do njihovih granica da izradite potpuno novi set animiranih ikona ili čak scena za objavu na webu itd!

The final icon set
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.