Создаём Иконку с Ведёрком Краски

В этом красочном уроке вы узнаете, как создать простую трёхмерную иконку с ведёрком краски и расплывшемся пятном. С помощью контуров, стилей слоя и освещения, мы получим эффектную и яркую иконку.

Итоговый Результат

Вы можете увидеть итоговый результат, который мы создадим в этом уроке, на скриншоте ниже.

Детали Урока

• Программа: Adobe Photoshop CS4
• Сложность: Средняя
• Примерное время выполнения: 30 минут

Шаг 1

Вначале создайте новый документ со следующими размерами 512 х 512px. Это максимальный размер, необходимый для иконок (Mac OS X Leopard). Создайте эллипс по центру в левой части холста, назовите этот слой Наружная кромка (outer rim) (1a). Дважды продублируйте слой с эллипсом, а затем уменьшите масштаб дубликатов слоёв (1b). Назовите первый дубликат Внутренняя часть (inside). Далее, сместите второй дубликат слоя вниз, назовите этот дубликат слоя Нижняя часть (bottom) (1c).

Шаг 2

Продублируйте первый дубликат с эллипсом, залейте этот эллипс жёлтым цветом, это будет поверхность краски (2a). Расположите жёлтый эллипс внутри ведёрка, удалите лишние пиксели (2b). Назовите этот слой Краска (paint). Теперь, находясь на слое Нижняя часть (bottom), создайте прямоугольное выделение с помощью  инструмента Выделения (Marquee Tool (M), залейте выделенную область, чтобы получить завершённую фигуру ведёрка (2c). Находясь всё ещё на слое Нижняя часть (bottom), нажмите клавиши (Ctrl+T), чтобы активировать инструмент Свободная трансформация (Free Transform Tool). Щёлкните правой кнопкой мыши по области трансформирования и в появившемся окне, выберите опцию Перспектива (Perspective). Теперь потяните опорные точки в нижних углах к центру, чтобы применить нужную перспективу (2d).

Шаг 3

Давайте затеним ведёрко. Свет поступает с правой стороны. Примените стили слоя Наложение градиента (Gradient Overlay (3a) и Внутреннее свечение (Inner Glow (3b) к слою Нижняя часть (bottom). Основной цвет- это серый цвет средних тонов с светлыми бликами для имитации отражения, как показано на скриншоте ниже.

Шаг 4

Дважды щёлкните по миниатюре слоя Внешняя кромка (outer rim), чтобы открыть окно  стилей слоя, примените стиль слоя Внутреннее свечение (Inner Glow (4a). Создайте новый слой ниже слоя Внешняя кромка (outer rim) и с помощью большой мягкой кисти, добавьте тени от кромки. Установите чёрный цвет кисти и одним лёгким движением кисти, добавьте тень, повторяя изгиб кромки. Слои с тенью всегда устанавливаются в режиме Умножение (Multiply), при этом уменьшая Непрозрачность (opacity) слоёв (4b). Назовите этот слой с тенью Тень кромки (rim shadow).

Шаг 5

Перейдите на слой Внутренняя часть (inside). Примените стиль слоя Наложение градиента (Gradient Overlay (5a), чтобы придать металлический вид, а также примените стиль слоя Внутренняя тень (Inner Shadow (5b). Тень от кромки проецируется на внутреннюю часть ведёрка справой стороны.

Шаг 6

Нам нужно добавить световой блик на верхнюю часть кромки, поскольку эта область непосредственно подвергается воздействию света. Для этого, продублируйте слой Внутренняя часть (inside) (6a). С помощью инструмента Стрелка (Direct Selection Tool (A), выделите и удалите нижние опорные точки (6b). Мы добавим на этот контур блик с помощью мазка кисти. Нажмите клавишу ‘D’, чтобы выставить цвета по умолчанию, а затем нажмите клавишу ‘X’, чтобы переключить цвета, таким образом, цвет переднего плана будет установлен на белый цвет. Теперь выберите инструмент Кисть (Brush Tool)(B), а затем нажмите клавишу ‘F5’, чтобы открыть окно настроек кисти. Установите следующие настройки кисти, которые указаны на скриншоте ниже (6c).

Теперь в палитре Контуры (Paths), щёлкните правой кнопкой по активному слою с контуром и в появившемся окне, выберите опцию Выполнить обводку контура (Stroke Path). В появившемся диалоговом окне, выберите инструмент Кисть (Brush), а также поставьте галочку в окошке Имитировать нажим (Simulate Pressure (6d). Вы увидите, что контур сейчас обведён штрихом кисти, при этом штрих сужается на кончиках контура. Поскольку эффект получился слишком слабым, давайте продублируем его, сдвинув дубликат слоя на несколько пикселей вверх, чтобы всего лишь сделать толще штрих (6e). Объедините эти оба слоя в один, назовите этот слой Отражение на кромке (rim reflection). Заключительный штрих – просто размойте созданный световой блик с помощью фильтра Размытие по Гауссу (Gaussian Blur filter), установите радиус размытия на 1 px (6f).

Шаг 7

Перейдите на слой Краска (paint), далее, примените стиль слоя Внутренняя тень (Inner Shadow) (7a). Продублируйте этот слой, назовите дубликат слоя Отражение на краске (paint reflection), а затем сдвиньте дубликат слоя немного вниз (7b). Находясь всё ещё на дубликате слоя, удерживая клавишу (Ctrl), щёлкните по миниатюре слоя Краска (paint), чтобы загрузить активное выделение, а затем идём Слой- Слой-маска – Показать выделенную область (Layer > Layer Mask > Reveal Selection), чтобы скрыть лишние участки изображения с помощью маски.

Нам нужно сместить тень краски, расположив поверх слоя Отражение краски (paint reflection). Щёлкните правой кнопкой мыши по слою Краска (paint) и в появившемся окне, выберите опцию Создать слой (Create Layer). Данное действие поможет преобразовать стиль слоя Внутренняя тень (Inner Shadow) в отдельный слой (7c). Удерживая клавишу (Ctrl), щёлкните по миниатюре слоя Краска (paint), а затем примените данную маску к тени (7d). Находясь на слое Краска (paint), добавьте стиль слоя Внутреннее свечение (Inner Glow) для имитации толщины тонкого слоя (7e).

Создайте новый слой, выберите ту же самую кисть, которую мы использовали для добавления тени от кромки. Удерживая клавишу (Alt), чтобы поменять курсор с кисти на Пипетку (eyedropper). Щёлкните по области краски, чтобы отобрать образец цветового оттенка, отпустите клавишу (Alt), а затем прокрасьте кистью выбранным цветом поверх левой внутренней части ведёрка (7f). Назовите этот слой Налёт краски (bleed). Сместите этот слой вниз, расположив ниже слоя Краска (paint), а также уменьшите Непрозрачность (Opacity) слоя до 50% (7g). Хорошая вариация цвета!

Шаг 8

Давайте нарисуем подтёки краски. Выберите инструмент Перо (Pen Tool (P) и проявите креативность (8a). Добавьте тени к подтёкам краски (8b). Добавьте отражение, для этого нам нужно нарисовать светлые блики с помощью инструмента Перо (Pen Tool) (8c, 8d). Эти контуры, конечно же, будут светлыми. Назовите их Отражение 1 (refl 1) и Отражение 2 (refl 2).

Давайте добавим заключительный световой блик. С помощью инструмента Лассо (Lasso Tool (L), выделите правую половину слоя Отражение 2 (refl 2) (8e), а затем идём Слой- Новый – Скопировать на новый слой (Layer > New > Layer Via Copy) или просто нажмите клавиши (Ctrl+J). Добавьте красивый стиль слоя Наложения градиента (Gradient Overlay) к созданному блику (8f). Теперь подтёки и краски отражают окружающий свет (8g).

Шаг 9

Создайте задний фон (простой градиент), а также добавьте тень (размытый чёрный эллипс) для иконки. Выберите цвета, которые вам нравятся (9a). Последний элемент, который необходимо нарисовать – это ручка. Создайте новый слой, нарисуйте тёмно-серый эллипс на левой стороне ведёрка (9b). К данному слою с нарисованным эллипсом, примените следующие стили слоя: глянец (Satin) (9c), Тень (Drop Shadow) (9d) и Наложение градиента (Gradient Overlay) (9e).

Шаг 10

Продублируйте слой с эллипсом, уменьшите масштаб дубликата слоя, а затем добавьте стиль слоя Внутренняя тень (Inner Shadow): это будет отверстие для ручки (10a). Теперь нарисуйте ручку с помощью инструмента Перо (Pen Tool (10b), назовите этот слой Ручка (handle).

Обведите контур ручки тёмно-серым оттенком точно так же, как мы это проделывали с отражением на кромке, только на этот раз, уберите галочку в окошке имитировать нажим (Simulate Pressure). Удалите лишние пиксели, чтобы контур выглядел так, как будто ручка торчит из отверстия (10c). Добавьте стиль слоя Глянец (Satin) к слою с ручкой (10d).

Шаг 11

В заключение, давайте создадим тень от ручки. Создайте стиль слоя Тень (Drop Shadow style) (11a), а затем создайте отдельный слой из этого стиля слоя, См. Шаг 7 за дополнительной информацией по данной технике (11b). Сдвиньте тень немного вниз, а затем примените масштабирование по вертикали таким образом, чтобы тень касалась основания ручки (11c). Удалите лишние пиксели у тени (11d) и мы завершили урок!

Заключение

Знаете что? Эти иконки легче сделать, чем рассказать! В любом случае, я надеюсь, что вы узнали несколько новых трюков из этого урока и надеюсь, что вы достаточно креативны, чтобы выбрать свой любимый цвет для своего ведёрка с краской ;-)