Така ще изглежда нашата икона на приложението накрая. Но досега достатъчно говорихме. Нека започнем директно в Adobe Illustrator ...
Стъпка 1: Създаване на основа
Когато сте в Illustrator, първоначално създайте ново работно пространство чрез Файл>Нов. В следващия прозорец изберете формат от 70x70мм. Потвърдете прозореца с ОК.
Вземете Инструмента за правоъгълник от Палитрата с инструменти и кликнете веднъж някъде в работното пространство. След това ще се появи диалогов прозорец, в който можете да въведете размера на правоъгълника си. Изберете размер от 35x35мм и потвърдете с ОК. Това е сега основата ни за иконата на приложението.
Понеже иконите на приложенията на Apple никога не са с ъглове, сега трябва да се погрижим за закръглянето на ъглите. Изберете правоъгълника и отидете в горния меню ред Ефект>Филтри за стилизиране>Закръгляне на ъглите ...
В следващия прозорец въведете ъглов радиус от 7мм. Потвърдете с ОК.
След като потвърдите този ефект, ъглите ще се покажат закръглени, но пътят все още е правоъгълен. За да го промените, отидете на Обект>Преобразуване на външния вид. Сега ефектът е преобразуван в обект (пътят следва директно вдън в заварените ъгли).
В следващата стъпка ви трябва палитра за градиенти. Ако все още не сте я отворили, можете да я намерите в Прозорец>Градиент.
Сега кликнете върху полето за градиента в палитрата за градиенти, за да запълните вашето закръглено правоъгълника със стандартна черно/бяла градация. (Ако правоъгълника ви все още има контур, сега е моментът да я премахнете).
За настройката на ъгъла на градацията въведете стойност от 90°, за да се движи красиво отгоре надолу.
Тъй като иконата ни трябва да получи син градиент, (разбира се, може да използвате и свои цветове) аз вече съм ви подготвил два RGB цветови стойности.
• тъмно синьо - 28/57/145
• светло синьо - 84/244/255
За да свържете тези цветови стойности с градацията вече, просто щракнете върху цветовите полета в палитрата за градиенти два пъти. След това ще имате възможност да въведете RGB стойностите.
(Ако вашият цветови режим е различен, кликнете върху малката стрелка горе вдясно в палитрата за градиенти, за да изберете подходящия цветови режим).
След като сте го направили, всичко трябва при вас да изглежда приблизително така. (Фигура 11).
За да усъвършенствате малко градацията, отидете на Ефект>Филтри за стилизиране>Сянка отвътре ... В режима за метод на попълване изберете Смесване. За прозрачност изберете стойност от 75% и за размазване въведете 8,8мм. Тъй като искаме този ефект да се прилага само върху външния регион, поставете отметка на Ръб. Потвърдете прозореца с ОК.
След това добавете сенка на цялото нещо. Това става също в Ефект>Филтри за стилизиране>Сянка ... Изберете настройките за този филтър приблизително като в Фигура 13. Можете обаче да варирате малко.
В следващата стъпка копирайте правоъгълника с Command+C и го поставете отново на същото място с Command+F. (На ПК това можете да направите с Strg+C и Strg+F).
Тъй като няма нужда от ефектите, приложени върху копието на правоъгълника, трябва да ги изтриете. Както може би някои от вас вече знаят, всички ефекти и филтри, които прилагате в Illustrator, се изброяват в палитрата за външен вид. Ако тази палитра не се вижда у вас, можете да я отворите отново от Прозорци>Външен вид.
Сега изтрийте сенката. Това можете да направите лесно, като вземете сенката в палитрата за външен вид, задържайки бутона на мишката натиснат, и я влачите към малкия кошче за боклук в долната дясна част на тази палитра.
Не е необходимо да изтривате вътрешния блясък, тъй като трябва просто да го настроите малко. Преди това обаче променете пълноцветието на копието на правоъгълника в бяло.
След това кликнете в палитрата за външен вид върху вътрешния блясък, задайте режима на Нормално и изберете дълбоко черно за цвета. Настройте прозрачността на 100% и при размазване можете да вземете стойност от 10мм (Фигура 17).
За да се слеят това копие със стоящото под него оригинал със синьо затъмнение, просто намалете прозрачността на 50% и задайте режима на пълнене на Мека светлина. Всичко това можете да го направите чрез палитрата за прозрачност. (Също така палитрата можете да я намерите отново от Прозорци>Прозрачност).
Това ще увеличи контраста и нашето икона на приложението ще придобие дълбочина.
Стъпка 2: Създаване на короната от лъчи
В тази стъпка ще разгледаме как да създадете короната от лъчи за иконата на приложението. За целта е най-добре първо да скриете двете правоъгълници, които създадохте в Стъпка 1, за да имате отново място на работния си плот.
Вземете Инструмента за линии от Лентата с инструменти и задайте цвета на контура на черно и дебелината на контура на 0,5pt.
Сега приберете се приблизително до средата и изтеглете линия нагоре, като държите бутона на мишката натиснат. След като сте изтеглили линията (като държите бутона на мишката натиснат), натиснете Ctrl + клавиша с тези две скоби < >.
Сега движете се кръгово с натиснат бутон на мишката. С тази комбинация от клавиши ще се създадат различен брой линии в зависимост от скоростта на движение на курсора на мишката.
След като направите една обиколка, това трябва да изглежда приблизително като на Фигура 19. (Може да опитате това няколко пъти, защото и тук важи казаното "Упражнението прави майстора").
Маркирайте всички линии и ги групирайте с Command+G (на ПК: Strg+G). С Command+C и Command+F (на ПК: Strg+C и Strg+F) копирайте цялото и пак го поставете на същото място. На този копие променете цвета на контура на бяло и го завъртете леко наляво или надясно, така че черните линии отново да станат видими.
Това трябва да изглежда приблизително така при вас. (Фигура 20):
Отново маркирайте всички линии и ги групирайте отново чрез Command+G (на ПК: Strg+G).
Сега можете да покажете отново правоъгълниците от Стъпка 1. Внимавайте да средата на вашата корона с лъчи е приблизително в средата на вашия правоъгълник.
Сега копирайте сивия закръглен правоъгълник, който сте изчислили в стъпка 1 със синьото избледняване. (Command+C или на PC - Strg+C).
Сега кликнете върху групата с лъчистата корона и погледнете в Прозрачността. Тук вече имате възможност (подобно на Photoshop) да създадете маска. За целта докоснете двукратно областта, която виждате на Фигура 23. С този двукратен щрак се създава така наречената маска за плътност.
След като сте я създали, ще забележите също, че вашето палитра с пластове се е променило, докато сте в маската. С Command+F (на PC: Strg+F) вмъкнете сега копирания преди това правоъгълник в маската. Сега вече трябва само да намалите плътността от 50% на 10%.
Сега трябва да напуснете маската, за да се върнете към обичайния изглед. Това става, като щракнете веднъж върху белия квадрат до иконата за маска. (Фигура 25).
Стъпка 3: Създаване на основа за пиктограма
Вече почти сме при свършека на най-голямата част и сме готови да вмъкнем пиктограма или символ в нашата иконка на приложението. Все пак трябва предварително да създадем основа или малка платформа, за да изглежда по-добре цялото нещо по-късно.
Хванете Елипсовата машина и поставете приблизително в средата Елипса. (Вижте Фигура 26).
Този Елипса се попълва с тъмно синьо. За целта използвах следните стойности на цветовете. RGB - 0/0/255.
Намалете плътността до около 70% и след това отидете на Ефект>Филтър за размазване>Филтър "Гаус"
За размазването избрах Радиус от 28 пиксела. Разбира се, можете да промените тази стойност както смятате за добре. Потвърдете цялото с OK.
Стъпка 4: Поставяне на пиктограма
След като основата вече е поставена, най-сетне е време. Наистина трябва просто да вмъкнем пиктограма в нашата иконка на приложението. Като малък бонус в работните файлове включих няколко различни пиктограми. Можете обаче с удоволствие да използвате собствени.
Отидете в горното меню в Файл>Поставяне и изберете там пиктограма по ваш избор. В моя случай това е компютърът от работните данни.
... готово! ... можеме да си мислим ...
Обаче все още има един или два малки неща, които трябва да направите. Едното е, че пиктограмата ще получи още една сянка. За целта отидете в Ефект>Филтър за стилизация>Сянка. Ориентирайте се по стойностите за тази сянка по Фигура 32.
Стъпка 5: Добавяне на светлинен блясък
В последната стъпка ще добавим още едно светлинно блясък, за да завършим красиво цялото нещо. Хванете Елипсовата машина и поставете бял Елипс като в Фигура 33.
Накрая трябва просто да промените метода за попълване на Елипса на Мека светлина. Готова е вашата икона на приложението.
Заключение:
Надявам се, че се забавлявахте с уроците и вече можете да създавате красиви икони за приложения. В приложените файлове също ще намерите оригиналния ми работен файл, за да можете да го разгледате, ако стигнете до някаква трудност по пътя.
Ако имате още въпроси на тази тема, просто ги напишете в коментарите. Ще се опитам да отговоря бързо.
Поздрави
Вашият Юлиан
