Делаем mockup в Photoshop для презентации landing page

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

Photoshop, который в несколько кликов сделает из макета отличный mockup, который даже посредственный дизайн превращает в стильный и презентабельный.

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

Давайте посмотрим, как установить себе такой экшен и разберемся с настройками. Для начала скачайте и распакуйте архив:

Затем, запустите Photoshop и откройте 2 окна "Операции" и "Стили". Если в правом меню их нет, то можно включить. Для этого, в верхнем меню перейдите в "Окно" и поставьте галочки напротив "Стили" и "Операции". Тогда соответствующие иконки появятся на экране.

Теперь раскройте окно "Операции" и нажмите на иконку меню этого окна.

Перед вами откроется контекстное меню, в котором выбираем "Загрузить операцию".

Перейдите в папку "mockap", затем в "[экшн] - Изометрия (горизонтальная)" и выберите файл "Isometric Mock-UP".

Теперь, перейдите в "Стили" и проделайте туже операцию, только добавьте файл стилей.

Далее, как и в прошлый раз, переходим в папку "mockap", затем в "[экшн] - Изометрия (горизонтальная)" и выберите файл "Isometric_MockUP_styles".

Обратите внимание на то, что в папке есть документация в формате PDF.

Делаем мокап дизайна сайта

Настало время для творчества. Но впереди еще несколько нюансов.

1. Экшен работает только с картинками или группами. То есть 1 картинка - 1 слой. или объединяем элементы картинки в группу.
2. Работать можно и с несколькими картинками одновременно, но все они должны быть цельным объектом и располагаться на отдельном слое либо разделены по группам.
3. Документ должен иметь разрешение 72 dpi.

Открывайте картинку в Фотошопе и давайте познакомимся с настройками.

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

Изначально картинка выглядит следующим образом:

С этим изображением и будем работать. Давайте откроем окно экшенов и посмотрим на настройки плагина.

Если все сделали правильно, то у вас должно получиться, примерно, так:

Давайте раскроем настройки горизонтального экшена и разберемся с основными параметрами, которые можно задать. Благо, их не так и много, всего 3.

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

Я выбираю левую сторону. "ONE", "TWO" как раз и означает количество картинок в проекте. Мы договорились, что начнем, пока, только с 1.

Кликните по строке "(ONE) Image - Transform LEFT", а затем по значку "►" в нижней строке. Начнется магия, а на самом деле, работа экшена (записанного порядка действий разных команд).

Добавлю белый фон и в результате получаем такое отображение сайта:

Даже на белом фоне и в уменьшенном виде смотрится достаточно интересно. А если добавим цветной фон?

Как по мне, получилось еще интереснее. А весь процесс занял секунд 15. Вручную такая перспектива делалась бы дольше. 

Но это не все настройки. Еще есть возможность изменять глубину или высоту элемента. Возьмем несколько иконок для наглядности. А заодно покажу как работать с несколькими изображениями

Создаю проект, в котором 3 слоя. На каждом слое по 1 иконке.

Убедитесь, что находитесь на первом слое и переходите в окно "Операции". Выберите пункт "(THREE) Images - Transform LEFT " и жмите "►".

Давайте теперь увеличим высоту одной из иконок. То есть сделаем цилиндр зеленой иконки чуть больше.

Для этого, убеждаемся, что находитесь на нужном слое и выбираем одну из команд "EXTRUDE ADD (+) ", например, я сделаю глубину на 30 пикселей больше.

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

Как видите, тень теперь стала намного больше и заметнее. Я не говорю, что стало лучше, просто для примера гиперболизировал результат.

Кликнув по иконке смарт-объекта можно отдельно поработать с тенью, изменить цвет, положение и т.д., но это уже детали работы с Photoshop и статья не об этом. Если возникнут вопросы, пишите в комментариях.

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

• Делаем активным нужный слой;
• находим настройку размытия;
• применяем с нужным параметром;

Вот так просто, за считанные секунды можно сделать достойный мокап сайта в целом и отдельных его элементов. Как вам идея? Есть ли способы полегче? Какими плагинами и экшенами пользуетесь вы?