Step 1

Open up a new document 800x800px and fill the background with #e7e7e7. Create a new layer named 'banner' and make a selection of 700x250px using the Rectangular Marquee Tool at the top of the document in the center. Apply Filter > Render > Clouds with your foreground and background colours being #272a3a and #131522.



Step 2

Add an Outer Glow and a Stroke to your 'banner' layer.



Step 3

Create a new text layer and add the title of your website in the middle of your 'banner' layer or so. The font that I have used here is Aldo, SemiBold, 48pt, Strong, #fefeff. Duplicate your text layer and apply Filter > Blur > Motion Blur, 25 pixels or so.



Step 4

Create a new layer named 'links' and make a selection of 700x50px using the Rectangular Marquee Tool in the lower quarter of your 'banner' layer. Apply a gradient from #2b2f3d to #4a4c58.



Step 5

Create a new layer named 'links stripes' and select your 'links' layer (Ctrl + Click icon) and add a stripes pattern to it by going Edit > Fill, I used this pattern. Lower the opacity to 5%, and set the Blend Mode to Overlay.



Step 6

Create a new layer named 'links shine' and make a selection of 700x25px at the top of your 'links' layer. Fill the selection with #ffffff and lower the opacity to 10%.



Step 7

Create a new text layer and add some text links for your web layout. The font that I have used here is Tahoma, BOld, 11pt, None, #fefeff.



Step 8

Create a new layer named 'content bg' and make a new selection of 700x520px at the bottom of your document in the middle. Fill this selection with #ffffff. Apply the same Outer Glow and Stroke Blending options as we did in step 2 for the 'banner' layer. A short cut for this is to right click on the 'banner' layer and click Copy Layer Style, and then right click on the 'content bg' layer and click on Paste Layer Style.



Step 9

Create a new layer named 'line', this layer is going to be dividing the content from the links on the right hand side. So make a selection of 1x490px and fill with #e5e5e5, move the selection to the right by one pixel and fill with #f2f2f2, this should give it a bit more depth to the line. Move the layer so it's in a similiar position as the one below.



Step 10

Now we are going to do the fill in text. Firstly we are going to start with a title for the first news article, so create a new text layer and add some text, the font that I have used here is Georgia, Regular, 18pt, None, #1c1e2d. Create a new text layer and add some fill in text for your article description, the font which I have used here is Verdana, Regular (and Bold to give contrast in parts), 12pt, None, #4c4f5a. Create another new text layer and add a 'Read More »' link, the font that I have used is Verdana, Regular, 12pt, None, #4c4f5a.





1 2 Next »