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

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

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

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

UI100Day-01 by Arche阿北

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

Mockup

Размер: 24 мб

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

Окна в photoshop

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

Операции в photoshop

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

Загрузка экшна в Photoshop

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

Action isometric

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

Загрузка стилей в Photoshop

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

Отобразить сайт в перспективе

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

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

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

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

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

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

Пример открытия в фотошопе

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

Дизайн сайта, мокап которого будем делать
Rexchange Currency Exchange Website
by uithemes

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

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

Пример установленного экшна

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

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

Настройки экшна для демонстрации сайта в изометрической проекции

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

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

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

Пример демонстрации сайта в перспективе на белом фоне

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

Пример демонстрации сайта в перспективе на цветном фоне

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

https://youtu.be/mPgQFPeOny4
Демонстрация работы экшна

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

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

Слои с иконками

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

Иконки в изометрии

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

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

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

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

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

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

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

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

3 комментария

  1. Леха Блэк

    Оу, оу! Спасибо. Смотрится действительно круто. Давай еще по Фотошопу!

  2. EA

    Вы просто СУПЕР!!!! Спасибо!

    1. dimadv7

      EA, ах-ха, спасибо!

Добавить комментарий