1. Design & Illustration
  2. Add-Ons

Quick Tip: How to Create a Simple Banner

Scroll to top
Read Time: 3 min
This post is part of a series called Web and Interface Design With Vector.
Quick Tip: How to Create a Simple Vector Web Ribbon in Adobe Photoshop
How to Create a Set of Rubber Band Corner Banner Treatments in Illustrator

In the following tutorial you will learn how to use the Drop Shadow effect and the Warp options to create a simple banner. The design is perfect for web and print and can be customized with different fonts and colors. Let's get started!

Step 1

Go to File > New. Enter 510 in the width box and 170 in the height box then click on the Advanced button. Select RGB from the Color Mode drop down menu then click OK. Now that you created your document turn on the Grid (View > Grid) and the Snap to Grid (View > Snap to Grid).

Next, you'll need a grid every 10 px. Go to Edit > Preferences > Guides & Grid, enter 10 in the Gridline every box and 1 in the Subdivisions box. You can also open the Info panel (Window > Info) for a live preview with the size and position of your shapes.

Don't forget to replace the unit of measurement to pixels from Edit > Preferences > Unit > General. All these options will significantly increase your work speed.

Step 2

Pick the Rectangle Tool (M) and create a 350 by 100px shape. The Snap to Grid will ease your work. Fill this fresh shape with R=169 G=124 B=80.

Step 3

Select the shape made in the previous step and add a first stroke. Make it 8pt wide and set the color at R=232 G=193 B=155. Select this stroke (from the Appearance panel) then open the Stroke panel (Window > Stroke) and click on the Align Stroke to Inside button.

With the shape still selected go the the Appearance panel, open its fly-out menu and click on Add New Stroke. This will add a second stroke for the selected shape. Select this new stroke. Make it 4pt wide, align it to the inside and set the color to R=60 G=36 B=21.

Step 4

Pick the Rectangle Tool (M), create a 100 by 100px shape and place it as shown in the first image. Again, the Snap to Grid will come in handy. For the moment fill this new shape with any color. Select it and go to Object > Path > Add Anchor Points. Pick the Direct Selection Tool (A), select the anchor point highlighted in the second image and move it 30px to the left. Fill the resulting shape with the linear gradient shown in the final image.

Step 5

Select the shape made in the previous step and add the same two strokes used for the other shape.

Step 6

Grab the Rectangle Tool (M), create a 50 by 10px shape and place it as shown in the first image. Focus on this shape. Pick the Delete Anchor Point Tool (minus) and click on the bottom, right anchor point. Fill the resulting shape with R=60 G=36 B=21.

Step 7

Select the shapes created in the last three steps and go to Effect > Transform > Reflect. Check the Vertical button then click on the Copy button. This will add a horizontal flipped copy of the selected shapes.

Step 8

Select the copies made in the previous step and move them as shown in the first image. Once again, the Snap to Grid will ease your work. Select the gradient from the larger shape and set the angle to 180 degrees.

Step 9

Pick the Type Tool (T), and add your text. You can use the "Batik Regular" font with a size of 60pt and set the color at R=60 G=36 B=21.

Step 10

Select all the shapes created so far and group them (Control + G). Select this new group and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.

Step 11

Finally, reselect the group and add the Warp effect (Effect > Warp). Experiment until you find the one you like. Here are some examples.


There you have it, an easy way to make a simple banner. Experiment with different styles and finishes and see what you can come up with. I hope you've enjoyed this tut.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
One subscription. Unlimited Downloads.
Get unlimited downloads