ru.vectorboom.com

Рисуем иконки, посвященные граффити в Adobe Illustrator

Следующее Предыдущее

В этом уроке мы будем создавать иконки, посвященные граффити в Adobe Illustrator. Мы будем пользоваться базовыми фигурами и научимся пошагово создавать набор иконок. Вы узнаете какие этапы нужно пройти, чтобы иконки были созданы в едином стиле, а также как упростить работу. 1. Создаем новый документ Откройте Illustrator и нажмите Control-N, чтобы создать новый документ. Укажите следующие параметры: 2. Настраиваем сетку Теперь нам нужно настроить сетку, что поможет нам в работе. Для этого зайдите в меню Edit > Preferences > Guides & Grid/Редактировать>Установки>Направляющие и сетка. Теперь просто укажите в полях Gridline Every/Линия через каждые и Subdivisions/Внутреннее деление на... значение в 1 px. Так точность работы будет максимальной. Также включите опцию Snap to Grid/Выравнивать по сетке (View > Snap to Grid/Просмотр>Выравнивать по сетке). Это поможет вам точнее располагать элементы. 3. Работа со слоями Каждая иконка состоит из ряда элементов. Чтобы было понятно где что лежит, мы рекомендуем работать в различных, соответственно названных слоях. Так вам будет удобно работать над каждой иконкой отдельно. Ниже вы видите пример такого разбиения на слои, где каждый слой назван в соответствии с содержанием. Создайте по слою для каждой иконки. 4. Определяем цветовую палитру Наши иконки практически контурные, поэтому нам понадобится совсем немного цветов. По сути нам нужен фоновый цвет и второй, которым мы и будем рисовать иконки. В нашем примере был выбран желтый (#F9DF74) и оранжевый (#EDAE49). Такое теплое сочетание цветов также создает небольшой эффект объема для некоторых деталей Также для создания эффекта теней и бликов мы будем использовать черный и белый цвета на разных уровнях прозрачности (Opacity) и в разных режимах наложения (Blending Modes): Overlay/Перекрытие: 30% для белого Darken/Замена темным: 8% для черного Почему мы не использовали для теней и бликов более светлые и темные оттенки желтого цвета? Если мы захотим изменить цветовую палитру иконок, нам достаточно будет заменить лишь два основных цвета, и не придется играться с оттенками для теней и бликов, потому что белый и черный подойдут почти во всех случаях. Однако это выход для ленивых, или тех, кому нужно сэкономить время. 5. Внимание к деталям и единство стиля Пожалуй, самый важный момент, за которым вам нужно будет следить — это единство и однообразие стиля. Если в вашей первой иконке вы использовали толщину основной линии в 4 px, значит эта толщина должна быть применена и к линиям в других иконках. Это же касается более тонких линий, бликов, теней и прочих дополнительных элементов. Вам нужно подгонять размеры и пропорции всех элементов. Только так иконки будут смотреться целостно. Начнем с первой иконки. Остальные создаются по тому же шаблону. Шаг 1 Переключитесь на соответствующий слой. Возьмите инструмент Rounded Rectangle/Прямоугольник со скругленными углами и создайте фигуру размером Corner Radius) в 1 px. Укажите объекту обводку оранжевого цвета #EDAE49 и толщину обводки  4 px. Вы можете преобразовать контур в заливку, выбрав в меню Object > Expand > Fill & Stroke/Объект>Разобрать>Заливку и обводку. Шаг 2 Создайте еще один прямоугольник со скругленными углами размером в 30 x 4 px и радиусом скругления углов в 2 px, укажите ему цвет заливки того же оранжевого цвета и убедитесь что оба объекта отцентрованы. Для этого выделите их и нажмите указанную ниже кнопку в палитре Align/Выравнивание. Шаг 3 Инструментом Ellipse/Эллипс (L) создайте фигуру размером 20 x 10 px и укажите ей обводку оранжевого цвета и толщиной в 4 px. Разберите объект и обрежьте половину так, чтобы у вас осталась только верхняя часть эллипса. Шаг 4 Добавим блик. Для этого создайте прямоугольник размером 16 x 4 px белого цвета, разместите его как показано на картинке ниже и разместите объект под остальными. После этого смените Blending Mode/Режим наложения объекта на Overlay/Перекрытие и снизьте Opacity/Непрозрачность до 30%. Шаг 5 Создайте пульверизатор при помощи инструмента Rounded Rectangle/Прямоугольник со скругленными углами и начинайте добавлять детали, экспериментируя с различными типами линий (толстыми, тонкими, длинными, короткими). Также добавьте подтеки краски в правой части баллончика при помощи инструмента Rounded Rectangle/Прямоугольник со скругленными углами. Шаг 6 Завершим работу над первой иконкой, создав два диагональных блика. Для этого создайте при помощи инструмента Rectangle/Прямоугольник (M) два белых прямоугольника одинаковой высоты (60 px) и разной ширины (6 px и 1 px). Смените Blending Mode/Режимы наложения и Opacity/Непрозрачность прямоугольников и обрежьте их при помощи обтравочной маски размером в 18 x 46 px. 6. Используем вариации уже созданных форм Мы уже говорили о том, что нужно следить за единством стиля. Так что последующие иконки будут создаваться на базе той же фигуры что и первая иконка —  с толщиной обвоки в 4 px. Так что вы можете просто продублировать базовую фигуру и масштабировать ее до желаемых размеров. Однако это возможно только если вы не разобрали обводку. В противном случае просто создайте новую и дублируйте ее. Вот какие размеры вам понадобятся для остальных иконок: Губка: 20 px Width / 44 px Height T-маркер: 14 px Width / 50 px Height Ведро краски: 44 px Width / 48 px Height Заправка маркеров: 36 px Width / 48 px Height Широкий маркер: 12 px Width / 52 px Height Узкий маркер: 8 px Width / 48 px Height 7. Добавляем повторяющиеся детали к иконкам В каждой иконке будут повторяться уже созданные нами элементы: блики, тени, детали и линии. Дублируйте их, подгоняйте по размеру и размещайте в нужных местах. Это приятный процесс, задействующий воображение, вам должно понравиться. 8. Добавляем уникальные детали После того как мы разместили повторяющиеся элементы, пришло время создать уникальные детали — свои для каждой иконки. Используйте референсы и создайте необходимые элементы.

Автор урока Andrei Stefan

johnsmithillustration.blogspot.com

Рисуем иконки, посвященные граффити в Adobe Illustrator

В этом уроке мы будем создавать иконки, посвященные граффити в Adobe Illustrator. Мы будем пользоваться базовыми фигурами и научимся пошагово создавать набор иконок. Вы узнаете какие этапы нужно пройти, чтобы иконки были созданы в едином стиле, а также как упростить работу.

1. Создаем новый документ

Откройте Illustrator и нажмите Control-N, чтобы создать новый документ. Укажите следующие параметры:

2. Настраиваем сетку

Теперь нам нужно настроить сетку, что поможет нам в работе. Для этого зайдите в меню Edit > Preferences > Guides & Grid/Редактировать>Установки>Направляющие и сетка. Теперь просто укажите в полях Gridline Every/Линия через каждые и Subdivisions/Внутреннее деление на... значение в 1 px. Так точность работы будет максимальной. Также включите опцию Snap to Grid/Выравнивать по сетке (View > Snap to Grid/Просмотр>Выравнивать по сетке). Это поможет вам точнее располагать элементы.

3. Работа со слоями

Каждая иконка состоит из ряда элементов. Чтобы было понятно где что лежит, мы рекомендуем работать в различных, соответственно названных слоях. Так вам будет удобно работать над каждой иконкой отдельно. Ниже вы видите пример такого разбиения на слои, где каждый слой назван в соответствии с содержанием. Создайте по слою для каждой иконки.

4. Определяем цветовую палитру

Наши иконки практически контурные, поэтому нам понадобится совсем немного цветов. По сути нам нужен фоновый цвет и второй, которым мы и будем рисовать иконки. В нашем примере был выбран желтый (#F9DF74) и оранжевый (#EDAE49). Такое теплое сочетание цветов также создает небольшой эффект объема для некоторых деталей

Также для создания эффекта теней и бликов мы будем использовать черный и белый цвета на разных уровнях прозрачности (Opacity) и в разных режимах наложения (Blending Modes):

  • Overlay/Перекрытие: 30% для белого
  • Darken/Замена темным: 8% для черного

Почему мы не использовали для теней и бликов более светлые и темные оттенки желтого цвета? Если мы захотим изменить цветовую палитру иконок, нам достаточно будет заменить лишь два основных цвета, и не придется играться с оттенками для теней и бликов, потому что белый и черный подойдут почти во всех случаях. Однако это выход для ленивых, или тех, кому нужно сэкономить время.

5. Внимание к деталям и единство стиля

Пожалуй, самый важный момент, за которым вам нужно будет следить — это единство и однообразие стиля. Если в вашей первой иконке вы использовали толщину основной линии в 4 px, значит эта толщина должна быть применена и к линиям в других иконках. Это же касается более тонких линий, бликов, теней и прочих дополнительных элементов. Вам нужно подгонять размеры и пропорции всех элементов. Только так иконки будут смотреться целостно.

Начнем с первой иконки. Остальные создаются по тому же шаблону.

Шаг 1

Переключитесь на соответствующий слой. Возьмите инструмент Rounded Rectangle/Прямоугольник со скругленными углами и создайте фигуру размером Corner Radius) в 1 px. Укажите объекту обводку оранжевого цвета #EDAE49 и толщину обводки  4 px. Вы можете преобразовать контур в заливку, выбрав в меню Object > Expand > Fill & Stroke/Объект>Разобрать>Заливку и обводку.

Шаг 2

Создайте еще один прямоугольник со скругленными углами размером в 30 x 4 px и радиусом скругления углов в 2 px, укажите ему цвет заливки того же оранжевого цвета и убедитесь что оба объекта отцентрованы. Для этого выделите их и нажмите указанную ниже кнопку в палитре Align/Выравнивание.

Шаг 3

Инструментом Ellipse/Эллипс (L) создайте фигуру размером 20 x 10 px и укажите ей обводку оранжевого цвета и толщиной в 4 px. Разберите объект и обрежьте половину так, чтобы у вас осталась только верхняя часть эллипса.

Шаг 4

Добавим блик. Для этого создайте прямоугольник размером 16 x 4 px белого цвета, разместите его как показано на картинке ниже и разместите объект под остальными. После этого смените Blending Mode/Режим наложения объекта на Overlay/Перекрытие и снизьте Opacity/Непрозрачность до 30%.

Шаг 5

Создайте пульверизатор при помощи инструмента Rounded Rectangle/Прямоугольник со скругленными углами и начинайте добавлять детали, экспериментируя с различными типами линий (толстыми, тонкими, длинными, короткими). Также добавьте подтеки краски в правой части баллончика при помощи инструмента Rounded Rectangle/Прямоугольник со скругленными углами.

Шаг 6

Завершим работу над первой иконкой, создав два диагональных блика. Для этого создайте при помощи инструмента Rectangle/Прямоугольник (M) два белых прямоугольника одинаковой высоты (60 px) и разной ширины (6 px и 1 px).

Смените Blending Mode/Режимы наложения и Opacity/Непрозрачность прямоугольников и обрежьте их при помощи обтравочной маски размером в 18 x 46 px.

6. Используем вариации уже созданных форм

Мы уже говорили о том, что нужно следить за единством стиля. Так что последующие иконки будут создаваться на базе той же фигуры что и первая иконка —  с толщиной обвоки в 4 px. Так что вы можете просто продублировать базовую фигуру и масштабировать ее до желаемых размеров. Однако это возможно только если вы не разобрали обводку. В противном случае просто создайте новую и дублируйте ее. Вот какие размеры вам понадобятся для остальных иконок:

  • Губка: 20 px Width / 44 px Height
  • T-маркер: 14 px Width / 50 px Height
  • Ведро краски: 44 px Width / 48 px Height
  • Заправка маркеров: 36 px Width / 48 px Height
  • Широкий маркер: 12 px Width / 52 px Height
  • Узкий маркер: 8 px Width / 48 px Height

7. Добавляем повторяющиеся детали к иконкам

В каждой иконке будут повторяться уже созданные нами элементы: блики, тени, детали и линии. Дублируйте их, подгоняйте по размеру и размещайте в нужных местах. Это приятный процесс, задействующий воображение, вам должно понравиться.

8. Добавляем уникальные детали

После того как мы разместили повторяющиеся элементы, пришло время создать уникальные детали — свои для каждой иконки. Используйте референсы и создайте необходимые элементы.

Автор урока Andrei Stefan

Перевод — Дежурка

Смотрите также:

www.dejurka.ru

Цель Урока

Сегодня мы создадим векторное граффити и применим к нему растровые текстуры из Pro Texture пакета (бесплатно для пользователей плагина) при помощи Texturino. Другие инструменты Astute Graphics помогут нам сделать процесс создания работы быстрым, удобным и эффективным.

Шаг 1

Начнем наш урок с грубого карандашного эскиза лого AG (Astute Graphics). Затем сканируем его.

Создаем новый документ (Cmd / Ctrl + N), iв открывшемся диалоговом окне установим размер монтажной области и цветовой режим RGB.

Теперь вставим эскиз в текущий документ (File > Place…) и заблокируем его в панели Layers.

Шаг 2

Приступим к созданию векторного лого на основании эскиза. Для этих целей вы можете использовать Pen Tool (P), но, на мой взгляд, удобней и быстрее воссоздать форму букв при помощи InkScribe Tool (плагин InkScribe). Давайте посмотрим, как это делается. Кликнем на InkScribe Tool в панели Tools и откроем панель инструмента (Window > InkScribe > InkScribe panel).

Нажимаем на Draw a straight segment и кнопку Corner в панели InkScribe.

Форма букв эскиза далека от совершенства, поэтому я создал несколько направляющих, которые помогут исправить это в процессе рисования.

Шаг 3

Выбираем обводку любого цвета и отключаем заливку в панели Tools. При помощи InkScribe Tool создаем путь, состоящий только из прямолинейных сегментов, опираясь на эскиз буквы A.

Одним из преимуществ InkScribe Tool является то, что этот инструмент обладает функциями похожими на функции Direct Selection Tool. То есть вы можете редактировать созданные точки, сегменты и ручки, не используя другие инструменты и горячие клавиши. Захватываем один из прямолинейных сегментов и смещаем его в сторону, создавая форму, которую требует эскиз.

Подобным образом работаем с другими сегментами. Это очень быстрый и комфортный процесс.

Аналогичным образом создаем часть формы буквы G.

Шаг 4

Оставшиеся элементы букв создаем при помощи прямоугольников.

Выделяем все пути, затем нажимаем кнопку Unite в панели Pathfinder.

Округлим некоторые углы букв. Для этих целей вы можете использовать Corner Widgets (View > Show Corner Widget), если вы пользователь Adobe Illustrator CC. Если вы работаете в более ранних релизах, то для решения такой задачи вам не обойтись без Dynamic Corners Tool плагина VectorScribe.

Шаг 5

Отключаем обводку, затем заливаем буквы вертикальным линейным градиентом, который содержит желтый цвет и два оттенка оранжевого цвета.

Группируем буквы (Cmd/Ctrl + G), копируем группу и вставляем ее назад (Cmd/Ctrl + C, Cmd/Ctrl + B). Не снимая выделения с нижней группы, переходим Object > Path > Offset path…. Устанавливаем значение Offset (в моем случае это 10px).

Окрашиваем все объекты нижней группы в темно-серый цвет.

Шаг 6

Копируем темно-серую группу и вставляем ее назад. Смещаем эту копию вниз и вправо, как это показано на рисунке ниже.

Выделяем обе темно-серые группы, затем переходим Object > Blend > Make, далее Object > Blend > Blend Options… и устанавливаем количество шагов.

Шаг 7

При помощи Pen Tool (P) создадим две треугольные формы темно-серого цвета так, как это показано на рисунке ниже.

Теперь создадим четыре окружности при помощи Ellipse Tool с заливкой такого же цвета.

Создадим серый прямоугольник, соответствующий рабочей области, который будет играть роль временного фона.

Шаг 8

Копируем бленд объект и вставляем его назад. Не снимая выделения с копии, переходим Object > Blend > Expand.

Теперь нажимаем кнопку Unite в панели Pathfinder.

Переходим Object > Path > Offset path…. Устанавливаем значение Offset.

Заливаем нижний объект белым цветом.

Шаг 9

Ниже всех объектов лого разместим белые окружности, подобно показанному на рисунке ниже.

При помощи Pencil Tool (N) создадим несколько капель стекающей краски.

Создадим блики на левой стороне букв. Рисуем путь с белой обводкой и применяем к нему Width Profile 1 в панели Stroke. Создаем подобные объекты в других местах. Группируем все элементы граффити.

Шаг 10

Поместим граффити на кирпичную стену. Здесь мы будем использовать растровую кирпичную текстуру из Pro Texture Packs и плагин Texturino. Если вы пользователь Texturino, то войдите в ваш профиль на сайте Astute Graphics и кликните на Pro Texture Pack ссылке. Предоставленные текстуры имеют высшее качество и высокое разрешение. Много бесшовных текстур готовы для загрузки в библиотеку Texturino. Откроем панель Texturino (Window > Texturino > Texture panel). Нажимаем на кнопку Import new textures в панели и добавляем Brick wall detail texture. Кстати, вы можете импортировать несколько текстур одновременно.

Нам также понадобится текстура fine grade stone из пакета Pro Texture Packs.

Шаг 11

Выделяем серый прямоугольник затем кликаем на кнопку Add a new texture в панели Texture. Текстура добавлена и появилась аннотационная система.

Два раза кликаем на ползунке Scale и в открывшемся диалоговом окне устанавливаем 15%.

Выбранная текстура является бесшовной, поэтому мы можем применять к ней любой масштаб.

Шаг 12

Хотя мы используем черно-белую текстуру, но можем придать ей любой оттенок. Применим к прямоугольнику с текстурой вертикальный линейный градиент, который состоит из двух оттенков синего цвета. По умолчанию в аннотационной системе выбран режим смешивания Multiply. Благодаря этому текстура окрасилась в цвета градиента.

Проведем цветовую коррекцию при помощи Phantasm. Не снимая выделения с текстуры, переходим Effect > Phantasm > Levels… и в открывшемся диалоговом окне устанавливаем Input Levels как показано ниже.

Теперь переходим Effect > Phantasm > Curves…, добавляем точку на диаграмме и смещаем ее немного вверх.

Шаг 13

Теперь нам надо сделать так, чтобы текстура кирпича появилась на граффити. Применим к группе с векторными объектами режим смешивания Overlay в панели Transparency.

Да, текстура на буквах появилась, но швы между кирпичами выглядят не закрашенными. Поэтому продолжим наши эксперименты. Копируем граффити лого и вставляем его вперед (Cmd/Ctrl + C, Cmd/Ctrl + F), применим к верхней группе режим смешивания Darken.

Выделяем нижнюю группу и переходим Effect > Phantasm > Curves…, добавляем точку на диаграмме и смещаем ее немного вниз.

Теперь граффити выглядит более естественно.

Шаг 14

Для придания большего реализма применим к верхней группе еще одну текстуру. Выделим ее, выбираем текстуру fine grade stone в панели Texture и нажимаем кнопку Add a new texture.

Два раза кликаем на ползунке Scale в аннотационной системе и в открывшемся диалоговом окне устанавливаем 50%, применим к текстуре режим смешивания Overlay. Так мы создали капли спрея на граффити.

Конец - делу венец.


Смотрите также

Новости компании

Оформление транспорта

Оформление транспорта

  ЦИРК М.ВИДЕО ГОСУДАРСТВЕННЫЙ АКАДЕМИЧЕСКИЙ АНСАМБЛЬ ПЕСНИ И ПЛЯСКИ  ДОНСКИХ КАЗАКОВ СЛУЖБА ЗАКАЗА ТАКСИ ЭКИПАЖ    

16-02-16 Хиты:1009

Акция!!!

Акция!!!

ЭТОЙ ОСЕНЬЮ!!!  При размещении рекламы на электротранспорте, 1 МЕСЯЦ проката в ПОДАРОК!!!  

08-09-14 Хиты:1595