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

Как же создать хорошую иллюстрацию к статье или иконку-тизер для важного раздела на сайте? Давайте посмотрим на историю компании «Супер-тур» — самой лучшей туристической компании в параллельной вселенной!

И вооружился Лентяев книгой волшебной. И открыл нужный раздел – иллюстрации для сайта! Давайте посмотрим, что у него получится.

Выбери стилистику

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

Фотореализм в моде, сочные и красивые изображения вещей, товаров, услуг или просто идей — то на что ты хочешь обратить внимание посетителя.

Серьезно? Вот идиот! Это же столько времени! Нафига так напрягаться! Просто загуглю картинки по теме.

Продумай содержание

Если это иконка — подумай, какая метафора подойдет лучше, сделай что-то оригинальное или лучше классическое и понятное.

Если же это иллюстрация — продумай сюжет, какие объекты должны находиться на иллюстрации, чтобы малым количеством максимально раскрывать суть.

Так, так… У нас туроператор… Поезда, самолеты, пароходы… Что ж, их и будем использовать! Проще, чем я думал!

Твори!

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

Как же нарисовать поезд, на котором захочется поехать и самолет, на котором захочется полететь? Сейчас узнаем! Как минимум о поезде.

Сначала строим перспективу. В данном случае важно передать динамику. А динамика, как мы знаем, должна быть положительная.

Пока не очень похоже на что-либо, да? Ничего, это основа для всех (сколько бы их ни было) изображений в наборе. И у поезда, и у самолета с пароходом будет именно такая динамика и перспектива.

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

Некоторые из фотографий-исходников

В итоге у нас должно получиться что-то такое — обозначены основные элементы: окна, двери, кабина и общая форма вагона. Продолжаем наращивать детали и вытачивать форму.

Уже очень близко к нужной нам детализации, остался последний рывок — детализировать окна, двери, дворники и дополнительные панели.

Отлично, перейдем к тонированию нашего поезда. Серебристый металлик для корпуса, теплый желтый — для дверей и кабины.

Убираем лишние обводки, швам на корпусе придаем объема двумя линиями — светлой и темной.

Пришла пора заняться материалами и объемом. Немного шума и отблесков на металл, блики на стекле и пластике.

А теперь весь вагон.

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

Дорабатываем тень от вагона — тень никогда не бывает одноцветной и просто черной.

Получилось! Как видите, все очень просто!

Так дизайнер Лентяев хоть и не воспользовался книгой, но заработал свои несколько серебренников, а вот менеджер Сидовор из компании "Супер-Тур" за свой труд получил что-то другое...

Вывод

Качественные иллюстрации — обязательная и неотъемлемая часть современного сайта. Научиться их создавать совсем не просто, как и в любой другой составляющей дизайна, здесь необходимы знания как чисто художественные, так и касающиеся так называемой физики процесса: недостаточно лишь одного умения взять где-то картинку и немного улучшить ее, нужно доработать ее в контексте, понимая, какую функцию она должна выполнить.

Этот процесс очень трудоемкий и кропотливый, но если подойти к делу с душой, результат порадует как дизайнера, так и клиента. Ведь красота она такая! Она дарит радость.