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.




PackshotCreator software


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. Spin settings
    animation spin settings for HTML profile feature

    In the first step of the customization, determine the animation’s rotation parameters. Under “type” choose “stationary” so the 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
    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. Animation buttons
    selecting the animation buttons available on the software

    Your 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 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 product animations 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 !