How to design an effective web sale banner for an eCommerce website

Today, I will teach you some graphic design tips and tricks. Today we will learn How to design an effective sale banner for an eCommerce website.

Here is the look.
How to design sale banner in photoshop

What is the importance of sale banner in website.

A web banner or an ad banner is form of advertising on internet. It works like magic when comes to selling product online. It just depends on how you design your creative. In this banner design tutorial , We are creating banner for an e-commerce website which sells microwave ovens. The subject here is “Company is selling microwave ovens at minimum 30% off.” We have to design web banner on this subject.

Resources used in design of this creative

1. I have taken Microwave ovens images from Google. If image is very specific, you can demand it from your client.
2. Some Icons from any free icon provider website. I suggest to use for icon resources.
3. Good Looking font.

Steps to follow

1. Setup Photoshop Document.

Create a new layer in Photoshop (Ctrl/Cmd + N) with dimensions of width 700px width and height 300px.
Save it as banner.psd

Fill background with gradient and set margin from all four sides.

Fill background with gradient. Grey from top and bottom and white in between. Take 30px margin from top, bottom, left and right side. Place grid there. These grids will help you in align your objects.

Divide the Space in two Parts

Divide the banner in two parts with grids. Drag grid from left side and place it at 300px from left. Left 300px is for content part and remaining right space for graphic part.

Insert your image and give some effect

Now select microwave oven image from your source folder and place it on your creative.
Place it on left side vertically center. Adjust color make it transparent and give little bit shadow

Want to Learn to create these type of banners, Web layouts , html templates, wordpress etc. We are offering complete Web designing course for aspiring students.

Add content in left side of banner

Set the font style to Calibri and write your text in three lines.
Complete your kitchen with
Conventional Microwave Ovens
Minimum 30% Off.
In this content main part is “Minimum 30% off”. User comes on website for the deal. So we have to highlight discount very clearly.
Set the font style to calibri and font size of first two lines to 16 or 17 pixel
Set the font size of third line to 37px.

Add some more content in left side of banner

Now some wants more from seller in addition to discount. Mention some features here like warranty, Brand information, Free installation etc.Now we will write three features of the microwave in next line after the discount.
30 Days Return
Brand Warranty
Free Installation
add some icons with this text to make it more appealing.

Add Shop Now Button

Finally add shop now button. Totally contrast in color. Single button. Add a small arrow on left side of show Now text. Arrow is giving you direction to click on the button and move forward. Never add more than one button on one banner. Extra button will confuse user where to click.

Your Banner is ready. You can add some elements to make this banner more appealing. Like underline main text. Give some line height in text. Spacing between elements.
Now you can play with different text, colors and backgrounds. Here are some examples.

See the Video Tutorial


1 Comment
  1. John says

    Hello ! Great tips you have share for how to design effective web sale banner for an e-commerce is easy step by step tutorial to follow,Any suggestion for creating animated gif banners ? Thanks in advance

Leave A Reply

Your email address will not be published.