Introduction: Create Interactive Fashion Portfolios and Catwalks

By Shoogleit.com
About: Working on shoogleit for years now. Shoogleit.com is a project of the Digital Sensoria Programme (www.digitalsensoria.com) and Heriot-Watt University.


Quick question to start:

Simple Image

Would you prefer to see the image on the left?

Or an interactive video of your fashion design as shown on the right? (click to start) >>

Interactive Video

I'm hopeful everyone agree that the one on the right looks better. In this instructable I will show you how to create interactive videos for a fashion portfolio and how to embed these to websites, blogs, facebook, etc.

Creating 'shoogles' should take around 5 minutes each with a little bit of practice.
You only need a good video camera or webcam.

Step 1: Shooting a Short Video

To start you need a short video of your model turning, the more fluid the better. I shot my short video with LOTS of light and using a white background. See below for the raw video sample.

If you use a white background you will be able to correct it later on, otherwise any other background is fine. I do recommend you use lots of light though.

If you see flickering in your video then save it with a different frame rate (e.g. 25 or 30 frames per second).


Step 2: Converting Your Short Video Into Frames

First head to www.shoogleit.com and login, register first if you don't have a username already.
Once logged, you can upload your video and separate it into frames, see picture below for instructions.

Second, select the start and end of one rotation. Then select the number of frames/separations, usually 50 to 100 is a good number. See second picture below for more instructions.

Step 3: Order, Crop, Rotate, Correct Background and Resize the Frames

Now you will see each frame in the bottom, there are options to crop, order (drag n drop), resize your frames to your heart's content.

You also have an option to make the background pristine white.


Step 4: Add Interactivity

Click setting on the tab to show the interactivity setting. Here you can add drag to your sequence, bottoms, loops, drag loops to do a continuous sequence, etc.

Tip: if you sequence is not continuous then you can go back to frames section and blend the start and end frames to get a continuous sequence.

Step 5: Publish and Embed Your Interactive Video

Finally hit the publish button. That's it.

If you want to embed the shoogles into your website then just copy the embed code in each shoogle page. Try the facebook button too.
To get good result you probably need to try to create shoogles 1 or 2 times to start off but once you done it then it is very easy.

Please post a comment if you get stuck or need help.