В этой публикации приоткрою для вас занавес на свой рабочий процесс и покажу как создавались картинки для шапки сайта. По заданиям на последние два проекта требовалась интересная шапка для сайта с определенным сюжетом. Решили вопрос исключительно ретушью и подготовкой фото-коллажа. Показываю процесс.
Фото-коллаж для сайта
Одной из первых работ в этой технике была иллюстрация для шапки блога Нины Вилисовой, выполненная в 2012 году. Ниже показываю исходные фотоснимки, которые использовались в процессе, и итоговый коллаж (кликабельно).
Фото коллаж в шапку для сайта учительницы
Коллаж ниже выполнен в рамках комплексного заказа на дизайна и разработку шаблона WordPress для Людмилы Пачесюк, автора блога «Все на урок информатики». Людмила хотела видеть в шапке фото или коллаж, где была бы изображена учительница информатики, которая готовится к уроку — за компьютером, с книгами и/или тетрадями вокруг. Вот такой получился результат (кликабельно):
Посмотрим на это фото частями.
Разбор левой части фото коллажа
В левой части расположен основной сюжет: женщина, очень напоминающая молодую учительницу, и подходящая атрибутика — письменный стол, компьютер, книги, планшетка для заметок или плана урока и букетик, скорее всего подаренный школьниками.
Вот исходные фото женщины и окружающих ее предметов в сравнении с итоговой картинкой:
Центральная часть коллажа
Основная, сюжетная, часть коллажа слева вышла весьма уютной. И этот уют захотелось продолжить дальше. Подобрала окно и светлые занавески. В первом варианте окно выполнила только из двух картинок и выглядело оно так:
После просмотра иллюстрации с Людмилой, решили внести коррективы. В центральной части коллажа не хватало яркости, которую давали зеленые и оранжевые акценты по краям коллажа. Плюс — с голубым меню и кнопками картинка тоже совсем не перекликалась. Чтобы исправить ситуацию, я попробовала поставить за окно красивое голубое небо того-же оттенка, что и кнопки на дизайне. И заменила цветы на более пышные и жизнерадостные. Получилось гораздо ярче:
Правая часть коллажа
В правой части коллажа расположились подходящие по цвету элементы интерьера — красивый диван и яркая картина «Березы на берегу озера». Увидят эту часть только обладатели больших широкоформатных мониторов.
Как видите, для правой части коллажа я использовала всего две исходные фотографии.
Но на этом работа не заканчивается. С удовольствием оформляю страницу ошибки 404 как продолжение шапки с какой-то изюминкой. Поэтому работаю дальше над картинкой — убираю учительницу и огромный диван. Вместо него ставлю столик и кресло с той-же серии — получилось уютно.
Как происходит создание такого коллажа?
Весь процесс можно разделить на три этапа:
- Идея. В данном случае все предельно просто — у моего клиента были четкие пожелания.
- Подбор фото. Очень важный этап и отбирает много времени. От качества исходных фотоматериалов напрямую зависит качество результата. Для этого коллажа я нашла фото, которое максимально подходило моим требованиям.
- Работа в PhotoShop. На этом этапе выполняется много однообразной работы — обработка контура, техническая ретушь (цветокоррекция, добавление резкости, удаление бликов, шумов, мелких недочетов) и работа с тенями и отражениями, чтобы органично вписать предмет в общую атмосферу. Результат работы зависит не только от владения фотошопом, но и от опыта работы. А уж детали можно добавлять и корректировать целую вечность 🙂
Если вам понравился результат, подписывайтесь на обновления! В следующей статье на примере кресла и столика я покажу небольшой урок, который поможет самостоятельно сделать картинку в шапку сайта немного привлекательнее и живее.
Очень красиво и уютно. Особенно со страницей 404.
Спасибо, очень люблю дизайн 404-ых в стиле сайта, но с изюминкой
Применяя умение и фантазию, можно создать такие красивые иллюстрации для шапки сайта. Сразу видно, что Вы Александра специалист в этом деле и любите свою работу.
Татьяна, воплотить таким способом реально любой сюжет. Процесс интересный и очень затягивает, ведь в любой коллаж просто до бесконечности можно добавлять детали. И всегда, кстати, интересно посмотреть на контраст наброска и уже готового коллажа — сразу ощущается объем труда 🙂