Wednesday, January 19, 2011

[AI] Great looking banner-like design.

100% Vectorized banner design.

   1. Open a new Illustrator web document. I've used a 624*351px artboard.
 Using the Rectangle Tool (M) draw a rectangle that covers the entire artboard. Apply a Radial Gradient to this rectangle.
Here's the gradient I've used.

   2.  Duplicate the layer containing the rectangle. Open the Window->Swatches panel and then open the Basic_Graphics_Texture tab (as shown below).

Now, select the duplicated rectangle layer using the Direct Selection Tool(A) and choose a texture you like from the patterns tab. Lower this layer's opacity to around 10%.

   3. Select the Ellipse Tool (L) and draw a circle holding SHIFT. Change the fill color of this circle to none, apply a white, dashed stroke. The Weight of the stroke MUST be as big as the Width&Height of the circle.
CTRL+F10 to open the Stroke window.
SHIFT+F8 to open the Transform window.
If you change the size of the circle, remember to change the size of the stroke.

   4. Expand the shape created above by using Object->Expand. Change blending mode to Overlay and lower the Opacity to 50%. Also, apply a White -> Gray gradient on this shape.

   5. Group all the layers created until now, and name the group "background".
Using again the Rectangle Tool, draw another rectangle, wider then the artboard, but smaller in height.
Make this rectangle white, 30% opacity and add an Effect->Stylize->Drop Shadow. 

I've got this:

   6. Now we can add some text. Using the Text Tool(T) draw the text you want (I've used Myriad Pro Black font). Expand the text layer and apply a 90degree liniar metal gradient (from the gradient swatches). I've also added a small drop-shadow.

   7. You can add another, smaller text as the tagline, or website, or whatever you need.
As a final touch you can add some Flares using the Flare Tool (you can find this tool in tools panel, inside the group containing Rectangle Tool and Ellipse Tool).
Here where I've placed flares. :)

Done :D...

If you need, I've uploaded the .ai HERE

If there's any unclarity, simply ask in the comment section below.


  1. I'm impressed, I must say. Very rarely do I come across a blog that's both informative and entertaining, and let me tell you, you've hit the nail on the head.

  2. This blog is very good & informative.I have gain so much information from this blog.All the tips are very useful for me.I like your blog.Thanks for the post.I am waiting for your new post.

  3. I am sure these will give quality design for website.