Tako bo videti naša aplikacija-Ikona na koncu. A zdaj dovolj govorjenja. Začnimo kar v Adobe Illustratorju ...
Korak 1: Ustvarjanje temeljev
Ko ste v Illustratorju, najprej ustvarite nov delovni prostor prek Datoteka>Novo. V naslednjem oknu izberite format 70x70mm. Potrdite okno s V redu.
Vzemite Orodje za pravokotnik iz vrstice orodja in enkrat kliknite kamor koli na svojem delovnem prostoru. Sledi pojavitev pogovornega okna, kjer lahko vnesete velikost svojega pravokotnika. Tukaj izberite velikost 35x35mm in potrdite s V redu. To je zdaj naše temelje za ikono aplikacije.
Ker ikone aplikacij podjetja Apple nikoli niso pravokotne, moramo poskrbeti, da se bodo zdaj zaokrožile vogali. Izberite pravokotnik in nato v zgornji menijski vrstici pojdite na Učinek>Stilizirani filterji>Zaokroži vogale ...
V naslednjem oknu vnesete polmer roba 7mm. Potrdite z V redu.
Ko potrdite ta učinek, se bodo vogali sicer zaokroženo prikazali, vendar se bo pot izvajala ravninsko. Da to spremenite, zdaj pojdite na Objekt>Pretvori videz. Učinek je bil zdaj pretvoren v objekt (potek poti zdaj neposredno poteka ob zaokroženih vogalih).
V naslednjem koraku potrebujete Paleto prehodov. Če je še niste odprli, jo najdete prek Okno>Prehod.
Kliknite zdaj na polje prehoda v Paleto prehodov, da napolnite svoj zaobljen pravokotnik s standardnim črno/belim prehodom. (Če vaš pravokotnik še ima konturo, je zdaj čas, da jo odstranite).
Pri nastavitvi kota prehoda vnesite vrednost 90°, da le-ta lepo poteka od zgoraj navzdol.
Ker naj bi naša ikona dobila modro-siv prehod, (lahko pa uporabite tudi lastne barve) sem za vas že pripravil dve vrednosti RGB barv.
• temno modra - 28/57/145
• svetlo modra - 84/244/255
Da ta barvitost zdaj dodelite prehodu, preprosto dvokliknite barvna polja v Paleto prehodov, kjer imate možnost vnesti vrednosti RGB.
(Če imate tam nastavljen drug barvni model, nato kliknite na majhno puščico zgoraj desno v Paleto prehodov, da izberete ustrezni barvni model).
Ko to storite, naj bi vse skupaj približno izgledalo tako kot pri vas (slika 11).
Da še nekoliko izboljšate prehod, pojdite na Učinek>Stilizirani filterji>Sij narahlo ... Pri načinu začetka polnila izberite Sestopič. Pri Prosojnost izberite vrednost 75% in pri Razmaz nastavite 8,8mm. Ker želimo ta učinek uporabiti le na zunanjem območju, postavite označevalno točko na Rob. Potrdite okno s V redu.
Naslednjič dodajte senčenje celotni zadevi. To storite tudi prek Učinek>Stilizirani filterji>Senčenje ... Izberite nastavitve za ta filter približno tako kot na sliki 13. Lahko pa tu malce eksperimentirate.
V naslednjem koraku boste kopirali pravokotnik z Command+C in ga ponovno vstavili na isto mesto z Command+F. (Na računalniku to storite z Strg+C in Strg+F).
Ker na kopiji pravokotnika več ne potrebujemo zgoraj uporabljenih učinkov, jih morate izbrisati. Kot nekateri že veste, se vsi učinki in filtri, ki jih uporabite v Illustratorju, prikažejo v Paleti videza. Če te palete na vašem zaslonu ni videti, jo lahko znova prikažete preko Okno>Videz.
Zdaj izbrišite senčenje. To lahko enostavno storite tako, da v Paleti videza kliknete in držite senčenje ter ga povlečete na majhen smetnjak v spodnjem desnem kotu te palete.
Senca v notranjost ni potrebno izbrisati, saj jo bomo le nekoliko prilagodili. Pred tem spremenite Barvo polnila vaše kopije pravokotnika v belo.
Nato v Paleti videza kliknite na Senčenje v notranjost, tam nastavite način na Navadno in pri barvi izberite globoko črno. Prekrivnost nastavite na 100%, pri Zameglitvi pa lahko izberete vrednost 10mm (Slika 17).
Da zdaj to kopijo z modrim gradientom na spodnjem izvirnem elementu združite, zmanjšajte Prekrivnost na 50% in nastavite način polnila na Mehka svetloba. Vse to lahko naredite preko Prosojnosti-Paleta. (Tudi to paleto znova najdete preko Okno>Prosojnost).
S tem se bo kontrast nekoliko povečal in našemu ikoni aplikacije bo dodana globina.
Korak 2: Ustvarjanje žarečega obroča
V tem koraku se bomo posvetili temu, kako lahko ustvarite žareči obroč za ikono aplikacije. Začasno izklopite dva pravokotnika, ki ste jih ustvarili v koraku 1, da boste imeli spet prostor na delovni površini.
Pridobite orodje Črtno orodje iz vrstici orodij in nastavite Barvo obrobe na črno ter Debelino obrobe na 0,5pt.
Zdaj potegnite približno od središča navzgor črto, medtem držite miškino tipko. Ko končate risanje črte (miškino tipko še vedno držite), pritisnite Ctrl tipko + tipko z obema oklepajema < >.
Zdaj z držano miškino tipko enkrat v krogu. Zaradi te kombinacije tipk boste ustvarili različno število črt, odvisno od hitrosti premikanja miškinega kazalca.
Ko boste enkrat opravili krog, bi moralo pri vas videti približno tako kot na sliki 19. (Poskusite večkrat, saj velja tudi tukaj pregovor "Vaja dela mojstra").
Obkljukajte vse črte in jih združite z Command+G (na računalniku: Strg+G). Kopirajte s Command+C in Command+F (na računalniku: Strg+C in Strg+F) ter enako ponovno vstavite na isto mesto. Pri tej kopiji spremenite barvo obrobe v belo in jo rahlo zavrtite v desno ali levo, tako da bodo črne črte delno vidne.
Celota naj nato približno tako izgleda pri vas. (Slika 20):
Zdaj spet označite vse črte in jih ponovno združite z Command+G (na računalniku: Strg+G).
Zdaj lahko znova prikažete pravokotnike iz koraka 1. Pazite, da je središče vašega žarečega obroča približno v središču vašega pravokotnika.
Zdaj kopirajte siv, zaobljen pravokotnik, ki ste ga v koraku 1 dodelali z modrim prelivom. (Command+C ali na računalniku - Strg+C).
Zdaj kliknite na svojo skupino z žarki in si oglejte paleto prosojnosti. Tu zdaj imate možnost (podobno kot v Photoshopu) ustvariti masko. Dvokliknite na območje, ki ga vidite na sliki 23. S tem dvojnim klikom se ustvari t. i. maska prekrivnosti.
Ko ste to ustvarili, boste opazili, da se je vaša paleta slojev spremenila, dokler ste v maski. Z Command+F (na računalniku: Strg+F) zdaj vstavite prej kopirani pravokotnik v masko. Sedaj morate samo še zmanjšati prosojnost s 50% na 10%.
Zdaj zapustite masko, da se vrnete v običajni prikaz. To storite tako, da enkrat kliknete na belo polje poleg simbola maske. (Slika 25).
Korak 3: Ustvarjanje osnove za piktogram
Zdaj smo skoraj končali z večino dela in pripravljeni smo vnesti piktogram ali simbol v našo aplikacijo. Vendar moramo najprej hitro ustvariti osnovo oziroma majhno platformo, da bo kasneje vse skupaj še boljše izgledalo.
Vzemite orodje za elipso in narišite približno na sredini elipso. (Glej sliko 26).
To elipso zapolnite z temno modro barvo. Za to sem uporabil naslednje barvne vrednosti. RGB - 0/0/255.
Zmanjšajte prosojnost na približno 70% in nato pojdite na Učinek>Filtriranje megle>Gaussov megljevec …
Za megljenje sem izbral polmer 28 slikovnih točk. Seveda lahko to vrednost tudi prosto spremenite. Potrdite to z V redu.
Korak 4: Vstavljanje piktograma
Ko je osnova postavljena, je končno čas. Pravzaprav moramo samo še vnesti piktogram v našo aplikacijo. Kot majhno dodatno možnost sem vam v delovne datoteke dodal nekaj različnih piktogramov. Lahko pa uporabite tudi svoje.
Pojdite v zgornjo menijsko vrstico na Datoteka>Mesto in izberite piktogram po svoji izbiri. V mojem primeru je to računalnik iz delovnih datotek.
... končano! ... bi lahko rekli ...
Ampak še vedno moramo narediti eno ali dve stvari. Prvič, piktogramu dodamo senčenje. Pojdite na Učinek>Slog senčenja>Senčenje. Pri vrednostih za to senčenje se orientirajte po sliki 32.
Korak 5: Dodajanje sijaja
V zadnjem koraku bomo dodali še sijaj, da bo celota lepo zaokrožena. Vzemite orodje za elipso in narišite belo elipso kot je prikazano na sliki 33.
Sedaj morate samo še nastaviti način polnjenja elipse na Mehka svetloba. Vaš App-ikon je končan.
Zaključek:
Upam, da ste uživali v vadnici in sedaj lahko ustvarite nekaj lepih ikon aplikacij. V priloženih datotekah boste našli mojo izvirno delovno datoteko, tako da lahko vanjo pogledate, če obtičite na kateri točki.
Če imate še kakršna koli vprašanja na to temo, mi jih enostavno napišite v komentarje. Potrudil se bom, da nanje odgovorim hitro.
Lep pozdrav
Julian
