Windows 8 will be pushed upon us soon with its brand new looking
desktop user interface. So in this tutorial I've tried to incorporated
some of its features into a stylish web layout.
What We'll Be Creating
Getting Started - Creating The Background
Create a new (Ctrl + N) document 1200 x 1120 pixels with any colored
background, double click the background layer to unlock it and make it
editable. Now add a gradient overlay to the background layer using the
Select either the "Pen Tool" (P) or the "Ellipse Tool" (U) then create a curved selection like the image below.
Once the selection has been created select the "Gradient Tool" (G) with a foreground to transparent gradient type.
Drag the gradient over the bottom right side of the selection.
Once you have something like the image above set the layout opacity to 15% then add a drop shadow using the settings below.
Duplicate the shape 2 times then rotate and re-position using the "Free Transform Tool" (Ctrl + T).
Creating The Header
In the top left corner of the layout add the website title and
slogan, separate the title from the slogan by adding a divider in
In the top right corner add a snapshot of yourself or an avatar of
some kind, once you've added your desired avatar add a white round
rectangle around it using the "Rounded Rectangle Tool" (U).
Creating The Windows 8 Style UI
Select the "Rectangle Tool" (U) then create a 3 rows of boxes, one or
two of the boxes can be split into two smaller ones to keep with the
windows 8 style UI.
Once all the boxes have been created and are all aligned up, go
through each box and add a gradient overlay using your desired colors,
each box should preferably have its own color.
The top 3 boxes on this layout are going to be my welcome box, recent
work and blog. In the welcome box just add a nice big title with some
dummy text, use one of the icons from the Iconic Icon Pack to go next to
Inside of the recent work box were going to add an image, the image
will be cut off at the bottom so start by loading a selection around the
2nd box in the top row. To make a selection simply select the layer and
go to "Select > Load Selection". Copy your desired image to the
clipboard then go to "Edit > Paste Special > Paste Into" the image
should now be pasted within the selection, maneuver the image around
and position it how you want it. Finally cut off a small portion of the
image at the bottom to make room for some text./p>
For the blog box we need to cram inside the date of our recent post,
title and description. I started with a pretty big date on the left, on
the right i add the post title and description. The two were then
separated using a simple fading divider.
Continue to build up the content within the boxes, try and mix in
some images also to brighten the whole area up. Once your finished you
should have something like this.
Underneath the windows 8 UI style part of the website i think we
should add in some normal flowing content. Simply add some text on the
left side with a nice big heading. Underneath the paragraph of text
throw in a small list for good measure.
On the right side of the text add a simple gallery using some of your best pieces of work.
Creating The Footer
Duplicate the header background pattern shapes then flip them
vertically "Edit > Transform > Flip Vertical" and place them at
the bottom of the canvas leaving them to overlap behind the content.
Where the content ends add a dividing line using two 1 pixel lines on
top of each other. Once the lines have been created add a layer mask to
the layer and drag a reflective gradient from the middle outwards.
Finally select the "Type Tool" (T) and add your copyright information.
Thanks for taking part in this tutorial, if you managed to finish
this tutorial I'd love to see some of your results. Feel free to post
them up on our Facebook Fan Page.