Рисуем автомобиль | Константин Копачинский

Рисуем автомобиль

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

Но как это сделать?

Делать кучу разноцветных авто? — Не вариант.

Накладывать фоновый цвет на серый кузов уже на сайте? — Некрасиво.

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

Найдите фотографию нужной вам машины (лучше если это будет качественная фотография). Я буду работать с BMW 2009 750Li.

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

Сначала Pen Tool-ом обведите кузов авто (без колес). Старайтесь сделать это как можно точнее и аккуратнее. Получившийся шэйп (назовите его Body) нам очень пригодится.

Создайте группу слоев «Кузов» и пока работайте только в ней. В итоге у меня получилось около сотни слоев в этой группе: каждый блик располагается на своем слое, что очень удобно.

Сбросьте цвета нажав D. Для работы нам будут нужны только черный и белый цвета. Никакого серого.

Как рисовать?

Руками =) Все сложные фигуры, как известно, состоят из простых. Отключаем слой Body, выбираем блик или затемнение на оригинале и пытаемся воспроизвести точно такой же, но на новом слое или слоях. Это только вначале кажется сложным. Стоит начать и остановиться невозможно. Посмотрите, как поэтапно рисуется заднее крыло авто.

С помощью Polygonal Lasso Tool либо, что еще лучше, Pen Tool создайте контуры ваших будущих бликов или затемнений. Далее Gradient Tool-ом создаете градиенты. Напоминаю: только черным и белым цветом. После создания градиента регулируйте прозрачность слоя. Делайте это кнопками от 1 до 0 на клавиатуре. Будет заметно быстрей.

Итак, обводка:

Градиент:

Добавление прозрачности:

Раскадровка всего процесса

Поехали.

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

Главное — тщательно осматривать кузов авто и замечать все самые мелкие нюансы. Многие блики можно нарисовать обычной мягкой кистью и подправить «пальцем», а некоторые, к примеру, блик от одного крыла до другого, удобно рисовать Pen Tool-ом и добавлять ему Outer Glow в свойствах слоя.

Двери, капот и все места соединения деталей рисуются Pen Tool-ом в режиме Path.

Для стёкол и зеркала заднего вида создайте отдельную группу. Тень от зеркала поместите в группу «Кузов».

Вставляем фары из оригинала. Обязательно сделайте новую группу слоев для фар.

Буквально пара белых бликов:

Свет от фар очень удобно рисовать в KPT 6 LensFlare.

Раскручиваем колеса Radial Blur-ом.

Продублируйте группу слоев «Кузов» и добавьте ему прозрачности. Назовите «Кузов 1».

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

Изображение для сайта

Слейте эти две группы слоев («Кузов» и «Кузов 1»). Получившийся слой назовите «Кузов». Продублируйте слой «Body» и назовите «Body 1». Расположите слои в следующем порядке:

Нажмите Alt и кликните между слоями «Кузов» и «Body». Все лишнее отсечётся. Слою «Body» выставьте Fill=0%.

Активируйте «Body 1». Возьмите Rectangle Tool и выберите Exclude Overlapping Shape Areas. Создайте прямоугольник:

Далее кликните с зажатым Alt между слоями «Фон» и «Body 1». Этот прием поможет избежать гребенки на контуре. Получилась картинка готовая к применению на сайте:

Подложки могут быть любые, главное чтобы программист победил превратности судьбы при использование png в IE.

Книги с рецептами