—»     —»   Уроки Illustrator: Разрабатываем иконки классического календаря
  Раздел: Образование и Изучение   Нет комментариев  

Уроки Illustrator: Разрабатываем иконки классического календаря



Привет! В нашей сегодняшней статье мы будем разбирать процесс разработки классической календарной иконки. Эта статья очень краткая и простая. Вам лишь нужно знать основы работы с Illustrator и умение пользоваться различными эффектами, типа внутреннего свечения (Inner Glow), тени (Drop Shadow), трансформациях объекта, создании эффекта закруглённых углов и деформации объектов.

Сложность: Начальный/Средний
Время на выполнение: 20 минут
Этапов: 8

Вот то, что мы будем разрабатывать:

Уроки Illustrator: Разрабатываем иконки классического календаря

Этап 01

Для начала создайте документ размером 256х256. Далее, возьмите инструмент создания многоугольника (Rectangle Tool – M) и создайте квадрат размером 180х180 пикселей (конечно же, вы можете создать объект с другими пропорциями). Залейте его цветом R=242 G=242 B=242, а затем добавьте внутренний контур (Stroke), используя цвет R=230 G=230 B=230. Выделите заливку на панели Вида (Appearance), и добавьте тень (Drop Shadow) - Effect > Stylize > Drop Shadow с такими же параметрами, как показано на изображении ниже. Назовите эту фигуру «Paper».

Уроки Illustrator: Разрабатываем иконки классического календаря

Этап 02

Продублируйте «Paper». Для начала, удалите эффект тени у копии, затем измените её размер так, как отображено на изображении №2 (ваша новая фигура будет высотой в 60 пикселей). Залейте её цветом R=193 G=39 B=45 и добавьте внутренний контур, используя цвет R=152 G=1 B=0. Далее, добавьте ещё две новые заливки из выпадающего меню панели Вида. Используйте градации, как отображено на изображениях №4 и 5.

Уроки Illustrator: Разрабатываем иконки классического календаря

Этап 03

Возьмите инструмент создания окружностей (Ellipse Tool – L) и нарисуйте ровную окружность, как отображено на изображении ниже. И добавьте новую заливку. Для начала залейте её цветом R=242 G=242 B=242, а второй раз залейте градациями так, как показано ниже. Далее добавьте ещё две заливки и передвиньте их под остальные. Залейте нижнюю часть цветом R=199 G=27 B=31, а затем кликните по ней (на панели Вида) и перейдите в меню Effect > Distort&Transform > Transform. Произведите некоторые отдельные модификации в секции Движения (Move) так, как показано на изображении ниже. Выберите другую заливку, залейте её цветом R=99 G=9 B=10, и опять перейдите в меню Effect > Distort&Transform > Transform, и повторите то, что отображено на изображении ниже.

Уроки Illustrator: Разрабатываем иконки классического календаря

Этап 04

Давайте продолжим работу над окружностями. Выберите инструмент создания многоугольника и создайте фигуру, которая отображена на изображении №1, а затем залейте её цветом R=230 G=230 B=230. Выровняйте её по окружности, которую мы создали в прошлом этапе разработки (выберите обе фигуры, переключитесь на инструмент создания выделения (Selection Tool – V)), кликните по границе окружности, а затем кликните по кнопке выравнивания по центру в горизонтальном направлении (Horizontal Align Center) на панели Вида. Теперь, когда мы всё выстроили так как надо, мы можем продолжить работу над кольцами. Выберите многоугольник, в значение закругления углов внести цифру 5, а затем перейдите в меню Object > Expand Appearance. Выберите заливку этой фигуры (на панели Вида), а затем добавьте внутреннее свечение (Inner Glow) так, как отображено на изображении №3. Далее, добавьте три новых заливки и используйте градации, как отображено на изображениях №4, 5 и 6. Не забудьте изменить режим смешивания последней заливки на наложение (Overlay).

Уроки Illustrator: Разрабатываем иконки классического календаря

Этап 05

Выберите фигуры, созданные в этапах №3 и 4, и сгруппируйте их (Ctrl+G). Выберите эту группу и перейдите в меню Effect > Distort&Transform > Transform и воссоздайте то, что отображено на изображении ниже.

Уроки Illustrator: Разрабатываем иконки классического календаря

Этап 06

Возьмите инструмент создания многоугольника и создайте квадрат, который отображен на изображении №1. Поверните фигуру на 45 градусов (вы можете сделать это вручную посредством меню Object > Transform > Rotate), и залейте её любым цветом. Создайте копию фигуры «Paper» и переместите её поверх этой фигуры (на панели слоёв). Выберите копию и перевёрнутую фигуру и кликните по кнопке Обрезать «Crop» и на панели Pathfinder. У вас должно получиться две фигуры (изображение №3). Выберите меньшую фигуру, назовите её «Flip», залейте её градацией так, как показано на изображении №4, понизьте уровень плотности отображения до 50% и измените режим смешивания на Увеличение (Multiply). Далее, выберите большую фигуру, залейте её градацией, как показано на изображении №5 и добавьте внутренний контур толщиной в 1 пиксель, используя цвет R=230 G=230 B=230. Добавьте новую заливку для фигуры, и используйте радиальную градацию, как отображено на изображении №6.

Уроки Illustrator: Разрабатываем иконки классического календаря

Этап 07

Дублируйте фигуру «Flip» (Ctrl+F > Ctrl+V). Выберите эту копию, перенесите её на передний план (Shift+Ctrl+]), поверните на 180 градусов (Object > Transform > Rotate), а затем возьмите инструмент прямого выделения (Direct Selection Tool – А). Выберите верхний левый угол, удерживая Shift, перетащите его по направлению, указанном стрелкой на изображении №2). Залейте эту фигуру цветом R=242 G=242 B=242 и градацией так, как показано на изображении №3. Ещё раз выделите фигуру и добавьте эффект вздутия (Inflate: Effect > Warp > Inflate), а затем эффект Арки (Effect > Warp > Arc Lower), как показано на следующем изображении.

Уроки Illustrator: Разрабатываем иконки классического календаря

Этап 08

И, наконец, добавьте немного текста. Выберите инструмент создания текста (Type Tool – Т), кликните по холсту и напишите любое число, которое захотите (на изображении ниже вы можете видеть название, размер и характеристики шрифта). Выберите текст и перейдите в меню Object > Expand. Это должно создать новую группу. Выберите её и кликните по кнопке создания новой заливки (Add New Fill) из выпадающего меню на панели Вида. Залейте её градацией, как отображено на изображении №3. Повторите эти этапы с текстом – названием месяца. Просто ориентируйтесь на информацию из изображений №4, 5 и 6.

Уроки Illustrator: Разрабатываем иконки классического календаря

Финал

Теперь ваша иконка календаря готова. Вот так она должна выглядеть:

Уроки Illustrator: Разрабатываем иконки классического календаря
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Mysterious Master   Прочитано (раз): 9221   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31