Создаем иконку строительной каски

Знакомьтесь с  , графическим дизайнером из Чешской Республики. В основном  занимается GUI графическим интерфэисом пользователя (приложения, скины, иконки, обои и темы). У Vaclav-а 8летний опыт в дизайне. Автор книги Adobe Photoshop: GUI design. В этом уроке Vaclav расскажет о своем способе создания иконок для интерфэиса в Фотошопе. Перевод подготовлен специально для Хронофаг.ру

Иконки строительной тематики пожалуй одни из самых популярных в веб дизайне. В этом уроке мы научимся рисовать похожие образцы графики на основе реальной фотографии. Данный урок изначально публиковался на чешском языке на ресурсе Grafika.

Выбираем фотографию

Как основы мы возьмем фотографию реальной каски. Это не лучшая фотография но нашей работы она сгодится. Её преимущество в том, что снимок был сделан широкоугольной камерой, поэтому каска имеет хорошую перспективу. Мы немного поговорим об иконках в целом. Правильно выстроенная перспектива для иконки имеет огромное значение. И этот снимок подходит идеально.

Вырезаем графику иконки

Для начала вырежем шлем инструментами выделения. Вы так же можете использовать Pen Tool, или ваш любимый способ вырезания предметов. Скопируйте шлем на новую рабочую область в Фотошопе преждевременно изменив размер. Иконка должна умещаться в размеры 128 на 128 пикселей. Для простоты дела создайте новую рабочую область именно этих размеров. Но для удобства я посоветовал бы иметь немного дополнительного места для рисования. Это место вы сможете добавить в Image > Canvas Size. А после таким же образом убрать.

Трассируем элементы

Выберите инструмент Pen Tool и шаг за шагом трассируйте каждую часть будущей иконки шлема. О цвете не волнуйте. С работой в векторе мы его легко настроем позже. Главное что бы при работе с Pen Tool у вас стоял режим Shape Layer.

Для оптимального результата я советовал бы снизить невидимость данного слоя. И ещё одна деталь. Так как мы трассируем козырек каски, остальная его часть не важна. Она все равно будет скрыта под другими слоями.

Создайте дубликат слоя Ctrl + J и сдвиньте векторные точки немного выше инструментом Direct Selection Tool.

Теперь трассируйте и остальную часть шлема.

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

Тень можно нарисовать как новую фигуру. Начните с правой части.

Продублируйте этот слой Ctrl + J и инструментом Direct Selection Tool сдвиньте крайние точки тени в другую сторону. Таким образом у вас получится идеальное совпадение двух элементов по одному контуру.

Рисуем тени для иконки

Переходим на следующий уровень работы. Скройте фотографию. Как видите основа для нашей иконки отрисована. У нас есть 5 слоев в виде векторных фигур Shape Layers, готовых к дальнейшей обработке. Я даже расставил их на панели слоев в том порядке, в котором мы их отрисовывали.

Тени козырька каски

Для начала спрячте все слои кроме основы козырька. И залейте этот слой цветом #FFDF14. После создайте новый слой Ctrl + Shift + Alt + N и создайте обтравочную маску из этих двух слоев Ctrl + Alt + G. На этом слое нарисуйте большой кистью с мягкими краями более темное желтое пятно краской #D59D00. И снова создайте новый слой, нарисуйте на нем новую тень цветом ##3B1C02 и встройте его в козырек через Clipping Mask (обтравочная маска) Ctrl + Alt + G

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

Тени каски

Откройте слой каски и окрасьте его в цвет #FDDB13. Таким же образом как и ранее создайте новые пустые слои, далее объедините их в Clipping Mask обтравочную маску Ctrl + Alt + G. Далее крупной кистью с мягкими краями сделайте тень вокруг каски, и блик света по центру.

Откройте слои с выдавленными элементами, окрасьте их в более темный желтый #AA6F00 и добавте растровую маску к векторной маске. Выделите эту маску, и крупной кистью черного цвета слегка скройте среднюю часть элемента.

Последний слой иконки каски окрасьте в #FBD500. На этом шаге можете так же нанести немного общих теней, чтобы выровнять все элементы иконки.

Блики и резкость иконки

Чтобы придать иконке броскости и резкости воспользуйтесь простым способом: создайте выделения и нарисуйте 1 пиксельные окантовки вокруг всех ярких элементов, на которые приходится блик света. Чтобы сделать это создайте выделение, кликните по нему правой кнопкой мышки и выберите Stroke. Делать это нужно, конечно, на новом слое.

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

Тоже самое сделайте и для других частей фигур.

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

Эксперименты с тенями

Продолжайте экспериментировать с тенями. Например добавьте другие цвета. Это разнообразит иконку каски, так как однотонная цветовая гамма выглядит немного искусственно.

Загрузите выделение всех слоев. CTRL+Click по всем иконкам слоя. После создайте новый пустой слой. Уменьшите область выделения на 1-2 пикселя Select > Modify > Contract и крупной мягкой кистью нарисуйте второстепенный свет. Любым цветом, который вам больше нравится.

Рисуем блики

Последнее что можно сделать, создать несколько бликов. Нарисуйте их инструментом Pen Tool. В этом вам поможет урок о различных настройках векторных элементов Add, Subtract, Intersect и так далее.

Слой можно скопировать Ctrl + J и разблурить Gaussian Blur.

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

Вот и  все!

Как видите шлем наиболее эффектный на темном фоне. Не бойтесь эксперементировать и пробуйте создавать новые иконки из других фотографий. Удачи в работе!