Footfive Designs

Learn how to re-create this stylish and sleek blog template in Photoshop.

From my big collection of templates I have created I decided to write a tutorial for this blog template. It was meant for a Wordpress blog, but I never coded it.  I will teach you how to make the general outline, and the necessitous, from there you can add the rest of your content.

Here is our final product:

Also, you can click the thumbnail images to make them larger.

1) Create your new canvas in Photoshop which will be, 1024×1050 pxls. Double click on the locked layer that is created with the document to unlock it, rename it to BG and grab your Paint Bucket Tool. Select this neat shade of grey, the hex code for it is: d0dbb3. Use the Marquee tool and select about 2/3 of the document, leaving a top space for the banner, fill this selection with our color.

2) Next were going to create the navbar will the text links will go. Make a new layer and using the Marquee tool drag a box the whole width of the document, and about 55 pixels high. Fill this layer with white, right click this layer and select Blending Options. Add ALL of the following as they are seen:

After you apply all the styles above, move the navbar down a bit so some of the BG layer shows above it. You should have this:

3) Next I created a new layer. Using the Marquee tool I created another box just like the navbar, except taller. I filled this with black and applied the following blending options to it:

and you should end up with this, placing the box we just created on the top top layer, right above the navbar:

4) Now duplicate that layer you just created, and press ctrl+t, scale it so the height is much smaller, not bigger then 10pxls high. Make sure this layer is the top top layer. Have it line up perfectly with the banner we just created, then using the arrow keys, tap down a few times so it overlaps just a tad.

5) Now go back to the first big black banner we made in step 3. Duplicate this again, but keep it underneath the box we made in step 4. Go to edit-transform-flip vertical. Now line it up so it touches the top of your document, and the box in step 4 exactly. It should create this little emboss effect.

6) Next I dropped in my logo, icons, navbar text, etc that I created beforehand. I will not go into depth with those in this tutorial.

7) To reuse elements in our template is a quick and easy way to get everything matching. As you can tell through ought the tutorial we have been copying and pasting. Thats how I next created the little “blog posts”. I copied the silver navbar, used the ctrl+t method to scale it. Then I duplicated the big black banner, and throw everything ontop of eachother. Once you made the shape you can merge everything onto one layer. I dropped in my text, and image placeholders.

8 ) Using the copy and paste (and transform) method, keep adding your content boxes until a full layout takes shape. Add more content, text place holders, etc, and eventually you will end up with a final layout.

Any questions feel free to ask! It is hard to follow for a beginner! Lets see some feedback in the comments, get involved!

Thanks for reading, and dont forget to subscribe to the rss feed!