Create a Clean, Colorful 160 x 600px Advertisement

Tweet

To achieve the level of online exposure that your business needs, you need to design a strong, compelling advertising campaign, no matter what you are selling or offering. The most widely-used advertising option for this purpose is banner ads. If you’re not experimenting with banner advertising, you’re missing out on an important opportunity to reach new customers and secure new business. So, today we are going to design an eye-catching 160 x 600px banner ad in Photoshop. We will use some interesting techniques and blending options to create this ad. So, let’s get started!

Final Result: (Download the Layered Design File.)

final

Step 1

Open Photoshop and create a new file with a 160px width and a 600px height.

Step 1

Step 2

For the background, select the rectangle tool and create a rectangle using color #3080cd.

Step 2

Step 3

Now, click on “Layer” > “Layer styles” > “Inner shadow.”

Step 3

Step 4

Click on “Layer” > “Layer Styles” > “Inner Glow” and keep the settings the same as shown below.

Step 4

Step 5

Click on “Layer Styles” and add a textured pattern to the background using the following settings.

Step 5

Step 6

Now, create a new layer (“Layer” > “New” >” Layer”) and select the pen tool to create a shape using color #f4f4f4.

Step 6

Step 7

Click on “Layer Styles” and add some drop shadow to the above shape. Use the following settings.

Step 7

Step 8

Duplicate the above shape (right-click on the layer and select “Duplicate layer”) and fill it with color #282828.

Step 8

Step 9

Click on “Layer Styles” and add some pattern to the above shape. Use the setting shown below.

Step 9

Step 10

Repeat the same process and create the same shapes at the top. Keeping the color and style consistent, and change the drop shadow settings very slightly. Use the settings below.

Step 10

Step 11

Now add the title, select the “Type tool” and add title using color #d9d9d9. Then, click on “Layer Styles” > “Drop Shadow.”

Step 11

Step 12

Select the “Type tool” again and add the rest of the text using colors #f7f7f7 and #64a2d8. Then, add some drop shadow to the text.

Step 12

Step 13

Now, paste the gift icons under the white text and add some drop shadow using the following settings.

Step 13

Step 14

Now, let’s start with the “Read More” button. Select the rounded rectangle tool and create a small rectangle using color #b7b7b7.

Step 14

Step 15

Click on “Layer Styles” and add bevel & emboss, gradient overlay, pattern overlay, and some drop shadow to the button base. Use the following values.

Step 15a

Step 15b

Step 15c

Step 15d

 Step 16

Now, add the button text, so select the type tool and add text using color #787878.

Step 16

Step 17

Click on “Layer Styles” to add some inner shadow and drop shadow to the above text. Use the settings below.

Step 17a

Step 17b

final

And, we are done! I hope you guys enjoyed the tutorial. I’ll be back with more fun stuff soon. Take care!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Skweekah

    Nice tut. It all comes down to doing. It’s all good to read tuts, but youve got to dust of the ol netbook and work through your very thorough, detailed steps. Now, have to find the time, and the energy…