Windows 8 Inspired Portfolio Layout

Windows 8 is pushed 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.

In Interface

What We’ll Be Creating

Learn How To Create A Windows 8 Inspired Web Layout

Resources Used In This Tutorial

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 settings below.

Learn How To Create A Windows 8 Inspired Web Layout

Select either the “Pen Tool” (P) or the “Ellipse Tool” (U) then create a curved selection like the image below.

Learn How To Create A Windows 8 Inspired Web Layout

Once the selection has been created select the “Gradient Tool” (G) with a foreground to transparent gradient type.

Learn How To Create A Windows 8 Inspired Web Layout

Drag the gradient over the bottom right side of the selection.

Learn How To Create A Windows 8 Inspired Web Layout

Once you have something like the image above set the layout opacity to 15% then add a drop shadow using the settings below.

Learn How To Create A Windows 8 Inspired Web Layout

Learn How To Create A Windows 8 Inspired Web Layout

Duplicate the shape 2 times then rotate and re-position using the “Free Transform Tool” (Ctrl + T).

Learn How To Create A Windows 8 Inspired Web Layout

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 between.

Learn How To Create A Windows 8 Inspired Web Layout

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).

Learn How To Create A Windows 8 Inspired Web Layout

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.

Learn How To Create A Windows 8 Inspired Web Layout

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.

Learn How To Create A Windows 8 Inspired Web Layout

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 the heading.

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>

Learn How To Create A Windows 8 Inspired Web Layout

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.

Learn How To Create A Windows 8 Inspired Web Layout

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.

Learn How To Create A Windows 8 Inspired Web Layout

Content Continued

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.

Learn How To Create A Windows 8 Inspired Web Layout

On the right side of the text add a simple gallery using some of your best pieces of work.

Learn How To Create A Windows 8 Inspired Web Layout

Learn How To Create A Windows 8 Inspired Web Layout

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.

Learn How To Create A Windows 8 Inspired Web Layout

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.

Learn How To Create A Windows 8 Inspired Web Layout

Conclusion

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.

Learn How To Create A Windows 8 Inspired Web Layout

Purchase Psd Now

  1. October 13, 2011 at 1:48 PM

    Its amazing :) .. But you forget to put the dimensions of the 3 rows of boxes .. and the font that you used in the logo .. anyway THANKS for this amazing design.

  2. Keletso
    October 14, 2011 at 2:54 PM

    Thanks for the tutorial great inspiration.
    Do you also have a tutorial on how to convert to HTML and CSS

  3. Clifford
    October 21, 2011 at 4:47 AM

    Wow! this is great!

  4. Samuel Kimathi
    October 29, 2011 at 5:39 PM

    Awesome tut my friend tought me a few tricks i dint know.(not giving up my XP though).

  5. Mr Anh
    November 7, 2011 at 3:32 AM

    Do you have sources convertedt to HTML/CSS or Drupal template? Thanks

  6. December 5, 2011 at 3:19 PM

    Nice tutorial! Love the layout. This would be cool as a WordPress theme.

  7. December 19, 2011 at 9:51 AM

    I am am always looking for new techniques to use and I love the simplicity of the background and the feel you have created through the layout and use of colour. I am finding through reading articles like this one that some of the best backgrounds are created using the simplest of techniques and the techniques you have used in this tutorial will be book marked as a resource for myself in the future. I also really like the contrasting use of colour in the boxes and how they stand out from the page. Overall I think this is a great tutorial and one I can learn a lot from. I look forward to more tutorials from yourself.

  8. December 19, 2011 at 10:13 AM

    Thanks @Paul, its comments like yours that keep me going.

    much appreciated

  9. Dan
    January 22, 2012 at 10:02 PM

    Nice tutorial, my lines in the background didn’t turn out as well as yours, but picked up some valuable new skills from this.

    Which font have you used inside your Tiles for the text, just Arial?

  10. January 22, 2012 at 10:05 PM

    Hi dan, the font i used were a mix of verdana and georgia

  11. January 25, 2012 at 10:09 PM

    Awesome design! Was very inspirational for a redesign I just completed for work… I combined a lot of the blocks to make an article display and added a bunch of color. Check it out!… http://www.pztalks.com/images/aptea_design_logocover.jpg

  12. ltaofeng
    March 8, 2012 at 3:48 PM

    very good

  13. June 18, 2012 at 11:55 AM

    Nice tutorial! Love the layout.

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 13 Comments On Windows 8 Inspired Portfolio Layout, why not add yours!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Auto Scroll To The Top
css.php