Design a pinky Web 2.0 layout

You will learn in details, how to design the complete web site in web 2.0 style. The guide will present you step by step to achieve a beautiful pink appearance.

Open a new document with a 1000 x 720 pixels, white canvas. In your layer palette create a new layer set, name it Header. Create a new layer, on the center of your canvas draw a 896 x 120 pixels, #F24385 rectangle.

In your layer palette add the following layer styles:
Inner Shadow
Gradient Overlay
Pattern Overlay

2:

Under your pink rectangle, draw a 1000 x 96 pixels, black rectangle.

In your layer palette add the following layer styles:
Inner Shadow
Gradient Overlay

3:

At the end of your pink rectangle, draw a 1000 x 6 pixels, #EF366B rectangle.

In your layer palette add the following layer styles:
Drop Shadow
Gradient Overlay

4:

Back to your Header layer set, add your name using font Arial, bold, 23 pt, crisp and #E8E8E8 for color.

In your layer palette, set your layers blending mode to Soften Light and add the following layer styles:
Drop Shadow

5:

Again add your name using the same character settings provided from step four.

In your layer palette, set your layers blending mode to Darken and add the following layer styles:
Stroke

6:

Add your slogan using step fours instruction. Instead of Soften Light for your first text layer, keep it on normal setting.

7:

To make it extra special add a logo, type “#�? with text tool using font Webding, 72, crisp and #E8E8E8 for color.

In your layer palette add the following layer styles:
Gradient Overlay

8:

In your layer palette create a new layer set, name it Navigation System. With your text tool add your first navigation using font Verdana, bold, 18 pt, crisp and #FFFFFF for color.

9:

Now complete your navigation system by adding the rest of your links using #F3468F for colors and wide spaces between each link.

10:

Again with your text tool type “D�? using font Webdings, 30 pt, crisp and #FFFFFFF for color. This will be your first icon which symbolize your first link.

In your layer palette add the following layer styles:
Stroke

11:

Icons used in this tutorial are found in font Webdings. @, ), e, J, >, D are the letters and symbols.

12:

Select your rounded rectangle tool and set its radius setting to four pixels. In your layer palette create a new layer set, name it Purchase. In a new layer just below your header structure, create a 454 x 30 pixels, white round rectangle.

In your layer palette add the following layer styles:
Stroke

13:

Add “Purchase Now�? text using font Arial, bold, 15 pt, crisp and #F24789.

14:

In your layer palette create a new layer set, name it Product. Make a new layer then create a #FFD8EC round rectangle under your purchase tab.

15:

Now add a title that fits your product, use font Arial, bold, 15 pt, crisp and #474747 for color.

16:

Add your content for this section, use font Arial, regular, 11 pt , none and #1F1F1F for color. In your character palette set the leading to 18 pt.

17:

Add a 60 pt icon next to your content, refer to step ten. Remember to match the icon with your content or section.

18:

Below your Product summary, add an overview. To be organized make sure to create different sections in different layer sets with custom names.

19:

Next to your product info, add a description of your company. The pencil icon can be made by typing “!�? using font Wingdings, 60 pt, crisp and #FFFFFFF for color.

In your layer palette add the following layer styles:
Stroke

20:

Now set up another layer set for your costumer testimonials section.

21:

Now add two quotations, refer to step 10 for incon instructions. The size of the quotations are 60 pt.

In your layer palette, set layers opacity level to 9%.

22:

Add your testimonial content.

23:

Add another set of your testimonial content.

24:

Below your product overview section, add your copyright info under a new pink tab.

25:

Add your navigation links using font Arial, regular, 11 pt, none and #B00000 for colors. Spacers are made of #FFD8EC colored | symbols.

26:

Complete your template with another pink tab holding your search box and below add misc links.

Final:

Product Template Design.

Copyright @ ConceptIsFree 2007