VovkDesign

Блог Александры и Владимира Вовк

RSS лента
wp-puzzle

Как создавалась картинка для шапки сайта «Все на урок информатики»

Этот год начался с перемен. Во-первых, я уделила время на страницы Услуги и Условия сотрудничества. Во-вторых, первые проекты принесли мне много размышлений и вопросов. Самым интересным оказался вопрос от сестренки после просмотра коллажа в шапку блога: «Красивое фото, а что ты с ним делала?».

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

Первый коллаж для сайта

Поделюсь первой работой в этой области. Выполнила ее в 2012 году для блоггера Нины Вилисовой. Немного ниже показаны исходные фотоснимки, которые использовались для создания коллажа, и  сам коллаж (кликабельно). Не достает буквально пары-тройки фото, не нашлись они у меня 🙂

Коллаж для блога Нины Вилисовой

Картинка в шапку сайта учительницы

А следующий коллаж и есть то самое «фото» :). Это первая работа 2014 года — дизайн и разработка шаблона WordPress для Людмилы Пачесюк, автора блога «Все на урок информатики». Людмила хотела видеть в шапке фото или коллаж, где была бы изображена учительница информатики, которая готовится к уроку — за компьютером, с книгами и/или тетрадями вокруг. Вот такой получился результат (кликабельно):

Созданная картинка в шапку сайта

Посмотрим на это фото частями.

Что у нас слева?

Женщина, очень напоминающая молодую учительницу. Вся атрибутика присутствует — парта/стол, компьютер (женщина современная, пользуется своим ноутбуком вместо школьного старенького компа 🙂 ), книги, планшетка для заметок или плана урока и букетик, скорее всего подаренный школьниками.

Вот исходные фото женщины и окружающих ее предметов в сравнении с итоговой картинкой:

1

По центру

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

okno1

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

2

И справа видим мы…

Красивый диван и картину «Березы на берегу озера». Эта часть коллажа будет видна только счастливым обладателям больших широкоформатных мониторов 🙂 .

Оформление правой части картинки и исходные изображения

Как видите, я взяла всего две исходные фотографии, которые применила в правой части коллажа. Но на этом работа не заканчивается. Я люблю оформлять страницу ошибки 404 как продолжение шапки с какой-то изюминкой. Поэтому работаю дальше над картинкой — убираю учительницу и огромный диван. Вместо него ставлю столик и кресло с той-же серии — уютно, можно отдохнуть. Но и не уснешь, как на диванчике 🙂

Дизайн страницы ошибки 404

Как это делается?

Весь процесс создания такой иллюстрации для сайта можно разделить на три этапа:

  1. Идея. В данном случае все предельно просто — у моего клиента были четкие пожелания.
  2. Подбор фото. Очень важный этап и отбирает много времени. От качества исходных фотоматериалов напрямую зависит качество результата. Для этого коллажа я нашла фото, которое максимально подходило моим требованиям.
  3. Работа в PhotoShop. На этом этапе выполняется много однообразной работы — обработка контура, техническая ретушь (цветокоррекция, добавление резкости, удаление бликов, шумов, мелких недочетов) и работа с тенями и отражениями, чтобы органично вписать предмет в общую атмосферу. Результат работы зависит не только от владения фотошопом, но и от опыта работы. А уж детали можно добавлять и корректировать целую вечность 🙂

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

Комментарии всего: 5

  • Очень красиво и уютно. Особенно со страницей 404.

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

    • Татьяна, воплотить таким способом реально любой сюжет. Процесс интересный и очень затягивает, ведь в любой коллаж просто до бесконечности можно добавлять детали. И всегда, кстати, интересно посмотреть на контраст наброска и уже готового коллажа — сразу ощущается объем труда 🙂

Комментировать

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

wp-puzzle.com logo