Плагин Sketch: Создание виртуальной реальности
Наш канал в

Превратите ваши дизайны Sketch в VR (Виртуальная Реальность)

Этот плагин обрабатывает файл Sketch таким образом:

Sketch VR

И превращает его в VR так:

VR
Плохое качество GIF обусловлено степенью сжатия файла для статьи

Установка

  1. Скачайте Zip и распакуйте его. В архиве находится демо файл Sketch и папка Sketch To VR.
  2. В Sketch app перейдите к Plugins > Manage Plugins…
  3. В открытом окне кликните на иконке с изображением шестерни внизу слева и выберите Show Plugins Folder из выпадающего списка.
  4. Поместите папку Sketch To VR прямо в папку Plugins

Экспортируйте ваши мокапы при помощи плагина

  1. Откройте демо файл Sketch. Артборд“background” это – фото 360°. Рабочая область “ui” – это интерфейс в верхней части фото.  Для создания целостности, ваше фото должно быть равно прямоугольным. Вы можете найти несколько примеров на Flickr. Также там можно увидеть мой профиль – from Nick Hobgood.
  2. Перейдите к Plugins > Sketch to VR > Export. Процесс экспорта может занять определенное время из-за размера 360° фото.

Просмотр мокапов в VR

  1. Экспортированная папка будет использована для запуска A-Frame, общедоступной WEB VR библиотеки, разработанной MozVR. Для работы с библиотекой необходим локальный сервер (простое открытие в HTML страницу работать не будет). Я рекомендую SimpleHTTPServer by Scott Garner. Кликните правой кнопкой на экспортированной папке и выберите SimpleHTTPServer. Используйте клик и перетягивание для навигации.
  2. Для просмотра на телефоне с использованием Cardboard, нужно сделать следующее. Если у вас есть собственный сайт, загрузите на него папку и получите доступ по ссылке с телефона. Или вы можете использовать Chrome port forwarding для открытия localhost:8000 на вашем телефоне (загрузка страницы будет медленной из-за размера 360° фото). Кликните по иконке внизу справа на вашем Cardboard для переключения в режим VR!

Видео инструкция (35с)

Поиск и решение проблем

  1. Если вы используете собственные sketch файлы, убедитесь, что ваши рабочие области названы “background” и “ui”.
  2. Если вы создаете собственное фото/UI, вам потребуется перейти в файл index.html для изменения разрешения изображений. Читать о A-Frame.
  3. Если вы увидели системное сообщение во время использования SimpleHTTPServer, жмите Allow.
  4. Если у вас возникают ошибки в консоли браузера и ничего не видно на странице – перезапустите браузер.

Наслаждайтесь!

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

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

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

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

Самое подробное руководство по дизайну в Sketch

Работая со Sketch последние три года, я освоил ряд ключевых техник, которые значительно улучшили мой рабочий процесс. Так как я, помимо рисования, также обожаю прототипировать и кодить, мне нужен инструмент для быстрого выполнения дизайн-проектов и легкой генерации исходников. Sketch вместе с его плагинами и другие инструменты для прототипирования полностью справляются с этой задачей. Часть 1 Часть 3 Часть 4

Серия уроков Sketch (часть1 из 5): Настройка Sketch

Первое что нам следует изучить, это настройка Sketch. Если вы только начали создавать дизайны для веб и являетесь новичком в Sketch или Photoshop, или вы просто разработчик, желающий включить UI-дизайн в свой репертуар, эти простые уроки по настройке идеально подойдут для быстрого ознакомления с работой Sketch. Часть 2 Часть 3 Часть 4 Часть 5