Hi, I'm Martin Jan Hoekstra, and I'm the founder of Epic36 (https://epic36.com/), a photography studio specializing in 360-degree product photography for e-commerce businesses. We have been using WebRotate 360 since the beginning and have found their software and support to be exceptional.

I was asked to write about an interesting project, and I thought I would share some tips on how to capture a 360 degree photo of a bicycle. Photographing a bike can be challenging, but with the right techniques and equipment, it's possible to create a stunning 360 product image. So, let's dive into some useful tips and tricks.

Overview of the process

Contrary to what you might expect, we don't place the bike on a turntable to take photos. Instead, we hang the bike upside down to photograph it. We use two key lights, one fill light and two background lights for the shoot.

Taking pictures of bicycles requires a decent amount of space, and it's best to have ample room between the bike and the background to prevent the background lighting from affecting the subject. Below I will share a trick that can help you if your studio doesn't have enough space.

Hanging the bike has the advantage of making the bike stand upright in the end result. However, the downside is that all 36 photos need to be edited manually. Fortunately, I can share a handy brand new Photoshop tool to help you in this process.

Let's get started.

Preparing the studio

When it comes to photographing a bike in 360 degrees, having enough space is crucial. This allows you to position your lighting equipment in the right place and create the necessary distance between the bike and the background lighting to achieve optimal results.

So make sure to allocate enough space in your studio or shooting location to move around freely. Consider using a plain white wall as a clean and unobstructed background, or a white cloth or sheet can also be used. If possible, invest in lighting equipment with wheels to make it easy to move around and create the necessary space for each project.

Preparing the bike for the shoot

Before the shoot, you want to make sure the bike is clean, in good condition, and presented in the best possible way. In addition to removing any accessories that may obstruct the view of the bike, it's important to set the handlebars straight, align the pedals, and ensure the logos on the tires are at the same height. Also, when hanging the bike, be sure to avoid hanging the rope or string over the logos on the rims or tires. This will make it more difficult to remove in post-processing.

A few things to keep in mind:

1. Hang the bike straight
2. Straighten the handlebars
3. Align the pedals
4. Align any logos on the tires
5. Clean the bike, even if it is new, there may still be some visible grease here and there.
6. Place the rope or whatever you use to hang the bike in the center of the spokes and not over the logos on the tires.

Setting up the equipment

To photograph a bike in 360 degrees using this method, you need a hanging system. I use an automatic hanging system that rotates and takes pictures of the bike while being controlled by a computer.

Jarring movements

It's important to note that the bike may move quickly due to its hanging position, so it's crucial to rotate the bike slowly and smoothly to avoid any motion blur or jarring movements. If you're using a start-stop system, it's important to ensure that the starting and stopping is as smooth as possible. However, the best method is to let the bike rotate slowly and continuously without stopping and have the camera automatically take all the pictures.

Capturing the 360 degree photo

Capturing a 360 degree photo involves rotating the bike and taking a specific number of photos as it turns. I usually take 36 photos to achieve a nice result. Taking more photos can be a drawback since each photo has to be manually edited. But that is up to you of course.

Not enough space?

When photographing a subject like a bike, it's important to have enough space to ensure that the background lighting doesn't affect the subject. If there is not enough space, the background lighting can cause small details such as the spokes become less visible.

Look at the spokes that are almost invisible

In such cases, it can be helpful to take two photos per frame, one with slightly underexposed lighting and the other with just the background lighting. Having these photos allows creating a mask of the object for each frame, so it can be separated from the background in post-processing. 

First, make a mask of the bike.

The underexposed lighting helps reducing the impact of the reflections while the mask ensures you can still have pure white background.

Use the mask to remove the background.

However, this technique requires taking more photos and can be time-consuming. In most cases, it's not necessary and can be avoided by using enough space between the subject and the background lighting. So, it's always best to create enough room to position the lights in the right place and prevent the background lighting from interfering with the subject. By doing so, you can save time in post-processing.

Post-processing the photo

After capturing the photos, post-processing is necessary to refine the image. Initially, the standard adjustments such as making the background 100% white, cropping, adjusting exposure, and sharpening the image need to be done. When using the hanging method, there are two additional steps that need to be taken. First, the support system used to hang the bike, such as a rope, must be removed.

Second, the bike needs to be flipped over into an upright position. When it comes to removing the support system, the color of the rope doesn't matter. Even a black rope is visible and must be removed. I use Photoshop for this process, and until recently the Healing Brush was the go-to tool.

Photoshop remove tool

However, removing the rope from some photos can be a more challenging task, as the perspective of the photo makes it harder to achieve a clean removal. The new Remove tool in Photoshop (Beta version as of 2023) is an excellent new feature that works exceptionally well in removing the support system. It's far superior to the old Healing Brush for this task. Although you still sometimes need to try two or three times like with the Healing tool to achieve a good result.

When faced with difficult elements, the new Remove tool is much better.

Currently, the tool is only accessible in the Beta version of Photoshop. If you have an Adobe subscription, you can download the Beta version through Creative Cloud.

End result

Here is the final result of the 360-degree bike photography process: a perfectly upright image of the bike that can be viewed from any angle. This image showcases the bike in its entirety, allowing customers to examine its design and features in detail.

Hopefully, you'll find some helpful tips throughout this post. And of course, I'm happy to help if you have any questions, feel free to contact (https://epic36.com/contact/) me.

Related posts:

• Heavy Duty 360 Product Photography Setup and Workflow by Utah Trikes
• 360 Product Photography Upside Down
• Complete Guide to 360 Product Photography by Jose Soriano

Due to popular demand, let's review two ways you can publish multi-row 360 product views in WebRotate 360 SpotEditor.

Multi-row in WebRotate 360 is a feature that let's you spin 360-degree images both vertically and horizontally. Although rare, some folks also use our multi-row support to create product configurators and tours, where you can instantly switch product options like colors within the same view.

Using "multi-row" for configurators is problematic in that we load all images from all rows upfront, and so it can be quite slow if you need to cover lots of options (e.g. color, fabrics, etc.). For image based configurators, we usually recommend using "reload" feature that lets you load separate 360 spins or animations within the same view on demand. The feature is available via viewer API or using Hyperlink hotspot action with viewer config as action URL. More details on both the hyperlink action and APIs can be found in the user guide.

We have a few blog posts dedicated to image production workflows for multi-row 360 product spins using both photographic setups as well as 3D image rendering in specialized 3D software (e.g., post1, post2, post3). You may also find a couple of live multi-row examples on our website (e.g., here and here). We also support a unique two-row rotation mode that you can learn more about in the following post. While technically a "multi-row", the two-row feature is not covered in this blog post.

Each row in a multi-row 360 product view consists of the same number of images. The software will warn you if this requirement is not met or will automatically add dummy grey images to even out all rows. If you edit a published 360 view  manually (i.e via config xml) or generate it programmatically and end up with inconsistent number or images in rows, the viewer will fall back to treating it as a single-row 360-degree product animation.

There are three ways to create multi-row spins like the following example in SpotEditor.

1. New Project Form

Start by organizing your images in a single folder. They have to be named sequentially through the rows. For example, if you have 3 rows consisting of 24 images  each (72 images total), and the first image of the first row is named image0.jpg, then the last image of the last row is going to be image71.jpg.

The following screenshot illustrates the folder contents with 3 x 24 rows:

Once images are prepared in a source folder, select New Project in SpotEditor, enter the name of the project, its location and the location of the source folder with the multi-row images on your hard-drive. Check Advanced options and enter the number of rows in the source folder via "Number of image rows".

Download example 360-degree images with 7 x 36 images here and enter 7 under "Number of image rows" for a quick test.

Select Create to load the images.

While it's possible to drag images left and right in the preview window in SpotEditor right away, to switch rows you need to either use the vertical arrow buttons in the top toolbar or flip the rows under Images -> Rows tab. The reason you can't drag images vertically in the Preview is due to how we load images in SpotEditor. To apply edits such as image crop or levels in real-time as you drag images, we have to keep the images ready in memory which can be quite taxing on your computer. It would be more likely to run out of RAM, if we were to load all image rows upfront.

There are several important settings under Control -> Rotation related to 360 multi-row views in SpotEditor that you need to be aware of: 

Speed -> X and Y sensitivity

A smooth multi-row 360 product view should be easy to navigate both vertically and horizontally which is not always doable. As even a tiny vertical mouse movement can trigger transition to the next row while dragging 360-degree images horizontally. To control the ease of the transition between rows and frames in individual rows, use X and Y sensitivity options for horizontal and vertical drag respectively. They are basically pixel values that tell the viewer how much drag movement in pixels to ignore until it can flip a row (Y) or jump to the next frame (X).

On view load -> Set current image (row) as first

As you may already know, this setting sets the first image that the viewer will have to load and show right away and before loading the rest of the image sequence. For multi-row spins, this also sets a starting row user will interact with, which is a row that corresponds to the "first" image.

Direction -> Flip vertical input

Depending on the order of image rows, which mostly depends on how photography or rendering was setup, you may end up in a situation where dragging images down will move rows up and vice versa. This setting can quickly fix this by switching the direction of vertical row animation in response to user input.

2. Images > Rows

If you need more control, there's also Images -> Rows tab where you can add or remove rows and images individually. That can be useful if you create an empty project without specifying a source folder on the New Project form, or if you capture additional rows for an existing project that you need to append. Using options under Images -> Rows you can add rows or images either individually or in a batch. The panel options at the bottom of the tab also allow repositioning or replacing individual images in each row.

To add a new row(s), click the green plus and enter the number of rows you are adding and optionally select a folder with prepared images (if you are adding multiple rows at once, prepare images in the folder as discussed in the beginning of the post). If a folder is not selected, a empty row is created and you can then import images into the row using the panel button with a small plus sign.

If you end up with dummy grey thumbnails that are automatically added when the number of images in rows is not the same, select the thumbnails with your mouse (Ctrl key for multiple selection) and click the button with an arrow to pick matching replacements.

3. WebRotate 360 Turntable Animator for Blender

Blender is a popular 3D modeling and rendering software and we have just released an advanced plugin for it. With this plugin, you can:

1) Setup a 3D scene for multi-row rendering in a few mouse clicks.
2) Render all images using Blender's built-in rendering engines.
3) Instantly view the result as an interactive view and/or upload it to PixRiot.
4) Open it in WebRotate 360 SpotEditor for further editing and publishing.

Find more details about WebRotate 360 Turntable Animator on our Blender plugin page.

Our new analytics support in PixRiot can help you better understand how 360 product photos and 3d renders you host on PixRiot are being used on the web. In the initial release, available reports include the total number of unique views across all devices, the number of unique views on mobile devices, the number of views by web scanners (e.g search engines, etc), most viewed assets, as well as overall traffic and storage usage in PixRiot.

By tracking the number of unique views, you can get a sense of the overall popularity of your products and how much interest these 360 product views are generating. This information can be useful for a variety of purposes, such as identifying which products are most popular, determining how well your marketing efforts are driving traffic to your website, and identifying opportunities to optimize your website and product offerings. Additionally, tracking the number of views by search bots and other internet scanners can help you understand how much PixRiot traffic is "wasted" by search engines or have an additional insight into your search engine optimization (SEO) efforts.

To access the new feature, select Analytics on the left side of the PixRiot dashboard and pick any of the available reports from the drop-down at the top. Options to change time range and granularity of the reports are available at the top of the dashboard on the right-hand side:

Distribution of unique views between desktop, mobile & crawlers

Additional reports will be introduced shortly and will include the tracking of user interactions with interactive assets such as WebRotate 360 Product Views, similar to what is available in our standalone Google Analytics integration, viewer load times and the ability to track where your asset views are coming from geographically.

We are excited to offer this tool to our existing and new subscribers, and we hope it will help you gain valuable insights into the popularity of your 360 product views and the performance of your marketing efforts.

Request PixRiot Account

Photo by Sten Ritterfeld / @StensLens

We just finished a quick review of available options to showcase webrotate 360 product views offline on Android devices, so this post is to share and track our current recommendation.

You may have seen this older blog post about using WebRotate 360 on iOS. The key there was installing a third-party app called Kiosk Pro that would facilitate transferring your webrotate content to iOS as well as serving the content using their kiosk interface. Without such app, the only other option would be to develop a native app for iOS that would do pretty much the same (you would use a WKWebView control to present your uploaded webrotate 360 product views on iOS).

It's a similar story with Android and so unless you have resources to develop a native Android app, finding a good existing option on Google Play is the first choice. And so we did..

Of the Android apps we could find and review, the winner was AWebServer. It's fee with ads that only show in server setup and there's no paid ad-free version yet. While there're similar apps with no ads on Google Play, this one seems most simple, reliable, and well-thought-through. It runs as a service and with over 100k installations and good reviews, it's a solid choice.

How do you use it?

• Create a new 360 product view project in WebRotate 360 publishing software (SpotEditor), configure and publish.
• Upload your project's "published" folder to an Android device under some folder you designate for 360 product views. You can do it while online using Dropbox or Google Drive for example or via a memory card on your device.
• Install the AWebServer app.
• Start the app and select the folder you have created for 360s via Document Root option on the main setup screen.
• Select Start under Service.

That's it! Now your folder content is served locally (and remotely on your network if you are online) and you can access it in your Android web browser via localhost, i.e:

http://localhost/your-published-folder/your-published-file.html

You can then use this as a basis for developing a product catalog page or a cool offline presentation for a tradeshow or your on-site sales team like this great example by ACTiVATE.

PS: while we haven't tried it yet, you may also consider Fully Kiosk Browser for a complete kiosk style experience.