Когда звучит понятие «ретро-дизайн», большинство из нас думает о стилизации 20-50-х годов XX века. Отчасти это верно, но если глубже разобраться в творческих трендах, то очевидным становится тот факт, что зачастую ретро-элементы сочетаются с современными стилями, направлениями. В результате в интернете появляются невероятные по красоте веб-дизайны, которые, с одной стороны, выглядят модными и трендовыми, а с другой, навеивают мысли о прошлом и истории.

Мы уже подробно рассматривали в нашем блоге вопросы, связанные с ретро-дизайном сайтов, об особенностях и примерах. Но сегодня наша задача уделить внимание, наверное, одному из основных элементов любого веб-дизайна – фону и оформлению домашней страницы в стиле, сочетающим в себе одновременно и ретро и современность. Не может такого быть! – подумаете вы и решите, что одно с другим сочетать не получится. Что же, попробуем развеять мифы и узнаем некоторые новые практические возможности Photoshop.

Характерное ретро

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

И в большинстве случаев дизайнеры используют только стилизованный под рукопись шрифт, говоря при этом о том, что они создали сайт в стиле ретро. А поскольку все прочее не подвергалось каким-либо маломальским изменениям, то он остался и современным одновременно. Например, lefarfallecharleston использовали характерный для ретро фон бежевого цвета (цвета времени и старины), шрифты, создающие аналогию рукописей и печатных изданий того периода. Если рассмотреть фотографии, то и они отдельно обрабатывались, тонировались, затемнялись и осветлялись, дабы получился также немного старинный вид.

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

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

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

Таким образом, создается впечатление, что да, вот оно ретро, но вот и современность.

Также мы рекомендуем посмотреть такие дизайны, как globalwelsh, meetthegreek, agence-belle-epoque. Все они в той или иной степени создают визуальное ощущение стилистики прошлых лет.

Но иногда веб-дизайнеры решаются и на более амбициозный шаг и… нет, не используют ретро-стиль на все 100%, но применяют его таким образом, что только одна фотообработка заменяет даже отсутствие характерных элементов декора (полосок, кнопок, разделителей и прочего). Увидеть такое можно на philz, biera, forefathersgroup.  С одной стороны, применялась темная тонировка, с другой, игра с контрастностью и цветовыми каналами.

 

Так или иначе, но если веб-дизайнер решается использовать ретро-стиль  для своего проекта, то нужно понимать, что одних только элементов будет недостаточно. И тем более, если под старину оформляться будет только «обложка» сайта, домашняя страница. Да, многое (с визуальной точки зрения) добавляет правильно подобранный шрифт, но одним им передать настрой не получится. Скорее получится обычная «куча мала», когда «накидали» на страницу всего и вся и не поймут, чего же не хватает, как-то всё не то.

Ретро стилистика и современные тренды в Photoshop

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

Сразу оговоримся о том моменте, что в интернете и в разных приложениях существует множество разных готовых плагинов для Photoshop, фильтров и возможностей для того, чтобы перевести обычное изображение/фотографию в старинное. Но мы уже знаем по нашим прошлым материалам (например, о черном-белых вариациях), что профессиональные дизайнеры мало ими пользуются. Фильтры работают по заранее заложенному в них алгоритму, а все фотографии разные (сняты при разном освещении, с разным качеством, выдержкой, экспозицией и прочая, и прочая). Потому и результат тоже будет разный. И если одна фотография получится красивой, то другая может стать совершенно неказистой.

Поэтому гораздо проще быстренько применить пару корректирующих слоев и добиться нужной исторической стилистики. Тем более что одно дело стилистика 40-50-х годов, другое 70-80-х. Преобладание цветовых тонов будут разными.

И еще один момент: фотография старится обычно от чего? Потери цветов, преобладания желтизны, смятости бумаги, от чего изображение искажается в местах сгиба. Это будем помнить.

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

Открываем в новом документе и поработаем над стилистикой времени. Создаем две копии слоя (фон отключаем и просто храним, работаем с двумя копиями) и применяем  Фильтры -> Другое -> Цветовой контраст. Наша задача выделить мелкие детали на сером фоне, поэтому  радиус выбираем около 1,4 – 2,2 в нашем случае.

Выбираем режим наложения для данного Слоя 1 – Линейный свет. Сравните результат и оригинал. Фотография стала более резкой, а детали более яркими. Разница между уровнями резкости просто очевидна и удивительна.

Теперь добавим корректирующий слой Кривые на панели слоев внизу и начнем изменять цветность для придания старины. Изогните Красный в форме S и насыщайте изображение красными оттенками. Совсем чуть-чуть изогните Зелёную кривую, она окрасит фотографию и придаст оттенок бежеватости. Синий также немного изогните по форме S и насыщайте тени и общую тонировку голубоватым. Если вспомните отечественные фильмы 70-80-х годов, то можете узнать характерную стилизацию под кинопленку.

Разумеется, что с помощью готовых фильтров такого уточненного и аккуратного эффекта не получить.

С одной стороны, ретро-изображение готово, уже его отдельно можно использовать в дизайне сайтов. Но давайте придадим ему чуть более интересный вид.

Добавим направляющие Просмотр -> Новая направляющая и значение укажем в 50%. Это позволит им пересечься в центре.  Объединяем наши слои на новом Ctrl+Shift+Alt+E.

Выберем инструмент Овальное выделение и создадим круг, расположив его в середине (разумеется, выделив его по осям).

Не снимая выделения, нажимаем Ctrl+J, чтобы скопировать его на новый слой, выбираем Свободное трансформирование и немного уменьшаем или увеличиваем окружность, поднимаем вверх или немного опускаем. Иными словами, наша цель сместить центр данного объекта таким образом, чтобы изображение в круге было явным и четким.

Теперь, предстоит изменить тональность данного объекта. Для этого, либо после добавления корректирующего слоя Кривые выбираем Обтравочную маску, либо изначально нажимаем Ctrl+ клик по миниатюре круга на панели слоев, чтобы создать выделение, а затем добавляем Кривые. Тогда будет создана маска. Выбор за вами, но мы выбираем второй вариант. Задача отрегулировать цвета в пределах круга так, чтобы в тенях было больше красного, а границы круга были более четкими и явными.

Создаем новый слой, выбираем мягкую кисточку большую и красным цветом делаем мазки в любых интересных местах. Режим наложения слоя ставим Экран, а Непрозрачность устанавливаем около 50-60%. Этим мы создали небольшие градиентные переходы и засвечивания пленки. Можно выбрать и иной цвет, а не только красный.

У слоя с кривыми, что регулировали цветность круга, есть маска (в нашем случае слой Кривые 2). Если нет, создайте её у слоя с Кругом (зависит оттого, каким методом вы применяли корректирующий слой). Выберем кисточку дымка или номер 35 из стандартного набора кистей спецэффектов. И по маске немного пройдемся по кругу, придавая истертость краям.

 

Первым слоем на панели слоев установим отдельную текстуру шероховатой бумаги. Режим наложения вы можете выбрать любой понравившийся. И Цветовой тон, и Мягкий свет, Затемнение, Умножение и прочие будут смотреться очень отлично, а изображение будет становиться красивее и красивее, и стариннее естественно. Так что здесь придется дать волю фантазии.

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

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

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

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

Выбираем инструмент Прямолинейное лассо и рисуем прямоугольник по всему изображению (любой верхний слой) или треугольник. Нажимаем Ctrl+Shift+C и копируем выделенный фрагмент со всеми слоями. Теперь сразу нажимаем Ctrl+V и наш кусочек автоматически вставится на новом слое. Берем инструмент Перемещение и мышкой сдвигаем кусочек. Изображение разрушается визуально.

 

Создаем множество таких полигонов, как отдельные слои и сдвигаем их. Возможно, они будут не слишком четкие, но в том и суть. В данном варианте нам как раз и не нужно, чтобы они были 100% явными. Но если вы отключите тот самый белый слой, то сможете их увидеть и, возможно, вам будет проще их создавать. Но затем слой включите обратно. Как закончите, собираем их в отдельную группу Полигоны. Вы также можете их немного поворачивать или разворачивать на 90 градусов, уменьшать немного. На что фантазия сгодится.

Создаем текстовой слой и пишем название сайта, размещаем логотип, слоган или что-то иное. Соответственно, шрифт подбираем тот, что требуется по дизайну к конкретному проекту. После добавляем маску к текстовому слою, берем кисточку мягкую с дымком (смотрите выше) и немного проходимся по буквам, добавляя им истертости. Логично, но на такой древней фотографии надпись не может быть четкой и контрастной.

Можно повторить два слоя с текстурами и сделать их обтравочными масками для текстового слоя (чтобы не затрагивать полигоны).

И вот готовый результат. Разумеется, что можно не так сильно состаривать фотографию, даже обойтись тонировками и менее выраженными текстурами. Но это уже зависит от конкретных целей, желаний и идей, которых очень много. Даже надпись можно делать не в виде цветовой заливки, а в виде слоя с изображением. Или отключить некоторые слои с текстурой или цветовыми наложениями.

Даже придать эффект стекла и осколков его.

Так или иначе, но изображение в целом соединило в себе ультратрендовые полигоны (к ним можно добавить корректирующий слой Кривые и сделать чуть-чуть контрастными, скриншот ниже) и ретро-стиль, вид старинной фотографии. Вероятно, у нас получилось оно слишком старинным, но на то и богатейшие возможности Photoshop, чтобы подбирать и экспериментировать с настройками, кривыми, уровнями и режимами.

Завершение

Использование элементов и стилистики ретро и винтажности в веб-дизайне приветствуется не меньше, чем четкое и строгое следование современным и постоянно меняющимся трендам. Создавая сайт, основная цель – уделить внимание не только общей целостности дизайна, но и создать главную страницу настолько красивой, чтобы пользователям захотелось дальше изучить этот самый сайт. Именно поэтому часто можно видеть невообразимо красивое начало проекта, иногда интерактивное, видео или красочные фотографии, а затем уже «скучные» текст, планы ЖК или карточки товаров, описания приложений или услуг. Но чтобы создать действительно красивую «обложку», нужно немного постараться и быть не просто веб-дизайнером, но и художником.

Сочетание ретро и современности позволяет создавать умопомрачительные композиции, которые, с одной стороны, будут напоминать нечто технологическое и совершенное, а с другой – будет создаваться впечатление, что все это «ноу-хау», оказывается, было создано очень и очень давно.

Как именно использовать такие изображения, насколько «старить» их и как совершенствовать, зависит от конкретного проекта, от общей стилистики дизайна, от идей веб-мастера. Но то, что это модно всегда – факт неоспоримый. Тем более, накануне уже долгие праздничные деньки, так что, есть много времени для творческой фантазии.