Простой макет постера в Sketch с помощью Magic Mirror

Еще недавно в Sketch была собственная версия смарт-объектов. Благодаря Magic Mirror, пользователи Sketch могут теперь создавать макеты без возврата в Photoshop.

 

 

Magic Mirror version 1.2

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

 

Создание макета

Весь процесс довольно прост, я разбил его на шаги

 

Шаг 1

Убедитесь, что вы скачали и установили плагин. Откройте изображение, перетянув его на иконку Sketch в доке. Переименуйте текущую страницу в Mockup. Вы можете все сделать на той же страницы, но для демонстрационных целей я создам отдельную страничку под названием Poster.

 

Magic Mirror шаг1

 

Шаг 2

Так как я создам макет А4, мне понадобится артборд с такими же размерами (Если вы создаете макет iPhone 6, убедитесь, что размеры артборда такие же, как нужно для iPhone 6).

 

Magic Mirror шаг 2

 

Шаг 3

Теперь мы создали артборд, и нужно как-то его назвать. Так как я создаю постер, то мой выбор очевиден – Poster. Нарисуйте содержимое или вставьте уже готовый вариант в артборд (Если создаете макет iPhone, можете вставить в артборд свой скрин).

Так как Magic Mirror не дает возможности выбрать размер артборда, я просто нарисую белый фон размером с артборд Постера и сделаю его прозрачным на 1%. Также измените режим наложения на экранный.

 

Magic Mirror шаг 3

 

Мы будем использовать такое же имя в слое, который заменим с помощью Magic Mirror

 

Шаг 4

Инструментом Vector (V) разбейте лист бумали (или скрин iPhone), нарисовав 4 точки. Позже назовите это также, как и имя артборда, который вы собираетесь заменить (В моем случае имя Poster).

 

Magic Mirror шаг 4

 

Шаг 5

Выделите фоновое изображение и нажмите “A”, чтобы активировать инструмент Артборд. Перейдите в инспектор, выберите опцию “Around Selection”, чтобы создать артборд вокруг изображения. Вы можете назвать артборд так, как хотите. Я свой назвал “Poster Mockup”.

 

Magic Mirror шаг 5

 

Шаг 6

Выделите слой, который хотите заменить на рисунок и нажмите ⌃⇧ M или перейдите Plugins > Magic Mirror > Magic Mirror! Плагин заменит слой рисунком на артборде. Осталось только экспортировать макет и показать его миру!

 

Magic Mirror шаг 6

 

Конечный продукт

Делитесь своими шедеврами!

 

Перевод статьи magicmirror.design автора Marko Vuletič.

Похожие записи

Каллиграфия и леттеринг для начинающих

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

Полное руководство по дизайну iOS 9 в Sketch

iOS сильно выросла в течение последних лет. С ее iOS 9 апгрейдом, Apple представил новый системный шрифт под названием San Francisco, 3D Touch и многозадачность на iPad. В Xcode вы найдете Stack Views, фантастический инструмент для более адаптивных макетов, гораздо проще Auto Layout.

Zeplin.io – способ подружить дизайнера и верстальщика

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