Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Photoshop  Home Photoshop Web Layout Layout for Adsense
rss

Layout for Adsense

Author: amitk More by this author


Open a new document in Photoshop.
The size should pe 728 x 900 px
If you ask why i chose this size you can see that the first ad on the Google Adsense Ad Formats page has the width 728 px

Create a new layer and select Rectangular Marquee Tool
Then make this settings:

image 1

Then press one time on your document and you will see that a selection will appear. Try to place this selection on top of the document. This will be our header.

Then with the Gradient tool try to fill this selection
Please use for the foreground color #000074 and for background color #333333
After you have the colors like mine keep pressed the Shift key and draw a small line inside the selection from bottom to top.
Then press Ctrl+D to deselect

You will have this result. (the next image is scaled down):

image 2

Now one more time we have to create a selection for our buttons. instead this buttons we will add adsense code.
So please create a new layer. ( press Ctrl+Shift+Alt+N )

Grab the Marquee tool and use this settings:

image 3

Then place the selection under the header.
I will fill this selection with a grey color. We will need it on a white color but I want to show you only where do you have place for adsense.

the next image is scaled down:

image 4

On the grey line we will place the adsense code.
Duplicate this layer and place it under this one. You will see after a few steps with another place for adding some text buttons.You will see a red navigation bar.

Now Create another layer and with the Rectangular Marquee Tool create a new selection.
This time use this settings:

image 5

Now create a selection for the left side of the layout.
i will make this image with a green color ( one more time we will not use this green color - this is just to see better the layout )

image 6

Select the green layout and press Ctrl+J ( this will duplicate the layer )

If you haven't renamed your layers you will have something like me:

image 7

Be sure you have Layer 3 selected. Change the color for this rectangle to black. (use Paint Bucket Tool to fill your rectangle with #333333 )

After you will click on the layer it is possible not to see the effect because the " LAyer 3 " is under the Green layer.
You can hide the layer for a few moments to see if your rectangle is filled with black.

Be sure you make visible the green rectangle

Select the Black rectangle
Then go to Edit > Transform > Distort and move the corners like me:

image 8

Now go to Filter > Blur > Gaussian Blur and use the following settings:

image 9

You can try also with 7,5 pixels ( this depends on you )

With the Paint Bucket Tool Change the color for the green rectangle.
We will use the white color.
This is the result:

image 10

Now select this 2 layers ( Layer 3 and Layer 3 copy ) and duplicate them.
Then go to Edit > Transform > Flip Horizontal.

Place this 2 new layers selected with the right arrow key on the right side of the layout.

Here is a small screenshot:
image 11

As you can see we have place for 3 add units.
Google allow adsense user to add 3 add units and 1 link unit. So we have place for another one.

Now we can use a very good add unit Large Rectangle Ad ( 336 X 280 )

Create a new layer and make a selection with the Rectangular Marquee Tool ( the size should be 336x280 px )

And place the "ad" like mine ( i will use a blue color )

image 12
We will not create any shadows for this ad

Now i will try to place some photos with adsense ads screenshots so you will have a good idea of how it will look like.

Layout for Adsense Tutorial: Final Result (Click to enlarge)
Click to enlarge

Please add the text buttons on the grey line.
Now you have to slice the layout and you can start using it. i know already a few friends who are suing layout like this and ..... It works ....

I will tell you why this layout it is very good. And follow also my tips

1. The user will not scroll down the page. First will click on the adsense ads and after that the user will return on your page and search your information.
2. Try to avoid borders on adsense ads
3. Try to use the the Large Rectangle Ad.
4. Create unique content
5. Drive traffic to your website as much as you can.



Author's URL: www.talk-mania.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Layout for Adsense"