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?
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.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:
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.
Shoot,upload,repeat is the mantra of many a stock photographer who aims to make as much money as possible from their images. See how that's possible here.