Photoshop

How to create amazing website Ad banners in Photoshop

How-to-create-animated-website-ad-banners-in-Photoshop
Written by Ahfaz Ahmed
Website banners help in promotion of anything. It may be your website or a product. People nowadays spend too much hiring designers to make banners. It is a good practice but if you are a designer yourself then why are you wasting your skills and just wasting money?
So in this post you will learn how to create simple amazing website ad banners in Photoshop. Even a person who never used Photoshop can make amazing banners by reading this tutorial. So let’s not waste time and get started.
 
How-to-create-animated-website-ad-banners-in-Photoshop
 
Here we will be creating a 728*90 top header banner.
 
1 – Create a new document in Photoshop with the following settings.
 
How to create amazing website Ad banners in Photoshop
 
 
2 – Now click on the background layer and select Layer from background and name the layer as “Background” as shown below.
 
 
How to create amazing website Ad banners in Photoshop
 
How to create amazing website Ad banners in Photoshop
 
 
 
3 – Then open the blending options of the Background layer and select stroke with size: 2px, Position: Inside, Opacity: 100% and color to a dark orange or as per your choice.
 
How to create amazing website Ad banners in Photoshop
 
 
4 – Select the type tool and type the name of your company as shown below. I am using “Batman Forever” font here. Choose the color to the one which you used in stroke.
 

>How to create amazing website Ad banners in Photoshop

 
 
5 – Again select the type tool and type tagline of your company below the name of the company in a small size and black in color.
 
6 – Now select the rectangle tool and create a small thin long rectangle black in color as shown in the image.
 
How to create amazing website Ad banners in Photoshop

 

 
7 – Hold Ctrl+T to transform the image. Just tilt the image little bit as shown below.
 
How to create amazing website Ad banners in Photoshop
 
How to create amazing website Ad banners in Photoshop
 
 
 
8 – Again select the rectangle tool to create another rectangle with a bigger size and the color same to that of the company name. Rotate and place the image as shown below.
 
How to create amazing website Ad banners in Photoshop
 
 
9 – Select the type tool and type the text which you want to display on the big rectangle.
 
How to create amazing website Ad banners in Photoshop
 
 
10 – Your banner is complete. Now to make it look more professional, select the layer of the company name and open the blending options. Choose the settings as shown in the image below.
 
How to create amazing website Ad banners in Photoshop

 

How to create amazing website Ad banners in Photoshop
 
 
11 – Now again select the rectangle tool and create a thin long rectangle of black color. Select Ctrl+T to rotate it as shown below.
 
How to create amazing website Ad banners in Photoshop
 
 
12 – Now place this layer above the Company name layer. Select it and then press Ctrl and click on the Company name layer. You will see the Company name highlighted as shown below.
 
How to create amazing website Ad banners in Photoshop

 

 
 
13 – Now click on the top right of the layers section and click on create clipping mask or simply press Alt+Ctrl+G to create the clipping mask.
 
How to create amazing website Ad banners in Photoshop
 
How to create amazing website Ad banners in Photoshop
 
 
14 – Repeat the same step with the tagline text as shown below.
 
How to create amazing website Ad banners in Photoshop
 
 
15 – Your web banner is ready now!
 
GT-Web-Banner1
 
How simple was that. You can create different types of banners just like this. Now many people do not get enough ideas to create amazing banners. Those people can check on google images different banners and also on different types of websites.
 

 

Also you can read this post on how to be creative in designing which will surely help you. Moreover you can ask your questions or give new ideas by commenting below.

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