Как создать мокап для сайта

Как создать мокап для сайта

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

Определение

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

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

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

Как создать мокап для сайта - фото1

Зачем нужны мокапы?

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

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

Как создать мокап для сайта - фото2

Как работать с мокапами?

Основным рабочим полем в мокапах являются смарт-объекты. Они встраиваются в среду - страницу сайта - без потери качества. Создание смарт-объекта в общем случае выглядит так:

  • откройте изображение в графическом редакторе;
  • преобразуйте фоновый слой в редактируемый (обычный);
  • продублируйте, сделайте копию фонового слоя;
  • преобразуйте последний слой в смарт-объект.

Функция создания смарт-объекта обычно так и называется в классических программах. Иначе говоря, смарт-объекты - это слои или ячейки, изменения в которых не затрагивают основную страницу, на которую вы их накладываете. Здесь можно менять параметры объекта без страха нарушить положение или настройки других.

Как создать мокап для сайта - фото3

Пользоваться смарт-объектами просто:

  • скачайте нужный PSD-файл;
  • откройте его в графическом редакторе;
  • найдите слой с примерным названием Your design или подобное;
  • дважды кликните по нужному слою;
  • в открывшееся окно перетащите свое изображение или паттерн;
  • отрегулируйте их соотношение, а затем сохраните изменения, как обычно.

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

Ваш баннер здесь за 35 грн./сутки

Верх