Photoshop Tutorials

Complete Guide to Creating a Blog Website Layout

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:

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13

Luminar: AI Photo Editing
Sponsored

Luminar AI lets you turn your ideas into reality with powerful, intelligent AI. Download the photo editor and see how you can completely transform your photos in a few clicks.

2 comments on “Complete Guide to Creating a Blog Website Layout”

  2. Dzięki za tutka. Muszę przyznać że fajnie wygląda ale przy 8 latach doświadczenia wszystko można zrobić :)

    BTW:

    Czemu mnie nie dziwi że w komentarzach pojawia się flame ? ;d

    Reply

Leave a Reply to android development in chennai Cancel reply

Your email address will not be published.

Special FX Photoshop Actions

Free Photoshop Actions

Get 10 free Photoshop actions when you subscribe to our newsletter.
Close
cross