Creating HTML5 assets for an advertising campaign can be a time-consuming task. This is especially true if you require assets for multiple ad and screen sizes, which is almost always the case.
In this tutorial, learn how to use Viewst – a web-based, AI-powered platform that allows you to upload Adobe Photoshop files and convert your designs into stunning HTML digital assets without any coding.
Use the link below to download the Photoshop file – a 300 x 600 sized ad for a fictional project management company called Tabulate. You can also use your own Photoshop file, but ensure it's saved as a layered .TIFF and not a .PSD.
Also, ensure that all shapes in your design are converted to Smart Objects for a seamless transition to Viewst.
Before jumping into the tutorial, it's important to note that Viewst is not a free-to-use platform, but there is a free trial that will allow you to follow along in this tutorial.
Let's open the Photoshop file and look at the layers in the ad creative.
There are multiple layers in this TIFF: Logo, Light Bulb - Small, Light Bulb - Large, Main Artwork, grouped button with the Learn More text and Rectangle shape, subheader and header. There's also a background shape.
Save and close the Photoshop file and make your way to viwest.com.
Uploading Photoshop Design
In the Viewst dashboard, click on the menu icon located in the upper right hand corner of the page.
Locate and select the Photoshop file included with this tutorial saved as digital_ad.tif.
Click Open.
Once the design has been uploaded to Viewst, rename the project title to Tabulate - 300x600. This will help keep things organized and the project will be easy to find when the Viewst dashboard is launched.
To the right of the ad design, you can set the status and deadline date for the project as well as assign a team member.
Next, hover over the design and click Edit to launch the Design and Animation editor in Viewst.
It's important to note that text is not live and is treated as an image when uploaded from Photoshop. If this is an issue for your specific case, you can match the font size and style from the Photoshop file.
The font used in this project is called Poppins, but you can use a similar Sans Serif if you don't have that one installed.
Adding Text
Click the Text button and choose the Header option. This will add the placeholder text on the design.
Type in the same text over three lines: Manage tasks and projects with ease.
Format the text to match the text currently on the design. For this example, set the font to Poppins Medium and size to 36pt
Repeat the same steps for the second title, but using the subheader preset option from the text options.
For the button, you can replace the text or use one of the button design presets available in Viewst.
Adding Button
Click the Button icon in the toolbar menu.
Choose the Learn More option and drag it into position.
Set the color fill to the original dark blue. Color code #1a035f.
Set the font to Poppins Medium and size to 20pt.
Once the design is the way you want it, you can move on to the Animation stage.
Click on the Tab located in the top menu to switch from the Design editor to the Animation editor.
When in the Animation editor, you will see the timeline appear at the bottom of the page.
For this example, we will be adding animation to five objects in the design:
Main title
Subtitle
Light Bulb - Small
Light Bulb - Large
Main Artwork
The timeline is set up as a grid, with rows to make it easier to locate the layers in the project. To add animation, click on an area within the layer in the timeline. Let's start with the main title as an example.
Main Title Animation
Click an area within the main title layer to add an animation.
From the preset animation options, choose Light Speed Left.
To tune the animation to your specifications, click it in the timeline and adjust the settings in the right side panel. Set the Start to 0 milliseconds (ms) and the Duration to 1000 ms, which is 1 second.
Subtitle Animation
Click an area within the subtitle layer to add an animation.
From the preset animation options, choose Flip Vertical.
Set the Start to 0ms and the Duration to 1000 ms.
Here is a look at the main title and subtitle animations using the settings as explained above.
The next three animations will begin at the 1-second mark in the timeline, starting with the Main Artwork.
Main Artwork Animation
Click an area near the 1-second mark within the Main Artwork layer to add an animation.
From the preset animation options, choose Slide in Down.
Start the animation at 1000 ms and set the Duration to 1 second.
Next let's add the appearance animation for both light bulb illustrations, as well as accent motion animation that will carry through the entire sequence.
For clarity, the large light bulb is the first in the layer stack, followed by the small light bulb.
Light Bulb Animations
Click an area near the 1-second mark within the Large Light Bulb layer to add an animation.
From the preset animation options choose Fade In Down.
Start the animation at 1000 ms and set the duration to 1 second.
Click an area near the 1-second mark within the Small Light Bulb layer to add an animation.
From the preset animation options choose Fade In Up.
Start the animation at 1000 ms and set the duration to 1 second.
Click an area near the 2-second mark within the Large Light Bulb Layer to add an animation.
In the Add Animation window, click the Accent tab and then choose Floating Horizontal from the animation preset options.
Start the animation at 2000 ms and set the Duration to 7 seconds.
Click an area near the 2-second mark within the Small Light Bulb Layer to add an animation.
In the Add Animation window, click the Accent tab and then choose Floating Vertical from the animation preset options.
Start the animation at 2000 ms and set the Duration to 7 seconds.
Here is a look at the main artwork and light bulb animations using the settings as explained above.
Now that the animation is set, the final step is exporting the HTML5 asset for production.
To do this, click the Download button located in the upper right corner of the page. Here you have the option to export the project as HTML, image (PNG, JPG, TIFF) or video (mp4, GIF).
When choosing HTML, Viewst gives you options for multiple digital ad platforms such as Google Ads and Google Campaign Manager.
Click Custom to add a Click URL and Click Pixel if you have one. For the sake of this tutorial, let's type www.google.com as the Click URL and then click download.
That will take a few moments to download, but when it's finished, Viewst will package all the HTML5 assets in a zipped folder.
Comments