Creating a Simplistic Blog Layout.
ALERT – WE’VE MOVED TO RAZORIANFLY.COM
Did you Miss: Blogisode 01?
This tutorial will show you the basis of creating your very own blog layout. In this tutorial you will use some techniques we have already covered, as well as learn new ones. When finished, your end result should look something like this:
Before you Start
Your going to want to have Adobe Photoshop installed. Now, if you don’t currently have Photoshop, a feature-complete 30-day trial of the software is available, here for Windows, and here for Macintosh users. Ok, because I’m using an iMac, the keyboard controls I will feature in this article are going to be totally Mac-related so for you Microsoft Windows users, all you really need to know is;
Option Key = ALT
CMD = CTL
Ok, Lets Begin …
Step 1:
Open Photoshop and create a new document. You can create the document at whatever size you want, but for this tutorial, I’m going to recommend you create it at 700 for the width, and 1000 for the height. Create the document in ‘Pixels’.
Step 2:
Fill this layer with #2A3038. Now, your going to want to go to Filter > Noise> Add Noise and use the settings below:
Step 3:
Now we are going to take our selection tool. Create a new layer (CMD + SHFT + N) and drag out an area selection as below, making sure you leave enough comfort space around your selection:
Fill your selection with White (#FFFFFF) and we are going to add noise to this as well. Go to Filter > Noise> Add Noise and use the exact same settings as before.
Step 4:
Create another new layer, and make another selection to the righter-most side of your white rectangle. Try to make the selection square. To drag out a prefect square using the selection tool, hold shift while dragging.
Using the gradient tool,
Fill this selection with a gradient of crisp, light blue’s. I used #76A3DA to #2E7FAE. Drag your gradient out from top to bottom. To drag a perfectly straight gradient, again, hold shift while dragging.
Add some text options, and some separation lines, and you should now have something which looks like this:
Step 5:
You may also need to apply a ‘Drop Shadow’ and ‘Inner Shadow’ to these parts of the template. Your going to want to go to Layer > Layer Style and choose the appropriate options. Use the settings below for the best effect.
Step 6:
Now, you may also want to add text to the main banner, as below:
Tip: When choosing fonts, you want your blog’s title to stand out. If your blog has a strap line or slogan, try to choose two complementing colours. Also the font you choose will depict what your blog is about and how formal or informal your content is. When someone is visiting your blog, you’ve passed the stage of getting them to click onto your blog, the hardest part is you then have 20, or maybe 10, seconds to keep their attention with your blog and it’s content, before they leave. A great way to do this is to have an attractive top banner.
Congratulations, we have now completed our blog’s top banner.
Step 7:
Create another new layer and drag your selection from were the banner ends, to the length of content space you wish to have. Fill this selection with an off White (I used #DEE6EF)
Step 8:
Next we are going to focus on our navigation bar. This is quite simple and involves little effort. Create a new layer and pickup your rectangular selection tool. Drag out a selection below your white banner, about 40 pixels in depth, spanning the entire width of your blog template. Fill this layer with black (#000000). Lower the layer’s opacity to 19%.
Add some text and some feed icons, and you should now have something like this:
The Final Touches
There you have it, a quick tutorial of how to create a simplistic blog layout for our own blog, or someone else’s! – I’ve found mixing different shades of the same colour is an ‘in’ look right now for blogger’s. It’s now up to you to make this template your own! – I learnt Adobe Photoshop in months simply by experimenting by myself.
If you need help with this tutorial, need more detail, or fancy writing tutorials for the series here at RazorianFly :], feel free to e-mail me at razorianfly@gmail.com. Alternatively, leave a comment below!
Resources to help you finish your project:
RSS Icon: http://www.binnerriem.org/images/rss-icon.gif
WordPress Icon: http://gettingsitesbuilt.com/imgs/wordpress.png
Huge range of Photoshop Brushes: Deviantart.com
Thanks for following the tutorial, tune in for the next one in the series, soon.
Cheers,
R-Fly
