In this tutorial I will show you how you can make a simple banner design in Photoshop CC. This is how my banner will look like in the end:

Banner design Photoshop

First thing to do is to open a new document in Photoshop by going to File – New or just press CTRL+N.

Choose Web from Document Type. I made my document 300 width and 250 height, which is a standard web banner ad size. Click OK. To get rid of the Artboard just right click on its layer and select Ungroup Artboards, like in the picture.

Photoshop web banner

You will be left with a transparent background. In the Toolbar there are 2 color squares, like in the picture below. One represents the foreground and one the background color. You can set them to whatever color you want by clicking on one of them and then pick a color. Then to set the color for your background layer, just use one of the following key combinations:

CTRL+Backspace = fills the layer with the background color

ALT+Backspace = fills the layer with the foreground color

I wanted to fill mine with white so I used the ALT + Backspace combination.

Photoshop web banner - Background color

If you want to use a gradient for the layer background like I have on my banner, click the background layer to select it, then right click it and select Blending Options. Go to Gradient Overlay and select it. To edit the gradient, click on the colored rectangle and then double click each color stop and select a color for them. I used #ee6903 and #ffc350. After setting up the colors of your gradient, click OK. You can then play more with the Gradient Overlay settings. Mine are pretty simple:

Photoshop web banner - Gradient

Now that we’ve set up the background let’s start adding the content.

Select the Type Tool from the Toolbar or press CTRL+T. Click on the banner and start writing your title. After writing the title, click on the little check mark on the Options bar above or just select another tool so that the change can take place.

photoshop web banner checkmark

You can change the position of the text by dragging it and dropping it where you want. Also, you can change the text color by clicking on the text layer, then select the Type Tool and finally click on the Color Picker from the Option bar, like in the image below. Then select any color you want.

photoshop web banner color picker

Now let’s insert some bullet points. To do that, select the Custom Shape Tool from the Toolbar, like in the below picture. Then, on the Options bar, click on the little rectangle that shows the shape. More shapes should appear. Select one that you like. I selected a check mark. After selecting it, hold the SHIFT key and then drag with the mouse on the canvas until the shape has the desired size. The SHIFT key constrains proportions so if you don’t want a distorted shape don’t forget to hold it while dragging the shape.

Photoshop web banner - Shape Tool

After you finish inserting the bullet points, start inserting the corresponding text next to them with the Type Tool, like I showed you earlier.

Let’s insert the ribbon now. I will show you the easiest way to do this. Select the Rectangle Tool from the Toolbar. Draw a rectangle, like in the image below.

Photoshop web banner - Ribbon

Then go to Edit, Free Transform or press CTRL+T. If you position you cursor near one corner of the rectangle, outside of it, you will notice that the cursor will turn into a curve. That means you will be able to rotate the rectangle. Drag the rectangle to the desired angle then hit Enter. Drag it to the upper right corner, where the ribbon should be. Then write the text FREE. Position and rotate it so it looks good on the ribbon. You can rotate it the same way we did with the rectangle. To change the colors of the rectangle you can use the Blending Options and select the color from the Color Overlay option or you can just click on the Fill thumbnail from the Options bar and choose a color.

Now we should insert a picture or a graphic. I’ve made a circle which contains the graphic but you can position the picture directly on the background or in another shape. The settings for the Blending Options of the circle are these:

Photoshop web banner - Drop Shadow

Photoshop web banner - Bevel and Emboss

For the call to action button just draw a rectangle like I showed you earlier, then apply these settings to the Blending Options:

Photoshop web banner - Blending Options - Stroke

Photoshop web banner - Blending Options - Gradient Overlay

Photoshop web banner - Blending Options - Drop Shadow

To make the little arrow just use the shape from the Custom Shape Tool, like you did for the check marks. The text and the little arrow have the following blending options:

Photoshop web banner - Text Drop Shadow

To copy the same Blending Options settings to another layer just right click the layer with the layer effects you want to copy and choose Copy Layer Style and then select the layer where you want to paste the effects, right click on it and choose Paste Layer Style.

You can always change the background or color of text or play with different shapes and blending options to make your banner really stand out. Don’t forget to save the .psd file by going to File, Save as. To save the banner as a .jpg file, go to File, Export, Save for Web, select jpeg, reduce the quality if you want it to be less than 45kb and then click Save. And that’s it.

VN:F [1.9.22_1171]
Rating: 2.3/5 (3 votes cast)
Banner design - How to make a web banner in Photoshop, 2.3 out of 5 based on 3 ratings