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.







6 Responses to “Wii Inspired Layout Tutorial”
Calligan Says:
really nice one ^^
nathalie Says:
omg it’s great!
Matthew Says:
very nice, thank you SO much!
KronicDreamer Says:
very nice layout
George Says:
This is amazing. I’m only stuck on one step and that is the “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.”
I add a Layer Mask, but the linear gradient thingy doesn’t work… all I get is light blue… :/
George Says:
Never mind! I figured it out. As soon as I’ve coded it up, I shall link everyone.
Leave a Reply
search
Learn more about advertising with us.
write for us
Intrested in publishing some articles, tutorials or freebies on hv-designs.? We welcome anyone who is intrested, we'll even return the favour by sending you aload of goodies. Learn More
Learn more about advertising with us.
Recent Comments
copyright
The effects and techniques demonstrated in tutorials on hv-designs.co.uk can be used in whatever manner you wish without attribution. The text, images and tutorials themselves are all copyright © hv-designs.
usage
You cannot copy whole tutorials, either in English or translated to another language unless permission is given by the tutorial author.
friends online