Web2.0 Premium Website TemplatesAll TemplatesWeb2.0 TemplatesPremium TemplatesTemplate TutorialsContacts

Web2.0 Premium Templates

Design a Mock-up of Skypes Layout Design

Step one:

Start with a 990px x 700px white canvas. Make a new layer set titled Web 2.0 Template.
First add your name using font Arial Rounded MFT, 36pt, Sharp and #FFFFFF for colorss.
Add the following layer styles: Stroke.

Step two:

Again add your name using the same font settings from step one but this time around use #00000 for colors.
Add the following layer styles: Inner Shadow.
Set layerˇ¦s blending mode to Lighten.

Step three:

This step is optional, add a Trademark to your name.

Step four:

Add your navigation links using font Arial, bold, 16pt, None and #00AFF0 for colors.

Step five:

In a new layer draw a white rectangle. (width: 990 x height: 85)
Make sure this layer is under the name and navigation links layers.
Add the following layer styles: Inner Shadow.

Step six:

Now insert a stock photo on the body as shown below.
Stock Photo used in this tutorial can be found here.

Step seven:

Duplicate stock photo layer from step six.
Go to Select > Load Selection > Default. This should add a marquee selection around your stock photo layer.
Go to Filter > Blur > Gaussian blur > Radius: 6.7px.
Set layerˇ¦s blending mode to Hard Light.

Step eight:

In a new layer add random white vector circles as shown below using the eclipse tool.

Step nine:

Now apply a blur effect on the background of the man. First turn off the white circles layer from step eight. With the marquee tool, select the entire stock photo and go to Edit > Copy Merged.
Go to Edit > Paste to add another set of the stock photo. Now just use the blur tool and brush around the man.

Step ten:

Below the stock photo, add your contents. In this case a featured articles and tutorials section.
Use font Arial, bold italic, 16pt, none and #000000 for title of the section.
Use font Arial, regular, 11pt, none and #000000 & #00AFF0 for content texts.

Step eleven:

Choose rounded rectangle tool and set radius setting to 4px and anti aliased checked.
In a new layer draw a #F5F7F8 round rectangle using the rounded rectangle tool. (width: 728px x height: 22px)
Add the following layer styles: Gradient Overlay, Stroke.

Step twelve:

Add your footer links using font Arial, bold, 11pt, none and #00000 for colors.
Add your copyright info using the same font type but #07B1F0 for colors.

Step thirteen:

Duplicate the round rectangle from step eleven.


Mock-up of Skypes Layout Design.


Earn Commission

20% of the Sales Generated from Your Website
Join Now!
Clear Details © 2006 | FAQ  | Terms of Use