Design Call To Action Banner in Photoshop

Hey friends, I am back with another cool Photoshop Tutorial to create Call to Action Banner in Photoshop. First of all what is call to Action Banner?

According to Wikipedia Call to Action Banners are

A call to action, or CTA, is a banner, button, or some type of graphic or text on a website meant to prompt a user to click it and continue down a conversion funnel.It is an essential part of inbound marketing as well as permission marketing in that it actively strives to convert a user into a lead and later into a customer. The main goal of a CTA is a click or a scan in the case of a qr code, and its success can be measured via a conversion rate formula that calculates the times the CTA was seen over the amount of clicks. Another way to test the effectiveness of a CTA is using A/B testing where several graphics are presented to a user and the graphic with highest success rate becomes the default.

So let me show you a tutorial where we will be create a Call to Action Banner in photoshop.

#1. First open Photoshop and create a new document with size 300×250 and resolution to 300

call to ction 1

#2. Now create a new Rectangle covering the canvas and fill it with Gradient #0948d9 and #0790fa and choose radial from the Gradient Menu

#3. Now add some Add the graphic or screenshot of your desired website showcase. I am using MashDesigning Snapshot, and make it some thing like this, using Direct Selection Tool

call to action 2

#4. Now add reflection of the screenshot, duplicate screenshot and decrease the opacity.

#5. Its time to add some Call to Action Text, remember it should be very catchy I m writing “Want web site design like this? I am aligning the text in typographic style.

Here is after the complete text

#6. Let us, add some arrows to make it more attractive, I am using custom shapes Arrows

#7. OK, Its time to Add a Big Call to Action button, create a new rectangle and use Gradient with colors #b5f508 and #8bbc05 and choose Linear from Blending mode Gradient Mode> Style to Linear. And you will get something like this:

#8. Now add the call to action button text, I am writing “Get it NOW!” and add the stroke with size 2 and color #0a5902. You will get something like this.

#9. And your Call to Action Banner is ready in Photoshop. Have a look

Have a look at some cool variations:

Download PSD From LazyBuddy

Hope you enjoyed the tutorial, please visit again for more tutorials.

3 Comments