Video Title | Google Web Designer Tool in Urdu |
Runtime | 01:23:00 |
Used Apps | |
Difficulty | 2 |
Author | Mudasir |
How to make HTML5 banners using Google Web Designer tool.
How to make HTML5 Banners Urdu Tutorial
Everyone know about Google Adwards and online advertising sites such as Bing, yahoo ads and more those sites are the key of success for every business, if you are planning to promote your business or services there is two options to select, both options are find for advertisement now lets know what those options are and what’s different between them.
Static banners are the image design with the information about your product, business or services you are providing, its very famous method to attract people using beautiful images.
Animated banners would be flash or GIF images these images get attention of viewer by animation behavior, there are two types of animated banners flash and gif as I said above now day’s flash banners are almost obsolete because of their heavy size and browsers compatibility issues so people more like to use GIF banners.
Most Famous HTML5 Banners
HTML5 banners are most famous selection now days those banners are responsive for all devices so you don’t need to create separate ads for different devices, not on that those banner also support html 5 animation and multiple hyper links in one banner suppose if you have three products in a single banner how could you hyper link those products to different URL’s? off-course not possible in static and animated gif but in html5 its very easy to do we will teach you step by step how to make html5 banners.
What is Google Web Designer Urdu Tutorial
How to Make Your First HTML5 Banner in Google Web Designer
Things to know about Google Web Designer Urdu Tutorial
In this Video I will teach you how to create a basic banner from PSD file to HTML5, if you don’t know how to design banners in Photoshop we recommend you to watch our previous tutorials links are attached below.
How to Design Static Banner in Photoshop Urdu Tutorial
(Click on thumbnail to new this tutorial)
How to Design Animated Banners in Photoshop Urdu Tutorial
(Click on thumbnail to new this tutorial)
How to Convert PSD file Banner into HTML5 Google Web designer Tool
Photoshop Banner to HTML5
I am hoping you watched above videos and recommended tutorials and after watching those tutorials now you are ready to design your banner and as you guys know when you complete your design in Adobe Photoshop you will get a PSD file after completion, Now you are on the second step to convert it into HTML5 before we start coding we need assets to export, What i mean about assets let me guide you.
Assets are the images and things you used in your design for example Logo, Stock, and other elements.
Now let dig in to Photoshop to export our assets and then use it in our HTML5 Banner.
Install Custom Fonts in Google Web Designer
Note: The custom font using this trick will not work in Google Adwords as they dont support it right now but in future they will
In this Tutorial I will teach you how to install Custom font in Google web designer tool, as right now its not supported by google website designer tool officially, but we can do it using CSS tweaks, we will install Century Gothic font to use it on our banner.
Please click on play button to start watching how to ad custom fonts in Google Web Designer
How to Animate Banners in Google Web Designer
After creating a banner in HTML5 you probably want to animate it, and that’s the reason google web designer came for, in this tutorial I will teach you how to create animation in the google web designer.
there is two ways to create animation in GWD, the first one is Quick animation mode which is very easy for those who didn’t used adobe flash timeline and Photoshop’s timeline before, its very easy take a look screen shot.
The 2nd way to animate your banners is timeline view which is hard for beginners but not enough, we are here to teach you how to use that but in chapter 6 of this course.
Please play video below and start learning Quick Animation in Google Web Designer Tool.
How to Use Google Web Designer Tool Timeline
Learn How to Use Google Web Designer Tool Timeline Step by Step complete guideline
As Google Web Designer tool has two different ways to create animation the first one is Quick animation mode and the second is Advance time line animation mode, In this tutorial we will teach you how to use GWD timeline and its features.
Be sure to subscribe to the UrduTuts newsletter and get regular updates about awesome Tutorials just like this one and more!
Please Subscribe to our channel for more good stuff!
25 Comments
Thank You So Much Sir.!
Very Nice Tutorial
Thanks bro it really helped me thanks you 🙂 Can you tell me which softwares are necessary to be learned for graphic designer.
Thanks for your comments, Learn Photoshop, Illustrator, flash etc
salam bhai ap se puchana tha k ye jo ap ne video options di hai na wo kse dete hai
thanks sir its helpfull
Thank you Mudasir Bro, you are really a patriot. May Allah bless you. ameen
SIR AOA:
VERY NICE SIR PLEASE UPLOAD YOUTUBE EARNING COURSE AND GREAT JOB!
Thats really impressive, I was like searching for a video tutorial and you explained really well , thanks Brother 🙂
Thank you so much Sir it’s very helpful nice share.
sir very nice & great work. sir upload more videos of google web designer.
sir mera web designer muja error da raha ha
like
this app is not veiled in win 32
install 64bit windows
Thanks sir , Very helpful , I am fellow all lecture.
Thanks Sir. Waiting for Next Videos………
Nice Sir it’s very helpful..
this great sir
Thank you waiting for next tutorial 🙂
JazakAllah May Allah give u reward for this waiting for another video keep good work sir ….
Wow..! great tool…. thanks for posting.
Thank you Sir , very helpful 🙂 🙂
Aoa sir what about next video??
Mudassir bhai nice initiative,!
Sir its great
what about next video on How to use this tool ?
Next Video?
Thank you so much Sir it’s very helpful nice share. 🙂