Рисуем автомобиль
Для сайта компании, занимающейся покраской авто, я решил сделать перекрашиваемую машину, чтобы пользователь с помощью палитры мог выбирать цвет автомобиля. Эдакая микроигра.
Но как это сделать?
Делать кучу разноцветных авто? — Не вариант.
Накладывать фоновый цвет на серый кузов уже на сайте? — Некрасиво.
И тут я вспомнил, что можно накладывать полупрозрачную маску на фон и получать симпатичную картинку, качество и внешний вид, которой будет напрямую зависеть от качества полупрозрачной маски. Меняя фон под маской можно получать разные цвета кузова. Программист согласился воплотить все это в жизнь. Осталось только нарисовать полупрозрачную маску кузова. В статье вы увидите основные шаги работы и узнаете как обойти несколько подводных камней.
Найдите фотографию нужной вам машины (лучше если это будет качественная фотография). Я буду работать с 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.
Tweet
окна — пустые глазницы..
Ответить
Тонировка, гы. Увлекся очень кузовом.
Ответить
И тут я вспомнил, что можно накладывать полупрозрачную маску на фон и получать симпатичную картинку…
Неправда, эта я вспомнил :)
Ответить
Не-не-не. Я вспомнил, а ты одобрил и сказал, что реализуешь ;)
Ответить
«С помощью Polygonal Lasso Tool либо, что еще лучше, Pen Tool создайте контуры ваших будущих бликов или затемнений. Далее Gradient Tool-ом создаете градиенты.»
Я верно понимаю, что пентулом мы рисуем нужный контур и затем конвертим его в Vector Mask? После чего уже льем градиентом?
Ответить
Я вже щось похоже бачив, тільки там ніяка основа не використовується… Все зроблено своїми руками!
Ответить
Это не вы делали этот сайт.
Он есть в портфолио у этого человека- http://www.weblancer.net/users/Djaarf/portfolio/476031.html
И вообще у вас нету в портфолио ссылок на сделанные сайты. Ни один сайт из сделанных я не смог найти в поисковике.
Ответить
Сайт делал Я. Константин разработал концепцию и дизайн, Владимир занимался версткой.
Ответить
А у вас неплохо получаетса!
Ответить
Да, окна действительно немного подвели, но в целом Вы хорощий художник, я умею только палка-палка-огуречек ))
Ответить
Отпадный урок!Спасибо большое. Пошел пробовать рисовать)
Ответить
Пасиб
Ответить
=суперско получилось
Ответить
Клево)))
Ответить
такому нужно учится, сразу достаточно сложно во все въехать…
Ответить