In this tutorial, I will teach you how to create the template above.

Step1: Setting up work space.
Create a new image using the dimension  1000 x 1100. Set the background color to #463c48. Create a new layer, Layer New Layer... (Shift+Ctrl+N).

Step2: Creating the main layout.
Click on the Rectangular Marquee Tool using the rectangle and the setting shown below create the shape and fill it using the paint bucket with white #7a808a

With that you should have the effect shown below

Hold Ctrl and click on the layer to select it as shown below

With the rectangle still selected, click Select Modify Contact

Change the contact to 10 pixels. Create a new layer and fill the selection with this color f6f2f1 using the paint bucket . Below is what you should have.

Hold Ctrl and click on the layer with the white rectangle. This should select the rectangle. Using the setting below

Subtract from the selection to get the effect below.

Step3: Creating the right division and tabs.
Create a new layer, Layer New Layer... (Shift+Ctrl+N). Using the paint bucket fill the selection with #e7e7e7. If you followed my steps you should have the effect below.

Create a new layer, using #e7e7e7 as the color. Click on the Rounded Rectangle Tool using the setting shown

create the shape shown below.

With that duplicate this layer, create two more rounded rectangle and position it to get the effect below.

Step3: Adding the Text.
The font that I used was Atype 1 at 55.01 pt for the heading.

(tip) Photoshop do not give you that super clean text that most people want for their web pages. Here is where Illustrator can come in handy, if you click File and select Save for web in Photoshop and save your web page as one image you can open this image into Illustrator and add your text.  

Adobe Photoshop Example

Adobe Illustrator Example

Pixel = #7d5286

digest = a49aa6

Highlight the text, and open up the text character window similar to what I have below. If you don't see it click on Window Character

Change the tracking setting to 60, it represented in the screen shot above as AV. This will space your text out a bit. Position this about your page to get the effect shown below.

The page is too large to fit into the large view so I had to zoom out a little so viewers can see the entire page.

Next we will create the text on the right hand side of the page. I used OptimusC as the font and it is set at 37.01 pt. With the text highlighted open up the character window and change the tracking setting to           -120,this will bring the text together. You can also add any other menu heading you want here.

Using the same font, set at 11 pt I created a little heading under the main text. The color of this text is #c2bac4. For the tabs, I used Verdana font and the font size at 14.

Finished:
Well that is it, hope it came out to what you expected. If you have any question or comment about this tutorial, feel free to post a message on the forum.

This Tutorial was Created by Mark
© 2007 pixeldigest.com. All Rights Reserved.