Transform Your Photoshop Designs into Animated HTML5 Ads with Viewst

Transforming your Adobe Photoshop designs into animated HTML5 ad content is much simpler with a powerful, web-based ad production tool called Viewst.

In this tutorial, learn how to upload two separate TIFF files form Photoshop to Viewst, add animation and use the built-in Slides feature to merge the designs into one dynamic creative.

Viewst does have a free trial to follow along with this tutorial. Simply sign up for a free plan and use the assets included in this tutorial to try it out for yourself.

You can download the two layered TIFF files by clicking the link below.

LUMEA ADS.zip

Download ZIP • 20.06MB

Before jumping into Viewst, have a look at the TIFF files in Photoshop. If you open the Layers panel you'll notice that all the objects in the designs are on separate layers and named properly. Shapes, color fills and gradients must be converted to Smart Objects prior to uploading toe Viewst.

For example, you can right-click an object and choose Convert to Smart Object, which essentially preserves the quality of the image when uploading to Viewst.

It's also important to note that text will not be live when it's uploaded to Viewst. It'll be treated as a graphic and not editable text. If you do want live text, leave the space blank in Photoshop and use Viewst's design tools to add text that can be edited in real-time.

Upload TIFF files to Viewst

• To upload the TIFF files to Viewst, click the three dots icon located in the upper right corner of the screen in the dashboard. Then click Upload design.

• Choose the first TIFF Lumea ad and click open to upload the ad to the Viewst platform.

• The ad will have a generic title once it's been uploaded. This is the perfect time to rename the project to 300x600 Lumea Ad.

• Click the three dots icon again and repeat the same steps to upload the second TIFF file.

• Once the second ad is uploaded, hover over the preview image and click Edit.

• Drag and select all the content and while holding Command on a Mac or Ctrl on Windows, press C on your keyboard to copy the content.

• Click the Viewst logo in the upper right to return to the dashboard and click the 300x600 Lumea ad which contains the first slide.

• With the project open, click the Slide 1 dropdown to add another slide. Click Add slide and open the second slide.

• While holding Command on a Mac or Ctrl on Windows, press V to paste the content on the second slide.

Here is a look at how to upload the TIFF files and add them to two separate slides, as explained in the steps above.

This ad currently only has the two slides, but if your Photoshop design content, simply upload the additional TIFF files and repeat the same steps to copy and paste the content onto new slides in the master project.

Once your design is exactly where you want it to be, you can switch over to the animation tab to add animation to both slides. Follow along in the video tutorial to see how to add various animations and accents to the content.

To preview both slides working together, click the Play button located in the upper right corner of the screen. This launches a separate window where you can play the animations and preview the transition from slide 1 and slide 2.

Here's a final look.