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. Edit your images to ensure they have a crisp white background, are sharp and contrasty. You may also have to remove any nasty marks in the white background.
1.6. 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.7. 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.
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.6 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.
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.
Flatlay is now a very popular style of photography so we've put together an article of tips to help you take great flatlay images.