Create a great website design in Photoshop! This tutorial will show you tips and tricks for creating your own blog layout. In addition to basic website template designing, you’ll learn some basics about perspective drawing, design theory, and website slicing. A PSD and sliced HTML template is included.

Preview of Final Results

Download the PSD and HTML template

Strong Website Template.zip | 23.34 MB
Download from Website

Complete Guide to Creating a Blog Website Layout

Details

• Program: Adobe Photoshop CS4
• Difficulty: Hard
• Completion Time: 4 hours

Resources

• paper texture - batboy
• advent pro font - index-graphics
• paranoid font - Loki design
• mono icons - tutorial9
• social icons hand drowned - The-Force
• blank html template

Step 1 - Before we start/Perspective explained

I'm planning to use some hand-drawn elements on my design. It's kind of architectural drawings where perspective is pretty important aspect. So what perspective really is? It gives the flat image an illusion of third dimension. Makes graphic dynamic. Learning the basics of perspective will give you a great starter to manage a depth of field. Firstly, let's try to imagine a wall. Flat wall like this one. Notice the two green, parallel lines:

Lines are parallel- I repeat for this is really important. Now we will try to duplicate a wall and try to make a corner.

What? Why? It is still flat. Well, I think we have to make some additional transformation.

And now it looks much better, right? Point your view on the lines. They aren't parallel now, but theoretically in one of dimensions of this image they are. They are parallel AND got their joint point EXIST in the infinity. It smells quite complicated at first, but just think about it for a while. The underestimation of this subject is really important. To help you I will present some other examples of parallel lines that actually aren't parallel from OURS point of view.

Step 2 - A bit of theory

I hope that you have fully understood that lines system. Actually, there are two types of perspective. Linear where the objects are smaller relatively to distance and one based on depth perception where objects that are really close are blurred and those far, far away are hazy.

The connection of them is essential. Ok, now we will break a perspective into single parameters. First important thing, a horizon line. It is not always visible on the viewport but it should always be present in the scene to make a proper perspective. The horizon line is first thing that determines our point of view.