HV-Designs.co.uk

May 16th, 2008 in Photoshop Tutorials by Richard Carpenter

Wii Inspired Layout Tutorial

• Share

create a new document 800×1000 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.

You should have something like this.

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

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

Here are the layer styles for for the rectangle.

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

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.

Here are the layer styles for the tabbed button.

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

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.

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

Add your content to your box, ive split my box into 3 different sections.

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

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

Repeat the process above and create a further 2 boxes.

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

These are the layer styles for the boxes.

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.