Рисуем строительную иконку в Фотошопе

С чешским дизайнером UI интерфэисов м вы уже знакомы. В прошлый раз он демонстрировал свои приемы рисования иконок в Фотошопе. В этот раз мы продолжим тему иконок. Но в отличии от прошлого урока Ваклав будет использовать преимущественно векторные инструменты. При возникновении сложностей с вектором читайте тематические статьи, ссылками на которые я оставил в этом уроке. Перевод подготовлен специально для Хронофаг.ру

[divider top=»0″]

В прошлый раз я показал вам как нарисовать в Фотошопе иконку строительной каски. Сегодня мы нарисуем дорожный конус. Еще одна иконка, которая пригодится для оформления веб страниц, которые на данный момент закрыты на доработку и переделку. Впрочем, на создание этой иконки меня вдохновили иконки плеера VLC Player.

Данный урок был впервые опубликован на чешском языке для портала Grafika.

Создаем новую рабочую область

Откройте Фотошоп, создайте новый документ и залейте задний фон светло оранжевым/песочным цветом #EABE94. Выберите инструмент Rounded Rectangle Tool  и нарисуйте основу иконки с цветом #CC622E. Помните, что рисовать иконку нужно в режиме шейпов Shape Layer.

Трансформируем фигуру

Разверните фигуру при помощи Freetransform CTRL+T на 45 градусов.

Сделайте её поменьше, примерно на половину. Примените тот же инструмент трансформирования Edit > Free transform CTRL+T

Дублируем слои

Продублируйте слой CTRL+J, измените цвет на более темный #8A3300 и переместите его под первый слой. Он и будет основой нашего конуса. Однако как слевой стороны, так и с правой остались пустые места.

Пустые места легко заполнить. Один из способов, как это сделать — выбрать инструмент Rectangle Tool и переключиться в режим Add на панели настроек. После чего, дорисовать пустоты.

Рисуем форму конуса

Теперь займемся основной частью конуса. Для начала, выберите инструмент Pen Tool (P). Придется воспользоваться им, так как готовой фигуры подобного плана в Фотошопе нет. Этим инструментом нарисуйте фигуру, как на изображении ниже.

После этого добавьте дополнительные точки на кривую инструментом Add Anchor Point Tool.

Примените инструмент Direct Selection Tool (A) и сдвиньте нижнюю точку вниз, а верхнюю в верх.

Чтобы нарисовать белые полосы мы создадим дополнительные фигуры. Для начала нарисуйте эллипс поверх всей ширины прошлой фигуры. Поверх неё нарисуйте прямоугольник (нарисуйте его зажав SHIFT). И ещё один эллипс, который скроет часть изображения (его нужно нарисовать зажав ALT). Цвет #E6E6E6. Таким образом мы создали 3 фигуры. Первая фигура основная. Прямоугольник с режимом Add и маленький эллипс с режимом Subtract. Все три фигуры должны находиться на одном слое, в одной векторной маске.

Скопируйте эту фигуру CTRL+J, сдвиньте её вниз и увеличьте. Создайте обтравочную маску Clipping Mask из обоих фигур, встроив их в первичную оранжевую форму. Для этого нажмите CTRL+ALT+G

Тени и свет для иконки

Для того чтобы правильно раскрасить иконку нам нужно нарисовать тени и свет на новых слоях. Для теней я использую темно-оранжевый #6B3719, для теней основы цвета #D25200, #F07E00. А для света светлый #E6E6E6. Нормально использовать и белый свет, с низкой степенью невидимости.

Приступим! Скройте все слои кроме первого — нижней основы конуса. Создайте новый слой и встройте его внутрь как обтравочную маску Clipping Mask CTRL+ALT+G.

Выберите темный цвет и нарисуйте тень с левой стороны крупной кистью. Затем выделите правую часть инструментом Polygonal Lasso Tool и нанесите тень снова. Смотрите на картинку. У вас должно получиться две темные стороны.

Откройте следующий слой и теми же приемами перекрасьте его в оранжевый #D45809. Нарисуйте тени с верхней стороны. Тени должны быть расположены таким образом, как будто свет направлен спереди.

Мы так же создали тени поверх конуса, с левой и правой стороны. Цвет #6C3819, но на этот раз попробуйте поэкспериментировать с режимами наложения Multiply и невидимостью слоя.

Создаем паттерн

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

Я нарисовал данный  паттерн инструментом Pencil Tool, затем выделил её и определил как паттерн Edit > Define pattern. Подробнее в статье Как сделать паттерн.

Загрузите выделение обоих белый фигур (CTRL+SHIFT по иконкам слоя). Создайте новый слой CTRL+ALT+SHIFT+N и определите выделение как маску (Layer Mask).

Переключитесь на маску (выделите иконку маски). Далее ALT+клик по иконке маски и залейте белые пространства заготовленным паттерном. Откройте диалоговое окно Edit > Fill, установите нужный паттерн, режим наложения и жмите ОК.

Проявляем текстуру на иконке

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

Так как мы заинтересованы в мягком приятном свете, выберем большую кисть с мягкими краями.

Рисуем блик на иконке

Загрузите выделение основного конуса. Далее уменьшите его в размерах на 2 пикселя Select > Modify > Contract

Выберите инструмент Polygonal Lasso Tool и удалите половину конуса (чтобы удалить часть выделения зажмите ATL). После выберите другой инструмент выделения Elliptical Marquee Tool, нажмите ALT и удалите верхушку конуса.

При работающем выделении нарисуйте градиент от прозрачного к белому. Сделать это нужно на новом слое. Все о градиенте можно узнать в статье Как сделать градиент.

Таким же образом нарисуйте отражение и на основании конуса.

Не забудьте нарисовать блик и на ребре дорожного знака. Для этого можно использовать инструмент выделения Rectangular Marquee Tool.

Конус без отражения на самой верхушке выглядит немного странно. Добавим отражение и туда. Воспользуйтесь одним из тех векторных окружностей, которые мы создавали ранее.

Добавьте ещё немного бликов. Блики я нарисую инструментом Pen Tool вручную.

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

Чтобы скрыть ненужные части слоя добавьте маску.

Дополнительный свет иконки

Последним шагом в создании иконки мы добавим задний свет. Иконка всегда смотрится лучше, если не однообразна. Поэтому я выберу свет с другим оттенком. Мой выбор пал на фиолетовый. Загрузите выделение всего конуса и основания и сделайте 1 пиксель отступ через Select > Modify > Contract

После чего нарисуйте крупной мягкой кистью свет #D2B8F6 на новом слое поверх всех слоев.

Вот и все. Удачи в работе!

P.S. В поисках подарка? В интернет магазине platinumpen.ru можно купить ручки в подарок. Ручки перьевые, подарочные, от качественных производителей ручек.