How to Create Simple Web Banners using Adobe Illustrator

How to Create Simple Web Banners featured header

Hello!! Thanks for joining with us again guys, today we are going to show you how to create simple yet awesome web banners using Adobe Illustrator.

If we make a little intro about the web banners, we can say that they are mainly used to promote either your web site or your service ( ex: selling a property, special offers, web sites that are freshly launched and need attention, membership offers, services and equipment sales web sites). There are mainly 14 sizes of web banners as the standard.

Before we begin, we are just reminding you that, if you haven't, you can always subscribe to our tutorials here to get the latest tutorials with project files from DesignOptimal.com to your email inbox in no time and you will never miss an awesome design tutorial again :) .
Download the Project File

The sizes are,

250x250px|300x250px|240x400px|300x600px|200x200px|120x600px||160x600px

|468x60px|320x50px|320x100px|336x280px|728x90px|970x90px|970x250px

Below is a comparison artwork to show how the sizes vary when making web banners.

Comparison of banner sizes

Comparison of banner sizes

Resources (all credits goes to original authors)

Step 01

Now we will show you how to create some web banners, and how to change the elements according to the banner sizes.

  • Open adobe illustrator and make a new document of A4 size.
  • We will be doing some simple banners to these sizes. 970x250px|300x600px|160x600px|300x250px|320x100px.
  • Let’s start with banner size 970x250px.
  • Select the Rectangle shape tool and double click it.
  • Enter value and click ok.
1.1

1.1

  • Fill the document with below gradient or any other color that you prefer.
  • Now import a vector face (same or similar to the one we have used) and place it like shown below.
1.2

1.2

  • Next, get the type tool and start typing the word called “The best graphics tutorial web site ever”.
1.3

1.3

  • Next get the font as Neutraface Condensed Titling and font size is 28px.
  • Make the BEST GRAPHICS TUTORIALS text bigger with around 50px size to stand out from the other text.
1.4

1.4

  • Now next type the word DO with the same font and place it in the far left hand corner of the document and below that type design optimal the font is Ostrich Sans.
  • The DO font size is 140px and the design optimal text size is 35px.
1.5

1.5

Step 02

  • Next type the sub text below the main text as “Join now and enjoy the tutorials for free”. The font size is 20px.
  • And we will have to add a button to click typed Sign up Now. The font size is 30px and the rectangle used in back for the button will be #2B3990.
  • Now where the DO text is, we will have to draw a shape like below to make the “DO” name more attractive.
  • The color of the shape is #1C75BC, duplicate the same shape and fill it with #2B3990 and send it to back and the final result so far will be as below screenshots.
2.1

2.1

2.2

2.2

2.3

2.3

2.4

2.4

Share Your Thoughts Here...
Loading Disqus Comments ...
Share with your friends










Submit