Layouts

Complete Guide to Creating a Blog Website Layout

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

final-results[9]


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


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:

step-001[6]

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

step-001b[6]

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

step-001c[6]

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-001d[6]

step-001e[6]

step-001f[6]


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.

step-002[6]

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.

step-002b[6]

step-002c[6]

step-002d[6]

The second parameter is a joint point. It is my personal naming system so it could differ from what you have red in some drawing books or so. Anyway, it’s not important, understanding the perspective plays here a main role. So if we will take a joint point under consideration… The very basic and easiest one is one-point perspective. And yes- it has only one point that is placed on the horizon line. Just imagine that you are in a huge cube and you are facing directly one of the inner walls. Vertical lines are parallel.

step-002e[6]

step-002f[6]

Now we can rotate our imaginary eyes in one axis so we will get two-point perspective. But still all vertical lines are parallel. The horizon line determines the level of our eyes. Don’t fully connect the horizon line with a real horizon. We can look at the sky or even be in outer space and look on some planet. So the horizon line isn’t perceptively determined, but our eyes are pointed in some direction. Ok, let’s take a look at two-point perspective:

step-002g[6]

Here every object have it’s joint points. But it is not said that there’s only two joint points on the scene. Every object makes two parallel lines and their joint point position depend on it’s rotation in relation to other objects. For now I suppose you will know and understand how the three-point perspective stands.

Related posts
LayoutsPhotoshop TutorialsUpdated

How to Create a Professional Web Layout in Photoshop

LayoutsPhotoshop TutorialsUpdated

How to Create a Beautiful Audio App User Interface

LayoutsPhotoshop TutorialsUpdated

Create a Captivating Street Dance Competition Poster with Photoshop

LayoutsPhotoshop TutorialsUpdated

Create a Vintage Style Poster in Photoshop

2 Comments

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get 57 Photoshop Actions Free from Our Awesome Newsletter!

Subscribe and get the latest Photoshop tutorials, tips, and more via email. As a way of saying thanks, you'll also receive a free copy of Lomocam Photoshop Actions by SparkleStock ($7 retail value).