—»     —»   Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп
  Раздел: Образование и Изучение   Комментариев: 1  

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп



В этой обучающей статье мы научимся создавать большую (512х512 пикселей) иконку автомобиля. Нашим сегодняшним экземпляром будет всеми любимый BMW Mini Cooper. Для создания иконки мы будем пользоваться программой Photoshop.

Этап 1

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

Конечно же, это всего лишь иконка и поэтому нам не нужно в точности повторять все детали. Тем не менее, нам следует очень внимательно отнестись к маленьким деталям, поэтому мы приложим все усилия, чтобы посредством различных слоев и градаций, а также едва заметных линий толщиной в 1 пиксель, реализовать все более-менее четко.

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

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Этап 2

Понизьте уровень прозрачности найденного и добавленного изображения, а затем приступайте к «обрисовке» автомобиля с помощью ручки. Здесь всё заключается в том, чтобы разделить автомобиль на отдельные части. Например, бампер отдельно можно разъединить еще на несколько запчастей, как это отображено в следующих этапах.

Как только вы обвели первую фигуру, кликайте правой кнопкой мыши с выбранным инструментом ручки и выбирайте пункт меню Fill Path. Залейте выбранную область белым цветом, дабы убедиться, что вы делаете обводку на новом слое (также не забудьте дать имя слою). Вот первая «фигура», которая у нас получилась из бампера.

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Так как наша машина будет иконкой, нам важно сохранять симметрию. Дублируйте слой, а затем пройдите в меню Edit > Transform > Flip Horizontal. Переместите этот слой к другой стороне автомобиля.

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Этап 3

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

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

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

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Итак, постепенно отделяя каждую деталь, мы собираем целый автомобиль. Осталось еще множество деталей, и всё это лишь на бампере. Следующая область, которая включает в себя несколько фигур – это область с противотуманными фарами автомобиля. Здесь у нас будет две фигуры самих фар, а также две фигуры того, что окружает эти фары. Кроме того, будет еще много разных деталей, с помощью которых мы «оживим» эти самые фары. Обведите фигуры так же, как показано на изображении ниже.

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Этап 4

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

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Этап 5

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

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Начните обводить основные фигуры фар автомобиля.

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Обведите фигуры боковых зеркал и полос.

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Этап 6

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

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

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

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Этап 7

Теперь наш Mini выглядит как… как Mini, и это не может не радовать! Теперь начнём раскрашивать нашу иконку. Уменьшите размер вашего скачанного изображения и повысьте уровень прозрачности до 100%.

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Помните, что нам не нужны все-все-все детали, но мы собираемся использовать градации и различные полосы и тени для того, чтобы иконка выглядела более-менее реалистично. Начнём с боковых бамперов. Выберите слой с левой фигурой нашего бампера, кликните по слою правой кнопкой на палитре слоев и перейдите в опции смешивания (blending options).

Примените заливку градацией (Gradient Overlay) так же, как показано на изображении ниже. Вы можете определить цвета на скачанной фотографии посредством пипетки (Eyedropper Tool).

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Примените внутреннюю тень (Inner Shadow) к этой фигуре, используя значения, указанные на изображении ниже.

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Повторите то же самое с правой фигурой.

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Этап 8

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

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп
Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп
Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп
Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

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

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

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

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Продолжайте, добавляя простенькие градации и тени автомобилю. Старайтесь сейчас придерживаться только синей и белой краски (цвет корпуса, зеркал, полос и крыши). Позже мы займёмся хромированием фар и противотуманок.

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп
Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп
Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Этап 9

Пришло время подработать над эффектом хрома. Достаточно сложно добиться хорошего эффекта хрома в Photoshop. Примените градацию к верхней решетке радиатора, используя где-то 10-20 цветов, переходящих от белого/светло-серого к светло-серому/средне-серому, как показано на скриншоте ниже.

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

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

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп
Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

У вас должно получиться нечто вроде этого:

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

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

Этап 10

Теперь нам нужно добавить немного эффектов к решетке радиатора и воздухозаборнику. Первое, что вам нужно сделать – изменить цвет решетки/воздухозаборника на очень темный серый.

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Откройте опции смешивания для одной из решеток и примените заливку текстурой. Выберите полосатую текстуру из списка. Если у вас нет такой текстуры, то создайте новый документ 3х3 пикселя и нарисуйте в нём три точки, используя ручку. Затем перейдите в меню Edit > Define Pattern, чем вы и создадите новую текстуру.

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Понизьте уровень прозрачности заливки текстурой до 25%. Это сделает текстуру/линии не такими читаемыми и отобразит темный цвет решетки – это именно то, что нам нужно! Если хотите, можете также добавить внутреннюю тень.

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

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

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Этап 11

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

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Мы также добавили внутреннюю тень в режиме Normal и цветом #FFECBD. Установите уровень прозрачности на 54%, дистанцию на 0 пикселей, уровень загрязнения на 28% и размер на 10 пикселей. Жмите ОК. Затем копируйте стиль слоя и примените его к остальным слоям фона фар (и противотуманных фар также).

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

По той же технике, примените градации и другие эффекты к фарам и индикатору.

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Этап 12

Мы почти закончили работу над основными градациями. Теперь вы должны уже уметь применять градации к остальным элементам автомобиля. Вам осталось применить градации к покрышкам, лобовому стеклу, а также мелочам типа сидений, зеркала заднего вида и руля. Закончите это…

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Этап 13

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

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

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

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп
Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Добавьте обрамление к линии.

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп
Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

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

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Как только закончите с этим, перейдите в меню Filter > Blur > Gaussian Blur. Размойте области, закрашенные кистью на 4,5 пикселя.

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Смените режим смешивания (blending mode) слоев на наложение (overlay), и понизьте уровень прозрачности до 30%.

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

Обработайте блики, уберите всё лишнее и то, что выходит за края автомобиля.

Вуаля!

Мы закончили на этом! Вот и финальный результат! Не забудьте поделиться тем, что получилось у вас в комментариях к статье!

Уроки Photoshop: Создаем детализированную иконку Mini Cooper в Фотошоп

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

Ключевые тэги: иконки, Photoshop, автомобили
Опубликовал Mysterious Master   Прочитано (раз): 7611   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 5 февраля 2012 @ 06:41
Написал: vampirenok — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо за пошаговое объяснение. Все просто, доступно, и понятно!!!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


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


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930