Nerd Party: Creating a Banner in Photoshop

Banners are super popular lately, so I thought I’d make a little tutorial on to create two types of banners – one that wraps around an object and one with ribbon edges.

Open a new document and create a new layer. Use the marquee tool to draw a rectangle and fill with a color using the paint bucket.

Create another layer, using the marquee tool again, draw a short rectangle the same height as the first one and fill with the same color.

Move the small rectangle to the side and about half way down the big rectangle. Use the polygonal lasso to draw a triangle and click delete to clear the color.

Right click on the small rectangle layer to make a duplicate. Then click edit > transform > flip horizontal and move the second small rectangle to the right side of the big rectangle creating the second flag.

Right click on the big rectangle layer and select blending options to add a drop shadow. You can right click and copy the layer style and then paste it onto the other layers.

Add another new layer and use the polygonal lasso to draw another triangle. Fill this triangle with a color slightly darker than the main banner.

Duplicate the darker triangle layer, edit > transform > flip horizontal and slide it over to the right side. Now get your layers in order – the big rectangle goes on top, then the little triangles, then the flags. (click on the layer name to change it – this is very helpful if you’re working on a project with a ton of layers. You can also click that little folder icon to organize them into groups.)

For this example I added a background and title along with a white rectangle, which I put right under the big rectangle layer.

You can also turn off the flag layers for a slightly different look.

What if you want to give the banner a little arch? Make sure the big rectangle layer is selected, then click edit > transform > warp.

You’ll notice the toolbar will change to give you multiple transformation options.

Click arc and then adjust the bend – I set mine at 7.

Lastly, tilt the flags slightly to match the bend of the banner. You can do this by clicking on the layer and making sure Show Transform Controls is selected in the toolbar. Then hover over a corner until you see the cursor change to allow you to rotate.

Now, if you’d like to use this at the top of your site with a background underneath you’ll need to turn off all the background layers, crop just the header portion and save for web as a PNG.

Any questions??

Click here for more Nerd Party posts!

Share/Bookmark