Design & UX

Build an Eye-catching Banner Ad in Illustrator

By Anum Khan

You’re not just competing for revenue online; you’re competing for attention. Advertising professionals are constantly searching for new ways to stretch their advertising budget, garner as much exposure as possible, and ultimately get the right eyeballs on the right products and services. These kinds of techniques have varying degrees of success, but there’s no trick that has a greater influence than the design of the advertisement itself.

Today, I’ll show you how you can make such an ad in Adobe Illustrator. I’ll design a banner for a fictional app icons promotion as an example. We’ll use shape tools, pen tool, and various options within the objects and effects menu. You’ll learn few handy tips along the way that can help streamline and amplify your sales. So, let’s get started!


Leather Texture
Book App Icon
Aller Font
Bebas Font
Lobster Font

Final result:

banner ad

(Downloaded the finished Illustrator file.)

Step 1

Create a new document in Illustrator with a 600px width and a 400px height.
banner ad

Step 2

This banner will be completely vectorized, so size doesn’t really matter; it can be scalable to any size you want. Let’s begin with the banner base. Pick #058293 as your fill color and select the rectangle tool (M). Click on the canvas and enter 445px for width, enter 215px for height in the rectangle window, and hit “Ok” to get a rectangle identical to mine. Label it as “Base”.
banner ad

Step 3

Next, we’ll apply a pattern over the base. Go to “Swatch Libraries” > “Patterns” > “Decorative” > “Decorative_Classic” and choose “Waves Smooth Color” from the available options. This new pattern should appear in your swatches. Now, select the base layer by pressing the ring-shaped target present at the right side of the respective layer and double-click the contents within the appearance panel (Shift + F6). Select the “Fill” attribute and click on the “Duplicate Selected Item” icon present at the bottom of the appearance panel. Apply the “Waves Smooth Color” pattern to this new fill attribute and decrease its opacity to 45%.
banner ad

Step 4

To make the footer, pick #C94724 as your fill color and draw a rectangle with a 445px width and a 45px height just above the lower border of base rectangle.
banner ad

Step 5

Next, we’ll bring the icon on the canvas. Go to “File” > “Place” and choose the “Book App Icon” file. Decrease its size according to your banner size and position it as shown below.
banner ad

Step 6

We’ll highlight the area behind the icon a bit. Pick white fill color and draw a rounded rectangle on a new layer below the icon with the following settings using the rounded rectangle tool. Simply pick the tool, hit the canvas, and enter the following values. Label the rectangle as “Glow”.
banner ad

Now, select the “Glow” and go to “Effect” > “Blur” > “Gaussian Blur”. Apply a 15px Gaussian blur effect to it.
banner ad

Reduce the “Glow” opacity to 40% within the transparency panel (Shift + Ctrl + F10).
banner ad

Step 7

Next, we’ll add the text. Pick the type tool (T) and type in your title using a white fill color. I’ve used “Aller” font here with the settings shown below.
banner ad

Step 8

Select the text layer and go to “Object” > “Expand Appearance”. Once again go to “Object” > “Expand”. Expand both the fill and stroke. While the text is still selected, go to “Object” > “Path” > “Offset Path” and offset it by 1px.

Now, change its fill color to #39423E and drag it 1 step downwards and towards the right to get the effect like mine.
banner ad

Step 9

Now, we’ll use the “Bebas” font to add the text. Use the following settings here.
banner ad

Step 10

Select the text and go to “Object” > “Expand”. Expand both the fill and the stroke. After that, duplicate the text and place it below the original layer. We’ll use the copy in the next step. Select the original layer and go to “Object” > “Path” > “Offset Path” and offset it by -2px and change its fill color to #39423E.
banner ad

Step 11

Select the duplicated layer now and change its fill color to #39423E. Offset its path by 1px, change its color to #39423E, and drag it 1 step downwards and towards right exactly like we did in step 8.
banner ad

Step 12

Add more details using the “Aller” font with the following settings.
banner ad

Select it and go to “Effect” > “Stylize” > “Drop Shadow”. Apply the following settings here.
banner ad

Step 13

Duplicate the text layer, position it over the footer, and edit the text as needed.
banner ad

Step 14

Next, we’ll make a ribbon. Pick #2E3532 as your fill color and select the pen tool to draw the ribbon shown below.
banner ad

Step 15

To make stitches over the ribbon, draw a line using the line segment tool near left border of the ribbon. Pick a white stroke (1pt stroke weight) and apply the settings below in the stroke panel. Then, decrease its opacity to 35%. Once you are done, duplicate the stitched line and position it along the right border.
banner ad

Step 16

Draw a circle with a white fill using the ellipse tool. Select it and go to “Object” > “Path” > “Offset Path” and offset it by -2px. Set its fill color “none” and give it a 1pt light gray (#BCBEC0) stroke. After that, apply the stitch effect to the stroke by using the same settings in the stroke panel that we described in step 15.
banner ad

Step 17

Add text over the badge now. I’ve used the “Lobster” font here.
banner ad

Step 18

Next, we’ll make the button in the footer area. Draw a rectangle with a white fill color as shown below. Apply the stitch effect inside it the same way as performed in step 16.
banner ad

Add text over the button. I’ve used the “Bebas” font here.
banner ad

Step 19

To make the button’s shadow, draw a rectangle with a black fill color. Select it and go to “Effect” > “Distort”> “Transform” > “Free Distort” and bring the top corners of the rectangle closer as shown below. After that, apply a 1.5px Gaussian blur filter to it and change its blending mode to “Multiply” and its opacity to 60%.
banner ad

Step 20

Lastly, we’ll apply a texture to the banner. Place the ribbon and button layers just above the base layer. Now, go to “File” > “Place” and choose the “Leather Texture” from the resources. Place the texture above the base, ribbon, and button layers. To confine the texture to the banner, draw a rectangle completely covering the banner over the texture layer and set its fill and stroke color “none”.
banner ad
After that, select both the texture and rectangle layers and go to “Object” > “Clipping Mask” > “Make”. Change the blending mode of texture to “Soft Light” and set the opacity to 25%.
banner ad

Final result:

banner ad

That’s it! I hope you enjoyed the tutorial and have the tools to build a banner ad worthy of your purposes.

  • Anonymous

    I used the cubist logo from the last exercise for a new project, and now I can probably apply what I’ve learned here to one of my sliders…. Thanks for these design pieces, they’re really easy to follow. :)

  • John Fejsa

    Links to finished Illustrator file and Book App Icon didn’t work.

  • John Fejsa

    Cancel my comment above; links to Drop Box are blocked by our communications unit. I’ll try from home.

  • qdesign

    I’m curious why in step 3 you duplicated the appearance layer. I don’t see that this step changed the art in any discernible way. Perhaps I’m missing something.

    • Anum

      I’ve duplicated only the “Fill” attribute in step 3 to apply pattern over it.

  • mahi

    Amazing tutorial, it took me few hours to figure it out but I think it was well worth. Thankyou so much for the detailed tutorial. Look for some more awesome ones.

  • Glenn

    You images aren’t loading. XML is reporting an Access Denied issue.

    • Anonymous

      Glenn, images appear to be loading fine in all browsers and OS tested. Can you provide more detail?

Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Design, once a week, for free.