Photoshop Tutorials » CleanLayout Tutorial Part 3

Step 1 - Starting Out
Open the template's PSD we've been working on. It should look like the image below as of now. Step 2 - Text
Select the text tool. Make the font "Arial", and 12px big. Change the foreground color to the same grey in the content box (f3f3f3). Now type out your navigation in the black block (Put 5 spaces in between each link/word.) Place it accordingly to the image. Step 3 - Text Continued...
Change the color of one of the words in the navigation to the green used in the content boxes (bce07e). This will be our "Active" link. Step 4 - Text Continued...
Change the font size to 14px. Then change the text weight from regular to bold. Now type out the word "SubLinks" in the left content box block. Center it in the block just like in the image. Step 5 - Text Continued...
Repeat step 4, but in the 2nd content box, and with the word "SubContent". Step 6 - Text Continued...
We're now going to add links. Change the font size back to 12px, and regular. Now type in (alt+784)Home inside the content area. The alt+784 will generate a little arrow icon you can use for the navigation. Step 7 - Text Continued...
Duplicate the text layer you made in step 6. Move it below the previous text by 5px. Now change the text to something else (I use "News" and "Podcasts and Feeds" in the example.) Step 8 - Text Continued...
Highlight the arrow/Home text, and make the font weight bold. This will be our "Active" SubLink. Step 9 - Text Continued...
Go to Lipsum.org and generate some filler text. Copy the text from the site, and place it in a text box that fits inside the bottom content box. It should be 12px Arial Regular font, and should match the image (you may have to shorten it a bit to fit the box.) Step 10 - Text Continued...
Click the top-right area of the main content area with the text tool. Now type in "Home". After you type that in, change the font size to 24px, and align it properly with the image. Step 11 - Text Continued...
Change your foreground color to a reddish pink color (ee435d), and click anywhere on the document with the text tool. Type in "Header". Change the font size to 18, and then align it properly with the image. Once you do that, duplicate the layer. Select the Mover tool. While holding down shift, move the duplicated text layer downwards a little below the middle of the content box. Step 12 - Text Continued...
Go back to Lipsum.org, and copy some more filler text in your document. Use the grey color we used earlier (353a3a) as the foreground, and click and drag a new text box. Change the font to "Verdana" 11px Regular. Now paste the copied paragraph into the text box. Do the same with the bottom content area, but use a new paragraph of text. Align it to match the image. Done... With Step 3 (SNAP!)
oOoOoO... it's starting to look good! Almost there; one more part to go. Go to the Clean Layout Tutorial Part 4.

Photoshop Tutorials » Clean Layout Tutorial Part 3