Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Extreme Layout

Extreme Layout


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.



Author's URL: CoolJeba.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Extreme Layout"

Only registered users can write comment

No comments yet...