How to Create Animated HTML5 Web Banner Ads using Google Web Designer | Convert PSD Banners to HTML 5: In this tutorial we will be taking a look on how to convert PSD web banners to animated HTML5 banner Ads using Google Web Designer.
Download Banner Files (PSD + GWD Files): https://designersjoint.com/300-x-600-animated-html5-banner-ad-template/
Banner Design Photoshop Tutorial: https://youtu.be/eblyb-4X_3s
Download & Install GWD: https://youtu.be/edUSNA0SkPI
Converting Static Ai Banner to HTML5: https://youtu.be/gc2pCS-yL4U
Adding HTML5 banners to website: https://youtu.be/OXcNknWwTkc
WordPress Blog: https://designersjoint.com/ready-to-go-wordpress-blog-website/
Subscribe For More: https://www.youtube.com/channel/UCxwMoUXpnlcdAZAxnx2ZI4w?sub_confirmation=1
Join Our Email List: https://www.techruzz.com/newsletter-subscription
STEPS COVERED
00:00 Introduction
00:13 HTML5 Banner Preview
00:43 Exporting PSD Banner elements as PNG
03:30 Creating a New Document in Google Web Designer (300px X 600px)
04:35 Importing the PNG files into Google Web Designer
10:35 Animating each layer (header section)
12:01 Animating the GRAND FURNITURE, BIG SALE & Sample text.
13:33 Animating the two triangle shapes
16:08 Animating the Arm Chair
18:15 Animating the 50%OFF
20:22 Animating the ORDER NOW
22:06 Adding Ease effect to all the layers
25:08 Adding repeat action (When previewing it should play the Ad 3
26:42 Adding Exit Ad Link (Go to URL when the Ad is clicked or tapped)
28:28 Publishing the Ad locally ready to be placed on a website
FOLLOW US:
Twitter: https://twitter.com/techruzz
Facebook: https://www.facebook.com/techruzz
Pinterest: https://www.pinterest.com/techruzz
Reddit: https://www.reddit.com/user/techruzz
Tumblr: https://techruzz.tumblr.com/
Quora: https://techruzz.quora.com/
Disclaimer: TechRuzz Tutorials is supported by its audience. When you purchase through links on our channel, we may earn an affiliate commission.
#TechRuzz #HTML5WebBanner