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.)
Open Photoshop and create a new file with a 160px width and a 600px height.
For the background, select the rectangle tool and create a rectangle using color #3080cd.
Now, click on “Layer” > “Layer styles” > “Inner shadow.”
Click on “Layer” > “Layer Styles” > “Inner Glow” and keep the settings the same as shown below.
Click on “Layer Styles” and add a textured pattern to the background using the following settings.
Now, create a new layer (“Layer” > “New” >” Layer”) and select the pen tool to create a shape using color #f4f4f4.
Click on “Layer Styles” and add some drop shadow to the above shape. Use the following settings.
Duplicate the above shape (right-click on the layer and select “Duplicate layer”) and fill it with color #282828.
Click on “Layer Styles” and add some pattern to the above shape. Use the setting shown below.
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.
Now add the title, select the “Type tool” and add title using color #d9d9d9. Then, click on “Layer Styles” > “Drop Shadow.”
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.
Now, paste the gift icons under the white text and add some drop shadow using the following settings.
Now, let’s start with the “Read More” button. Select the rounded rectangle tool and create a small rectangle using color #b7b7b7.
Click on “Layer Styles” and add bevel & emboss, gradient overlay, pattern overlay, and some drop shadow to the button base. Use the following values.
Now, add the button text, so select the type tool and add text using color #787878.
Click on “Layer Styles” to add some inner shadow and drop shadow to the above text. Use the settings below.
And, we are done! I hope you guys enjoyed the tutorial. I’ll be back with more fun stuff soon. Take care!
Photoshop for Web Design
Introduction to Photoshop
Next Steps in Foundation
Jump Start Sketch
The Guide To Wireframing
The Ultimate Guide to Prototyping
- 1 Why JPEGs are like McDonalds Apple Pies (and SVGs are not)
- 2 PaintCode: How to Make iOS-Ready App Graphics with Sketch App
- 3 Quick Tip: 4 Really Useful, Re-Useable Code Snippets from Codepen
- 4 5 Things Every Designer Needs to Know About Conversational UIs
- 5 How to Catch the Eye of Users (and Other Fiendish Traps)