Takto bude vyzerať naša App ikona na konci. Teraz už však dosť rečíme. Začnime priamo v aplikácii Adobe Illustrator ...
Krok 1: Vytvorenie základu
V Illustratori najprv vytvoríte nový pracovný plátn cez Súbor>Nový. V nasledujúcom okne zvoľte formát 70x70mm. Potvrďte okno kliknutím na OK.
Vyberte nástroj Obdĺžnik z Palety nástrojov a kliknite raz niekde na vaše pracovné plátno. Zobrazí sa dialógové okno, kde môžete zadať veľkosť vášho obdĺžnika. Zadajte veľkosť 35x35mm a potvrďte kliknutím na OK. Týmto sme vytvorili základ pre ikonu aplikácie.
Pretože ikony aplikácií od Apple nikdy nie sú štvorcové, teraz musíme zaistiť, aby sa rohy zaoblenili. Vyberte teda obdĺžnik a v hornej ponuke choďte na Efekt>Stilizačné filtre>Zaoblie rohy…
V nasledujúcom okne zvoľte polomer rohov 7mm. Potvrďte kliknutím na OK.
Po potvrdení tohto efektu sa rohy zobrazia zaoblené, ale cesta je stále štvorcová. Ak chcete tento stav zmeniť, choďte na Objekt>Premeniť výzor. Tým sa efekt zmení na objekt (cesta teraz priamo kopíruje zaoblené rohy).
V ďalšom kroku potrebujete Paletu prechodov. Ak ju ešte nemáte otvorenú, nájdete ju cez Okno>Prechod.
Kliknite teraz na pole prechodu v Paleti prechodov, aby sa vaše zaoblené obdĺžnik vyplnilo štandardným čierno-bielym prechodom. (Ak ešte váš obdĺžnik má Obrys, je teraz čas ho odstrániť).
Pri nastavení uhla pre prechod zadajte hodnotu 90°, aby prechod pekne prebiehal zhora nadol.
Keďže naša ikona má dostať odtieň modrej farby, (samozrejme môžete použiť aj vlastné farby) pripravil som pre vás už dva RGB kódy.
• tmavo modrá - 28/57/145
• svetlo modrá - 84/244/255
Pre priradenie týchto farieb k prechodu stačí dvojkliknúť na farebné polia v Paleti prechodov, kde budete mať možnosť zadať hodnoty RGB.
(Ak ste mali nastavený iný farebný režim, kliknite na malú šípku vpravo hore v Paleti prechodov, aby ste vybrali správny farebný režim).
Keď už to máte hotové, malo by to u vás vyzerať približne tak. (Obrázok 11).
Pre trochu jemnejší prechod prejdite na Efekt>Stilizačné filtre>Žiariace dovnútra … Voľba metódy výplne by mala byť Prekrytie. Pri Preprievke zvoľte hodnotu 75% a pri Rozmazanie zvoľte 8,8mm. Keďže tento efekt chceme použiť len na vonkajšej oblasti, zvoľte možnosť Hrana. Potvrďte okno kliknutím na OK.
Ďalej pridajte Tieň k celému tomu. Aj to môžete urobiť cez Efekt>Stilizačné filtre>Tieň … Vyberte nastavenia tohto filtru približne podľa Obrázka 13. Môžete tu však pokojne trochu experimentovať.
V nasledujúcom kroku skopírujete obdĺžnik pomocou Command+C a vložíte ho na rovnaké miesto pomocou Command+F (na PC to urobíte s Ctrl+C a Ctrl+F).
Následne z kopie obdĺžnika už nebudete potrebovať vyššie použité efekty, tak ich musíte vymazať. Ako možno niektorí z vás už vedia, všetky efekty a filtre, ktoré sa použijú v Ilustrátore, sú uvedené v vzhľadovom paneli. Ak tento panel nemáte viditeľný, môžete ho znova zobraziť cez možnosť Okno>Vzhľad.
Teraz vymažte tienenie. Môžete to veľmi jednoducho urobiť ťahaním tienenia v vzhľadovom paneli s podržaným tlačidlom myši na malý odpadkový kôš v tomto paneli v pravom dolnom rohu.
Lúč dovnútra nemusíte vymazať, pretože ho len trochu upravíme. Predtým však zmeňte farbu plnenia svojej kopie obdĺžnika na bielu.
Potom kliknite v vzhľadovom paneli na lúč dovnútra, nastavte tam režim na Normál a pri farbe si zvoľte hlbokú čiernu. Preprievka nastavte na 100% a pri Rozmazanie môžete zvoliť hodnotu 10mm (Obrázok 17).
Aby sa táto kópia teraz vyrovnala s pôvodným pod ňou s modrým gradientom, jednoducho znížte preprievku na 50% a nastavte režim výplne na Mäkké svetlo. To všetko môžete urobiť cez panel Priehľadnosti. (Aj tento panel nájdete znova cez Okno>Priehľadnosť).
Tým sa kontrast trochu zvýši a náš App-Icon získa na hĺbke.
Krok 2: Vytvorenie lúčového vence
V tomto kroku sa budeme zaoberať tým, ako vytvoriť lúčový veniec pre App-Icon. Na začiatok si radšej vypnite obidva obdĺžniky, ktoré ste vytvorili v kroku 1, aby ste mali opäť voľné miesto na svojej pracovnej ploche.
Vezmite si Nástroj čiary z Panela nástrojov a nastavte si farbu obrysu na čiernu a hrúbku obrysu na 0,5pt.
Teraz ťahajte líniu smerom nahor z približne stredu a podržte pri tom stlačené tlačidlo myši. Keď už líniu ťaháte (stále držiac tlačidlo myši stlačené), stlačte Ctrl-Tlačidlo + Tlačidlo s týmito dvoma zátvorkami < >.
Teraz držte myš stlačené a raz v kruhu. Týmto klávesovou skratkou sa v závislosti od rýchlosti pohybu vášho kurzora myši vytvoria rôzne veľa línií.
Keď už raz vykružujete, malo by to u vás zhruba vyzerať ako na Obrázku 19. (Skúste to pokojne niekoľkokrát, pretože aj tu platí "Cvičenie robí majstra").
Označte všetky línie a zoskuplte ich cez Command+G (na PC: Ctrl+G). Skopírujte si všetko pomocou Command+C a Command+F (na PC: Ctrl+C a Ctrl+F) a znova vložte na rovnaké miesto. Pri tejto kópii zmeňte farbu obrysu na bielu a trochu ju otočte vpravo alebo vľavo, aby sa časť čiernych liniek opäť stala viditeľnou.
Toto by malo u vás asi zhruba vyzerať takto. (Obrázok 20):
Znovu označte všetky línie a opäť ich zoskupte cez Command+G (na PC: Ctrl+G).
Teraz môžete znova zobraziť obdĺžniky z kroku 1. Dajte si pozor, aby stred vášho lúčového vence bol približne v strede vašich obdĺžnikov.
Teraz si skopírujete sivý zaoblený obdĺžnik, ktorý ste v kroku 1 odpočítali s modrým odtieňom. (Command+C prípadne na PC - Strg+C).
Teraz kliknite na vašu skupinu so žiarením a pozrite sa do Transparency Palette. Tu teraz máte možnosť (rovnako ako v Photoshope) vytvoriť masku. Dvojkliknite na oblasť, ktorá sa zobrazuje na obrázku 23. Týmto dvojklikom sa vytvorí takzvaná maska pre priehľadnosť.
Keď ste ju vytvorili, tak si všimnete, že sa zmenila vaša Paleta vrstiev, pokiaľ ste v maske. S Command+F (na PC: Strg+F) teraz vložte skopírovaný obdĺžnik do masky. Teraz stačí iba zmeniť transparentnosť z 50% na 10%.
Teraz musíte opustiť masku, aby ste sa vrátili späť do normálneho zobrazenia. Urobíte to tak, že raz kliknete na bielu oblasť vedľa symbolu masky. (Obrázok 25).
Krok 3: Vytvorenie základu pre piktogram
Teraz sme takmer hotoví s najväčšou časťou a sme pripravení vložiť piktogram alebo symbol do našej ikony aplikácie. Avšak ešte musíme rýchlo vytvoriť základňu alebo malú platformu, aby to celé neskôr vyzeralo lepšie.
Vezmite si Nástroj elipsy a ťahajte približne stredom elipsu. (Vidieť obrázok 26).
Túto elipsu vyplňte tmavom modrou farbou. Ja som pre to použil nasledujúce farby. RGB - 0/0/255.
Znížte transparentnosť na približne 70% a choďte na Effect>Blur>Gaussian Blur …
Pre rozmazanie som zvolil polomer 28 pixelov. Tento hodnotu však môžete samozrejme ľubovoľne meniť. Potvrďte to kliknutím na OK.
Krok 4: Vloženie piktogramu
Keď je základňa hotová, je čas. Skutočne musíme len vložiť piktogram do našej ikony aplikácie. Ako malú prílohu som vám v pracovných súboroch pripojil niekoľko rôznych piktogramov. Samozrejme môžete použiť aj tie vlastné.
V hornom menu kliknite na Súbor>Vložiť a vyberte si piktogram podľa vašej voľby. V mojom prípade je to počítač z pracovných údajov.
... hotovo! ... mohli by sme povedať ...
No ešte je niekoľko malých vecí na spravenie. Po prvom očkom dostane piktogram ešte tieň. Prejdite na Effect>Stylizácia>Tieň. Upravte sa v hodnotách tohto tieňa podľa obrázka 32.
Krok 5: Pridanie lesku
V poslednom kroku pridáme ešte lesk, aby to bolo pekne zaokrúhlené. Vezmite si Nástroj elipsy a ťahajte bielu elipsu ako na obrázku 33.
Nakoniec nastavte výplňovú metódu elipsy na Mäkké svetlo. Vaša aplikácia-ikona je hotová.
Záver:
Dúfam, že sa vám tutoriál páčil a teraz môžete vytvoriť niekoľko krásnych ikon aplikácií. V priložených súboroch nájdete aj moje pôvodné pracovné súbory, kde sa môžete pozrieť, ak by ste narážali na nejaký bod, kde neviete ďalej.
Ak máte k tomuto tému ďalšie otázky, jednoducho mi ich napíšte do komentárov. Pokúsim sa ich čo najskôr zodpovedať.
S pozdravom
Váš Julian
