The first business website layout Design course of the tiger

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Today's layout of the design is black as the main dish, with the dish is red and white, sound is not a bit puzzled, so please look down, how the author is built.

　　

Be ready

New document: Size 1200px*1200px. Set the foreground color #505050, background color #2d2d2d, select the Gradient tool, and change the gradient type to radial gradient. This radial gradient is probably a bit above the middle of the canvas, so the gradient start and end point must be a certain length. as follows:

　　

Next, create a new layer, named header, and select either the rectangular marquee tool or the rectangular tool to drag a 300px-high rectangle along the upper-left corner to fill with any color. as follows:

　　

Add the following layer style to header:

Inner Shadow

　　

Gradient Overlay

　　

The effect diagram is:

　　

Create Topbar

Select Pen tool to paint the head shape like the following figure: (Hint: with a grid line or ruler)

　　

Then fill it with black as follows:

　　

This layer sets the following style

1) Inner Shadow

　　

2) Gradient Overlay

　　

3) Stroke

　　

Add the white text "Contact Us" in the Topbar highlighted space, the font is Arial, and the right with a small triangle (can be created using polygonal lasso tool).

　　

Create navigation and site titles

Using the rounded Rectangle tool, the radius is 10px, and the rounded rectangle with the general button size is dragged as a navigation link.

　　

Regardless of the color fill, and then merge with the "Topbar" layer, the results are as follows: (I follow the author's instructions, do not get the following image effect, but the rounded rectangle's layer style to "Topbar" layer style)

　　

Under Topbar, add additional navigation links, which are the shape of a linked dynamic.

　　

Add the site title and banner under the navigation link, the font is selected "Quicksand", (download here) for the first two letters in red fill, the remaining letter is dark gray.

　　

Create a Product service box

Before creating the Product service box, create a new two 1px horizontal line at the bottom edge of the header layer, black and white, and set layer transparency to 40% when finished

　　

Select the Rounded Rectangle tool, the radius is still 10px, and drag a rectangle about 250px high under the site title until the "Contact us" right edge.

　　

Set the following layer styles for this rectangle

1) Shadow

　　

2 Bevel and Emboss

　　

3) Gradient Overlay

　　

4) Stroke

　　

　　

The next section needs some icons, the most appropriate red, you can download from the dryicons.com website.

　　

In the text description of each section, add a separator line, consisting of two 1px lines, one next to the other, and the color is black and white from left to right. Create a new layer, select the Single Column Marquee tool, click on the canvas, and then select the Rectangular Marquee tool and choose Cross selection for the type.

　　

Fill the selection with black, then create a new white vertical line, and then set the layer blending mode to soft light.

　　

Under each paragraph, create a small rounded red button.

　　

Create a Sidebar

Create a new layer underneath the Product service box and create a separator line like the one above to create a divider, and align the divider line between the second and third service boxes. as follows:

　　

Next to the sidebar divider, create a selection with the rectangular marquee tool, not too wide.

　　

Select the gradient tool to make a linear gradient from black to transparent, dragging the gradient from left to right (over the selection), setting the transparency to 15% when finished.

　　

Add a layer mask to the sidebar divider and just the newly created gradient layer, and then drag the same linear gradient again, in the direction from the bottom of the element to the head, as follows:

　　

Add news to the right column.

　　

Create a content area

Download a "House" icon from the download icon's website and place it under the left product box.

　　

Select the Rectangle marquee tool to create a rectangular selection below the main content.

　　

Fill the rectangle with color #1e1e1e, and then set the following layer style:

Inner Shadow

　　

Stroke

　　

Finally, add a picture sample to the rectangle and leave a 10px border.

　　

Create footer

Create a rectangular selection in the remaining space of the canvas, fill with color #1e1e1e, and add the following layer style:

Inner Shadow

　　

Stroke

　　

Add what you want in the bottom area.

　　

Author：

Richard Carpenter

From: http://hv-designs.co.uk/2010/03/09/learn-how-to-create-a-carbon-fibre-style-inset-navigation/