PhotoshopForce.com
PhotoshopForce.com home tutorials forums downloads contact-us PhotoshopForce.com
PhotoshopForce.com
Vortex Effect Stylized Glossy Navigation Glossy Content Box Seamless Repeating Tile Background Fresh Tutorials:
Last Update: 2.14.2007
Online: 113 Users
Adverts
Advetise on Photoshopforce.com For only $50 per month!
PhotoshopForce.com
PhotoshopForce.com Tutorials Web Layouts Complete PC Layout

Complete PC Layout

In this tutorial we will create a complete pc layout from the ground up. This tutorial will cover several professional techniques used on a daily basis by the professionals. The techniques used in this tutorial are identical to those used to create my highly popular www.HelpMyHits.com, informational web traffic website. I suggest any webmaster take a look as there is an endless amount of web traffic gaining strategies from the professionals for those with little or no marketing budget.

Here is an example of the final result:
Enlarge Photo
Go To Page: [ 1 2 3 ]

Page 2 of 3


Step # 11
Next we'll create a divider for this area, using the same technique we did with the navigation bar. Set your foreground color to black (#000000) and draw a 1 pixel line across our sidebar area like so:


Press CTRL + J on your keyboard to duplicate this layer.

Press CTRL + I on your keyboard to invert the color to white.

Press 'V' on your keyboard to get out the "move tool".

Tap the Down Arrow on your keyboard once, to nudge the white line down 1 pixel.

Press CTRL + E on your keyboard to merge these two layers together, and drop the opacity of this layer down to 35 percent.

Here's how it should look:





Step # 12
Now we'll create some buttons for this sidebar offering guests the opportunity the ability to click to read more of a given press release, news update.

First Create a new layer. Get out the rectangular marquee tool, and make a selection like so:


Go to "Select->Modify->Smooth" with a setting of 5 pixels:


Fill this selection with white (#FFFFFF) and press CTRL + D on your keyboard to deslect the area:


Double click this layer and apply the following blending options:
Drop Shadow:


Gradient Overlay:




Stroke:


Result:





Step # 13
Next apply some text to the button using a 10pt Verdana Bold.


Next double click your text layer and apply the following blending options:
Drop Shadow:


Result:





Step # 14
Next we'll create a splash area for the main content area in the center.
Create a new layer, get out the rectangular marquee tool and make a selection similar to this:


Fill this selection with white (#FFFFFF).
Double click this layer, and apply the following blending options to this layer:

Gradient Overlay:




Drop Shadow:


Result:


Next l added a little text to the area using a 19pt Verdana Bold. With the following blending options applied to the layer:

Drop Shadow:


Here's how it looks:


Leaving room for adding stock images later in the design process.




Step # 15
Next we'll create a sidebar on the right. Create a new layer, and using the rectangular marquee tool make a selection like so:


Fill this selection with #568298 Press CTRL + D on your keyboard to deselect the selection.

Double click this layer, and apply the following blending options:
Drop Shadow:


Gradient Overlay:




Stroke:


Result:






Step # 16
Next we'll create a small divider, as well as a more button for this new "highlight" content area we've made.
Start off by creating a new layer, set your foreground color to white (#FFFFFF) and draw a 1 pixel line across this content box near the bottom like so:


Double click this layer, and apply the following blending options:

Drop Shadow:


Drop the opacity of this layer down to 75 percent.

Result:





Step # 17
Now for the "more" button. Get our the rectangular marquee tool, create a new layer and make a selection similar to what l have bellow:


Go to Select->Modify->Smooth with a setting of 5 pixels:


Fill this selection with #128BD4 and press CTRL + D on your keyboard to deselect the area.


Double click this layer, and apply the following blending options:
Inner Shadow:


Gradient Overlay:




Stroke:


Result:





Step # 18
Next l applied a 10pt Verdana Bold with white (#FFFFFF) text to the button.

Double click this layer, and apply the following blending options to give it more depth:
Drop Shadow:


Result:





Step # 19
Next we'll add a category list in this new right sidebar under the slash box we have just made.
Start off by creating a new layer. Get out the rectangular marquee tool, and make a selection similar to the one below:


Fill this selection with white (#FFFFFF) and press CTRL + D on your keyboard to deselect the selection.

Double click this layer, and apply the following blending options:

Gradient Overlay:




Drop Shadow:


Result:





Step # 20
Next we'll create a small content container for the category list, create a new layer and make a selection like so using the rectangular marquee tool:


Fill this selection with white (#FFFFFF), and press CTRL + D on your keyboard to deselect the selection.

Double click this layer and apply the following blending options:
Drop Shadow:


Stroke:


Result:



Go To Page: [ 1 2 3 ]
Page 2 of 3
Tutorial Index




Author: Webmaster
Website: http://www.helpmyhits.com
Discuss this tutorial on the PhotoshopForce.com Forums
Affiliates:
SourceCrave - Quality Webmaster Resources Best Photoshop 6.0 - 7.0 - CS - CS2 Tutorials - Max Tutorials www.VidPit.com: Funny, Cool & Sexy videos! Free online adobe Photoshop tutorials! Learn webdesign easy with our adobe photoshop CS2 and Adobe Photoshop CS tutorials LooseMoose52 PhotoshopTower.com
All Affiliates / Your Link Here
HOME   |   TUTORIALS   |   FORUMS   |   DOWNLOADS   |   CONTACT US
© 2007 - 2008 www.PhotoshopForce.com Duplication/Redistribution prohibited. Map
Top of Page