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

Wii Inspired Layout


Create a new document 800x1000 pixels, fill the background with the color #e1e1e1, select the rounded rectangle tool and draw a rectangle at the top of your canvas. Add these layer styles to your rectangle.

image 1

image 2

image 3

You should have something like this.

image 4
Click to enlarge

Make a selection using the pen tool (see image below) and fill with the color white set layer opacity to 30%.

image 5
Click to enlarge

Now select the rounded rectangle again and create a small rectangle like a cd slot fill using the color #929497.

image 6
Click to enlarge

Here are the layer styles for for the rectangle.

image 7

Add your site title and any other additional information you need. Your layout should look like this so far.

image 8
Click to enlarge

Now were going to add some tabbed buttons under our header, so go ahead and select the rounded rectangle tool and create your tabbed buttons.

image 9

Here are the layer styles for the tabbed button.

image 10

image 11

image 12

Now make a selection with the pen tool (see image below).

image 13

Fill with the color white and set layer opacity to 25%.

Now copy and paste your tabbed button and re-create more along the rest of the navigation. Might be a good time to also add your text.

image 14
Click to enlarge

Select the rounded rectangle again and draw another box underneath your tabbed navigation, copy and paste the layer styles used on the header.

image 15
Click to enlarge

Add your content to your box, I'vesplit my box into 3 different sections.

image 16
Click to enlarge

Create another box under the one you just created using the same layer styles.

image 17
Click to enlarge

Add a layer mask to your box and drag a linear gradient over the bottom half of the box so it blends into the background.

image 18
Click to enlarge

Repeat the process above and create a further 2 boxes.

image 19
Click to enlarge

Select the rectangular marquee tool and draw 4 boxes side by side with a 2 or 3 pixel gap in between.

image 20
Click to enlarge

These are the layer styles for the boxes.

image 21

image 22

image 23

Now add your text for the content boxes. Now finally duplicate your header, drag down the bottom of the canvas to act as our footer. Here is the finished product.

Wii Inspired Layout
Click to enlarge


Author's URL: Hv-Designs.co.uk
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Reader's comments
comments ali June 08, 2010 says:
plz explain this


Add a layer mask to your box and drag a linear gradient over the bottom half of the box so it blends into the background.

Reply
comments mercyman10 May 23, 2010 says:
I think it looks so cool!!!!!!!!!
Reply
Add comments to "Wii Inspired Layout"

Captcha