This is the first tutorial that I made, and it was not as easy as I imagined. It is easier to design the template itself rather than explains the process steps. But I want to share, share my knowledge while learning to be better.

Perhaps the explanation of this tutorial will you get a lot of shortcomings, please tell me for a better in future.

In this tutorial I give you the basic steps in designing a business website in Photoshop, one of the first things they teach you when you get an online web design degree.  This is a simple layout, but elegant design. Here I use Adobe Photoshop CS5 and use standard style effects, mostly using the Drop Shadow. Not much use outside sources and little icons.

Starting

Before starting the tutorial maybe could be useful to take a look the final result, click the image below to preview in full scale.

Well let’s get started …!

Step 1 – Set up the document

Open a new document in Photoshop and name it “elegant_web_layout” or whatever you like, set 1000x1000px, resolution 72 pixel/inch, RGB color of 8 bit.

Now we have one empty layer, name the layer “background”. Then set the foreground color #212121, [Alt]+[Del] to fill the layer with foreground color, after that press [X] to switch Background and Foreground colors.

Step 2 – The Background

You can activate the Rules [Ctrl]+[R]. Set two vertical guides to limit the layout wide View -> New Guide… Set with Vertical orientation 20px and 980px, or drag the guides directly from the Rules.

Now we have one dark background, we need give it some texture. Select Filter -> Noise -> Add Noise,set (Amount: 0.6°, Distribution: Uniform, Monochrome: on). Why uniform? The Uniform option spreads the noise more evenly than the Gaussian option.

Step 3 – Header and Logo

Set 3 new guides (Horizontal: 30px, 120px, and 150px) for header and menus. In Layer panel make New Group, name it “Header”. Before we create the logo let give a spot light. Create new layer name it “spot light” Create one shape layer with Ellipse Tool,

Move and resize the ellipse [Ctrl]+[T] or Edit -> Free Transform set (X: 260px, Y: 0px, Width: 180px and Height: 100px). Select menu Filter -> Blur -> Lens Blur… Set the Iris (Shape: Triangle, Radius: 64, Blade Curvature: 100, Rotation: 0), after that resize again with set (X: 260px, T: 30px, W: 480px, H: 240px), apply the “spot light” layer blend mode as Soft Light, set the Opacity 60%.

Logo

Now we have to create new logo or place any logo you have. Here I give the name for the ‘company Golden Soft Co.’, create New Group inside group layer “Header”, name it “logo”.

Now use horizontal Type Tool [U], create 4 text string (Century Gothic, #fefefe) with fonts size (65pt) for the logo ‘G’ and ‘S’, (30pt) for company name ‘Golden Soft Co.’, (12pt) for slogan ‘Success And Efficiency For Your Company’ as shown in the picture.

Give some gold effect on logo, Rasterize and Merge the “G” and “S” type layer, select menu Layer -> Merge Layers and name the layer as “GS”.

Add the layer Drop Shadow style, set (Blend Mode: Multiply, color: #000000, Opacity: 75%, Angle: 120°, Distance: 5px, Spread: 0%, Size: 5px).

Add Inner Shadow style. Set the structure same as Drop Shadow style except the (opacity: 30%, choke: 0%).

Add Gradient Overlay style, set (Blend Mode: Normal, Opacity: 100%, Style: Reflected, Align with layer: check on, Angle: -128°, Scale: 150%). Click on the gradient to open gradient editor, in Gradient Editor add 5 color stop at 5 locations 1.(location: 0%, color: #aa8630)- 2.(location: 26%, color: #f4da70)- 3.(location: 46%, color: #b4934c)- 4.(location: 78%, color: #75530c)- 5.(location: 99%, color: #533a06) as shown in the picture.

And add Drop Shadow style for the company name and the slogan same as the logo but set the Distance and Size of Shadow are 2px.

Navigation Menu

Before, set the foreground color #b78b16 and background color #ffffff, add New Group layer name it “navigation”. Create Shape Layer using Rectangle Tool [U] with size of (height: 30px, width: 960px) or drag over the two Horizontal guides as shown in the picture and name the layer as “nav_bg”

Now add Gradient Overlay style effect on “nav_bg”, set (Blend Mode: Multiply, Opacity: 100%, Style: Linear, Align with layer: check on, Angle: 90°, Scale: 100%). Click the gradient to open gradient editor, in Gradient Editor set the left (location: 0%, color: #bebebe), and the right one (location: 100%, color: #ffffff).

Use Line tool (weight: 1px), draw the line at top “nav_bg”, give the layer line name “nav_line”, add the layer Drop Shadow style, set Structure (Blend Mode: Linear Light, color: #000000, Opacity: 100%, Angle: 90°, Distance: 1px, Spread: 0%, Size: 4px).

Add text string for the navigation menu items, using (Arial, 12pt, #222222), All Caps, and give words-spacing about 30px or 7 times spacing. Add Drop Shadow style (Blend Mode: Screen, Color: #7c6018, Opacity: 75%, Angel: 120°, Distance: 1px, Spread: 0%, Size: 0px).

Draw line to spread between menu items (height: 30px, color: #222222), Add Drop Shadow style same as menu items style except Angel set it 180°.

Now we add some extended menu at right top (Arial, 12pt, #909090) and add Drop Shadow style with set (Blend Mode: Multiply, Color: #000000, Opacity: 75%, Angel: 120°, Distance: 1px, Spread: 0%, Size: 1px).

Search Form

Add New Group layer inside “Header” group layer, add new 2 vertical guides (40px and 960px), draw shape layer using Rectangle Tool [U] (color: #1a1a1a, Width: 240px, Height: 24px, position X: 855px, Y: 87,5px) name the layer “search box”. Add Stroke style (Size: 1px, Position: Inside, Blend Mode: Normal, Opacity: 100%, Fill Type Color: #909090).

Type text string “Search” over left box (Arial, 12pt, #909090), and add magnifying glass icon for search button on right side box using Type Tool (Webdings, 24pt, color #909090), type text “L”, rotate 45°.

Before continue to next step, we have made vertical guide at 40px, move the logo by select the logo Group layer, move 20px to right as shown in the picture below.

Step 4 – Big Banner Box

New guide (Horizontal, 500px), draw shape layer (width: 960px, height: 350px, color: #000000) change the layer blend mode (Screen), add Stoke style (Size: 10px, Position: Inside, Blend mode: Normal, Opacity: 50%, Fill Type color: #141414).

Create 2 lines as long box size, below the box, each lines color #0F0F0F and #282828 as shown in the picture

Give some dark shadow below “border2”, duplicate layer “border2” or create new line, then add Drop Shadow style (Blend Mode: Multiply, Color: #000000, Opacity: 75%, Angel: 90°, Distance: 2px, Spread: 0%, Size: 4px, Contour: Cone). Right-click on the copy layer “border2 copy” and select Rasterize Layer. Use Eraser Tool [E] (size: 400px, Hardness: 0%) then erase the layer at left side and right side about 100px center mouse position at each sides or as shown in the picture and drag to outside of the canvas.

Add a image over “banner box”, the image size must be bigger than 960x500px, the order of the layer of image must be over the “banner box” layer.

Right-click on the image layer, select Create Clipping Mask. The result shown in the picture below

Step 5 – The Main Contents

Here we are using 960 grid system, with 12 column based, where each columns have 60px width, 20px column margins, 10px outer margins. You can also use this 960 grid template for guide.

Before continue adding the main contents, better we split the width being 3 columns, each columns have width 300px (2 for main content, 1 for sidebar) by add 6 new guides (Vertical, 30px – 330px, 350px – 650px, 670px – 970px).

Add New Group layer “main contents”, add new text for content heading (Arial, regular, 24pt, #a67e14), you can add some icons on left of heading text.

Add the heading layer a Drop Shadow style (Blend Mode: Multiply, Color #000000, Opacity 75%, Angel: -90 Degree, Distance: 1px, Spread: 0%, Size: 1px) .

Add a underline for heading text, using Line Tool [U] draw new line (width: 600px, height: 1px) at 20px below heading text. Add Drop Shadow style (Blend Mode: Normal, Color: #0f0f0f, Opacity: 100%, Angel: 90°, Distance: 1px, Spread: 0%, Size: 0px).

Add content text, use horizontal Tool Type (Arial, 12pt, leading 20pt, #c0c0c0), type space (width: 620px) add some text (use lorem ipsum generator) and add text links “more detail” (Arial 12pt, bold, #a67e14).

Add sub-content / left and right contents use the same technique as main content but the font size for heading are 18pt, text space for each sub-content are 300px. As shown in the picture

Step 6 – Sidebar

Add 2 New Groups “sidebar1” and “sidebar2”, use Rectangle Tool [U], draw 2 boxes on right one column with each sizes (300x200px, #000000) and (300x140px), add the layer Stroke style (size: 1px, position: Inside, Blend Mode: Normal, Opacity: 100%, Fill color: #282828).

Add text string for the heading (Arial 18pt, Regular, #808080), 10px margin inside the box. The line borders and the content use same technique as used for main content as shown in the picture.

Step 7 – The Footer

Add New Group layer “Footer”, add New Guide (Horizontal 920px). Use Rectangle Tool [U], draw it at the bottom (1000x80px, #191919).

Multiple Select lines border for banner, Right-click and select Duplicate Layers… than reorder the layers into the “footer” group then move them to the position (Y: 920px) as latest guide we have made press [Shift] +[down].

Multiple select the all borders layers in “footer” group, select menu Edit – Transform – Flip Vertical. Resize the layers “border1 copy” and “border2 copy” (width: 1000px). Select layer “border2 shadows copy” change the layer Drop Shadow style (Angle: -90°).

Use Type Tool, add text menu (Arial, Regular, 12pt, #3d3d3d), add Drop Shadow style (Blend Mode: Normal, Color: #000000, Opacity: 100%, Angel: 120°, Distance: 1px, Spread: 0%, Size: 1px).

At the end add copyright text string (Arial, 11pt, #7d7d7d).

Finishing and Download

Congrats, we have designed an elegant and cool web template for great company. You can download the complete Photoshop (psd) layered template and available also light version. Click the images below to preview in full scales and click download link to download the templates. This template is released under Creative Common License (CC 3.0 Attribution) and also for commercial use.

You already have good design for your website next what you have to do after is find out the best web hosting company for your website, if you are a newbie you can choose some reliable cheap web hosting service provider with low budget.

[dm]28[/dm] [dm]29[/dm]