Технический дизайн или качественная отрисовка фотографий в оформлении сайта. Часть 1.

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

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

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

Пришло время прокачать нашу картинку. Запускаем фотошоп и настраиваемся на серьезную работу.

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

Пожалуй, начнем с отрисовки фотографии здания мэрии.

1. От простого к сложному

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

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

2. Отрисовка крупных деталей здания

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

3. Отрисовка мелких деталей

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

4. Создание объема изображению

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

5. Окна

Ну вот, когда почти все готово, можно переходить к окнам. Но если вы не знаете, какое будет окружение, то самое время подумать и нарисовать его. В нашем случае это облака, город и деревья.
Просто копируем кусок фона в группу с окнами и применяем фильтр  “Glass” для реализма.

 
5. Корректировка цвета и доводка

Последний этап заключается в корректировки цвета и контраста изображения. Для этого вам нужно прейти на самый верхний слой картинки, там где находится основная контурная маска. Нажать на иконку Adjastment Layer (внизу палитры слоев) в котором выбрать Selective color. Ну а дальше, экспериментируйте и добивайтесь положительного результата, настраивая светлые, серые и темные тона.