01. Create a 360° animation

01. Create a 360° animation

Here we are, you are going to create your first 360 animation!
Let's process together!





First, place your product at the exact center of your turntable.


If you want to check if your product is perfectly centered, you can make a 360 lap and directly preview your product behavior by clicking on the turntable controls:













1. The settings


Camera settings:


  





 Focus Mode: choose MF
 Mode: Choose M on the mode wheel of your camera
 Aperture: choose a big number if you want your animation totally sharp
 Shutter Speed: vary it depending on the light intensity you want to have on your product
 Exposure: it always have to be on 0
 ISO: it is better to choose a low value like 200 to have an excellent quality; you can however increase it until 800 if you need more light
 White Balance: Auto to have the whitest white 






If you already have saved a profile, you can use it by clicking on Load.


Light settings: 





Animation settings: 




 Spin range: choose 360 if you want your animation to make a full lap; you can also choose to make a spin back at 90°
 Number of images: for a web animation, we usually choose 12 or 24 images to have a soft animation for your website
 Shooting mode:  - choose continuous to shoot all your images in one time
                              - choose timelapse if you want to create an interactive animation
                              


Turntable settings: 



  Device: your PackshotCreator hardware
  Direction: the side you want your animation to turn : - clockwise: will turn to the left
                                                                                          - counterclockwise: will turn to the right
 Speed: choose the speed of your turntable




2. CLICK SNAP!

Your animation is in creation... !



When the shooting is over, click on "HTML Preview" to see how looks like your animation.
If you are not entierly satisfied of the rendering of it, you can edit colors, the background, and a lot of other settings!

3. Editing 

You've never been to the editing interface ? Let's check this article! 


4. Saving and animation settings

After editing, you are ready to export your animation!
Just click on Next.

Here is your export interface: 























You can export as many formats as you want.
Here we're going to export the animation in HTML5 format and the 24 views in JPG format in low resolution for data base. (What are those formats ? Check here)

We are for this article particularily interested in the settings of the HTML5 format.

You have here a few quick settings like:
● the size of the animation: H for Height and W for Width)
● The quality: Q
● DPI: the resolution of the picture
● Watermark
● FTP
● SaaSPhoto (What is it?)

You can find them by clicking on the wrench button and customize each one:



You can also customize your HTML profile and that's what we are going to do. 
Click again on the wrench button:



You have in this window, 8 major settings to customize your animation. Each setting is previewable with the sneaker animation on the right. You can directly see the effect of the chosen setting.


1. Spin settings:
      ● Type: - Autoplay: the animation is always turning
                   - SpinOnce: the animation turns one time and stops
                   - SpinBack: the animation turn to the left and then to the right
                   - Stationary: the animation only turns with the mouse

      ● Direction: - Clockwise: turns to the left
                          - Counterclockwise: turns to the right

      ● Speed: Choose the time per image for your animation. For a 24 views animations, we're going to choose 0.2 seconds per frame


2. Interactive settings: 
      ● Behavior: - Click and drag: click over the animation with your mouse to make it move
                          - Mouse over: fly over the animation with your mouse to make it move

      ● Axis: - Horizontal
                   - Vertical

      ● Mouse control: - Clockwise
                                   - Counterclockwise
> For this setting, always choose the same direction that you chose earlier in the Spin settings for the direction of your animation


3. Magnification settings:
      ● Type: - Magnifying glass
                   - Enlarge
                   - Zoom
                   - None

      ● Magnification: 1x, 2x or 3x. You have to decide how many times you want to zoom in your picture
                                  Be careful, if you want to zoom 3 times in your picture, your picture has to be 3 times smaller than the original one
                                  Example:  You choose the 3x zoom. If you have an orginal picture with this size: 1200 x 1200, you will have to save it with this size: 400x400

4.Initial view: 
      ● Column: you have to choose which view of your animation will be the first one
      
      ● Rotation hint: indicate or not to your visitor how to make turn the animation
      
      ● Animation loading style: - incremental: one per one
                                                   - all-in-one


5. Display buttons:
You can choose to display or not those buttons and how you want them to behavior: 
      ● Magnifier - Play/Pause - Full Screen : - No button
                                                                        - Seperate buttons
                                                                        - Toggle


6. Social media:
      ● Social settings: - No button
                                    - Seperate buttons
                                    - Toggle

      ● Custom link


7. Button style:
      ● Icon style: - Backplate
                           - Circle
                           - Line

      ● Color

      ● Alignment: - Left
                            - Center
                            - Right   


8. Button behavior:

      ● Auto hide
      ● Control hint



After setting all your preferences, you can save your profile to re-use it later, for the next animation, or in six moinths!
Just click on the floppy button just next to the profile name.


Here we are, you can click on the SAVE button and your animation is ready !







    • Related Articles

    • 04. Magento 2

      PackshotCreator - OrteryCapture Step 1. Install the extension Open Magento root directory, and create app/code/ directory. Then unarchive module .zip file. Open “Terminal”, and go to Magento root directory. Input “php -f bin/magento module:enable -c ...

    • 07. Wix

      Steps to embed Step 1. Create a “Embed a Site” Component Click “Add” button, select “More” tab, and select “Embed a Site” Step 2. Open “HTML Settings” Click “Enter Website Address” to open “HTML Settings” panel Step 3. Input Animation Link Select ...

    • 00. AspDotNetStorefront

      Steps to embed Step 1. Enter “Create Product” Page Click “Products > Create Product” in navigator bar Step 2. Open “HTML Source Editor” Click “HTML” button on the bottom of description form Step 3. Input <iframe> Tag Write <iframe> tag, assign ...

    • 02. eBay

      Steps to embed Step 1. Create a HTML animation using a PackshotCreator solution Step 2. Upload the entire animation folder to an online hosting server Step 3. In the folder on your server, look for the ‘*.html’ file Step 4. Cut and paste this link ...

    • 03. Magento

      PackshotCreator - OrteryCapture Step 1. Install the extension Enter Magento Connect Manager Upload the extension from local disk Refresh data Step 2. Extension setting Login in admin panel in your Magento website, then enter system -> configuration, ...