How to Create 360 Degree Rotating Images for the Web.

Introduction
Rotating or 360 degree images are a great way of showing off your product. This technique offers a compelling way of displaying the product to your potential client, looking slick and professional when compared to a standard flat product image. They look great but they also look complicated. Actually though, it is a deceptively simple technique to show rotating 360 degree views with back and forward control by the viewer. Here we explain one simple technique so you might be able to make use of rotating products too.

How Can You Achieve That 360 Degree Rotating Product Functionality?
There are two aspects to creating a rotating product on your website. First you need the imagery then you need to have some simple HTML and javascript code to display the product on your customer’s screen. So we’ll split this article in to two parts. Images and web.

Part One: The images.
1.1. If you take a look at the rotating product example we have here, what makes it all work is 37 single images, one for each view of the item. The first task is to create those 37 product shots. For that additional slick look, make the background all-white, that's RGB 255,255,255.

1.2. Set up a turntable and mark up each stopping point, one for each image you require. Our example needed 37 stops.

1.3. Ensure your turntable is topped out in white.

1.4. The lighting must be consistant across each image to maintain a seamless transition as the product rotates.

1.5. To ensure the product is in the same place across all of the images, mount the camera on a tripod or at least place it somewhere so it's in the same position for each shot. To be really sure there's no movement perhaps use a cable release or use the self-timer. The timer ensures the image-taking is delayed and therefore any camera movement as a result of pressing the shutter is reduced.

1.6. Edit your images to ensure they have a crisp white background, are sharp and contrasty. The white should be a standard RGB 255,255,255 across all of the images to maintain the illusion of the rotation. If the colour changes in each new image it's obvious to the viewer and spoils the impact. You may also have to remove any nasty marks in the white background.

1.7. Reduce all of the product images down to a web friendly size. Our example images are 300px by 200px and at 72dpi. The arrows are 200px high and 50px wide with that pure white background. Remember the smaller the image the quicker they will load in the viewer's browser.

1.8. Create your left and right arrow images. These are jpg's and the same px height as the rotating image. You can use most picture editors to create arrows. Ensure they have a background colour that matches your web page design.



Part Two: The web.
Note for this to be available on the web you have to have a web site that hosts your web page files and images. You can of course make this work on your own pc as a web browser will display html files from your hard drive just as easily.

2.1. Next you create a javascript script which manages the loading of the images as the web page loads and it also manages the display of the rotated image when the viewer clicks the back or forwards arrow. If you take a look at the source code for this page, you can see the script at the end of the 'head' section.

2.2. A little html code using the old favourite table tag to display the left and right arrows and the holder for the image. It will probably help you understand how this works if you take a look at the HTML code of this web page. Your browser should have a 'view source' option to display all of the behind-the-scenes information. We have added comments within the code to help you identify which bits do what on the web page.

2.3. Within the tag you will include the following commands:
onmouseover - to call a javascript function to change the colour of the arrow
onmouseout - to call a javascript function to change the colour of the arrow back when they viewer takes their mouse off.
Onclick - When the viewer clicks on an arrow this calls a function to change the displayed image of your rotating product back or forwards depending on which arrow was clicked.

2.4. Load the images from point 1.7 above to your web host along with your four left and right arrows.

For our simple example thats all there is to it. It's easily achieved by a coder with HTML experience. If you wanted to offer this facility for many products you would require a database system working behind the scenes managing the multple images for each product. This too is quite simple but does require knowledge of database software such as MySQL, Perl or other web programming and management systems.

We also have an article about an easy way to photograph products against a white background here.

If you have any questions about 360-degree rotating photography, why not leave a comment in the comments section below and we'll do our best to answer them for you.

Further Reading.

Comments Guidelines

Home Legal Privacy

© 2015-2016 Peter Hatter Photography Ltd. All rights reserved.