Рисуем автомобиль
Запись опубликована Блог | fazeful design. You can comment here or there.
Для сайта компании, занимающейся покраской авто, я решил сделать перекрашиваемую машину, чтобы пользователь с помощью палитры мог выбирать цвет автомобиля. Эдакая микроигра.
Но как это сделать?
Делать кучу разноцветных авто? - Не вариант.
Накладывать фоновый цвет на серый кузов уже на сайте? - Некрасиво.
И тут я вспомнил, что можно накладывать полупрозрачную маску на фон и получать симпатичную картинку, качество и внешний вид, которой будет напрямую зависеть от качества полупрозрачной маски. Меняя фон под маской можно получать разные цвета кузова. Программист согласился воплотить все это в жизнь. Осталось только нарисовать полупрозрачную маску кузова. В статье вы увидите основные шаги работы и узнаете как обойти несколько подводных камней.
Найдите фотографию нужной вам машины (лучше если это будет качественная фотография). Я буду работать с 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.
Использование статьи на других сайтах разрешено только с указанием ссылки на www.fazeful.ru.