«Как создавать качественные видео для виртуальной реальности»: руководство по дизайну

Как сверстать необычный пост с помощью Setka Editor

Setka Editor был разработан программистами с большим опытом создания самых разных онлайн-изданий. Они отлично понимают потребности редакторов и дизайнеров и, чтобы помочь им, разработчики создали инструмент с продуманным интерфейсом, который легко могут использовать даже люди без дизайн-бэкграунда. Но чтобы показать, как делать что-то сложное, мы решили рассказать, как создавался один из наших недавних постов — «Как создавать качественные видео для виртуальной реальности».

Мы попросили арт-директора Accent Дмитрия Распопова поделиться несколькими полезными советами.

1

Начните с большой идеи

Нас очень вдохновила история студии RYOT, так что мы решили поэкспериментировать с версткой и показать возможности 360-градусных фото, добавив такой снимок в наш пост.

2

Выберите подходящую систему сеток

Вот что мы выбрали для интервью с Джессикой Лоретти:

6 колонок (940px)

Межколоночный отступ — 20px, минимальная ширина внешних отступов — 40px

Такая сетка больше всего подходит для широких постов — у вас останется достаточно места для иллюстраций. Вы можете больше узнать о сетках здесь.

Setka Blog

Что такое модульные сетки и зачем они нужны вам

3

Добавьте 360-градусное фото в пост

Команда RYOT сделала для Accent панорамное фото, и мы нашли веб-плэйер для него. Photo Sphere Viewer оказался подходящим инструментом, мы нашли его на GitHub. Все работало, но нам надо было адаптировать фото для мобильных устройств так, чтобы мы могли использовать гироскоп.

4

Поставьте иллюстрации на всю ширину

Когда вы используете Setka Editor для верстки постов, весь ваш контент «живет» внутри поста. Фоновые изображения или иллюстрации не могут быть больше, чем ширина поста. Она, в свою очередь, зависит от настроек темы WordPress, которую вы используете. Если ширина постов ограничена сайдбарами или другими элементами темы, вы можете изменить это, установив специальный плагин — Full width Page Templates — или вручную отредактировав CSS-файлы вашей WordPress-темы. Когда вы внесете эти поправки, вы сможете ставить изображения на всю ширину экрана. Для того чтобы узнать больше о настройках изображений, откройте наш Help Center.

5

Добавьте глитч-эффект

Чтобы сделать анимиранный gif-портрет Джессики, мы использовали бесплатные экшены для Photoshop. Потом мы поработали над финальным вариантом изображения, настроив паузы.

6

Сделайте необычный фон

Чтобы создать фоновый паттерн, мы использовали онлайн-инструмент для создания глитч-эффекта, найденный на GitHub, и фотографию полок из офиса RYOT как основу. После наложения эффекта мы «почистили» изображение и соединили его с изображением обложки, панорамным фото и галереей внизу поста.

Чтобы посмотреть результат, посетите Accent, наше издание о digital-медиа, журналистике и дизайне.