How to fully customize a 360° diamond animation?

With the HTML Profile feature, you can fully customize your 360° diamond animations with colorful buttons, zoom, hyperlinks, as well determine its rotation parameters and formats. These animations will be compatible with all reading medias for viewing on PC, smartphones and tablets. Learn in this tutorial how to set a perfect HTML profile for all your 360° diamonds views.

Supply

Diamond

Tool

PackshotCreator software

Duration

2 minutes
  • 1. Creating a HTML profile
    saving a diamond animation in HTML format

    After your face-up or 360° diamond (brilliance, fire, sparkle or vertical) view is done and ready to be exported, give your file a name. Then, click on the add a new save type toggle and select HTML. Decide the size and image quality of your animation. The ideal and recommended size for the web is 800px. For image quality, select recommended.

    Now your animation exportation is set and your HTML profile is ready to be created. Click on the settings button under HTML profile and the customization interface window will appear.

  • 2. Your diamond animation spin settings
    diamond animation spin settings for HTML profile feature

    In the first step of the customization, determine the diamond animation rotation parameters. Under type choose stationary so the diamond animation will only start when the visitors click on the play button. After, decide its direction by selecting clockwise or counterclockwise. You can also increase or decrease the speed. The correct speed for a 90 pictures animations, is 0.007 s/frame.

    Before moving on to the next step, verify that the auto rotate box is deselected and that the rotate while zoomed is selected.

     

    Tips: Use the small visual on the right as a guide when choosing a setting option. You can also click on preview.

  • 3. Adding zoom to your diamond animation
    adding zoom to a diamond animation

    To add a zoom button, go to magnification settings and select the type box. Choose the type of zoom you would like to include on your diamond animation and then its magnification.

    The magnification will work according to the size you chose for your animation. So if you select, for example, a zoom with a magnification of x3, the size of the animation’s photos needs to be 3 times smaller than the photos’ original size.

     

    Note: In this tutorial, no zoom was included due to the fact the diamond was shot on QuickShot mode (smaller file size)

  • 4. Diamond animation buttons
    selecting the animation buttons available on the software

    Your diamond animation performances are all set. Now you can personalize it. Under display buttons, choose the buttons you would like to include in your diamond interactive view. Select play/pause and full screen. Leave them as separate buttons and make sure they are selected for both device and mobile.

     

  • 5. Creating hyperlinks
    adding social media buttons to a diamond animation

    You can also add social media buttons to your diamond animation so visitors can click on them and share your interactive view on their profiles. Go to Social Media and select all platforms you would like to include on your diamond view.

    If you prefer adding a custom link, for example a specific page from your website, select the custom link box and insert the URL.

  • 6. Personalizing your diamond animation buttons
    choosing the animation buttons color

    You have selected the buttons that will appear on your diamond animation. Now, choose their style and color by going on Buttons Style. Then, click on the color square and select a color that will match your website, company’s logo or the photographed diamond. Next, decide where you want them to be placed: left, right or center.

  • 7. Selecting your diamond animation images format
    selecting the image format for a diamond animation

    For the last step of customization, choose your animation’s formats by clicking on Image Format. If you created an animation with background removal and would like to keep the transparent background, select PNG. If not, leave the format as JPG.

  • 8. Saving your HTML Profile
    how to save a HTML profile

    Now your diamond animation customization process is done. Click on the save as toggle and give your animation profile a name, for example: diamond_animation. Then, click OK and your HTML Profile is saved and will be stored onto the HTML Profile’s library. 

    Next time you create another diamond animation, simply reapply this profile. This way, you  skip the entire personalization process and save lot of time.

  • 9. Exporting your diamond animation
    folder generated by the software of a ready diamond animation in HTML format

    Your diamond animation is fully customized and ready to be exported. Go back to the exporting interface and select the location you want to save it. Then, click on the save button.

    The software automatically compile the 90 photos of your diamond and a file in HTML5 format is then create. Send this HTML5 file to a storage cloud where a link will be generated for you to be able to integrate it on your website. Your diamond animation will then be displayed online for all media readings without adding plugs-in !

     

FAQ

How to create a interactive 360° diamond animation?

Making your 360° diamonds animations interactive, will allow visitors to spend more time on your website. See how you can do it

How to add zoom button to 360° diamonds animation?

The zoom allows you to have a closer and more detailed look of the diamonds. You to add it on a 360° animation

How to add customized buttons on 360° diamonds animations?

You can add colorful buttons such as play, pause, full screen, hyperlinks and much more. Discover how to do it