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.
Learn PHP for free!
Make the leap into server-side programming with a comprehensive cover of PHP & MySQL.
RRP $11.95 Yours absolutely free
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!
Anum is Web and Graphic designer. Addicted to Photoshop and crazy for pixel perfection. She is also an active blogger, sharing her passions, skills and creative details on her blog Websoulz. She loves to connect with the community, sharing the latest design gossips and rolling her eyes on boring trends.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers