Обучайся бесплатно с WAYUP Premiere сегодня вечером

Макеты мобильных устройств идеально подходят для представления демо-версий приложений. Они также позволяют дизайнерам редактировать экран устройств в приложениях, добавлять/убирать элементы интерфейса, создавать фотографии готовой работы. Но одновременно с этим, не сказать что часто, но макеты устройств используются и в веб-дизайне, особенно при работе с заголовками страниц (page header). За последнее время можно было увидеть достаточно много таких сайтов и они продолжают появляться, а потому мы решили посмотреть повнимательнее на данную тенденцию и попрактиковаться в работе с Photoshop.

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

Стандартный вид

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

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

Такой вариант несложен в создании в Photoshop, но удобен для дизайна и работы с контентом. Поэтому чаще всего мы и видим именно этот вариант или вариант в перспективе.  Особенно интересным представляется вариант дизайна проекта Spendee. Здесь веб-мастера решили использовать своеобразный слайдер, дабы нагляднее продемонстрировать творение разработчиков для систем iOS и Android. При прокрутке страницы можно увидеть, что каждый раздел сайта использует свой оригинальный макет мобильного устройства.

Перспектива

Другим популярным вариантом макета является вид в перспективе. Этот метод использует уже фотореалистичную конструкцию для создания более точных видов устройств. В большинстве такие макеты создаются в PSD формате с использованием смарт-объектов (обтравочная маска), которые копируются и вставляются в область экрана  устройства. После сохранения и работы со смарт-объектом  можно увидеть в готовом PSD выровненную картинку в перспективе.

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

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

 

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

Макеты в перспективе распространены не меньше вида спереди.  И используются для этого и макеты планшетов, и ноутбуков, и часов. Создаются даже целые анимации такого представления. А что касается перспективы в целом, то её выравнивают и по горизонтали, и по вертикали.

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

Макет – герой экрана

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

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

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

Мы подобрали еще несколько инверсных примеров использования макетов мобильных устройств на сайтах. Здесь и анимация, и параллакс,  графический стиль и многое другое. Как говорится, фантазии дизайнеров нет конца. Речь идет о Yarno, Ultra-Responsive DD, Brring, Dylan de Heer, Joonik, Guarisco Fabrics, Oodi, Gamehive, We Are Creation.

PSD макеты

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

В тоже время команда Ramotion представила сборку реалистичных высококачественных макетов iPhone Clay PSD, которые позволяют настраивать цветовую гамму на свой вкус. В библиотеке находятся самые разные макеты моделей Android-смартфонов и версий iPhone. Но если и в интернете найти такое можно, то отличие данной сборки – в открытых PSD файлах, которые можно редактировать, как душе угодно. Качество изображений достаточно велико и создано в векторе с использованием смарт-объектов. Но набор небесплатен, увы.

 Dribbble

Одно из ведущих дизайн-сообществ Dribbble, где представлены free-материалы также имеет огромную подборку макетов мобильных устройств. И большая их часть как раз и создана Ramotion. Но не все работы представлены здесь из платного пакета. Так или иначе, но на Dribbble можно найти интересные проекты реалистичной фотографии, с людьми и без, макеты Android-устройств, в виде спереди и перспективе, и многие иные.

А еще можно потратить от 30 минут своего свободного времени и найти идеальный макет для своего сайта просто в поиске Yandex/Google. Но Dribbble удобен тем, что предлагает дополнительно предварительный просмотр и более точный поиск.

Photoshop

Разумеется, что рассматривать подробно, как создавать макет своими силами мы не будем. Этого и не требуется, так как макетов и правда, много. Мы посмотрим, как можно добавить к уже имеющемуся макету интересный эффект или фильтр, которые позволят использовать изображение в более широком контенте. Разумеется, что создавать такие изображения, даже скорее арт-изображения, быстро не получится. Готовьтесь уделить этому достаточно много времени и сил на поиск нужных объектов. Зато и результат будет соответствующим.

Как вставить картинку на экран, многие знают, но что еще можно придумать и какие фантазии создают дизайнеры?

Вариант 1

Выберем вариант фотографии на темном фоне, создадим новый слой и Пером нарисуем кривую. Любую, на ваш вкус.

Затем перейдем к инструменту Кисть и создадим кисточку с эффектом нажима и тонкими краями.

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

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

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

 

Таким образом, если есть темное изображение, то можно применить и эффект неона к нему. Все, разумеется, зависит от фантазии.

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

 Вариант 2

Другим интересным примером может послужить 3D. Для основы возьмем всё ту же фотографию и используем разные объекты, от готового изображения до скрап-набора. Располагая их поверх основного рисунка и создавая подсвечивание (если нужно по тематике), можно создать интересные композиции.

Сами объекты не должны быть в 3D. С помощью перспективы и правильного поворота макета смартфона (планшета и пр.) иллюзия объемности создастся автоматически.

Не забывайте работать по маске и создавать отдельные слои для всего. Лишние детали линий или объектов удаляйте ластиком. И вот что получается создать.

 

При желании можно на новом слое размесить Фильтры –> Рендернг -> Блик и подсветить темные участки оригинала, на которые попали светлые эффекты. Особенно, если источник особо яркий, как светлячок в руке.

И еще несколько примеров. Все эти объекты (дерево, скамейка, человек) вырезаны из других изображений и аккуратно расставлены на поверхности экрана. Секрета-то в этом и нет.

Заключение

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

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

Фантазии, фантазии… творчество.

Как вам материал?