Create Engaging 360-Degree Videos

Setka Editor was created by developers who’ve spent years building different kinds of online publications. They know the real needs of editors and designers, and have wired them into the tool, making sure the interface is seamless and easy to use for those without a background in design. To create something really outstanding, you might want to learn a few tricks.

We asked Accent art director, Dmitry Raspopov, to share the tricks he used designing one of our recent posts — “How to create engaging 360-degree videos.”

01. Start with a big idea

We were inspired by the story of RYOT studio and about its creative approach towards producing innovative videos. Therefore we decided to create a unique layout, which highlighted the subject, and experiment with a 360-degree photo of the team.

02. Choose a flexible layout grid

Here’s the one we picked for the interview with RYOT’s Jessica Lauretti:

6 columns (940px)
20px gutter, 40px min margins

This grid works best for wide posts, as it leaves enough space for custom illustrations/large photos.

MORE INFO

Learn more about layout grid and grids.

03. Add a 360-degree photo to the post

We had a 360-degree photo taken by the RYOT team, so we needed to find a web player for it. We found a suitable tool, Photo Sphere Viewer, on GitHub. We tried it, which worked well. But we needed to adapt it a bit for mobile (now the gyroscope is working), and then embed iframe into the post itself.

04. Use wide illustrations

As you’re using Setka Editor to edit and design posts, all the content you add lives inside the post. The background image or the images used as post illustrations cannot go beyond the width of the post itself. The post width is defined by the WordPress theme you’re using. If the post width in your theme is constrained by sidebars or other theme settings, you can change it to 100%-width for any given post by installing a dedicated plugin – Fullwidth Page Templates, or manually editing the CSS files of your WordPress theme. After you implement these adjustments, you’ll be able to use full screen images.

MORE INFO

Learn more about image settings, visit our Help Center.

05. Add glitch effect

To create an animated gif (Jessica’s portrait) we used a free action for Photoshop. Then we updated the final result by setting pauses between frames.

06. Create an unusual background

For making the background pattern, we used an online glitch tool found on GitHub and a photo of the shelves from RYOT office. Then we cleaned up the glitched image parts and combined them with the background cover image, the 360-degree photo and the image gallery at the bottom.