Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Fan Art
Design

Kako Napraviti Set Ikona na temu serije Dr. Who u Adobe Illustratoru

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Learn Adobe Illustrator.
How to Create a Stripes and Flowers Pattern From Scratch in Adobe Illustrator
Create a Copper Pipe Text Effect in Adobe Illustrator

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

Final product image
What You'll Be Creating

Danas sam za sve Vas "Dr. Who" fanove sastavio poseban maleni tutorijal u kojem ćemo naučiti kako izraditi vlastite rekvizite s TV serija pomoću nekih najosnovnijih oblika i alata koje nudi Illustrator.

Uvijek možete baciti pogled na Envato Market gdje ćete pritiskom jednog gumba pronaći masu predivno izrađenih setova ikona i dobiti inspiraciju da proširite set.

Pretpostavljam da ste jednako uzbuđeni kao i ja kada sam pisao ovaj tutorijal, stoga krenimo!

1. Napravite novi dokument

Pošto sam siguran da ste već otvorili i pokrenuli Illustrator u pozadini, sada podesite novi dokument tj. New Document (File > New ili Control-N) koristeći sljedeće postavke:

  • Number of Artboards: 1
  • Width: 800 px
  • Height: 600 px
  • Units: Pixels

I u Advanced kartici podesite:

  • Color Mode: RGB
  • Raster Effects: Screen (72 ppi)
  • Align New Objects to Pixel Grid: označite
setting up a new document

2. Podesite rešetku (Grid)

Kao što već vjerojatno znate, Illustrator vam dozvoljava da iskoristite prednosti njegovog moćnog sistema rešetki (Grid System), u našem slučaju podešavajući ih na najniže moguće vrijednosti kako biste na kraju imali potpunu kontrolu nad oblicima pošto možete biti sigurni da će se savršeno poklopiti sa Pixel Grid rešetkom smještenom ispod.

1. korak

Postavke koje nas zanimaju možete pronaći pod Edit > Preferences > Guides & Grid podmeniju i trebaju biti podešene točno ovako:

  • Gridline every: 1 px
  • Subdivisions: 1
setting up a custom grid

Kratki savjet: više o rešetkama možete naučiti ako pročitate ovaj detaljan članak o tome kako funkcioniraju sistemi rešetki u Illustratoru.

2. korak

Nakon što smo podesili rešetku, sve što trebamo učiniti kako bismo bili sigurni da nam oblici izgledaju jasno jest omogućiti Snap to Grid opciju u View meniju, koja će transformirati Snap to Pixel svaki put kada uđete u Pixel Preview mod.

Sada, pošto nam je cilj napraviti ikone pomoću piksela, toplo preporučam da prođete kroz tutorijal pod nazivom kako izraditi savršeno pikselizirani rad, koji će vam pomoći da za čas proširite svoje tehničke vještine.

3. Podesite slojeve

Bilo bi dobro da u kreiranom novom dokumentu počnemo raditi slojeve našeg projekta, jer ćemo na taj način moći zadržati dobar kontinuitet fokusirajući se na svaku ikonu zasebno.

Sada otvorite Layers panel i izradite ukupno četiri sloja kojima ćemo dodijeliti imena sljedećim redom:

  • 1. sloj: reference grids (referentne rešetke)
  • 2. sloj: tardis
  • 3. sloj: sonični odvijač
  • 4. sloj: dalek
setting up the layers

4. Napravite Referentne Rešetke

Referentne rešetke odnosno Reference Grids (ili Base Grids) je set precizno neograničenih referentnih površina koje nam omogućuju da izgradimo ikone fokusirajući se na veličinu i konzistenciju.

Obično veličina rešetki određuje veličinu ikona, i uvijek bi trebale biti prva odluka koju ćete donijeti na početku novog projekta pošto uvijek počinjemo od najmanje moguće veličine i od nje nastavljamo izradu.

U našem slučaju, izraditi ćemo set ikona koristeći samo jednu veličinu, točnije 128 x 128 px, što je prilično veliko.

1. korak

Na početku zaključajte sve slojeve osim referentne rešetke, i zatim uzmite Rectangle Tool (M) i izradite 128 x 128 px narančasti (#F15A24) kvadrat koji će nam pomoći da definiramo ukupnu veličinu ikone.

creating the main shape for the reference grid

2. korak

Dodajte još jedan maji 120 x 120 px (#FFFFFF) koji će služiti kao aktivno područje za crtanje, i tako nam pruža ispunjen rub od 4 px.

creating the main shape for the active drawing area

3. korak

Grupirajte dva kvadrata stvarajući referentnu rešetku pomoću Control-G prečaca na tipkovnici i zatim izradite dvije kopije na međusobnoj udaljenosti od 40 px, pazeći pritom da ih poravnate u sredinu radne površine (Artboard).

Kada završite, zaključajte sloj na kojem ste radili i krenite na sljedeći na kojem ćemo početi raditi prvu ikonu.

creating and positioning all three reference grids onto the artboard

5. Izgradite ikonu vremenskog stroja (Tardisa-a)

Početi ćemo izradom doktorovog vremenskog stroja, pa pripazite da radite na odgovarajućem sloju, što bi bio drugi po redu (Tardis) i zatim zumirajte prvu referentnu rešetku kako biste mogli imati bolji pregled dok radite.

1. korak

Izradite bazu telefonske govornice crtajući pravokutnik veličine 64 x 4 px koji ispunite bojom #3579B7 i zatim poravnajte horizontalno na našu aktivno područje za crtanje smještajući ga 2 px od donjeg ruba.

creating and positioning the main shape for the time machines bottom section

2. korak

Odaberite Add Anchor Point Tool i upotrijebite ga da dodate dvije nove sidrišne točke (anchor points) prema gornjem dijelu pravokutnika ( 2 px od njegovog gornjeg ruba). Zatim podesite oblik individualno odabirući njegove gornje sidrišne točke pomoću alata Direct Selection Tool (A) i pomaknite ih prema unutrašnjosti za 2 px pomoću alata Move Tool ( desni klik mišem > Transform > Move > Horizontal > 2 px).

adjusting the main shape of the time machines bottom edge using the move tool

3. korak

Dobivenom obliku pomoću Offset Path metode napravite vanjsku rubnu liniju debljine 2 px. Prvo odaberite oblik i idite na Object > Path > Offset Path te unesite 2 px u Offset vrijednosti.

adding the outline to the time machines bottom section using the offset path method

4. korak

Kako bi se bolje istaknula, promijenite boju ispune (fill) na debljoj vanjskoj rubnoj liniji u boju #161B1E.

changing the color of the time machines bottom section outline

5. korak

Dodajte tamniji dio prema gornojoj strani plavog oblika stvarajući 68 x 4 px pravokutnik (#29537A) koji ćemo odabirući Horizontal center align poravnati na njegov gornji rub, i zatim maskirati (odaberite oba obilka > desni klik mišem > Make Clipping Mask) koristeći njegovu kopiju (Control-C < Control-F).

adding the darker section to the time machines bottom shape

6. korak

Odvojite tamniji dio koji smo napravili od ostatka plavog oblika dodajući točno ispod njega 62 x 2 px pravokutnik (#161B1E) koji će služiti kao horizontalni rub.

adding a horizontal divider to the bottom section of the time machine

7. korak

Uzmite Rectangle Tool (M) i dodajte set sjena crtajući 2 x 2 px kvadrat (#FFFFFF) koji prati pravokutnik veće širine 4 x 2 px (#FFFFFF), a smjestiti ćemo ih 2 px udaljene jedan od drugog. Podesite oblike podešavajući im Blending Mode u Soft Light i smanjite im Opacity na 60%, pazeći da ih grupirate (Control-G) i smjestite na desnu stranu plave baze, točno 38 px od ruba aktivnog područja za crtanje.

creating and positioning the first set of highlights to the right side of the time machines bottom section

8. korak

Uzmite kopiju (Control-C > Control-F) sjena koje smo izradili i smjestite ih s lijeve strane plave baze, 42 px od lijevog ruba aktivnog područja za crtanje.

I kada ih smjestite, možete odabrati sve oblike koje za sada imamo i grupirati ih (Control-G) kako ih ne biste slučajno razdvojili.

creating and positioning the second set of highlights onto the time machines bottom section

9. korak

Napravite gornji dio govornice crtajući pravokutnik 58 x 90 px (#3579B7) koji smjestite iznad baze, i napravite mu isti deblji vanjski rub od 2 px (#161B1E).

creating and positioning the main shapes for the upper section of the time machine

10. korak

Dodajte 58 x 2 px pravokutnik (#FFFFFF) na gornji dio plavog oblika koji smo upravo izradili i pretvorite ga u osvjetljenje podešavajući mu Blending Mode u Soft Light dok Opacity smanjite na 60%.

creating and positioning the highlight onto the upper section of the time machines body

11. korak

Napravite unutarnji dio vremenskog stroja crtajući 46 x 78 px pravokutnik koji ćemo objiti bojom #29537A i napraviti vanjsku liniju od 2 px (#161B1E) smještajući ih oba odmah iznad baze.

creating and positioning the inner section of the time machines main body

12. korak

Dodajte 46 x 2 px pravokutnik prema gornjem dijelu plavog oblika koji smo upravo napravili i dva 1 x 76 px s lijeve i desne strane, te sva tri obojite crnom (#000000). Pretvorite ih u suptilne sjene smanjujući im Opacity na 40% odabirom i grupiranjem (Control-G) oba i dva oblika ispod njih kasnije.

adding the subtle shadows towards the inner section of the time machine

13. korak

Počnite raditi na lijevim vratima izradom pravokutnika veličine 18 x 74 px, koji ćemo obojiti bojom #3579B7, napraviti mu rub od 2 px (#161B1E) i zatim ga smjestiti na lijevu stranu unutarnjeg dijela koji smo upravo napravili, na udaljenosti 2 px od ruba.

creating and positioning the main shapes for the time machines left door

14. korak

Sa alatom Rectangle Tool ( M) napravite četiri oblika veličine 10 x 12 px (#29537A) sa rubom debljine 2 px (#161B1E) koji će služiti kao mali ugravirani paneli, i zatim ćemo ih smjestiti na vrata ostavljajući između njih 2 px vertikalne praznine.

adding the four engraved panels to the time machines left door

15. korak

Promijenite boju prvog panela u (#D8D2BA) i zatim dodajte par linija od 2 px za prozore (#161B1E), dvije vertikalne i dvije horizontalne, kako biste od njih napravili prozor.

turning the time machines left door top panel into a window

16. korak

Dodajte tri 10 x 1 px pravokutnika (#000000) ispod prozorskih linija koje smo upravo napravili (desni klik mišem > Arrange > Send Backward) i zatim ih pretvorite u sjene smanjujući im Opacity na 30%.

Kada završite, selektirajte i grupirajte sve elemente prozora pomoću Control-G prečaca na tipkovnici.

adding shadows to the left doors window panel

17. korak

Na trenutak se fokusirajte na ostatak panela dodajući sjenu od 10 x 1 px ( boja: crna; Opacity: 40%) prema njihovom gornjem rubu i 10 x 1 px osvjetljenje (boja: bijela; Blending Mode: Soft Light ; Opacity: 60%) prema njihovom donjem rubu.

Kada ih smjestite, zasebno ih odaberite i grupirajte u njihov ispod položeni panel pomoću Control-G prečaca na tipkovnici.

adding highlights and shadows to the left doors panels

18. korak

Dodajte 18 x 12 px pravokutnik (#FFFFFF) prema gornjem dijelu vrata i četiri seta pravokutnika od 2 px, jedan 2 x 2 px i drugi 4 x 2 px, smještenih 2 px jedan od drugog. Selektirajte ih i pretvorite u suptilna osvjetljenja podešavajući im Blending Mode u Soft Light dok im Opacity smanjite na 60%.

adding the subtle highlights to the time machines left door

19. korak

Odaberite i grupirajte sve oblike koji čine lijevu stranu vrata i zatim upotrijebite njihovu kopiju (Control-C > Control-F) kako biste napravili desnu strana vrata.

creating and positioning the right door onto the time machine

20. korak

Dodajte maleni dio papira na drugi panel s lijeve strane vrata, tako da izradite 6 x 8 px pravokutnik (#D6D3CC) sa 2 px vanjskim rubom (#161B1E). Nacrtajte pravokutnike debljine 1 px (#161B1E) smještene na 1 px međusobne udaljenosti, koji će činiti linije teksta te ih zatim odaberite i grupirajte sve oblike papira (Control-G).

adding the little piece of paper to the time machines left door

21. korak

Pomoću alata Rounded Rectangle Tool vratima dodajte ručke izradom 4 x 8 px oblika (#161B1E) sa Corner Radius (zaobljeni rub) podešenim na 1 px koji ćemo smjestiti preko njihovih preklapajućih rubova, odabirući pritom vertical center align opcijju na drugom panelu kako bismo ih lijepo poravnali.

creating and positioning the door handles onto the time machine

22. korak

Sa smještenim ručkama, dodajte 2 x 2 px okruglu bravu (#161B1E) s desne strane vrata smještajući je između drugog i trećeg panela.

Kad je smjestite, odaberite je, i vrata i ručku, te grupirajte zajedno (Control-G).

adding and positioning the lock onto the time machines right door

23. korak

Izradite gornji dio telefonske govornice crtajući 50 x 50 px pravokutnik (#3579B7) i napravite rub od 2 px (#161B1E) te smjestite oboje iznad vrata.

creating and positioning the upper section of the time machines main body

24. korak

Dodajte 24 x 24 px pravokutnik (#394954) sa sada već standardnim rubom debljine 2 px (#161B1E) i smjestite oboje u sredinu plavog oblika koji smo upravo napravili.

adding the darker section to the time machines upper section

25. korak

Koristeći referentnu sliku kao vodič za smještanje, dodajte malo osvijetljenih dijelova (boja: bijela; Blending Mode: Soft Light; Opacity: 60%) i sjena (boja: crna; Opacity: 40%).

adding highlights and shadows to the upper section of the time machine

26. korak

Uzmite Rectangle Tool (M) i napravite 50 x 2 px oblik, obojite ga bojom #29537A, dodajte mu rub od 2 px (#161B1E) i smjestite oba oblika na vrh telefonske govornice.

creating and positioning the main shape of the time machines upper section

27. korak

Dodajte 50 x 1 px sjenu (boja: crna Opacity: 40%) prema donjem dijelu oblika koji smo upravo izradili, i podesite osvjetljenja (boja: bijela; Blending Mode: Soft Light; Opacity: 60%) prema desnoj strani koristeći 2 x 1 px pravokutnik i jedan širi 4 x 1 px smještene na 2 px udaljenosti jedan od drugog.

Sa smještenim detaljima, odaberite i grupirajte sve dijelove (Control-G).

adding details to the first section of the time machines upper body

28. korak

Dodajte manji 42 x 2 px dio (#22415B) iznad onog kojeg smo upravo napravili i podesite mu vanjsku liniju na 2 px (#161B1E) te iste detalje (osvijetljenja i sjene), na kraju ih grupirajući (Control-G).

adding the second section to the time machines upper body

29. korak

Dodajte malo osvjetljenje krovu telefonske govornice tako d izradite 4 x 6 px pravokutnik (#D8D2BA) (1) sa 2 px rubom (#161B1E) (2) na vrh kojem ćemo dodati 4 x 2 px horizontalni razdjelnik (#161B1E) kojeg prati jedan vertikalni od 2 x 4 px  (#161B1E) (3). Dodajte malo suptilnih sjena ( boja: crna; Opacity: 40%) na vrh žutog oblika i horizontalni razdjelnik pazeći da ih snjestite ispod (desni klik mišem > Arrange > Send Backward) (4).

Završite dodavanjem 10 x 8 px elipse (#161B1E) (5) koju ćemo podesiti uklanjanjem donje sidrišne točke (anchor point).

creating the time machines headlight

30. korak

Odaberite i grupirajte (Control-G) sve elemente koji čine osvijetljenja i smjestite ih na vrh vremenskog stroja horizontalno ih poravnajući (horizontal center align).

positioning the headlight onto the time machine

31. korak

Dodajte lijevi dio telefonske govornice izradom 1 x 10 px pravokutnika koji ćemo obojiti bojom #29537A, dodati joj 2 px vanjski rub (#161B1E) i zatim grupirati (Ctrl-G) te poravnati na gornji dio glavnog tijela.

creating and positioning the time machines left side section

32. korak

Uzmite kopiju (Ctrl-C < Ctrl-F) dijela sa strane koji smo upravo izradili i smjestite je s desne strane tijela govornice kako biste završili ikonu.

tardis icon finished

6. Izradite ikonu soničnog odvijača

Prvu ikonu smo završili i možemo zaključati taj sloj te krenuti na drugi kako bismo napravili ikonu doktorovog soničnog odvijača.

Pretpostavljam da ste već zumirali rešetku, pa počnimo.

1. korak

Uzmite Pen Tool (P) i napravite donji dio odvijača crtanjem 12 x 12 kvadrata koji obojimo bojom #4B4E4F i smjestimo 2 px od ruba aktivnog područja za crtanje.

creating and positioning the main shape for the sonic screwdrivers bottom section

2. korak

Prilagodite kvadrat dodajući dvije nove sidrišne točke sa strane na 2 px od gornjeg ruba (2) a donje pomaknite za 2 px prema unutra. Individualno odaberite sidrišne točke sa strane koje smo napravili i upotrijebite Convert Selected Anchor Points to Smooth opciju lagano podešavajući krivulju pomoću drški (3).

Sada obliku napravite rub debljine 2 px (#161B1E) koristeći Offset Path metodu (Object > Path > Offset Path > i unesite 2 px u Offset vrijednosti) (4).

adjusting the main shape of the screwdrivers bottom section

3. korak

Dodajte 12 x 12 px pravokutnik (#161B1E) na vrh oblika koje smo upravo napravili smještajući ga 2 px od donjeg dijela ruba.

adding the horizontal divider to the screwdrivers bottom section

4. korak

Nastavite dodavati detalje trenutnom dijelu izradom i smještanjem 4 x 2 px pravokutnika (#4B4E4F) gornjem rubu većeg sivog oblika (1). Napravite mu uobičajen rub debljine 2 px (#161B1E) i pošaljite ga straga (desni klik > Arrange > Send to Back) (2) i zatim dodajte 2 x 2 px kvadrat (#161B1E) sa svake strane većeg ruba (3).

I konačno, dodajte nekoliko horizontalnih linija i vertikalnih osvjetljenja (boja: bijela; Blending Mode: Soft Light; Opacity: 60%) (4) i zatim odaberite i grupirajte (Control-G) sve oblike zajedno.

adding details to the lower section of the sonic screwdriver

5. korak

Dodajte 10 x 6 px pravokutnik (#C6BABA) na vrh dijela kojem smo upravo dodali detalje (1) i podesite ga dodavanjem dviju novih sidrišnih točaka kako bismo gornje mogli povući za 2 px prema unutra.

Napravite dobivenom obliku rub debljine 2 px (#161B1E) i zatim ih oboje pošaljite straga (desni klik miša > Arrange > Send to Back) (3), dodajući suptilna osvjetljenja (color: white; Blending Mode: Normal; Opacity: 60%) kao što je prikazano na slici (4). Na kraju odaberite i grupirajte (Ctrl-G) sve elemente.

adding the bottom connector section to the screwdriver

6. korak

Dodajte još jedan 8 x 2 px pravokutnik (#847F80) sa 2 px rubom (#161B1E) preko segmenta konektora koji smo upravo napravili pazeći da se linije pritom preklapaju.

adding a small segment to the sonic screwdrivers bottom connector

7. korak

Dodajte segmentu 8 x 1 px sjenu (boja: crna; Opacity: 40%) na vrhu i manji, 4 x 1 px umetak (#161B1E) na dnu koji ćemo podesiti individualno odabirući i pomičući njegove sidrišne točke za 1 px prema unutra nakon čega ćemo odabrati i grupirati (Ctrl-G) sve oblike.

adding details to the small segment from the screwdrivers bottom connection

8. korak

Pomoću alata Rectangle Tool (M) napravite dršku odvijača koristeći pravokutnik 12 x 46 px (#C6BABA) koji ćemo prilagoditi podešavanjem Corner Radius postavke donjeg ruba na 2 px i zatim napraviti rub debljine 2 px (#161B1E).

creating and positioning the main shapes for the sonic screwdrivers handle

9. korak

Dodajte 12 x 2 px pravokutnik (#FFFFFF) na vrh bojom ispunjenog oblika drške, koji ćemo pretvoriti u osvjetljenje smanjenjem Opacity vrijednosti na 60%.

adding the top highlight to the sonic screwdrivers handle

10. korak

Dodajte traku slajdera koristeći 2 x 20 px pravokutnik (#161B1E) u sredini drške koji ćemo poravnati s gornjim dijelom.

adding the slider track to the screwdrivers handle

11. korak

Napravite gumb slajdera koristeći 4 x 6 px pravokutnik obojan bojom #847F80, sa rubom debljine 2 px (#161B1E), 2 x 2 px krugom (#161B1E) u njegovom donjem dijelu, i osvjetljenjem (boja: bijela; Blending Mode: Soft Light; Opacity: 80) grupirajući (Control-G) i smještajući ih ispod trake koju smo izradili u prošlom koraku.

creating and positioning the slider button onto the sonic screwdriver

12. korak

Završite dršku dodavanjem 8 x 2 px sjene (boja: crna; Opacity: 40%) ispod gumba i malo vertikalnih osvjetljenja (boja: bijela; Opacity: 60%) s desne strane, odabirući i grupirajući (Control-G) sve oblike kasnije.

adding highlights to the sonic screwdrivers handle

13. korak

Počnite raditi na gornjem konektoru odvijača izrađujući 12 x 6 px pravokutnik koji ćemo objiti bojom #847F80 i zatim smjestiti iznad vanjskog ruba drške.

creating and positioning the main shape for the screwdrivers top connector

14. korak

Prilagodite oblik koji smo upravo izradili dodavanjem dviju sidrišnih točaka sa strane na udaljenosti od 2 px od donjeg ruba (1), zatim ih individualno odaberite i pomaknite im gornje za 2 px prema unutra (1). Dobivenom obliku napravite rub debljine 2 px (#161B1E) (2), 14 x 2 px horizontalni razdjelnik (#161B1E) i par vertikalnih te horizontalnih osvjetljenja (boja: bijela; Blending Mode: Soft Light; Opacity: 80%) (4) odabirući i grupirajući (Control-G) sve oblike poslije.

adding details to the sonic screwdrivers top connector

15. korak

Koristeći gotovo isti proces, izradite još jedan dio upotrijebivši kao početnu točku 10 x 6 px pravokutnik (#847F80). Dodajte set sjena (boja: crna; Opacity: 40%) umjesto horizontalnih osvjetljenja, i također dodajte 4 x 1 px pravokutnik (#161B1E) prema donjem dijelu koji ćemo prilagoditi pomičući gornje sidrišne točke za 1 px prema unutra, grupirajući (Ctrl-C) poslije sve oblike.

creating the bottom facing connector for the screwdrivers extension section

16. korak

Počnite raditi na "glavi" odvijača izrađujući 12 x 18 px pravokutnik zaobljenih rubova sa Corner Radius postavkom od 1 px koji ćemo obojiti bojom #C6BABA i zatim smjestiti iznad segmenta s prijašnjeg koraka.

creating and positioning the main shape for the sonic screwdrivers head

17. korak

Podesite oblik koji smo upravo napravili tako da iz donjeg dijela izrežete 10 x 12 px zaobljeni pravokutnik sa Corner Radius postavkom od 3 px pomoću odabira Minus Front Shape Mode u Pathfinder panelu, podešavanjući dobivenom obliku rub debljine 2 px (#161B1E).

adjusting the sonic screwdrivers head

18. korak

Dodajte "glavi" odvijača par horizontalnih i vertikalnih osvjetljenja (boja: bijela; Opacity: 60%) i zatim dodajte 4 x 8 px pravokutnik (#163B1E) u sredini praznog prostora, poslije odabirući i grupirajući (Ctrl-G) sve oblike.

adding finishing touches to the screwdrivers head section

19. korak

Koristeći Rectangle Tool (M), izradite 10 x 1 px oblik (#847F80) sa rubom debljine 2 px (#161B1E) i 4 x 1 px suptilnu sjenu (color: white; Blending Mode: Soft Light; Opacity: 80%), grupirajući (Control-G) i smještajući ih iznad glave odvijača.

adding the small segment holding the sonic screwdrivers lens

20. korak

Napravite leće odašiljača pomoću 6 x 6 px kruga (#3579B7) sa rubom debljine 2 px (boja: bijela; Blending Mode: Soft Light; Opacity: 60%) koji ćemo poslije odabrati i grupirati (Ctrl-G).

Zatim odaberite sve dijelove koji čine odvijač i grupirajte ih također.

creating and positioning the lens onto the sonic screwdriver

21. korak

Počnite raditi drveni stalak izradom 28 x 92 px pravokutnika (#D69A72) sa rubom debljine 2 px (#161B1E) koji ćemo poravnati u sredinu područja za crtanje ispod, pazeći da ih oba smjestimo ispod samog odvijača (desni klik mišem > Arrange > Send to Back).

creating and positioning the main shapes for the screwdrivers wooden stand front section

22. korak

Izradite malo veći 36 x 100 px pravokutnik, obojite bojom #B77855 i zatim dodajte rub debljine 2 px također (#161B1E), smještajući ih ispod druga dva oblika stalka (desni klik mišem > Arrange > Send to Back).

adding depth to the wooden stand

23. korak

Dodajte 36 x 2 px svjetliji pravokutnik (#D69A72) na vrh ruba vanjskog dijela stalka, i još jedan 36 x 2 px tamniji (#995C3D) na dnu.

adding the lighter and darker sections to the screwdrivers wooden stand

24. korak

Upotrijebite Pen Tool (P) da nacrtate četiri dijagonalna pravokutnika (#161B1E) u rubovima stalka kako bi poprimio dojam dubine.

adding the four diagonal rectangles to the screwdrivers stand

25. korak

Stalku dodajte produžetke koji drže uređaj izradom 20 x 4 px pravokutnika (#4B4E4F) sa rubom debljine 2 px (#161B1E), frontalno osvjetljenje (boja: bijela; Blending Mode: Soft Light; Opacity: 60%), jedan 2 x 2 px krug (#161B1E) sa svake strane, i 24 x 2 px sjenu (boja: crna; Opacity: 40%)  ispod ruba.

Grupirajte (Ctrl-G) oblike i zatim napravite kopiju (Control-C > Control-F) koju ćemo smjestiti 20 px dalje od originala, grupirajući (Ctrl-G) i zatim ih vertikalno poravnavajući (vertical center align) sa stalkom ispod.

creating and positioning the sonic screwdrivers stand extending arms

26. korak

Završite stalak i samu ikonu dodajući 28 x 2 px horizontalno osvjetljenje (boja: bijela; Blending Mode: Soft Light; Opacity: 80%) na vrh prednjeg dijela, vertikalno 2 px široko prema desnoj strani,i malu sjenu (color: black; Opacity: 40%) ispod dijela glave uređaja.

Konačno grupirajte (Ctrl-G) elemente stalka i zatim cijelu ikonu, zaključavajući kasnije cijeli sloj.

sonic screwdriver icon finished

7. Izradite ikonu Daleka

Došli smo do treće i posljednje ikone koja je poznati Dalek robot koji se pojavljuje nebrojeno puta tijekom serije. Pripazite da ste na posljednjem sloju i zumirajte referentnu rešetku kako bismo mogli početi.

1. korak

Koristeći Rectangle Tool (M) napravite 64 x 12 px oblik (#4B4E4F) kkoji ćemo podesiti dodajući dvije bočne sidrišne točke na 4 px od gornjeg ruba pomičući gornje prema unutra za 4 px. Obliku dodajte rub debljine 2 px (#161B1E) i zatim smjestite oba oblika na aktivno područje za crtanje.

creating and positioning the main shapes for the daleks bottom section

2. korak

Počnite dodavanjem detalja bazi dodajući 64 x 2 px horizontalni razdjelnik (#161B1E) na vrhu (2) i 64 x 2 px osvjetljenje (boja: bijela; Blending Mode: Soft Light; Opacity: 60%)točno ispod (3). Dodajte tri 2 px široka vertikalna razdjelnika (#161B1E), pomičući gornji dio bočnih prema unutra (4) i dva para vertikalnih osvjetljenja između njih (5).

Konačno, odaberite i grupirajte oblike zajedno (Ctrl-G).

adding details to the daleks base

3. korak

Izradite donji dio Dalekovog tijela koristeći 54 x 52 px pravokutnik (#88A2A8) koji ćemo podesiti dodajući dvije sidrišne točke gornjem i donjem rubu, pomičući gornje za 8 px prema unutra. Dobivenom obliku dodajte rub debljine 2 px (#161B1E) i zatim smjestite oba oblika na daljinu od 52 px od ruba aktivnog pordručja za crtanje, i pošaljite ih iza baze (desni klik mišem > Arrange > Send to Back).

creating and positioning the main shapes for the daleks body

4. korak

Dodajte 40 x 2 px sjenu (boja: crna; Opacity: 40%) prema gornjem dijelu tijela ostavljajući prazninu od 2 px i zatim je maskirajte koristeći kopiju oblika koji se nalazi ispod kao Clipping Mask (odaberite oba oblika > desni klik mišem > Make Clipping Mask).

adding the shadow to the upper section of the daleks body

5. korak

Dodajte vertikalne linije kao razdjelnike koristeći tri 2 x 50 px pravokutnika (#161B1E) smještene 12 px jedan od drugog koje ćemo poravnati sa sjenom koju smo upravo izradili.

creating and positioning the vertical dividers onto the daleks body

6. korak

Podesite razdjelnike sa strane individualno ih odabirući i pomičući njihove sidrišne točke prema van za 6 px.

adjusting the daleks lower body vertical dividers

7. korak

Zatim Dalekovom tijelu dodajte male sferične oblike koristeći 4 x 4 px krug (#C5D3D8) sa rubom debljine 2 px (#161B1E) i gornje poluosvjetljenje (boja: bijela; Opacity: 60%). Napravite četiri niza kupola smještajući ih kao što je prikazano na slici, međusobno vertikalno udaljene za 4 px.

adding the rows of spheres to the daleks lower body

8. korak

Sa završenim kupolama, upotrijebite kopiju njihovih rubova (kontura) kako biste napravili sjene ispod njih (boja: crna; Opacity: 40%) pazeći pritom da ih smjestite ispod (desni klik mišem > Arrange > Send Backward).

adding the shadows to the daleks spheres

9. korak

Napravite gornji dio Dalekovog tijela koristeći 42 x 24 px pravokutnik (#C5D3D8) koji ćemo podesiti koristeći isti proces koji smo upotrijebili za donji dio tijela, samo ćemo ovaj puta sidrišne točke pomaknuti za 4 px prema unutra.

Nastalom obliku dodajte rub debljine 2 px (#161B1E) i zatim smjestite oba oblika iznad sjene donjeg dijela tijela.

creating and positioning the main shapes for the daleks upper body

10. korak

Dodajte 34 x 2 px pravokutnik (#FFFFFF) na vrh plavog oblika koji smo upravo izradili i zatim ga pretvorite u osvjetljenje podešavajući mu Blending Mode u Soft Light dok Opacity smanjite na 80%.

adding a top highlight to the upper section of the daleks body

11. korak

Zatim dodajte 36 x 2 px horizontalni razdjelnik (#161B1E) ispod osvjetljenja koje smo upravo napravili i još jedan malo širi 42 x 2 px (#161B1E) prema dnu ostavljajući prazninu od 2 px od većeg ruba.

adding the two horizontal divider lines to the upper body of the dalek

12. korak

Dodajte set vertikalnih osvjetljenja (color: bijela; Opacity: 60%) ispod donjeg vertikalnog razdjelnika koji smo upravo izradili koristeći 2 x 2 px kvadrat i 4 x 2 px pravokutnik smještene 2 px jedan od drugog koje ćemo grupirati (Ctrl-G) i smjestiti s desne strane tijela.

creating and positioning the highlights onto the daleks upper body

13. korak

Dodajte srednji utor izradom 10 x 4 px pravokutnika (#6D8E93) koji ćemo podesiti individualnim odabirom i pomicanjem njegovih gornjih sidrišnih točaka za 1 px prema unutra. Dobivenom obliku dodajte rub debljine 2 px (#161B1E), gornjoj polovici sjenu (boja: bijela; Opacity: 40%) i zatim grupirajte zajedno (Control-G) sve oblike od kojih je stvoren smještajući ih iznad donjeg horizontalnog razdjelnika.

creating and positioning the middle insertion onto the daleks upper body

14. korak

Izradite Dalekovu lijevu "ruku" koristeći 8 x 8 px kvadrat (#4B4E4F) sa rubom debljine 2 px (#161B1E). Dodajte 8 x 2 px gornju sjenu (color: crna; Opacity: 40%) i 6 x 6 px krug (#161B1E), zatim grupirajte (Ctrl-G) i smjestite oblike s lijeve strane utora.

creating and positioning the daleks left arm

15. korak

Dodajte desnu "ruku" upotrebom kopije (Control-G > Control-F) jedne koju smo upravo izradili i smjestite je prema desnoj strani utora. Zatim dvaput kliknite na gruu kako biste je izolirali i dodajte 4 x 4 px krug (#88A2A8) kojeg prati manji krug 2 x 2 px (#161B1E) u sredini.

creating and positioning the daleks right arm

16. korak

Izradite gornje elemente dijela Dalekovog tijela koristeći 8 x 6 px pravokutnik (#7E989E) sa rubom debljine 2 px (#161B1E) za središnji dio, i dva 2 x 6 px pravokutnika sa istim 2 px rubom (#161B1E) za bočne, koje ćemo smjestiti 2 px međusobno udaljene.

creating and positioning the main shapes for the daleks upper elements

17. korak

Dodajte 2 px visoko osvjetljenje ( color: bijela; Blending Mode: Soft Light; Opacity: 80%) svakom elemntu koji smo upravo izradili, 4 x 2 px pravokutnik (#161B1E) prema gornjem dijelu glavnog središnjeg dijela, i set od 2 x 2 px krugova (#161B1E) prema njegovom dnu, poslije individualno grupirajući (Control-G) svaki od tri dijela.

adding details to the daleks upper elements

18. korak

Dodajte malo blagih sjena (boja: crna, Opacity: 40%) ispod tri elementa kojima smo upravo dodali detalje, i 4 x 4 px osvjetljenje (color: bijela; Opacity: 40%)  prema donjem dijelu tijela na kojem trenutno radimo.

adding highlights and shadows to the upper section of the daleks upper body

19. korak

Završite dio crtanjem bočnih elemata (#161B1E) koristeći Pen Tool (P) i kada završite odaberite i grupirajte sve oblike (Control-G).

adding the side decorative elements to the daleks upper body

20. korak

Počnite raditi na robotovom vratu izrađujući 30 x 14 px pravokutnik (#4B4E4F) koji ćemo podesiti koristeći isti proces korišten za oba dijela tijela, samo ćemo ovaj puta pomaknuti gornje sidrišne točke za samo 1 px prema unutra. Dodajte obliku rub debljine 2 px (#161B1E) i zatim smjestite oba oblika iznad tijela pazeći pritom da ih pošaljete iza (desni klik mišem > Send to Back).

creating and positioning the main shapes for the daleks neck

21. korak

Pomoću alata Rectangle Tool (M) dodajte dva 38 x 2 px horizontalna razdjelnika (#161B1E) smještena 2 px jedan od drugog i od donjeg ruba vrata.

adding the horizontal dividers to the daleks neck

22. korak

Zatim dodajte dva 2 x 20 px vertikalna razdjelnika (#161B1E) smještena 8 px jedan od drugog i smjestite ih na sredinu vrata, poravnavajući ih na donji dio njegovog ruba.

adding the vertical dividers to the daleks neck

23. korak

Dodajte neke detalje horizontalnim razdjelnicima izradom 2 x 1 px pravokutnika (#163B1E) koje ćemo smjestiti 2 px od vertikalnih.

adding details to the daleks neck horizontal dividers

24. korak

Završite dio vrata dodajući 30 x 1 px sjene (color: crna; Opacity: 40%) koje ćemo smjestiti kao što je prikazano na slici, odabirući i grupirajući (Ctrl-G) sve oblike poslije.

adding the horizontal shadows to the daleks neck

25. korak

Počnite raditi na glavi robota izradom elipse veličine 34 x 28 px (#C5D3D8) koju ćemo prerezati na pola uklanjanjem donje sidrišne točke. Dodajte dobivenom obliku rub debljine 2 px pomoću Offset Path metode i zatim smjestite oba iznad vrata.

creating and positioning the main shapes for the daleks head

26. korak

Dodajte glavi osvjetljenje debljine 2 px izradom kopije (Control-C > Control-F) plavog oblika i oduzimanjem (subtract u Pathfinder panelu) 30 x 24 px elipse od njega. Obojite dobiveni oblik koristeći bijelu boju (#FFFFFF) i zatim smanjite Opacity na 60%.

adding a highlight to the daleks head

27. korak

Izradite otvor u kojem se nalazi "oko" koristeći 10 x 6 px pravokutnik (#161B1E) koji ćemo prilagoditi pomicanjem gornje sidrišne točke za 2 px prema sredini. Dodajte 8 x 8 px krug (#161B1E) prema njegovom gornjem rubu i 4 x 1 px pravokutnik (#161B1E) iznad njega.

Kada završite, smjestite sva tri oblika prema gornjem dijelu glave ostavljajući prazninu razmaka 4 px od dna.

creating and positioning the enclosure for the daleks eye

28. korak

Završite oko dodavanjem 4 x 4 px kruga (#66A2C6) na vrhu onog kojeg smo napravili u prošlom koraku, dodajući osvjetljenje na njegov vrh (boja: bijela; Blending Mode: Soft Light; Opacity: 60%) i zatim odaberite i grupirajte (Control-G) sve njegove oblike.

adding finishing touches to the daleks eye

29. korak

Dodajte 6 x 2 px pravokutnik (#161B1E) na dnu glave i 2 x 2 px krug (#161B1E) smješten 2 px od obje njegove strane, lijeve i desne.

creating and positioning the small insertion and screw onto the daleks head

30. korak

Završite ikonu crtanjem rogova na glavi uz pomoć Pen Tool (P) alata sa ibojom ispune podešenom na #161B1E. Kada završite, grupirajte sve njegove komponente pomoću Control-G prečaca na tipkovnici.

dalek icon finished

Gotovo!

Biti ću iskren, bilo je duže nego što sam očekivao na početku, ali siguran sam da ste uz malo strpljenja uspjeli doći do kraja.

Nadam se da su vam ovi koraci bili lagani i što je najvažnije, da ste naučili nešto tijekom cijelog procesa.

all icons finished
Advertisement
Advertisement
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.