Submit Tutorials

Step 1 - Starting Out

Create a new 1000x1000 pixel document in Photoshop. Fill in the background layer with a dark grey color (#333333).

Step 2 - Adding the Header

Take out the Rectangular Marquee Tool (M) and make a selection of 1000x250 pixels. Fill this selection with pure black on a new layer.

Step 3 - Content Base

Let's add are main content box. Create another rectangular marquee selection, this time 780x800 pixels in size. Create another layer and fill this selection in with a light grey (doesn't matter which, we're going to be messing around with colors later.) Place this block in the center of the document, touching the bottom edge.

Step 4 - Blending Options

We're going to apply some quick effects to help our content stick out more. First right-click on the 780x800 content box we made in step 3. Enter it's blending options and apply the following...

Next, select the header layer and apply these settings...

You should now have a nice shadow effect on your main content box, and strokes for both sections.

Step 5 - Creating the Footer

Let's start working on the footer. Create a duplicate layer of the header layer by right-clicking the layer and selecting "Duplicate Layer...". Position this layer at the bottom of the document like in the image below.

Step 6 - Creating the Footer (2)

Our footer is a little bit oversized, so let's cut it down height-wise by 125px. Make a 1000x125 pixel selection, place it over the bottom of the footer, then press delete on your keyboard. This will clear out whatever was inside the selection. Move the footer down once you downsize it.

Step 7 - Creating the Footer (3)

Let's apply some quick blending options to our footer. Firstly, change the opacity of the layer from 100% to 95%. Next, enter the footer's blending options and apply the following color overlay...

Move this layer above all the layers we've made thus far. The color overlay and opacity change should now give your footer a look similar to the image below.

Step 8 - Content/Navigation Separation

Create a selection of 530x800 pixels. Position it over the left side of the content base. Create a new layer, and fill the selection in with a light grey (#dddddd).

Step 9 - Content/Navigation Separation

Create a selection of 530x800 pixels. Position it over the left side of the content base. Create a new layer, and fill the selection in with a light grey (#dddddd).

Step 10 - RSS Icon

Just to keep our blog theme intact, we'll be putting a quick RSS icon above our navigation. Head on over to Feed Icons and grab the "Developer Kit Package". Grab the 128x128 pixel RSS icon and drag it into your document. Position the layer below the main content. Go to Edit->Transform->Rotate and rotate the icon a little bit to make it pop out more.

Step 11 - RSS Icon (2)

Let's add some quick gloss to the icon to give it some more class. We're going to use a series of selection techniques to create the final shape we want to fill in.

1. Hold down ctrl on your keyboard and click once on the RSS Icon layer's thumbnail. This will give us a perfect selection to work with.
2. Go to Select->Modify->Contract and contract the selection by 5 pixels.
3. Take out the Elliptical Selection Tool. Hold down alt on your keyboard and create a circle in the bottom-right side of the icon. Let go of alt, but still hold down left-click. Press down again on alt and shift on your keyboard, then expand the circle until it takes up most of the bottom-right side of the icon. Let go of your left mouse button and you should have a nice rounded triangular selection to work with.
4. Take out the Gradient Tool (G). Drag a white to transparent gradient on a new layer. Keep messing around with the length and position of the gradient until you get a desired effect.

Step 12 - Header

Now that we have the RSS icon out of the way, we can begin work on our header. Add a title to your page, and possibly a subtitle to go along with it. I used Century Gothic font in mine, but feel free to choose a font that suits your needs.

Step 13 - Navigation

Begin filling in the navigation with some filler text. I chose to make my navigation titles Century Gothic once again, while the links are a normal Arial font base.

Step 14 - The Date Icon

What's a good blog without a date icon? Seriously, let's throw one in there for generic stereotyping reasons :)

1. Create a 100x75 orange base for us to work with on a new layer.
2. Next, create another selection, this time 75x25 pixels in size.
3. Fill this selection with a dark gray color (#333333 is a good choice.)
4. Go into the layer's blending options and apply a #333333 stroke, 2px in size.
5. Add your date text, making sure it's a legible color. I again went ahead and went with Century Gothic as my font in this step.

Step 15 - Heading

Let's begin work on the heading part of our body. Add a simple title to your article, and throw a solid bottom border below it (Use the same color as the right column.). Then put your typical blog posting information on the bottom-right side of the heading.

Step 16 - Navigation Selection

We need to make our selected articles pop out more on the navigation bar, so we're going to add a simple orange arrow to it. First, change the font color of the active link to pure white all around. Create a new layer and take out the Pen Tool (P). Create paths that form the shape close to the arrow below, and then fill the shape with a bright orange color to fit the theme.

Step 17 - Navigation Selection

Ctrl+Click on the arrow's layer to create a quick selection from the shape. Once that's done, create a new layer above this one. Contract the selection by a couple of pixels, and then fill in a white to transparent gradient in the selection. Keep messing with the gradient until you get the desired gloss effect.

Step 18 - Lipsum Finish

Bring out the dummy text. Fill in the blank body with some pure black, 12pt Arial lipsum dummy text.

...and you're finished.