website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Extreme Layout
rss

Extreme Layout

Author: CoolJeba.com More by this author


Step 1: Fire up photoshop and start a new document of size 680x700. Select the background color as #525252.

Step 2: Create a new layer and Select the Rectangular Marquee tool and draw a rectangle and fill it with #2C2C2C. Here is the preview.

Click to enlarge
Click to enlarge

Create a new layer and draw another similiar rectangle and fill it with #5B5B5B. Make the width of this rectangle smaller than the previous one.

Step 3: Now select the previous rectangle i.e the layer that contains the first rectangle that we drew. Now go to Filter>Blur> Gaussian Blur and select the Radius as 8 pixels. This is what you get.

Click to enlarge
Click to enlarge

Here you can see our background is ready. Next we will add a header.

Step 4: Create another new layer select the rectangle marquee tool and fill it with the gradient. You should get this

Click to enlarge
Click to enlarge

Let us add some banner logo and text there. Now this part depends on individuals creativity.

Click to enlarge
Click to enlarge

What I have done here is created some layers and drew some basic shapes like circle etc and filled it with black + back ground colour gradient.

Step 5: Now that our header is ready let's make the menu. Create a new layer and draw a rectange and fill it with the gradient as showing in the screenshot.

Click to enlarge
Click to enlarge

Rather than the usual menu i.e with bullets I have tried to add it with text itself like this Homepage >> About Us >> Portfolio >> Tutorials >> Wallpapers >> Affiliates the font that I have used is simple Arial Black. You can select any font depending on the font the layout's appeal may change. Here is what I got

Click to enlarge
Click to enlarge

Step 6: Now out header and menu is done. Now we need to make a place where we can put out body. Create a new layer and select the rounded rectangle shape and draw it below the menu. This is what I got. This is also an important step. You can make the layout darker or lighter. This is what I did.

Extreme Layout Tutorial: Final Result (Click to enlarge)
Click to enlarge

That is is we are done. Our layout is done. I would like to keep it simple. You can add some more boxes in the content area. I Hope you found this tutorial useful.



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 "Extreme Layout"