Design An Eye Popping Banner

Step 1

Create a new document, I made mine 1100px by 700px. It doesn’t matter what you use so use whatever you want. Fill the background with a color that you want. I chose #f9eddf.

Step 2

In this tutorial I’m going to be making the banner wrap around the container of a website. If you are going to do this aswell, create a new layer above the background layer and make the container using the Marquee Tool. I made mine 600px wide and 100% tall and filled it with white.

Step 3

Select the Marquee Tool (M). Make a selection a little bit wider then the container. I made mine 686px by 60px (Remember my container is 600px wide). Fill it with #f26c4f

Step 4

Duplicate the layer you just made, select the Move Tool (V) and move the newly made layer down about 40 pixels

An easy way to do this is to use the arrow keys while holding down the Shift Key. Each time you move the selection while doing this will move it 10px. So just hit the down arrow four times.

Move layer below the container.

Step 5

Select the Polygonal Lasso Tool (L) and cut out the ends of the layer that you just made in the last step by drawing a triangle from each point to somewhere in the middle of the banner.

When you have drawn the selection hit Delete

Step 6

With the Polygonal Lasso Tool still selected draw a triangle at the bottom of the first banner going all the way to the bottom of the second one.

To create a triangle that looks good, create Paths (The easiest way to create a path is to turn on the Rulers and just click and drag from the ruler on to the document and unclick where you want to place the guide) on the outer side of the first banner as well as the bottom side and on the second banner create one on the inner side as well as the bottom of it. If that was confusing look at the picture to see the guides as well as the selection I drew.

Once you have made the selection create a new layer and fill it with #a54a36. Duplicate the first triangle layer and use Free Transform to flip it horizontally and move it to the other side of the banner.

Step 7

All that’s left is just adding finishing touches to the banner.

You can create a shadow, to do this duplicate both layers of the banner and fill them with black. Move them down a few pixels and change the layer opacity to 10%.

Lastly, Add text to the banner and your all done!