How to upload 360 spins to your website

how to upload 360 spins

Lots of retailers like to upload 360 spins to their websites themselves, rather than employ the services of a web developer. That’s fine, and it’s really not that difficult.

If you have access to your server and know where to add html then the guide below will help you display your spins in no time.

It uses both html and css code, but you can just cut and paste from here into your page. So let’s get started…

Upload your spin


Firstly, you’ll need to upload your spin folder to your server. It will normally contain a folder with images (the actual images which make up your spin), an assets folder (which contains code to make the spin work) and an index.html file (which tells the other bits what to do on the website). It’s this index.html file which we’ll be concentrating on.

The easiest way to upload a 360 product spin is via FTP. We put ours in a folder called ‘360s’ which keeps things nice and simple.

So, your folder structure would look something like this:
360 spin folder structure

And the url for your index file would be:

http://www.my-website.co.uk/360s/my-spin/index.html

Create the page


Once your spin is hosted on your server you can create a page to display it in your browser. You can then display your spin in what’s called an iframe. This is a piece of code which grabs the information from the index file and displays it on your page. It’s simple because you don’t have to write lots of code to make it work. In fact, you don’t have to write any because you can copy and paste it from here!

  1. Open a new page in your favourite html program. We use WordPress for the Swiftspin website so it’s just a case of clicking ‘Add New’ under ‘Pages’.
  2. Create a container to hold the iframe:
    <div class="swiftspin-container">
    
  3. Create an iframe within the container to display the spin. Replace the ‘http source’ part with the url of the folder which holds your index file (you don’t need to include the actual index.html name)
    <iframe src="http://www.my-website.co.uk/360s/my-spin/" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
    
  4. Close the container
    </div>
    
  5. Add the following style to make sure the spin displays correctly.
    <style>
    .swiftspin-container iframe {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .swiftspin-container {
        position: relative;
        padding-bottom: 60%;
        overflow: hidden;
    }
    </style>
    
  6. Test your spin by viewing your page in a browser.

That’s it. You should now be able to display spins on your website.

Fixing the size of your spin


The iframe above displays the spin at 100% of your page width. It’s also responsive which means it will scale to fit any browser or mobile device. However, you may want to constrain the width, especially for smaller spins. If so, use this style instead:

<style>
.swiftspin-container iframe {
    position: absolute;
    width: 400px;
    height: 300px;
}
.swiftspin-container {
    position: relative;
    padding-bottom: 75%;
    overflow: hidden;
}
</style>

n.b. width and height = use the actual pixel dimension of your images
padding-bottom = this makes sure your spin doesn’t cut off in the container. It is calculated like this:
height / width x 100

Adding more spins


It’s easy to add more spins to your page:

  1. Upload a second spin folder.
  2. Repeat the container/iframe code and change its url source to the new location. You don’t need to repeat the style code.
  3. Change the gap between them by experimenting with the padding.

If you have any problems uploading your Swiftspins please get in touch. We’ll be happy to help. Please Email Us.

A Brief Guide to 360 Spins – by Trevor the Shoe

360 shoe phtography

360 shoe photography

At last! The van’s stopped. I wonder where I am? Obviously I can’t see anything because I’ve been stuck in this box since the courier picked me up first thing this morning. It’s raining though. I can hear that. Hold on. I’m being picked up. Here we go. What adventures are in store for me today I wonder?

I’m Trevor by the way. I know, it’s an odd name for a red leather shoe, but there you go. The girls in marketing named me and it just stuck. I’m a new design and am always being sent to magazines, bloggers and fashion designers so that they can spread the word about my fabulousness. Apparently I’m on my way to have my photograph taken today. This time for the new website. In 360 degrees no less! Whatever that might be.

I assume we’ve just arrived at the photo studio. I say ‘we’ because there must be well over a hundred of us. All neatly packed in our own little boxes. I’ve got tissue paper in mine and I’m also tucked into a soft velvet drawstring bag. This means I’m posh.

We’re on the move again. We’re being carried this time and as I can’t hear the rain any more we must be inside. Yep, we are. We’ve just been put down and I can hear the courier explaining that his touchpad stylus is playing up again so they’re using the wrong end of a biro instead. My own courier. Told you I was posh. We must be on location at a farm because the chap sounds like he’s from the West Country. Surely I’m not going to be expected to parade up and down in cow muck? There are perfectly good welly boots for that.

That was quick. The box is already being opened. No hanging around today it seems. Ahhh. Fresh air! We’re not on a farm after all, that’s good. Although it’s still pretty dark in here too. Have they got a power cut or something? Oh I see. We’re actually in the studio and there’s no windows. Should have guessed really.

“Ripped off your bottom”

My lid’s off and I’m being taken out of the bag. It tickles a bit because the person’s wearing cotton gloves. Do they think I’m infected or something? Now my labels are being removed. I’m glad they’re doing it carefully, there’s nothing as painful as having a sticky label ripped off your bottom. They’ve jotted down my code and I’m being placed alongside all the other shoes. We do look a bit worse for wear though. Probably the long journey.

Ah, they must have heard me. I’m getting a thorough going over with a clean cloth. I did notice a few of Marjorie from dispatch’s finger prints on the back of my heel this morning. She never wipes her fingers after her morning hobnob. Oh hold on. They’re cutting a few loose strands off my stitches too. I didn’t notice those. They obviously want me for a close up. Can’t blame them really. I am gorgeous after all.

Hold on mate! Mind where you’re picking me up. You may be wearing gloves too but that’s a very sensitive area.

Where am I being taken now? I’m usually placed on a model’s perfectly pedicured feet and gently walked up and down when I have my photograph taken. This chap’s placing me on a big circular sheet of glass. It’s blimmin’ hot too. What does he need all those lights for?

Woaaaahhh!!! What’s happening? I’m being spun round like a teacup at Alton Towers. Let me off. I’m getting dizzy and I think I’m going to throw up.

Ahhhh. That’s better. I’ve stopped. I have no idea what that was all about, but I’d rather not do it again if it’s all the same to you.

“This guy is a genius”

Off we go again. Upstairs this time. I’m back in my box which at least isn’t spinning. I’ve been handed to another chap who keeps holding me up to the light and studying me closely. Can’t say I blame him. Oh look! That’s me on his computer screen. I have to say that does look exactly like me too. I’m the right colour and everything. It’s a picture of me on a plain white background. Bit boring if I’m honest. Though what’s he doing now? He’s opening another picture of me at a slightly different angle. Now another. And another. And… blimey! (excuse my language) he’s just made me spin right the way round. A full 360 degrees. Now that is cool!

No. No. Don’t pack me away. I want to stay and watch this. It’s like magic. This guy is a genius. Though saying that you’re doing a mighty fine job of packing me up nice and comfy. You’ve even remembered to put my sticker back on. And not a single hobnob in sight.

I’m back in my box now. Just waiting for the courier I assume. Sounds like all my friends are having a whale of a time spinning on that turntable. Probably the trainers. They’re into that sort of thing.

I’m in the van and on my way back home now. I quite enjoyed today. The swift initial spin gave me a bit of a shock, but on the whole I was treated like royalty. I might ask if I can come here again. Where was it again. Ah yes. Swiftspin. Apt name that.

See you on the website soon.

Trevor x

p.s. I’d quite like to be famous, so if you don’t mind perhaps you’d be kind enough to share my story with your friends. Ta very much!

Don’t get in a spin – we still do stills

professional still photography

While we are 360 specialists and predominantly produce 360 spins we can also create and supply still shots for our clients. We have a large fully equipped photo studio so there’s no reason why we can’t get creative with the extra still shots. Recently one client wanted some Swiftspins of their custom handmade bass guitars, but they also wanted some creative still shots to show all the unique features. We created a whole series of highly styled close ups and full length shots which were used in their printed brochure and on-line as backgrounds to their web pages.

creative guitar photography
stylish guitar photography

We produce the spin as normal and then take any extra still shots that may be required using the same lighting. This could be a close up of a unique design feature or a part not seen during the spin.

bag interior

Still shots of bag interiors are often requested…

plug input details

…as are close-ups of important details

Sometimes we get asked to spin a product in one particular colour and then to just take individual still shots of the product in all the other colour options available, or even do a single still shot of them all together as a group. We often do this for drink suppliers or companies who produce packaged products.

bottle photography
packaging photography
tin can photography

Another common request is for a still shot to show all the accessories that are supplied with the product or are available as extras, such as cables, adapters, cases, key rings etc.

dvd accessories

Accessories supplied with products…

trumpet set

…are sometimes better shot separately

And we can bundle them all together as a package, for example all the scooters we do get a spin plus 4 still shots showing details of the front wheel, the exhaust, the storage compartment under the seat and a shot of the instrument panel, all for one set fee.

wheel
exhaust
storage
instrument panel

The great thing about all these is that we can shoot them using the same settings under the same lighting set up as the spins so all the pictures and the spin look consistent. And remember we can supply you with all the individual still shots taken for the spin for you to use in any of your other marketing materials for total consistency across web and print.

Occasionally certain products either aren’t suitable for spins, (sandpaper for example – and yes we’ve been asked) or the client only wants to use the images in print and that’s fine too. We’ve done several jobs where we have just produced high quality studio product pack shots for clients. These are usually shot on white backgrounds or supplied as cut outs to be placed over existing backgrounds, but again there’s nothing to stop us getting creative if needed. We recently produced still shots for an entire brochure for a client selling watchstraps. Not only did we shoot high res still shots of all the individual straps, all shot at the same angle on a white background, but we also created several full page styled and themed shots to start each section in the brochure.

watch strap still photography

So don’t just get in a spin with your next product shots, remember we still do stills.

An introduction to 360 spins

coat in 360 degrees

An introduction to 360 Spins is the essential FREE guide to 360 product photography. Written by the development team at Swiftspin® it has been accessed by literally thousands of photographers and retailers around the world.

360 product photography guide

Introduction

Imagine having had a miserable day. You only came out to buy a coat and ironically it’s started to drizzle. It’s the last shop. Your last chance. What are the odds of finding the perfect… and there it is, teasing you through the window. The one you’ve been looking for.

Your nose hits the glass. The assistant inside points to the closed sign. But you need to check the fit, the length, the stitching, and most of all, whether it has that nice detail on the back?

Sadly, this is what happens every day on millions of websites around the world. You end up basing your shopping choices on a single, flat and very boring image.

Now imagine you skipped the latte and reached the shop five minutes earlier. You have the coat in your hands. You turn it around and bingo! There’s the detail you were so keen on.

And that is what 360° product photography gives you – the ability to inspect a product all the way around – from every angle, at your leisure. Perfect.

Repeat the above in any virtual high street shop. The jeweller, the shoe shop, even the shop selling bicycles… whatever the product, you can take control from the comfort of your own browser. And you won’t even need your coat.

 


 
what is 360 product photography

What exactly is 360 product photography?

You can see lots of samples all over the internet, but here, we’re going to try and describe it with words. Please bear with us.

360 product photography is a process whereby multiple still photos are taken of a product as it rotates (usually on a turntable). These photos are animated using various software, and uploaded to a website. The end user (shopper) can simply use their mouse to control the animation speed and recreate a view of the original product spinning 360 degrees.

There doesn’t seem to be a definitive name for the file that’s produced. We call them 360 spins and that has pretty much become the generic term for them. So, if it’s so great and so popular, why is it so difficult to find professional suppliers? As far as we’re concerned the reason is clear… it’s not easy.

There are plenty of companies doing 360º, from good to awful. The trouble is their systems and services are inconsistent. One company might offer zoom with 24 images, another roll-over with 12 images. One might offer up-and-over technology, another might use Quicktime another Actionscript. And there’s the problem. The end client is receiving mixed messages.

Imagine you’re designing and selling shoes, you just want your product to be displayed in a way that is as clear and engaging as possible. And you also want to know if it’s worth the expenditure. You don’t want to know ‘how’ it’s done, you just want it done. Affordably and to a high standard. Yes, what you, and every end user wants is… Transparent Technology. It just works. After all, you didn’t learn about fuel injection, ABS or radial tyres when you learnt to drive. They just worked. That’s how we think 360 product photography production should work too.

So, let’s go through some of the processes which will help ease the pain of too few sales or poor conversion rates. If you simply need someone to do it for you and don’t want to know how it’s done, simply contact us at the Swiftspin Studio. If however you’re intrigued to know more, or even want to have a go yourself, then read on…

 


 
product spins can be used for all kinds of products

How is a 360 spin created?

Once you’ve bought the camera, built a turntable, set the lighting, got to grips with colour-balancing images for the web, mastered Photoshop, written your software and earned your BSc in html and jQuery, creating 360 spins is actually quite straightforward.

But seriously though, it involves three distinct and simple stages: PhotographyProcessing and Animation.

1. Photography

360 spin photography requires a lot of time and patience. The photography takes longer than traditional flat photography, simply because it involves more images. And remember each image needs to be lit properly – imagine the reflections in a steel watch strap.

Many retailers we’ve spoken to initially think they can save money by buying the equipment and doing it themselves (we call this BIG MISTAKE No.1). Many think differently once they actually try producing their own spins. Buying an automated system and believing that you’ll be able to produce professional spins with the click of a button sadly isn’t going to happen. A good spin still requires a high level of photographic technique and a good eye for styling, even with the best equipment. Having said that, automated systems do have their place, for example, if you’re a very large retailer producing hundreds of similar spins. But even then, we recommend starting with the basics and getting a feel for 360 product photography before investing a large amount of money.

The turntable

Sofa or necklace? It’s imperative that you have a turntable that is flexible enough for all your product’s needs. If you sell jewellery, you’ll need a small turntable with a polished surface which won’t show the dust. If you sell lorry parts then you’ll need one that can take the strain.

You won’t find a turntable that can be used for everything. Trust us, we’ve looked. Some people assume they’ll only need one turntable (we call this BIG MISTAKE No.2) but in the Swiftspin studio we have at least twelve different ones. We’ve built two manual turntables for general products; one for jewellery; one for watches; one for golf clubs; one to shoot shoes at an angle; two hanging frames; one for supported items; a heavy duty automated one; one for gloves; and one to eliminate shadows.

Obviously you won’t need this many, but you’ll definitely find that one turntable isn’t enough. And you won’t necessarily always need a turntable. What if you sell chandeliers for example? You can’t sit them on a turntable and rotate them. You’ll need some way of supporting them.

You will need a range of turntables and bearings to spin different products

You will need a range of turntables and bearings to spin different products

You can buy automated turntables with their own software, although we personally find we have more control by operating our turntables manually. We sometimes get asked if we shoot spins which go up and over the product as well as around (we call those ‘global’ spins), but we see very little benefit when you consider the extra cost involved. You can sometimes animate the product within the spin, or use a hotspot to show what you can’t see in the basic spin. Remember, simplicity is the key when it comes to producing 360º spins. Start with the basics and you won’t go far wrong.

Centering the product

Remember the scene from the film Ghost? Have you ever tried to throw a pot and missed the centre of the potter’s wheel with the clay? Very messy. Centering a product is similar. It can be an art in itself.

There’s nothing worse than spinning an image and seeing it wander from one side of the screen to the other. It’s best not to mark the turntable centre as the product might not cover the mark. Your camera needs to be centred as well and make sure you lock it securely once it is in place. If either the camera or product is slightly out you may hopefully notice it on the initial spin. But more than likely you’ll only see it once it’s animated which is really, really frustrating.

Styling the product

Even walking boots need to be styled. 360° product photography is very unforgiving. If you were to rush ahead and shoot them without checking the laces are neat, you’ll just have to do them all over again.

Is the watch face free of finger marks? Are the bra straps evenly placed on both shoulders of the model? Is the zip completely closed on the handbag? When you start shooting 360º product spins you’ll find it’s best to have two people shooting each product: a stylist and a photographer. You probably won’t have time to preview all 36 images so attention to detail is imperative.

Some people think that spins can be produced in a matter of minutes (this is BIG MISTAKE No.3). Shooting a product may be quick, but it doesn’t take into consideration the set up time, the styling and any possible reshoots or post-production. After all, this is about displaying a product as clearly and cleanly as possible – it’s not a race to see how quickly they can be produced. Professional product photographers know that styling always comes above speed. Reshooting a single image can be frustrating. Just imagine reshooting 36!

Lighting the product

This item does ‘not’ contain flash photography! Studio techniques for lighting still images are not always the same as those used for 360° product photography. You need to adjust your lights to suit each product. Some suggest using any old lighting, but professionals know that’s not a good idea.

We initially tried using flash systems. After the first twenty flashes, the stars in our eyes persuaded us to invest in continuous lighting. A good kit with soft boxes and reflectors will give the flexibility you need. 360º requires light that is easy to control in terms of power, diffusion and colour. Having said that we do shoot with flash for products where colour balance is critical – we just make sure our eyes are safely covered.

If you’ve ever shot still products you probably spent much of your time adjusting your studio lights so that they didn’t reflect in the product. Reflections can look ugly and unprofessional in glassware, metalwork or glossy fashion items. In 360 product photography it’s nigh on impossible to eliminate every single reflection so it’s a good idea to give each item a dummy spin to see how the light plays.

lighting 360 product spins

Professional looking spins require professional equipment

Contrary to what you may have heard, each type of product you shoot in 360 will require a completely different lighting set up. Trust us, there is no single set-up which can be used to shoot everything. You will need flexible lighting if you plan to shoot different products. The good news is your lights don’t have to be expensive, there are plenty of manufacturers producing very affordable and high quality kits.

One difficulty with lighting 360 spins is making the turntable and background white without the product being over-exposed. Another is the fact that some spins cannot physically be captured in camera in one rotation, for example where background reflectors creep into shot. These can only be removed in a post-processing program, so we recommend a copy of Photoshop is high on your shopping list.

The camera

Keeping it in focus. Obviously the choice of camera is important too. Although digital compacts are ideal for web photography, they aren’t suitable for high resolution spins.

In truth, any camera can be used to produce 360 spins. It just depends on the level of image quality and colour consistency you wish to achieve. In our studio we shoot at very high resolution so that we can show fine detail whilst zooming in, and so that our clients can use the images for print purposes too.

cameras for rotational photography

Any camera can be used for 360 product photography (well almost any!)

Most of you reading this will already have cameras on your phones, but seriously, put them away. For top quality product shots you’ll need a camera with quite a few features. For those who are looking to buy a new one here are a few tips. Firstly, get a manual DSLR if you can afford one. If an automatic turntable is used, the shutter speed has to be incredibly quick otherwise the product will appear blurred. Most digital SLR cameras will have settings allowing you to adjust shutter speed and aperture.

Secondly, try not to overspend on unnecessary features. There’s no point spending a few thousand on a camera with hundreds of features that you are unlikely to ever use. Having said that, we don’t like to scrimp on lenses. The better the lens the sharper the image. Having a cheap lens is like putting nylon strings on a steel strung guitar. It does the job but the quality will be missing.

Finally, try and get a camera with an Interval Timer. It is an incredibly useful feature and is ideal for 360 spins.

How many images make the perfect rotation?

The million dollar question. Like the proverbial piece of string, this varies from supplier to supplier. Some suggest that the fewer images you use the better. This is fine if you want ’own brand’ rather than ’premium’.

If a spin appears jumpy then it will probably contain 24 images or less. 18 images are slightly quicker to shoot, a bit quicker to download but no quicker to view on screen. However, the difference will show when compared to higher quality spins.

Early on in our development we tested every combination from 12 images to well over 100. We found that 144 images gave the smoothest quality for video spins but 36 was perfect for online viewing.

We are proud to say our results have become the industry standard

We refuse to go below 36 images as the spin becomes jerky and we’ll never compromise on quality. Simply mark every 10 degrees on your turntable. Halve this number for 72 images and halve it again for 144. Read more in our post describing how many images make up a perfect 360 spin.

36 images make up a perfect spin

Our findings of 36 images for the optimum spin is now recognised as the industry standard

2. Processing

Calling all Photoshop wizards. You’ve bought a perfectly good camera and set of lights, but the captured images don’t look exactly the way you wanted them to. Don’t worry, this is a common problem.

Maybe the gorgeous sparkle on the jewellery you shot has a nasty tint of yellow; maybe you had to tie up a handbag strap and now need to get rid of the support; and why does that background shadow have a ghostly flicker? Actually, keep an eye out for this, it’s a common problem in 360°.

From our experience, and judging by most of the photography forums we’ve been on, there’s not a single camera in the world that captures exactly what your eye can see. But don’t despair, all is not lost…

Retouching

Hold on. There are 36 images! Surely you haven’t got to retouch each image? What about the systems which claim their images don’t need retouching and can be uploaded straight to the web? We call that BIG MISTAKE No.4.

Unfortunately, some things like scratches or dust will need to be retouched on each individual image to get it looking exactly as you want your product to appear. This is where a little extra time and patience in the photography stage pays off.

retouching 360 photography images

Remember – dust, scratches and finger prints will have to be removed on all 36 images

You’ll need to inspect and retouch your 360º images in processing software such as Photoshop. If you don’t know the ins and outs of Photoshop, it’s time to go back to school. Layers, levels, healing, saturation, nearly every Photoshop tool will be required at some stage. But never fear, you can write some brilliant time-saving actions which can save hours of laborious work.

Photoshop is also brilliant for cropping images to size. Cameras usually shoot at 6×4 proportion, which doesn’t help if you want your final rotation to be square.

Colour balancing

How’s your temperature? If you look at a product in the morning it will appear bluer because the colour temperature is cool. As the temperature rises throughout the day the product appears more orange. Strange but true.

To achieve the best results your equipment needs to be colour-balanced to a specific colour temperature. If you shoot with a flash under tungsten lights, use a fluorescent monitor setting and check it by daylight, your image will come out completely the wrong colour.

Light bulbs are produced at different temperatures, dependent on their use. To ensure complete consistency, the same lights should be used for both shooting the product and checking it at the colouring stage. The camera also needs to be adjusted to accurately balance colours. To complete the set, your monitor needs to be in tune with all the rest.

It’s also important to remember that your customers’ monitor may not be set the same as yours. You don’t want a product being returned for looking the wrong colour just because their monitor is set to the wrong colour temperature.

TIP: It’s always worth adding a small disclaimer somewhere on your site along the lines of “Colours are subject to the stringent standards of the production process and may not appear accurately on your monitor”. It’s surprising how many online shoppers think it’s your camera that must be wrong and not their monitor!

We always encourage clients to check with their legal department to help with the appropriate terminology.

3. Animation

Are you and your spins compatible? So your retouched images are now ready to be animated into a 360 degree product spin. The most important element when it comes to animation software is whether the file is compatible with your website.

There are lots of different options here. Do you want to be able to zoom in to see detail? Do you want to use your files on an iPhone or in Powerpoint? Decisions, decisions. There are a number ways in which your 360 spins can be produced. In HTML/jQuery for the majority of web browsers; In Adobe Flash for stunning interaction; and as video for YouTube or presentations. Let’s look at these one at a time:

 

HTML / jQuery

Forever on the go. Busy lifestyles mean more and more people are accessing the internet via their mobile phones, this means your spins need to work on all devices. No problem. You just need some code.

Flash offers the best interactivity and is easier to implement on websites, but sadly, as it does not work on certain mobile devices, especially iPhones and iPads. This means having to program spins in specific code.

You probably don’t want too much detail about coding so we’ll try not to bore you too much. Basically, in our 360 studio, we write code in JQuery, javascript and html. This ensures the spins work on all devices. The code organises the separate images and displays them in the browser. Your web designer should be able to integrate it quite easily.

jquery 360 spin software diagram

A JavaScript file determines how your spin images are displayed on your website

Note: JQuery/Javascript is now the most popular way of displaying 360 product photography

 

Adobe Flash

No Flash in the pan. Flash used to be the most favoured software for 360 spins. Web browsers used to be able to display Flash files which could be programmed to include a host of features including zooms.

Sadly Flash files will not display on iDevices such as iPads and iPhones. We believe this to be a great shame because, in our opinion, Flash was a great way to produce interactive and secure 360 product photography animations.

Just a few short years ago we used to produce all our 360 spins in Flash. But due to the fact that they won’t display on all browsers we now use jQuery. That doesn’t mean we never open Flash though. It’s still a brilliant program for animating special techniques and adding logos. We just use the images we output from Flash in a jQuery spin instead.

 

Video

Hollywood here I come. It may take a little longer than using a video camera but the basic principles of 360 product photography allow you to produce both 360 spins and HD video footage.

One of the most beneficial things about shooting still shots for 360 spins is that you can use them in a variety of ways. You can choose the best individual angles to print in advertisements and catalogues or you can use the full set to produce a video.

For high resolution videos we recommend 144 images per rotation, otherwise it will spin really fast and appear very jumpy. One thing you need to remember with video is that you won’t have as much interactive control as with the other types of spin, but again, the benefit is that you can produce both from the same original images.

360 product videos in hd

HD 360 spins can be used for YouTube videos, in presentations or even for broadcast

 

Stop-frame

Another type of animation is stop-frame. These bring a whole new dimension to your 360 spins and can be used in either of the animation outputs listed above. As you know, spins are a series of images, displayed one after the other. This means that you could, in theory, display any series of images using the same software, as long as they have a seamless join.

glove sequence of images

A popular use for stop-frame is for displaying gloves. It allows you to show how they move with the action of the fingers opening and closing.

toy castle stop-frame animation

You can also have fun with your animations by telling a story, for example the guard capturing an intruder in the castle above.

stop-frame sequence of images of a CD

You could also use a stop-frame animation sequence to show how something works. Simply shoot one sequence then reverse the frames.

Other examples of an animation feature within a spin could be someone opening a jacket to show the fancy lining or someone opening and closing a book. As long as they start and finish the movement in the same place they don’t have to spin. It’s pretty tricky to do but can look very effective. Check out the samples on our Samples Page.

There are a lot of techniques currently being created by our 360° software team to help display products in their best light. 360° product photography is all about innovation. Make sure you are given the choice, you don’t want to be left behind simply because your technique or software isn’t up to it. If you want to keep up-to-date with the latest techniques, sign up for our Newsletter.

 


 
branding of 360 product photography

Branding

360 product photography should be a part of your marketing mix. A quality spin is a brilliant advert for your business, especially to bring logos and straplines to life.

Many 360° software packages look the same. You may have seen some large retail sites who have obviously bought the same package as the buttons and loading bars all look similar. Try to avoid off-the-shelf software that doesn’t make your images stand out from the crowd.

Corporate Identity

But what if you want your buttons to be bright pink and all the wording in zapf chancery bold? Of course it can be done, but to prevent a call from the taste police, we’d probably advise you to stick with your own corporate identity!

Logos and Watermarks

Adding a logo. It’s a good idea to add logos as watermarks so that competitors can’t steal your images. An alternative is to have it discreetly placed in one corner. All suppliers should be able to offer this facility but may charge a set-up fee or a small charge per rotation. This shouldn’t be much as it’s quite simple to programme. However, we’ve heard of some suppliers who put their own logos on your spins and charge you to take them off! So beware.

Adding a background

If your website is designed on a black background, it seems a good idea to display your products on a black background too. Make sure your 360° equipment and shooting technique is capable of doing this otherwise you’re going to spend days painstakingly cutting out your images in Photoshop. This gives you the option of changing backgrounds whenever you choose. Perhaps a jolly red at Christmas or for the more adventurous, why not drop in a photograph? If you produce surfwear, you could have that elusive breaker behind their spinning shorts. The creative choice is endless. See our article about backgrounds within 360 spins.

you can add all sorts of backgrounds to 360 spins

Adding backgrounds help bring your 360 product spins to life

 


 
winning spins

The benefits of 360 spins

Will it improve sales?

We would absolutely love to say yes! Whatever anyone says, 360 product photography is still in its infancy and there’s been little official research to validate all the great subjective feedback from raving fans.

We often receive emails from retailers eager for answers. What percentage of web visitors remain on a site which has spins? Can we guarantee that they are more cost-effective than still photography?

A few of our clients who have been using 360 spins long enough to properly evaluate their figures have been delighted with their results. We can also say that there are a number of factors which help to prove that 360° product photography increases sales. We’ll list them here and let you make up your own mind.

  • The majority of our clients come back for more. Successful businesses don’t tend to continually invest in things that don’t work. Repeat business tells us that they must be working.
  • Some of the World’s largest on-line retailers already use 360 spins. You just need to Google the large shoe retailers for proof. For the sceptics who think 360º is a gimmick. Well, they’re making BIG MISTAKE No.6.
  • A large number of huge online retailers have contacted us saying they will implement 360° on their sites. Maybe not immediately, but plans are in place and have been agreed at senior level.
  • A few retailers who don’t have 360° use feedback software on their websites to gauge customer opinion. They tell us that 360° is very high on the list of suggested improvements.

There are thousands of websites in the world using 360° product photography and many consumers are familiar with the concept. The flip side is there are also millions who aren’t using it or don’t understand it. Perhaps they are waiting for a survey confirming it’s the best thing since sliced bread. Or perhaps they are waiting for their competitors to take the plunge first. Are you willing to take the risk and capitalise on the boom ahead?


Well there you go. That’s our guide to 360 spins. We hope you found it an interesting read. If you want to learn more about 360 product photography please take a look around our website.

How a tin of custard started the 360 revolution

the history of 360 product photography

When we named it the Swiftspin 360 revolution we didn’t realise exactly how popular 360 product photography would become. Nowadays, companies large and small are displaying their products as spins, and thousands of photographers are learning the skills to produce them. But how did the 360 revolution begin? Simple really, it all started with a tin of custard…

Back in our graphic design agency days, we were asked to produce a 360 panorama for a client. Not of an impressive mountain, luxurious hotel, or even a secluded lake. No, our challenge was to produce a panorama of a tin of custard.

In fact not just a single tin of custard. Oh no. We had to produce a panorama of a range of custards, jams, sauces and soups. Oh, and a few bags of flour. Creatively inspired we set to work. We arranged them in a circle with the camera in the middle, and using a macro lens produced a 360 panorama in the traditional way, by capturing a number of images as we rotated the camera, and stitching them together in a panorama software package.

It was so long ago that the software doesn’t work on modern browsers, so here it is displayed as a Swiftspin (not the best quality I’m afraid):

As luck would have it, the client was really impressed. But like all good clients they pushed us further. “Can you make the tins spin around so that you can see the ingredients on the back?”, they asked.

Our silent response was kind of embarrassing until our technical director blurted out that yes, he could do it. At the time he admits he had no idea how, but like all the team members at Swiftspin, he likes a challenge, and took himself off to ask Jeeves.

ask jeeves screengrab

He was looking for examples of products being spun in 360 degrees. Guess how many he found? Correct. Loads. All of which were incredibly poor and produced on what looked like a BBC Micro from the 80s. They took forever to download and were certainly not to the standard we were hoping to produce. This meant we had to find a way of photographing and animating the images ourselves. Our technical director knew Adobe Flash inside out and managed to write a very simple 360 rollover template. We used this to animate a few pictures for our very first 360 spin sample.

Sadly, we still have it:

Unfortunately, if you’re viewing on an iDevice you won’t be able to view this historical landmark in 360 spin photography. But, here’s a sample of what our 360 spins look like today. A bit different, eh?

Anyway, the sample we produced was far better than anything Jeeves could find so we knew we had the makings of a very good way of displaying products online. We set about producing the custard can spin and then conducted a survey to see what other retailers thought. It seemed a hit as very quickly word got around which led to commissions from retailers of all kinds of products including bicycle pumps and fishing nets. The more we spun the better we became as did our animation templates.

One thing which wasn’t too hot was our turntable. We built all types, and eventually decided the best was a manual turntable using a very cheap bearing which we still use. We also built an automated turntable, similar to the ones being sold today, but it wasn’t flexible enough for our needs, so we stuck to working manually.

360 photography turntables

We’ve built 12 different turntables for spinning everything from a wedding ring to a sofa

Back then our website was very basic with no SEO, but it was easy to get to the top of Google with the keywords ‘360 product photography’. There were probably 3 or 4 pages containing around 40 listings. Not quite a Googlewhack but close. Do a search today and you’ll get 20,400,000! It’ll probably be more tomorrow.

examples of swiftspin websites

As technology has improved, so has the Swiftspin website

From those humble custard covered beginnings Swiftspin has developed into a leading 360 studio working for world-famous brands as well as continuing to service smaller bespoke retailers. We shoot thousands of products every year and the numbers are growing.

swiftspin clients

A very small selection of clients we are proud to have produced 360 product spins for

We’ve been proud to have worked for some fantastic clients and hope to work with many more in the future. Long live the 360 revolution!

Don’t just Rotate… Animate!

animation sequences displayed in 360 degrees

When most people think of a 360 product spin they probably imagine an inanimate object on a white background. It’s true that most products look best on white but they certainly don’t have to be lifeless. You can always add a bit of movement for interest or, in some cases, to inform and educate.

We try and show our clients’ products moving whenever it’s appropriate. It gives the viewer much more than a still shot ever could. Be it a glove moving to show its flexibility or drawer opening and closing, movement within a 360 spin will help increase viewer interaction and help them understand your product better. As long as it’s done properly of course.

Animating within spins can be tricky, but the general rule to bear in mind before deciding what kind of animation to use is:

If your spin starts and finishes in exactly the same place then do whatever you like in-between

Give our magazine perusing model a Swift Spin

A model can move during a spin and even do a little dance on the turntable if they’re confident in getting back to where they started! Our model (who had one of the easiest modeling jobs ever) simply read her magazine at a certain speed. The speed of the animation being dictated by the number of images used to create it. The more images the slower and smoother it will appear.

Sometimes it’s best to animate before or after the complete spin has finished. Then you get the option of using the spin on its own if you need it.

Give these Vaillant work trousers a Swift Spin

Here’s another sample. This time of protective pads which are shown sliding into knee pockets on some Vaillant work trousers. The animation clearly shows the pads going up into the pockets rather than down into them. For builders and general tradespeople this keeps the pockets free from dirt and grime. Not only does the spin clearly display this, it also acts as an instruction guide for fitting them. So animation can actually gives two benefits from one spin. That can’t be bad!

Finally, we’ll leave you with another animation produced in the Swiftspin Studio. This one is a Quicktime movie and combines traditional stop-frame techniques with 360 spins. Enjoy…

A bit of background on backgrounds

360 spins work well over different backgrounds

360 spins look great on white, but there’s no reason why you can’t experiment with other backgrounds. A different colour, a texture or even an image can really improve your spins, if you choose the right one that is.

There are usually three ways in which a product can be photographed in order to be used within a 360 spin: with a shadow, with a reflection or with neither. A shadow makes the product look grounded and is by far the easiest technique to produce. Most of the 360 photography kits will produce a shadowed spin. A reflection requires a highly polished surface and is a bit more tricky to light, but lots of products can benefit from having a reflection.

reflections in product photography

Lots of different products can benefit from having a subtle reflection

The trouble with both shadow and reflection is that it’s very difficult (and therefore expensive) to add backgrounds to them. The shadow/reflection would need to be digitally removed and that means on all 36 images. The best way to get a background is to shoot the product in a way which makes it easy to delete whatever is behind it. A product with no background is called a cut-out and there are a number of ways to achieve one. We have a glass turntable which allows us to achieve near perfect cutouts with some careful lighting, but if this isn’t possible in camera we sometimes have to revert to digital editing.

place images over different backgrounds

A cut-out can be placed over any image to set a scene or add interest

If a product is shot with no reflection or shadow it opens up a whole new creative area of 360 product photography. There are lots of things you can do with it, such as make it look like it’s floating, place it on a coloured background or even add another image as a background.

cut-outs are very popular in 360 spin photography

Cut-out images offer much more flexibility in 360 spin photography

One company who set us an interesting background puzzle were Travall, the high quality car accessories people. As well as being tough and durable their products are quick and easy to install. As their products are often used in the great outdoors, the Travall corporate image incorporates rugged landscapes and wide open spaces.

When they approached us with a view to shooting some of their dog guards and cages in 360 degrees we were only too happy to help, after all, we’d never shot dog guards and we do like to add unusual products to our portfolio. However, when they suggested they’d like landscape images behind their spins we knew we had a challenge on our hands, especially when we saw the first product.

You see, it’s time-consuming enough to produce a simple cut-out of a shoe, T shirt or handbag, but we were presented with a dog guard made from wire mesh. It would take hours cutting out a single image, let alone the 36 required for a smooth spin. In order to achieve the best result we knew we’d have to develop a completely new technique which was quick to produce but kept the quality of image at a high standard.

complex cut-outs can look very effective

Simple cut-outs are difficult enough… imagine cutting out 36 dog guards!

We experimented with simple green screen technology but the wires were so fine they kept disappearing. We then tried shooting against a pure white background, but the white reflected in the product which gave ugly reflections. In the end we managed to shoot against a carefully lit coloured background which was a completely different colour to that of the product. This allowed us to separate the product using some clever Photoshop script which easily cut all 36 images out automatically.

Once the backgrounds had been digitally removed it allowed us to drop in any image we liked. This was great for our client because they had a selection of library shots which they wanted to test behind the products. After a few tests we found that the simpler the shot the better. Our shot of a sunny cornfield worked particularly well.

Give this Travall dog guard a Swift Spin

Once we’d refined our new technique, we were able to offer it to other clients whose products we thought would benefit from having backgrounds. Adidas have used it to display some of their football boots against a football stadium background and we’re also working on some tests for swimwear against a beach background. The possibilities are endless.

If you’re considering this technique for your 360 product spins just make sure that the background image isn’t too bright or cluttered. It’s your product you want visitors to concentrate on after all.

See lots more background samples on our samples page.

Tee Time

360 degree t shirt spinning

We spent a good few weeks trying to come up with a ‘different’ way of photographing t-shirts. And do you know what? We think we might just have cracked it. But we’ll let you be the judge. Give the girl above a swift spin and see if you agree.


 

Why did we bother?

Good question. A simple flat shot might suffice, but we wanted to create something a little out of the ordinary. Something with a little more pizzazz than the usual front on shots you see online. Something which shows off the shape, the design, and which catches the eye of the consumer.

We’ve photographed lots of t-shirts in 360 degrees, but we’ve always felt that the traditional techniques have never really matched the funkiness (if that’s a word) of the products themselves. Our new technique had to be a combination of the advantages found in the following techniques:

T-shirts on mannequins

mannequin photography

If you’ve worked in window dressing then you’ll know that mannequins can be difficult to dress and style. Taking arms on and off can be time-consuming and they are not the most interesting of conversationalists. They can look a bit stiff and lifeless however you style them and the choice isn’t brilliant either, most manufacturers only producing a few in each range. We have some great ones in the Swiftspin studio, but if you have a huge range you’ll probably want to use quite a few different ones for variety. Having said that, mannequins are well behaved, consistent in appearance and have the ability to stay still on a turntable.

Ghosted Mannequin T-shirts

ghosted 360 spins

We’re asked for these a lot but we don’t really know why. Perhaps retailers have seen ghosted still shots and assume its quite straightforward to produce spins like that too. Once we explain what’s involved, the difference in price and ask what benefit it gives to the customer, they usually go for another option. A ghosted spin is possibly the most expensive type of spin to produce. There’s no such thing as an invisible mannequin so each and every image has to be manipulated in post-production. As the mannequin has to be painted and cut up, if your t-shirts are a single colour and only come in one size then ghosted might be an option.

T-shirts on live models

live model 360 spins

T-shirts are designed to be worn by real people so it’s often best to display them on a live model. The model can be infinitely positioned to ensure the best fit and the most important parts or features are shown which is rarely possible with a stiff mannequin. They can even add personal touches like glances or head turns to liven up a spin. You should note that unit costs for this option can be high if you only have a few products to shoot, however if you do have a range to shoot then the extra costs can easily be regained as models can dress themselves a lot quicker than it takes to dress a mannequin.

Add to all this the fact that many t-shirts are plain on the back. If you use a zoom facility you’re using up valuable resources to display parts which frankly, don’t need to be seen in great detail. But zooming in to important parts is imperative and our numerous experiments took this into consideration too. So a way of zooming in to see detail wherever it appears would be beneficial.

So, to sum up, our new technique had to:

• Define the shape
• Look realistic
• Have a consistent appearance
• Magnify only the important areas of detail
• Be quick to produce
• Have impact
• Remain affordable for large quantities
We think our new technique covers them all, but it would be good to know what your views are. If you have any suggestions or would like your t-shirts displayed like this, please click here to email us.