If you like this tutorial, please register. It encourages me to make more.

If you have any questions about this specific tutorial, just post on the thread. If you have questions about web or graphic design in general, feel free to ask any questions (newb questions or difficult ones!) in the web designer forums.

This tutorial is sponsored by the Xemion Web Designer Directory.

There are a couple things that are oft overlooked by tutorial writers and people learning how to design. One of these things is Rulers. At first look, a normal photoshop instance would look like this:

We want it to look like this:


To turn on rulers, we go to View, then check Rulers, about halfway down.


Now we need to bring the guides out. Guides are things that allow rulers to be actually useful.

Click on the side ruler, hold down, and drag into the open canvas. Notice there's a vertical line following your mouse? Thats the guide. Place it somewhere you want to align something (like text).

Next we need to make sure Snapping is on. Snap is what makes something you are dragging along to align a guide. Go to View -> Snap (It's right below Ruler). Make sure it's checked.

Now you can align things, in my example, I used it with text.


This may seem like an insignificant aspect, but that would be a pretty stupid assumption. Using rulers is a thing that, once you use it, you cannot stop using it, because it is that helpful. You can use it to align text, design elements (like menus), add in convincing looking filler text. Use it once and you will never design again without it.

Thank you for this tutorial, i am so glad i joined this forum now. I always was curious as to what the purpose of the rulers in photoshop were but now it makes so much more sense, thank you for the incredible, detailed compilation of instructions.