PhotoshopForce.com
PhotoshopForce.com home tutorials forums downloads contact-us PhotoshopForce.com
PhotoshopForce.com
Levels Adjustment Tool Ultima Abstract Extended Text Spanable Content Box (Slicing & Coding) i Fresh Tutorials:
Last Update: 2.14.2007
Online: 93 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 3 of 3


Step # 21
Everything is starting to come together pretty nice with the layout. The last thing l feel this layout needs is some header areas above each of our sections ie the right side bar area, the main content area, and the left sidebar area.

Create a new layer, get out the rectangular marquee tool and make a selection similar to the one shown:

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:


Gradient Overlay:




Result:





Step # 22
Now press CTRL + J to duplicate this layer. Get out the move tool by pressing 'V' on your keyboard and position the second content header over top of the sidebar on the right like so:

Press CTRL + J on your keyboard again, to duplicate this layer another time, and position the third content header over the center area like so:





Step # 23
Now we're ready to start adding stock/product photos to the layout. A good place to get stock images if you don't have a subscription to a professional stock image site is http://sxc.hu.com
Here l've added a few stock images to the layout to spice it up a bit:
enlarge




Step # 24
Finally l added a header to the piece simply by pasting a render photo and cropping the pieces away that l didn't need. Once l was happy with the position of the header background l placed the site name and slogan onto the header.
Enlarge




Step # 25
Finally the content is added to the layout to complete it, here is how mine ended up after adding the content.


I hope you enjoined this tutorial as much as l did writing it! Please be sure to see the rest of our great tutorials while you're here!

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.





Author: Webmaster
Website: http://www.helpmyhits.com
Discuss this tutorial on the PhotoshopForce.com Forums
Affiliates:
Pure Photoshop - Adobe Photoshop Center. Desktop Deck - Desktop wallpapers and graphic design tutorials SENKOURYU.NET 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