Отож, наше іконка додатку виглядатиме наприкінці. Тепер заспокіймося. Давайте відразу рушимо в Adobe Illustrator ...
Крок 1: Створення фундаменту
Після відкриття Illustrator, спочатку створюємо нове обробне поле через Файл>Створити. У наступному вікні обираємо формат 70х70мм. Підтверджуємо вікно натисканням ОК.
Беремо інструмент Прямокутник з Палітри інструментів та клікаємо один раз де-небудь на обробному полі. Потім з'явиться діалогове вікно, де ви можете ввести розміри вашого прямокутника. Тут обираємо розмір 35х35мм та підтверджуємо натисканням ОК. Це буде наш фундамент для іконки додатку.
Оскільки іконки додатків від 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: Створення промінчастого вінка
У цьому кроці ми розглянемо, як створити промінчастий вінок для значка програми. Для цього найкраще спочатку приховати два прямокутники, які ви створили на першому кроці, щоб у вас знову було місце на вашому робочому просторі.
Візьміть інструмент Лінія з Панелі інструментів і задайте чорний колір контуру і товщину контуру 0,5pt.
Тепер намалюйте лінію від центру вгору, утримуючи при цьому натиснутою кнопку миші. Як тільки ви намалюєте лінію (під час утримання кнопки миші), натисніть клавішу Ctrl + клавішу з цими двома квадратними дужками < >
Тепер, утримуючи кнопку миші, намалюйте коло. Ця комбінація клавіш дозволить створити різну кількість ліній в залежності від швидкості руху курсора миші.
Як тільки ви намалюєте коло, воно має бути приблизно таким, як показано у зображенні 19. (Спробуйте це декілька разів, бо тут також діє прислів'я "Практика робить майстра").
Виділіть всі лінії та згрупуйте їх за допомогою Command+G (на ПК: Strg+G). Скопіюйте це за допомогою Command+C та Command+F (на ПК: Strg+C та Strg+F) і вставте на тому ж місці. У цій копії встановіть колір контуру на білий і трохи поверніть праворуч або ліворуч, щоб частково стало видно чорні лінії.
Це має виглядати приблизно так, як на зображенні 20:
Знову виділіть всі лінії та згрупуйте їх через Command+G (на ПК: Strg+G).
Тепер ви можете знову відобразити прямокутники із першого кроку. Переконайтеся, що центр вашого промінчастого вінка знаходиться приблизно в центрі вашого прямокутника.
Тепер скопіюйте собі сіре заокруглене прямокутник, який ви компенсували синім градієнтом на кроці 1. (Command+C або на ПК - Strg+C).
Тепер клацніть на вашій групі з променями та перегляньте в палітрі прозорості. Тут у вас зараз є можливість (схоже на Photoshop) створювати маску. Подвійно клацніть на область, яка показана на малюнку 23. Цим подвійним клацанням створюється так звана маска напівтону.
Як тільки ви створите це, ви помітите, що ваша палітра шарів змінилася, поки ви знаходитесь у масці. За допомогою Command+F (на ПК: Strg+F) вставте раніше скопійований прямокутник в маску. Тепер лишається тільки зменшити прозорість з 50% до 10%.
Тепер вийдіть з маски, щоб повернутися до звичайного вигляду. Для цього просто клацніть один раз на біле поле поруч з символом маски. (Малюнок 25).
Крок 3: Створення бази для піктограми
Тепер ми майже все зробили і готові вставити піктограму або символ у наш іконку програми. Однак перед цим ми повинні швидко створити базу або невелику платформу, щоб все виглядало краще в майбутньому.
Захопіть еліпс-інструмент та намалюйте ним приблизно в центрі еліпс. (Див. малюнок 26).
Цей еліпс заповнюється темно-синім кольором. Для цього я використовував наступні значення кольорів. RGB - 0/0/255.
Зменште прозорість приблизно до 70% та перейдіть до Ефект>Фільтр розмиття>Розмиття Гаусса ...
Для розмиття я вибрав радіус 28 пікселів. Ви можете змінити це значення на свій розсуд. Підтвердіть все за допомогою OK.
Крок 4: Вставте піктограму
Після того як база вже є, прийшов час. Нам просто залишається вставити піктограму в нашу іконку програми. В якості маленького бонусу я додав в робочі файли декілька різних піктограм. Але ви також можете використовувати власні.
У верхньому меню перейдіть до Файл>Вставити та виберіть піктограму на свій смак. У моєму випадку це комп'ютер з робочих даних.
... готово! ... можна сказати ...
Але ще залишилося зробити одну-дві маленькі речі. По-перше, піктограммі потрібно додати тінь. Для цього перейдіть до Ефект>Фільтри стилізації>Тінь. Орієнтуйтеся на значення для цієї тіні на малюнку 32.
Крок 5: Додати блиск
На останньому етапі ми додамо ще блиск, щоб всьому цьому було красиво завершено. Візьміть еліпс-інструмент та намалюйте білу еліпс як на малюнку 33.
На останок вам потрібно лише встановити метод заливання для еліпса на М'яке світло. Ваша іконка програми готова.
Заключні слова:
Сподіваюсь, що вам сподобалося навчальний посібник, і ви тепер можете створити деякі гарні іконки додатків. У прикріплених файлах ви також знайдете моє початковий робочий файл, щоб ви могли переглянути його там, якщо ви застрягли на якій-небудь ділянці.
Якщо у вас виникли питання з цього питання, будь ласка, напишіть мені їх просто в коментарях. Я спробую відповісти на них оперативно.
З повагою
Ваш Юліан
