Отрисовка автомобиля

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

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

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

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

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

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

Отрисовка автомобиля *

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

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

Отрисовка автомобиля *

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

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

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

С помощью 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». Этот прием поможет избежать гребенки на контуре. Получилась картинка готовая к применению на сайте:</p>

Отрисовка автомобиля *

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

Отрисовка автомобиля *

Автор: fazeful

Это сообщение отредактировал ash — 2 Февраля 2009, 15:51


Создаем спецэффекты

Вас может также заинтересовать:

21 мая 2019

Оснащенная расширенными функциями, компактная и доступная Canon EOS 1100D сделает легкими ваши первые шаги в мире фотографии. - Превосходное качество изображения 12 мегапикселов - Руководство по функциям на экране -...

21 мая 2019

Дата анонса: 2012/09/17 Эффективное разрешение, МП: 12 Диагональ ЖК-дисплея, дюймы: 3 Вес с батареей и картой памяти, г: 225

21 мая 2019