Макеты мобильных устройств идеально подходят для представления демо-версий приложений. Они также позволяют дизайнерам редактировать экран устройств в приложениях, добавлять/убирать элементы интерфейса, создавать фотографии готовой работы. Но одновременно с этим, не сказать что часто, но макеты устройств используются и в веб-дизайне, особенно при работе с заголовками страниц (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
Выберем вариант фотографии на темном фоне, создадим новый слой и Пером нарисуем кривую. Любую, на ваш вкус.
Затем перейдем к инструменту Кисть и создадим кисточку с эффектом нажима и тонкими краями.
Возвращаемся на Перо, кликаем ПКМ по контуру и выбираем Выполнить заливку контура. В появившемся окне выбираем кисть и ставим галочку Имитации нажима. Удаляем контур через меню ПКМ.
Теперь переходим в режим наложения слоя с получившейся кривой и настраиваем Внешнее свечение, Наложение цвета, Внутреннее свечение и прочие красоты. Если эффект требуется более яркий – копируем слой с кривой.
Создадим новый слой и нарисуем еще одну кривую. А Кисточку создадим в виде точек, разбросанных по оси. Повторяем шаги по отрисовке контура и настраиваем эффекты наложения. Эффект весьма интересный получается. Аналогично можно раскидать любые иконки (в нашем примере одна штучка).
Таким образом, если есть темное изображение, то можно применить и эффект неона к нему. Все, разумеется, зависит от фантазии.
Важно: если у вас темное изображение и вы добавляете какое-то свечение, то и объекты под этим свечением должны быть светлее. Иными словами. Линия неона проходит по руке - рука должна быть осветлена по сравнению с оригиналом. Это можно сделать с помощью стилей наложения, добавления блика, теней и пр.
.jpg)
Вариант 2
Другим интересным примером может послужить 3D. Для основы возьмем всё ту же фотографию и используем разные объекты, от готового изображения до скрап-набора. Располагая их поверх основного рисунка и создавая подсвечивание (если нужно по тематике), можно создать интересные композиции.
Сами объекты не должны быть в 3D. С помощью перспективы и правильного поворота макета смартфона (планшета и пр.) иллюзия объемности создастся автоматически.
Не забывайте работать по маске и создавать отдельные слои для всего. Лишние детали линий или объектов удаляйте ластиком. И вот что получается создать.
При желании можно на новом слое размесить Фильтры –> Рендернг -> Блик и подсветить темные участки оригинала, на которые попали светлые эффекты. Особенно, если источник особо яркий, как светлячок в руке.
И еще несколько примеров. Все эти объекты (дерево, скамейка, человек) вырезаны из других изображений и аккуратно расставлены на поверхности экрана. Секрета-то в этом и нет.
Заключение
Обычно изображения макетов мобильных устройств используются на посадочных станицах, Landing Page, на главных. Но можно применять и на протяжении всего сайта, в блогах, интернет-магазинах, бизнес-направлениях, портфолио. Не обязательно тематика сайта должна полностью соответствовать мобильному направлению.
Тенденция использования макетов становится популярной и удобной для разных задач. Более того, такие варианты дизайна подходят для адаптивного стиля. Главное – найти творческий взгляд на это, вдохновению, идею. На вашем столе лежит смартфон, а перед вами задача создать сайт кафетерия и возможность заказа по телефону? Ну, так пусть поверх смартфона стоит чашечка кофе или рука почти достает из экрана эту чашечку, или смартфон используется как поднос…
Фантазии, фантазии… творчество.
