Photoshop tutorijali za dizajniranje flat ikonica

Photoshop kurs - Adriahost blog 2016

Flet dizajn (engl. Flat design) prepoznatljiv je po tendenciji da se u što manjoj meri upotrebljavaju stilski elementi koji stvaraju iluziju postojanja tri dimenzije. Cilj je koristiti minimalističke elemente izražavanja kada je u pitanju boja i tipografije. Izbacuju se iz upotrebe složene teksture, duboke senke i gradient, umesto njih uvode se predstave koje isto to dočaravaju uz što manju potrošnju resursa. Ovakav pravac u dizajnu nije se razvio po principu nasumičnog trenda. Flet dizajn omogućava lakšu ilustraciju, dopadljiv je i privlači svojom jednostavnošću, ali omogućava i brže učitavanje elemenata na veb stranici kao i promene veličina ilustracija na različitim veličinama ekrana kod responsive sajtova.

Photoshop kurs iz dizajniranja flat ikonica

Uz pomoć ovog teksta možete naučiti da napravite šest kopletnih ikonica čiju namenu možete odrediti sami. Obavezno obratite pažnju na način kojim se tekst odvija jer samo u početku imate sitna objašnjenja za svaki detalj, kasnije, kako se ikonice ređaju imate sve manje uputstava, ali i sve više zadataka tipa “napravite sada dugu senku” ili “dodajte zvezde i finalizirajte ikonicu”.

Doživite ovaj tekst kao kratki Photoshop kurs koji se ne završava sa izradom ikonica, već vas uči da to stečeno znanje primenite na svoje ideje i zamisli, i na neke druge ilustracije. Akcije i alati koji se u daljem tekstu koriste imaju zadatak da nekog ko ih iskoristi na opisani način poduče i uvedu u svet ilustrovanja.

Bonus sadržaj uz svaku ikonicu

Na kraju svakog dela tutorijala možete preuzeti radnu PSD datoteku i paletu boja. Trudite se da što manje koristite i jedno i drugo, probajte da uradite ikonice samo uz ovo uputstvo, a onda iskontrolišite uz pomoć naših datoteka. Evo šta tačno možete preuzeti:

  • PSD datoteka sa svim slojevima ikonice (slojevi su imenovani i sadrže kratko uputstvo u imenu samog sloja)
  • Paleta flat boja koje možete koristiti za izradu ikonica (istu paletu koristimo za kompletan tutorijal)

Flat ikonica sa kosmičkom raketom

Na slici ispod možete pronaći boje koje ćemo koristiti u izradi ove ikonice. Koristićemo boje koje u oku posmatrača deluju retro. Ovu sliku možete sačuvati (desni klik na ikonicu i odaberite Save Image As…) na vašem računaru i otvoriti je u Photoshop-u. Istu paletu možete pronaći i ispod svakog dela ovog tutorijala u Radnim datotekama.

Flat boje za izradu ikonica Adriahost blog

Onda kada to bude bilo potrebno boju ćete odabrati uz pomoć Eyedropper Tool-a koji možete pozivati i tasterom na tastaturi I. Dovoljno je da odabere ovaj alat i kliknete na željenu boju, videćete izmenu koja se ogleda u promeni boje Foreground-a.

EyeDropper Tool - Flat dizajn ikonice

Korak 1

Najpe otvorite novi dokument veličine 600x600 px. Da to uradite kliknite na File-New (ili koristite kombinaciju tastera Ctrl+N), a zatim u polja Width i Height unesite vrednost 600.

Izrada Flat ikonica u Photoshopu slika 4

Naša ikonica će biti okrugla, pa odaberite Ellipse Tool (prečica na tastaturi je taster U) iz osnovnih oblika (Shape) u panelu sa alatima.

Ellipse Tool - Izrada flat ikonica u Photoshopu slika 3

Kliknite na sredinu konvasa (dokument koji ste napravili) da bi se otvorile opcije za oblik koji ćemo formirati. Unesite 512 u polja Width i Height što će rezultirati kreiranjem pravog kruga 512x512 px.

Izrada Flat ikonica u Photoshopu slika 5

Obojićemo sada krug tamno plavom bojom iz palete koju ste videli na početku. Preuzmite sliku palete, otvorite je u Photoshopu. Odaberite Eyedropper Tool i kliknite na boju 4.

Odaberite ponovo Ellipse Tool (taster U) i u gornjem panelu alata pronađite Fill opciju, kliknite i odaberite prvu boju iz nedavno korišćenih boja i to je boja koju ste odabrali uz pomoć Eyedropper Tool-a.

Izrada Flat ikonica u Photoshopu slika 6

Korak 2

Dobili smo osnovu ikonice koja predstavlja svemir. Na to ćemo dodati osnovu rakete. Napravićemo belu elipsu na sredini osnovnog kruga. Uradićemo to uz pomoć Ellipse Tool-a ( taster U). Boju korigujemo u gornjem panelu u opciji Fill dok je odabran Ellipse Tool.

 

Izrada Flat ikonica u Photoshopu slika 7

Nakon toga odarati Direct Selection Tool (taster A). Kliknuti na ivicu osnove rakete kako bi putanja (path) i anchor tačke postali vidljivi.

Izrada Flat ikonica u Photoshopu slika 8

Odabrati sada Convert Point Tool koji se nalazi u izborniku Pen Tool-a (taster P na tastaturi). Kliknite na gornju tačku kako bi vrh rakete bio formiran pod oštrim uglom.

Izrada Flat ikonica u Photoshopu slika 9

To izgleda ovako:

Izrada Flat ikonica u Photoshopu slika 10

Korak 3

Sada ćemo iseći donji deo osnove rakete kako bi ona počela da poprima pravi oblik. Još dok je odabrana osnova rakete, idite na Path Operations u Shape control panelu (mora biti odabran Ellipse Tool) koji se nalazi na vrhu i odaberite Intersect Shape Areas.

Izrada Flat ikonica u Photoshopu slika 11

Odaberite Rectangle Tool (taster U) koji se nalazi u istom izborniku gde i Ellipse Tool. Obuhvatite ovim oblikom najveći deo rakete tako da donji deo ostane izvan pravougaonika koji upravo povlačite.

Izrada Flat ikonica u Photoshopu slika 12

Korak 4

Sada ćemo jedan deo rakete postaviti da izgleda kao da je u senci. Uključite Smart Guides u View-Show-Smart Guides. U pitanju je navođenje koje će postaviti nove oblike u pravilnu poziciju, odnosno, olakšaće vam postavljanje tako što će reagovati kada se budete približili pravom mestu.

Izrada Flat ikonica u Photoshopu slika 13

Napravite novi oblik uz pomoć Rectangle Tool-a (taster U) koji će pokriti desni deo rakete. Obojite ga svetlo sivom bojom iz palete. Boja označena brojem 6.

Izrada Flat ikonica u Photoshopu slika 14

Korak 5

Sada treba sakriti deo pravougaonika koji prelazi okvire rakete. Držite Ctrl i kliknite na sloj osnove rakete u Layers panelu. Osnova će biti obuhvaćena linijama koje prikazuju odabrano područje, u ovom slučaju osnovu rakete (njen oblik – shape). Kliknite sada na sloj u kome se nalazi svetlo sivo obojeni pravouganik koji će predstavljati stranu rakete u senci. Odmah zatim kliknite i na Add Layer Mask ikonicu u dnu Layers panela. Sav višak pravougaonika koji prelazi okvire osnove rakete treba da bude uklonjen kao na slici ispod.

 

Izrada Flat ikonica u Photoshopu slika 15

Korak 6

Kliknite ponovo na Ellipse Tool (taster U) i napravite jedan manji, pravi krug koji će predstavljati prozorčić ove naše rakete. Obojićemo ga tamno sivom, odnosno, 50% Gray bojom koju možete odabrati iz Fill palete.

 

Izrada Flat ikonica u Photoshopu slika 16

Dodaćemo i staklo, pa dok je odabran sloj u kome ste formirali prozor iskoristite tastere na tastaturi Ctrl+J da duplirate taj sloj (dobićete dve identične kopije). Pritisnite tastere Ctrl+T za transformaciju sloja koji se nalazi na vrhu. U panelu Transform Tool-a redukujte Width i Height kruga na 70%.

Izrada Flat ikonica u Photoshopu slika 17

Popunite novi krug svetlo plavom bojom. Boju možete korigovati po želji i duplim klikom na ikonicu sloja oblika čiju boju želite da promenite. Otvorite će prozor u kome je dovoljno da kliknete na oblast boje koju želite da primenite.

 

Izrada Flat ikonica u Photoshopu slika 18

Dodaćemo sada i jedan deo na dnu rakete za koji ne znamo kako bismo ga nazvali, ali izgleda praktično. Odaberite Rounded Rectangle Tool (taster U), u pitanju je zaobljeni pravouganik.

Izrada Flat ikonica u Photoshopu slika 19

Napravite oblik i obojite ga tamnijom sivom bojom, kao na slici ispod.

Izrada Flat ikonica u Photoshopu slika 20

Uhvatite taj sloj u paleti Layers i prevucite je ispod sloja u kome se nalazi osnova rakete (sloj Ellipse 2 – ako niste menjali imena slojeva).

Izrada Flat ikonica u Photoshopu slika 21

Korak 7

Hajde da napravimo nove detalje – krila ili zakrilca. Odaberite Ellipse Tool i napravite pravilni krug, obojite ga bojom broj 2 iz palete koju smo postavili na početku teksta. Odaberite Direct Selection Tool (taster A), kliknite na ivicu oblika. Ponovo kliknite i povucite donju tačku kruga tako da ceo oblik razvučete. Prilikom povlačenja držite taster Shift kako bi oblik ostao pravilan.

Izrada Flat ikonica u Photoshopu slika 22

Odaberite sada Convert Point Tool i kliknite na donju tačku kako bi odblik dobio oštar ugao u donjem delu.

 

Izrada Flat ikonica u Photoshopu slika 23

Korak 8

Iskoristite tastere Ctrl+T da pokrenete Transform Tool. Blago zarotirajte oblik. Postavite sloj u kome se nalazi ovaj oblik iza rakete (ispod sloja u kome se nalazi raketa u paleti Layers).

Izrada Flat ikonica u Photoshopu slika 24

Duplirajte sada ovaj sloj kombinacijom tastera Ctrl+J. Zatim idite na Edit-Transform-Flip Horizontal. Uhvatite oblik i povucite da na levu stranu držeći taster Shift kako bi oblik bio postavljan tačno u odnosu na prvi-susedni oblik.

Izrada Flat ikonica u Photoshopu slika 25

f

Izrada Flat ikonica u Photoshopu slika 26

 

Napravite ponovo kopiju ovog sloja kombinacijom tastera Ctrl+J. Postavite ga tačno na srediti rakete. Odaberite Transform Tool kombinacijom tastera Ctrl+T. Spljeskajte oblik povlačenjem spoljnih tačaka ka sredini. Blago ga zarotirajte da bude postavljan u pravilan uspravan položaj.

Izrada Flat ikonica u Photoshopu slika 27

Korak 10

Dodaćemo sada popularnu (u svetu flat dizajna) flat dugačku senku. Napravite pravougaonik obojen crnom bojom sa postavljanjem Opacity-a na 50% u Layers panelu.

Izrada Flat ikonica u Photoshopu slika 28

Pokrenite sada Transform Tool kombinacijom tastera Ctrl+T. Zarotirajte za -45 stepeni pravougaonik koji ste dodali i koji će predstavljati senku.

Izrada Flat ikonica u Photoshopu slika 29

Uvećajte pravougaonik tako da prekrije raketu. Koristite Direct Selection Tool i jednostavno razvucite pravougaonik.

Izrada Flat ikonica u Photoshopu slika 30

Korak 11

Povucite sada sloj u kome se nalazi senka skroz ispod svih elemenata koji čine raketu, ali ga držite iznad sloja osnove ikonice.

Izrada Flat ikonica u Photoshopu slika 31

Odaberite Add Anchor Point Tool (nalazi se u istom izborniku gde i Pen Tool koji pokrećete tasterom P) i dodajte nekoliko anchor tačaka pravougaoniku koji će nam pomoći da napravimo senku. Obavezno postavite anchor tačke pri vrhu gde senka dodiruje gornju desnu stranu rakete i na dnu gde dodiruje donju levu stranu rakete.

Izrada Flat ikonica u Photoshopu slika 32

Pogledajte na slici ispod gde možete dodati nove tačke:

Izrada Flat ikonica u Photoshopu slika 33

Odaberite sada Direct Selection Tool (taster A) i uhvatite svaku anchor tačku i povucite je iza rakete tako da je jednostavno sakrijete.

Izrada Flat ikonica u Photoshopu slika 34

Kada postavimo sloj na pravo mestu u paletu Layers(iza sloja u kome je osnova rakete) to izgleda upravo ovako:

Izrada Flat ikonica u Photoshopu slika 35

Korak 12

Hajde da se sada otarasimo i viška senke koja prelazi okvire osnovnog kruga koji predstavlja osnovu naše ikonice. Odaberite sloj u paleti Layers u kome se nalazi senka koju smo kreirali. Držite taster Alt, pomerite kursor miša iznad osnovnog kruga ikonice sve dok ne vidite da se kursor trasformisao u mali kvadratić sa strelicom, tada kliknite na taj sloj što će kreirati Clipping Mask-u.

Izrada Flat ikonica u Photoshopu slika 36

Sav višak u tok trenutku nestaje. Odaberite sada Rectangle Tool (taster U), i promenite Fill color senke u linear gradient iz crne prema beloj. Prebacite Blending Mode u paleti Layers u Multiply kako bi se senka lepo uklopila u okolinu. Pogledajte kako to izgleda na slici

Izrada Flat ikonica u Photoshopu slika 37

Korak 13

Dodaćemo još par detalja ovoj našoj raketi. Odaberite Ellipse Tool (taster U) i postavite crvenu elipsu tako da obuhvati ceo vrh rakete negde do pola prozora. Kliknite desnim klikom na taj sloj sa elipsom i u meniju koji se otvori odaberite Rasterize Layer. Kliknite zatim na sloj sa osnovom rakete, zatim zadržite taster Ctrl i kliknite na ikonicu odabranog sloja kako bi sav sadržaj u tom sloju bio odabran. Kliknite na sloj u kome se nalazi elipsa pri vrhu rakete. Iskoristite kombinaciju tastera Shift+Ctrl+I da izvrnete selekciju. Pritisnite taster Delete na vašoj tastaturi koji će obrisati sav višak elipse koji prelazi okvire vrha rakete.

Izrada Flat ikonica u Photoshopu slika 38

Za kraj dodati nekoliko zvezdica u boji broj 3 koju možete pronaći u paleti na početku teksta(ili odmah dole ispod). Rezultat konačno izgleda ovako:

Flat ikonica rakete - Adriahost blog tekst

Radne datoteke:

PSD – Ikonica Raketa – Adriahost blog 2016

Paleta flat boja

Flat ikonica sa planetom i zvezdama

Uz pomoć jednostavnih procesa u Photoshop-u i osnovnih oblika (Shapes) možemo ubrzati proces ilustracije, kao što smo videli u prethodnom slučaju sa ilustrovanjem rakete. Hajde da sada napravimo ikonicu planete u kompletu sa prstenom asteroida koji je okružuje.

Korak 1

Koristićemo istu veličinu konvasa (engl. Convas, prev. Platno) 600x600 sa belom pozadinom. Pa napravite novi dokument preko File – New ili koristite prečicu na tastaturi Ctrl+N.

Izrada Flat ikonica u Photoshopu slika 4

Prvo ćemo kreirati osnovu ikonice koja može biti tamno plave boje, odnosno, boje koja će predstavljati svemir. Odaberite Ellipse Tool (taster U). Kliknite na sredinu konvasa (dokument koji ste napravili) da bi se otvorile opcije za oblik koji ćemo formirati. Unesite 512 u polja Width i Height što će rezultirati kreiranjem pravog kruga 512x512 px.

Photoshop - Flat ikonica rakete slika 1

Obojićemo sada krug tamno plavom bojom iz palete koju ste videli na početku. Preuzmite sliku palete, otvorite je u Photoshopu. Odaberite Eyedropper Tool i kliknite na boju 4.

Odaberite ponovo Ellipse Tool (taster U) i u gornjem panelu alata pronađite Fill opciju, kliknite i odaberite prvu boju iz najkorišćenijih boja i to je boju koju ste odabrali uz pomoć Eyedropper Tool-a.

Izrada Flat ikonica u Photoshopu slika 6

Korak 2

Napraviti i planetu na isti način na koji je napravljena i osnova ikonice. Dakle, koristiti Ellipse Tool (taster U) i boju iz palete boja broj 3. Za veličinu kruga uzeti dimenzije 250x250 px.

Photoshop - Flat ikonica rakete slika 2

Odabrati Rectangle Tool (taster U) i napraviti grupu pravougaonika čije boje i dimenzije variraju u približno sličnom opsegu. Pogledajte sliku ispod:

Photoshop - Flat ikonica rakete slika 3

Da bismo olakšali posao hajde da grupišemo sve ove slojeve u jednu grupu. Odaberite prvi pravougaonik, držite taster Shift sve vreme, zatim odaberite poslednji pravougaonik u paleti slojeva. Napravite grupu slojeva kombinacijom tastera Ctrl+G.

Photoshop - Flat ikonica rakete slika 4

Odaberite grupu slojeva koju ste upravo napravili i zarotirajte je. Uradite to tako što ćete pokrenti Transform Tool kombinacijom tastera Ctrl+T. Postavite kursor miša na jedan od uglova pravougaonika Transform Tool oblasti (kursor će se pretvoriti u polukružnu liniju sa strelicama) i povuce u jednu stranu.

Photoshop - Flat ikonica rakete slika 5

Korak 3

Sada se treba osloboditi nepotrebnih delova koji prelaze oblast planete. Odaberite sloj u kome je oblik planete. Pokrenite Ellipse Tool (taster U) i desnim klikom kliknite na planetu. Odaberite Make Selection u izborniku koji se otvorio i kliknite na OK.

Photoshop - Flat ikonica rakete slika 6

Videćete da je krug koji predstavlja planetu odabran nezavisno od pravougaonika koji stoje u slojevima iznad.

Photoshop - Flat ikonica rakete slika 7

U paleti Layers odaberite grupu u kojoj se nalaze pravougaonici. Kliknite na ikonicu Add Layer Mask. Sav višak pravougaonika koji prelazi oblast planete će biti sakriven.

Photoshop - Flat ikonica rakete slika 8

Korak 4

Da bi planeta izgleda malo vernije dodaćemo i senku u desnom donjem delu planete. Kliknite na sloj sa planetom. Duplirajte ga kombinacijom tastera Ctrl+J. Kopiju sloja planete prevucite iznad svih slojeva. Pokrenite Move Tool (taster na tastaturi V) i u samom konvasu uhvatite sloj koji se sada nalazi na vrhu (kopija planete) i pomerite ga malo u levo).

 

Photoshop - Flat ikonica rakete slika 9

Držite taster Ctrl i kliknite na samu ikonicu u paleti Layers koja predstavlja osnovnu planetu. Videćete da će u konvasu planeta biti odabrana. Kliknite sada na sloj koji predstavlja kopiju planete i koji se u paleti Layers nalazi na vrhu. Kliknite desnim klikom na taj sloj i odaberite opciju Rasterize Layer. Iskoristite kombinaciju tastera Shift+Ctrl+I da obrnete selekciju (u sloju kopije planete biće odabrano sve što prelazi okvire osnovnog sloja planete čiju smo selekciju izvršili ranije) i pritisnite taster Delete na vašoj tastaturi.

Obustavite selekciju kombinacijom tastera Ctrl+D i ovo je rezultat koji treba da dobijete:

Photoshop - Flat ikonica rakete slika 10

Da bi sav ovaj trud urodio efektom senke postavite Blend Mode na Screen i Opacity na 50%.

Photoshop - Flat ikonica rakete slika 11

Korak 5

Sada treba dodati prsten asteroida oko planete. Odaberite Ellipse Tool i napravite novu elipsu preko planete.

Photoshop - Flat ikonica rakete slika 12

Odaberite opciju Subtract Front Shape i napravite još jednu elipsu unutar prve koja će bukvalno rečeno napraviti rupu u prvoj elipsi zbog toga što smo označili opciju Substract Front Shape.

Photoshop - Flat ikonica rakete slika 13

Obojite prsten u boji broj 4 iz naše palete boja koju možete pronaći na početku teksta. Ako to već niste uradili preuzimite sliku iz teksta i uz pomoć EyeDropper Tool-a kliknite na boju broj 4 na slici (to će promeniti boju Foreground polja). Kliknite dva puta na sloj u kome se nalazi prsten. Otvoriće se prozor za korekciju boja i jednostavno kliknite na boju koja se sada nalazi u Foreground polju. Kliknite na ok i oblik će promeniti boju u onu koju ste odabrali.

Prsten zarotirajte na isti način na koji ste to uradili sa planetom i uz pomoć Transform Tool-a.

Photoshop - Flat ikonica rakete slika 14

Sada je potrebno obrisati deo prstena za koji će se pretpostavljati da se nalazi iza planete. Kliknite na sloj sa prstenom desnim klikom i odaberite opciju Rasterize Layer. Kliknite na sloj u kome se nalazi osnova planete. U tom sloju dok držite taster Ctrl kliknite na samu ikonicu sloja tako da će ceo oblik planete biti selektovan. Kliknite ponovo na sloj u kome se nalazi prsten. Odaberite Eraser Tool (taster E) i prosto obrišite deo prstena koji treba da se nalazi iza planete. Nakon toga obustavite selekciju kombinacijom tastera Ctrl+D. Evo rezultata:

 

Photoshop - Flat ikonica rakete slika 15

Korak 6

Dodajte flat senku na isti način na koji smo to uradili u ikonici rakete. Koristeći primer rakete dodajte i zvezde. Evo finalnog rezultata:

Photoshop - Flat ikonica rakete slika 16

Radne datoteke:

PSD – Ikonica Planeta – Adriahost blog 2016

Paleta flat boja

Flat ikonica radio teleskopa 

Krenućemo kao i u prethodnim slučajevima. Konvas našeg novog dokumenta biće veličine 600x600 px.

Izrada Flat ikonica u Photoshopu slika 4

Korak 1

Nacrtaćemo pravilni krug unutar osnove ikonice. Neka krug bude crne boje. Kao i od početka koristićemo Ellipse Tool (taster U). Kliknućemo i prozor koji se bude otvorio unećemo veličine 230x230 px. Približno ovako:

Photoshop ikonica radio teleskopa slika 1

Preko leve strane kruga ubacimoćemo novi oblik – pravougaonik koji će prekriti tek malo više od pola kruga. Stravićemo da pravougaonik bude crvene boje, pa možete uzeti broju broj 1 iz palete boja koju smo postavili na početku ovog teksta.

Photoshop ikonica radio teleskopa slika 2

Sada se treba otarasiti viška. Kliknite na sloj u kome se nalazi crnu krug, zatim kliknite na konvas desnim klikom i odaberite opciju Make Selection što će izvršiti celekciju crnog kruga.

Photoshop ikonica radio teleskopa slika 3

Kliknite na sloj u kome se nalazi crveni pravougaonik kako biste ga odabrali, a onda kliknite i na dugme Add Layer Mask. Ovaj postupak sakriće sav višak koji prelazi okvire crnog kruga.

Photoshop ikonica radio teleskopa slika 4

Evo šta treba dobiti:

Photoshop ikonica radio teleskopa slika 5

Pre nego što potpuno obrišemo crni krug hajde da uradimo još nešto. Donji deo teleskopa obojićemo tamnijom crvenom bojom. Docrtajte još jedan pravougaonik u donjem delu teleskopa i ponovite postupak za Add Layer Mask i sakrivanja viška uz pomoć crnog kruga.

Photoshop ikonica radio teleskopa slika 6

Korak 2

Dodaćemo i antenu na sredini teleskopa, ali pre toga treba dodati razvučenu elipsu na osnovni izgled antene. Uradićemo to uz pomoć Ellipse Tool-a (taster U).

Photoshop ikonica radio teleskopa slika 7

Antenu ćemo formirati u vidu trougla uz pomoć Polygon Tool-a (taster U), obojićemo je svetlo sivom bojom i dodaćemo jedan mali krug kao vrh antene. Kliknite bilo gde na konvas i unesite dimenzije i broj uglova koje vidite na slici ispod.

Photoshop ikonica radio teleskopa slika 8

Dobićete ovakav trougao:

Photoshop ikonica radio teleskopa slika 9

Kako od njega napraviti antenu? Pokrenite Transform Tool (Ctrl+T) i spljeskajte ga povlačenjem stranica tako da izgleda više kao na slici ispod i dodajte vrh (mali krug uz pomoć Ellipse Tool-a)

Photoshop ikonica radio teleskopa slika 10

Korak 3

Okrenućemo sada teleskop prema svemiru kako bi mogao da pretražuje signale. Odaberite najpre sve slojeve oblika koje smo napravili držeći taster Ctrl i kliktanjem na svaki od slojeva. Uz pomoć Transftorm Tool-a blago zarotirajte teleskop.

Photoshop ikonica radio teleskopa slika 11

Dodaćemo još jedan trougao kao podlogu. I ovde koristimo alat koji smo koristili malo pre.

Photoshop ikonica radio teleskopa slika 12

Unutar tog trougla ubacite još jedan manji uz uključenu opciju Subtract Front Shape:

Photoshop ikonica radio teleskopa slika 13

Pomerite dobijeni oblik ispod svih slojeva koji predstavljaju antenu kako bi se i na konvasu postavio ispod antene.

Photoshop ikonica radio teleskopa slika 14

Dodajte senku po postupku objašenjenom u prvom delu sa izradom ikonice rakete.

Photoshop ikonica radio teleskopa slika 15

Dodajte i nekoliko zvezdica i finalizirajte ikonicu:

Photoshop ikonica radio teleskopa slika 16

Radne datoteke:

PSD – Ikonica Radio teleskop – Adriahost blog 2016

Paleta flat boja

 

Flat ikonica letećeg tanjira

Korak 1

Najpe otvorite novi dokument veličine 600×600 px. Da to uradite kliknite na File-New (ili koristite kombinaciju tastera Ctrl+N), a zatim u polja Width i Height unesite vrednost 600.

Izrada Flat ikonica u Photoshopu slika 4

Naša ikonica će biti okrugla, pa odaberite Ellipse Tool (prečica na tastaturi je taster U) iz osnovnih oblika (Shape) u panelu sa alatima.

Ellipse Tool - Izrada flat ikonica u Photoshopu slika 3

Kliknite na sredinu konvasa (dokument koji ste napravili) da bi se otvorile opcije za oblik koji ćemo formirati. Unesite 512 u polja Width i Height što će rezultirati kreiranjem pravog kruga 512×512 px.

Obojićemo sada krug tamno plavom bojom iz palete koju ste videli na početku. Preuzmite sliku palete, otvorite je u Photoshopu. Odaberite Eyedropper Tool i kliknite na boju 4.

Odaberite ponovo Ellipse Tool (taster U) i u gornjem panelu alata pronađite Fill opciju, kliknite i odaberite prvu boju iz nedavno korišćenih boja i to je boja koju ste odabrali uz pomoć Eyedropper Tool-a prethodno.

Izrada Flat ikonica u Photoshopu slika 6

Napraviti gornji deo letećeg tanjira formiranjem pravilnog kruga:

Flat ikonica NLO - Adriahost blog slika 1

Sada je potrebno obrisati donji deo tog kruga. Napravite elipsu uz pomoć Ellipse Tool-a (taster U) .

Flat ikonica NLO - Adriahost blog slika 2

U paleti Layers odaberite i prvi krug i elipsu, zatim kliknite na konvas desnim klikom i odaberite opciju Unite shapes at Overlap:

Flat ikonica NLO - Adriahost blog slika 3

I ovo je rezultat koji treba da dobijete:

Flat ikonica NLO - Adriahost blog slika 4

Korak 2

Deo koji smo kreirali predstavlja stakleni deo NLO-a pa sada treba dodati i refleksiju. Kliknite na sloj u kome se nalazi ovaj deo (nalazi se u paleti Layers), iskoristite kombinaciju tastera Ctrl+J da duplirate taj sloj. Kliknite dva puta na novi sloj i promenite mu boju u tamnije plavu. Pokrenite Transform Tool (tasteri Ctrl+T) i umanjite taj oblik. To izgleda ovako:

Flat ikonica NLO - Adriahost blog slika 5

Dodajte jedan mali krug povrh svega, dok je sloj tog novog kruga odabran kliknite desnim klikom na njega i odaberite Make Selection:

Flat ikonica NLO - Adriahost blog slika 6

Odaberite sada oba sloja, poslednji dodati krug i sloj ispod njega ( u paleti Layers). U konvasu kliknite desnim klikom na oblike i u izborniku koji se otvorio odaberite Subtract Front Shape.

Obustavite selekciju kombinacijom tastera Ctrl+D i ponovo korigujte boju odraza na staklu(kliknite dva puta na ikonicu tog sloja u paleti Layers za promenu boje).

Cilj je da se dobije ovaj efekat:

Flat ikonica NLO - Adriahost blog slika 8

Dodajte sada još jednu elipsu koja će predstavljati neku vrstu kružnih krila letećeg tanjira. Koristite Ellipse Tool (taster U). Novu elipsu spustite par slojeva niže – ispod sloja staklene “kupole” kako bi se dobio efekat da krila okružuju staklo.

Flat ikonica NLO - Adriahost blog slika 9

Ispod tog sloja dodajte još jednu elipsu koja je tamnije boje kako bismo upotpunili predstavu:

Flat ikonica NLO - Adriahost blog slika 10

Dodaćemo i donji deo letećeg tanjira u sivoj boji. Koristite Rectangle Tool (taster U). I ovaj sloj spustite ispod ostalih, a iznad podnožja ikonice.

Flat ikonica NLO - Adriahost blog slika 12

Izaberite sada Direct Selection Tool i gornje uglove razvucite ka spolja:

Flat ikonica NLO - Adriahost blog slika 13

Dodajte i jednu žutu elipsu kako bi podnožje letećeg tanjira dobilo ovalni oblik. I ovaj sloj povucite ispod prethodnih, ali iznad podnožja cele ikonice.

Flat ikonica NLO - Adriahost blog slika 14

Dodajte nekoliko signalnih svetala da sve izgleda funkcionalnije:

 

Flat ikonica NLO - Adriahost blog slika 15

Senku i zvezde dodajte po već utvrđenoj proceduri sa početka teksta i finalizirajte ikonicu:

Flat ikonica NLO - Adriahost blog slika 16 rezultat

Radne datoteke:

PSD – Ikonica NLO – Adriahost blog 2016

Paleta flat boja

Flat ikonica teleskopa na tronošcu

Korak 1

Teleskop je lakše ilustrovati. Najpre otvorite novi dokument veličine 600×600 px. Da to uradite kliknite na File-New (ili koristite kombinaciju tastera Ctrl+N), a zatim u polja Width i Height unesite vrednost 600.

Izrada Flat ikonica u Photoshopu slika 4

Naša ikonica će biti okrugla, pa odaberite Ellipse Tool (prečica na tastaturi je taster U) iz osnovnih oblika (Shape) u panelu sa alatima.

Ellipse Tool - Izrada flat ikonica u Photoshopu slika 3

Kliknite na sredinu konvasa (dokument koji ste napravili) da bi se otvorile opcije za oblik koji ćemo formirati. Unesite 512 u polja Width i Height što će rezultirati kreiranjem pravog kruga 512×512 px.

Obojićemo sada krug tamno plavom bojom iz palete koju ste videli na početku. Preuzmite sliku palete, otvorite je u Photoshopu. Odaberite Eyedropper Tool i kliknite na boju 4.

Odaberite ponovo Ellipse Tool (taster U) i u gornjem panelu alata pronađite Fill opciju, kliknite i odaberite prvu boju iz najkorišćenijih boja i to je boju koju ste odabrali uz pomoć Eyedropper Tool-a prethodno.

Izrada Flat ikonica u Photoshopu slika 6

Odaberite sada Rectangle Tool (taster U) i povucite jedan običan pravougaonik. Obojite ga svetlijom crvenom iz palete boja koju smo postavili na početku teksta. To je crvena boja pod brojem 1.

Flat ikonica - Teleskop na tronoscu slika 1

Duplirajte taj sloj kombinacijom tastera Ctrl+J. Pokrenite Transform Tool (kombinacijom tastera Ctrl+T) i povucite gornju stranicu na dole po polovine visine pravougaonika. Obojite tu kopiju pravougaonika tamno crvenom bojom, odnosno bojom broj 2 iz palete boja. Taj drugi pravougaonik predstavljaće senku same cevi teleskopa.

Flat ikonica - Teleskop na tronoscu slika 2

Korak 2

Dodajte još dva pravougaonika koji će formirati izgled teleskopa. Pogledajte sliku ispod:

Flat ikonica - Teleskop na tronoscu slika 3

Dodajte elipsu plave boje koja će predstavljati sočivo. Spljeskajte elipsine krajeve uz pomoć Convert Point Tool alata.

Flat ikonica - Teleskop na tronoscu slika 4

Postavite sloj sa sočivom ispod sloja teleskopa da dobijete ovakav efekat:

Flat ikonica - Teleskop na tronoscu slika 5

Dodajte odsjaj na površini sočiva. Ako ste ispratili prethodne korake drugih ikonica, biće vam lako da to uradite. Dodajte i sive delove koji dolaze na deo teleskopa gde se prislanja oko prilikom posmatranja.

Flat ikonica - Teleskop na tronoscu slika 6

Korak 3

Izaberite Rounded Rectangle Tool (Pravougaonik sa zaobljenim uglovima) i dodajte tri nožice za teleskop. Na isti način napravite i poprečne prečke. Koristite Transform Tool da izvršite postavljanje nožica u određeni ugao.

Flat ikonica - Teleskop na tronoscu slika 7

Okrenite teleskop prema zvezdama (Transform Tool dok su istovremeno odabrani svi slojevi koji čine teleskop – bez nožica). Dodajte zvezde i senku.

Flat ikonica - Teleskop na tronoscu slika 8

Radne datoteke:

PSD – Ikonica Teleskop na tronošcu – Adriahost blog 2016

Paleta flat boja

Flat ikonica i ilustracija meseca sa oblacima

Korak 1

Ako ste pažljivo ispratili prethodna uputstva napred u tekstu sigurno već znate da mnogo toga uradite i bez posebnog upućivanja. Napravite novi dokument veličine 600x600px. Napravite osnovu ikonice u plavoj boji(boja broj 4) veličine 512x512 px u obliku pravog kruga.

Kada je osnova ikonice završena dodajte još jedan manji krug u centru ikonice u boji broj 3 iz palete boja koju smo postavili na početku teksta.

Flat ikonica mesec i zvezde slika 1

Preko tog kruga dodajte još jedan manji u gornjem desnom delu i pokrenite opciju Subtract Front Shape dok su oba sloja u paleti Layers odabrana (držite taster Ctrl i kliknite najpre na jedan pa na drugi sloj).

Flat ikonica mesec i zvezde slika 2

Ta akcija će od dva kruga proizvesti mesec.

Flat ikonica mesec i zvezde slika 3

Korak 2

Hajde da dodamo i malo oblaka koji će dočarati sliku noćnog neba i svetlog meseca. Isctajte nekoliko krugova tako da se dodiruju. Ujedinite te krugove uz pomoć opcije Unite Shapes dok su istovremeno odabrani slojevi koji treba da čine oblak.

Flat ikonica mesec i zvezde slika 4

Korak 3

Sada treba poravnati donji deo oblaka dodavanjem pravougaonika i korišćenjem opcije Subtract Front Shape. Ne zaboravite da u paleti Layers odaberete i sloj sa oblakom i sloj sa pravougaonikom istovremeno (držite taster Ctrl sve vreme dok klikćete na ova dva sloja da biste ih odabrali istovremeno).

Flat ikonica mesec i zvezde slika 5

 

Korak 4

Dodajte i jedan oblak iza meseca. Možete kopirati isti ovaj sloj iz prvog oblaka i uz pomoć Transform Tool-a ga umanjiti i taj sloj smestiti ispod sloja meseca u paleti Layers.

Flat ikonica mesec i zvezde slika 6

Napravite posebnu senku za svaki oblak i za mesec. Dodajte zvezde i vaša ikonica je spremna.

Flat ikonica mesec i zvezde slika 7 finalna

Radne datoteke:

PSD – Ikonica Mesec sa oblacima – Adriahost blog 2016

Paleta flat boja

 Svaka čast ako ste prateći uputstvo stigli do kraja

Ako ste početnik u grafičkom dizajnu i do ovih redova ste došli prateći kompletno uputstvo izrađujući jednu po jednu ikonicu budite ponosni na sebe. Nakon ovog kratkog kursa sigurno ćete moći da ilustrujete i svoje ideje brzo i lako. Podelite to sa nama tako što ćete nas potražiti na društvenim mrežama ili ispod u komentarima.

PRIJAVITE SE ODMAH ZA NAJNOVIJE TEKSTOVE SA NAŠEG BLOGA!

 

Tags: , , , ,

2 komentara

Trackbacks/Pingbacks

  1. Kako napraviti animirani GIF preloader u Photoshopu - април 6, 2016

    […] koje i sada možete da preuzmete, prilagodite i koristite za svoje potrebe. Tekst se nalazi ovde: Photoshop tutorijali za izradu flat ikonica. U današnjem uputstvu naučićemo kako da napravimo animaciju u Photoshop-u. […]

  2. 10 fantastičnih Photoshop tutorijala - мај 17, 2016

    […] Za korisnike koji su se već upoznali sa osnovnom površinom Photoshopa i rasporeda alata neće biti teško da isprate pet tutorijala za izradu ikonica koristeći popularni flat dizajn. Uputstva smo pripremili i prilagodili ih svim nivoima korisnika. Svih pet uputstava možete pročitati ovde: Photoshop tutorijali za dizajniranje flat ikonica. […]

Pošalji komentar