Photoshop

How to create animated website Ad Banners in Photoshop | Graphic Tunnel

How-to-create-animated-website-ad-banners-in-Photoshop
Written by Ahfaz Ahmed
Advertising is a key role for a successful business and when it comes to website Ads then the advertiser should know what can attract people to click on his/her ad. Spending money on advertisements is good as it helps us but people spend a lot in making good advertisement banners. It’s very easy and can be done by anyone. What you need is just Adobe Photoshop and you can create amazing website banners in minutes. We also see animated web Ad banners and now people think that they cannot create such banners and they again hire someone. You can also create animated website ad banners in Photoshop and if you want to learn how to make such banners so you are at the right place.
 
How to create animated website Ad Banners in Photoshop | Graphic Tunnel
 
 
In this tutorial you will learn how to create amazing animated website Ad banner in minutes. It’s very simple. You just need Adobe Photoshop and you can create attractive animated web banners. But if you don’t know how to create simple banners you can check out our previous post. This post is a continuation of our previous post on How to create website ad banners. We are using the same banner which we created and do some tweaks to make an animated banner. So before getting started you need to know that this tutorial will help you create different types of banners whether they are animated or not. The main thing is getting different ideas for the banner.

Tutorial

 
1 – Open the PSD document of the previous banner which we created. If you have not saved it then you can download the PSD file from here.
 
2 – Now as you can see, there is a text “Learn Graphic Design”. We will add some animated text there. Duplicate that text layer and type “Learn Motion Graphic”.
3 – The image will overlap the previous text layer but you need not worry as we will make some changes in it.
 
4 – Again duplicate the text layer and type “And Much More…” as the text of the layer.
 
How to create animated website Ad Banners in Photoshop | Graphic Tunnel
 
5 – Now select the window menu and click on timeline. You will see a small window appear just below the main document.
 
How to create animated website Ad Banners in Photoshop | Graphic Tunnel
 
 
6 – Now for the sake of simplicity we will use short names for the three text layers.
 
We will name – “Learn Graphic Design” as Text 1
“Learn Motion Graphic” as Text 2 and
“And Much More…” as Text 3.
 
7 – Select the Text 2 and make the opacity zero. Similarly select the opacity of Text 3 to zero. Now Text 1 will be clearly visible.
 
8 – Now click on the duplicate current frame button below the timeline window and select the opacity of Text 1 to 80%.
 
How to create animated website Ad Banners in Photoshop | Graphic Tunnel
 
 
9 – Again select on the new fame button and select Text 1 opacity to 60%. Similarly follow the step reducing the opacity by 20% until it becomes zero.
 
How to create animated website Ad Banners in Photoshop | Graphic Tunnel
 
10 – Now click on the new frame button. In this frame the opacity of Text 1 should be zero. Now select Text 2 and change it’s opacity to 20% and keep on increasing the opacity by 20% in each frame until it becomes zero.
 
11 – Now using the same way reduce the opacity of Text 2 by 20% in each frame till zero.
 
12 – Now repeat the same step for Text 3. First increase the opacity in each frame from 0 to 100% and then reduce the opacity from 100% to zero.
13 – Click on the play button. You will see the Text fading in and out. You can change the time period for each frame also. I am using the default zero seconds.
 
14 – Now click on File>Save for web. Select GIF image and change the settings as shown below. Your animated web banner is ready.
 
How to create animated website Ad Banners in Photoshop | Graphic Tunnel
 
How to create animated website Ad Banners in Photoshop | Graphic Tunnel

Final Result

 
How to create animated website Ad Banners in Photoshop | Graphic Tunnel
 
 
 
How simple and easy was that! To some people the tutorial may seem difficult but when you make it then you will realize how easy it is. Just remember to save the image in GIF format. This is one the benefits of GIF images that helps us to create such animated web banners. Such banners help in promotion of your business. In this way you can promote your business using Photoshop. If you are facing any difficulties in this tutorial then you can comment below or contact us. Moreover you can subscribe us for more updates, tricks and tutorials.

About the author

Ahfaz Ahmed

Ahfaz Ahmed is a young entrepreneur who loves to write on various topics related to Graphic and Web Design. He has worked on many blogs and also works as a Freelancer. Apart from blogging, he is also a graphic designer and a web developer.

Leave a Comment