Here is a slick Page Peel banner ad design that you can use to promote deals, offers or promos to your website visitors. In this case it’s for an iPad give away but you just need to change the iPad images and text to make it your own.
Page Peel Script Ads is a small animated dog-ear flittering on the top right side of a website. It looks like the corner of the web page is peeled down, revealing a hint of something behind it. If you are looking to promote a new product to your visitors or offer a special deal then it’s worth using for sure.
If you want to download the source files and save some time click the image above, if not and want to create it all from scratch then read on.
Step 1 –
Create a new document at 800 x 500 Pixels and at 72 dpi.
Step 2 -
Download the Summer Saver Fire brush here
Step 3 –
Set your foreground color to black and background color to white like so.
Step 4
Install the fire brush by clicking the .abr file you downloaded and then select it from your Brush Preset Picker.
Step 5
Create a new layer and then apply the brush to the center of the screen. This is what you should have.
Step 6
Now it’s time to add a little bit of color to get it looking all firey.
Choose Image >> Adjustments >> Gradient Map
The gradient map pop up box will open and should look like this:
Now it’s time to add the color. Just click on the gradient itself to open up the Gradient Editor like so
This will open the Gradient Editor
Apply these color codes to it
and et voila you should get something like this. If not, don’t worry just make it look like fire as best as you can and it will be fine:
Step 7
To make life a little easier draw a boundary guide. I use a curl effect from the page it will be going on so I can see exactly what I am making. If you download the swipe file used to make this above then you will find the same corner peel template I used which you can use to mark out what will be seen by the end user.
Step 8
Now each and everyone of you will have a different niche and a different offer to promote. However, as far as I can tell the most important call to action will be a ‘Click Here’ button to get prospects to land on either a sales or squeeze page.
How you will lay it out it will depend on the dimensions of your image used to promote your specific offer. For the purpose of the rest of this tutorial I will use it to promote a free iPad give away using this iPad Graphic
Step 9
Download the iPad image as indicated above and then just reduce it down and rotate it as desired. In this tutorial we have used three duplicates of the same file , but use as many as you like.
Step 10
Next, we want to add a ‘blackout layer’ again how you do this will depend on what your image or icon will be. Create a new layer below your image layer and select the brush tool at around 30 pixels and make sure you have black set to your foreground color. All you need to do is create a nicer darker color to the image so when we apply text to it later on it is more clearer to read. This is what I did but it isn’t rocket science so just go nuts.
Step 11
Now lets add some text to promote what the offer is. Keep it short and sweet so people get it straight away. As I am promoting an iPad giveaway I made sure to use a Maccy type font like Verdana. Create a new layer and tap in what you want it to say and then use the same font to enter a sub header. The top line is 47pt’s and the bottom is 25pts. I then applied a very fine drop shadow to make it stand out a little over the areas I have not fully covered with the blackout layer.
Leave a little space at the top right so you can drop in a Sale Star of around 30×30 px if desired. Here is what you should have.
Step 12
There are lots of free star psds all over the web, some good some bad. However it’s good practice to make our own so lets go. Select the Custom Shape Tool as indicated below.
Then select the star shape from the drop down menu at the top of the screen.
Using layer styles apply a gradient to it with the following colors
So you have something like this. We could go all fancy here and add some glassy web 2 effect but for ease of this tutorial we will assume that this is adequate.
Now all we need to do is add some text about our offer. In this case I will add the words 100% Free on two lines in white using Arial font like so
Step 12
Now let’s get to work on the button for people to click. Select the rounded rectangle tool and give it a radius of around 10px.
And then apply the following layer styles:
Which should leave you with this
Now all we need to do is add the text ‘Click Here’ I used Arial sized 24 pt and with this color
Which should leave you with this
Now all you go to do is use it.
If you liked it tweet it, bookmark it and pass it on!
