New to Vibr8 Bros.? Don't panic. Get our RSS Feed.

If you’re in photography, this might be one of the most important rules to follow. If this rule is new to you, stick around, as the Rule of Thirds applies to designers as well. In this tutorial, we will trim Adobe Photoshop for the Rule of Thirds - making your designs look better and more appealing.

A photograph, or artwork, is more appealing to the eye if the designer follows the Rule of Thirds. The rule states that by dividing an image with two vertical and two horizontal lines into nine equal rectangles, the intersections of these lines form the four preferred spots for an image’s focal point(s). Sounds confusing? It’s not, really - just read The 5 Rules of Composition over at our sister blog Nubloo.com.

Now we will turn this into practice by creating a Rule of Thirds template for Photoshop. In the end, you’ll have a custom shape which you can apply to any of your artwork in an instant, and use it to enhance your work.

Note: this tutorial is written for Adobe Photoshop CS3 for Windows. If you are using Mac, Ctrl is Cmd and Alt is Opt. Also, if you prefer easy street, you can download the content of this tutorial lower on the page.

1. Create a new 300×300 px Photoshop file

In Photoshop, hit Ctrl+N to create a new document. Use the following settings:

We will use this document to create our custom shape thirds.

2. Place guides at 0, 100, 200, 300 pixels

We’re going to draw some guides first. Make sure that the following options are selected in the View menu:

Snap to Guides and Document Bounds should be selected. Also, if the rulers aren’t showing yet, hit Ctrl+R to activate them.

Now, we start pulling guides from the ruler into our empty image. We do this by clicking and holding on the top or left ruler, and with the mouse button still pressed, we pull a guide into our artboard.

We place four horizontal rulers and four vertical rulers in the image at exactly 0, 100, 200, and 300 pixels. If you let go of the line before it’s placed correctly, simply hit Ctrl+Z to go back one step.

So far, our image should look like this:

That’s great! Now, that we’ve got our guides right, we’re moving on to the next step.

3. Create paths using the guides

Hit U to get the Rectangle Tool. In the Options palette, make sure you have Paths and Intersect path areas selected.

Now, we draw nine rectangles which will snap to the guides we created. Start in the upper left corner and draw one by one…

…until you have nine squares.

Now, hit A for the Path Selection Tool (the black arrow) and select all paths by clicking and dragging from top left (outside of the artboard’s boundaries) to the low right. In the Options palette, select Exclude overlapping shape areas and hit Combine.

Our nine single paths have now been converted into one single path. All we have to do now is save that as a custom shape for further usage.

4. Create a shape from the paths

Our path should still be active. In the menu, we go to Edit > Define Custom Shape…

… and give our custom shape the name thirds. Now that we have it saved for this document (which we will no longer need), we have to make sure that we save it as a global shape in a custom shape file. To do that, we go to Edit > Preset Manager and select Custom Shapes:

Now we can see our thirds shape: it’s the black square at the end of the list. It shows as black because our paths have no fill and no stroke. It’s just fine the way it is - so now, we simply select our shape, hit Save Set… and give it the name thirds.csh. Hit Save once again - and we’re done! You can now get rid of the image we used to create our custom shape, we don’t need it anymore.

You can download the exact same file we just created here. It’s the custom shape file (.csh) for Photoshop CS3.

Now, let’s get into applying the rule of thirds to your images.

5. How to use the Rule of Thirds with your photos

Open up a various image in Photoshop. We’re going to use this one:

We found this CC licensed image on Flickr. It’s pretty good the way it is; it’s color corrected and slightly blurred already. But does the rule of thirds apply? And if not, can we apply it and make it look even better?
Let’s find out!

With the above image opened in Photoshop, we get the Custom Shape Tool:

In the Options bar, we click on the little arrow pointing downwards next to the Shape selector. The custom shape we just created should be there, represented by our little black square as seen before. If not - maybe you’ve downloaded the file we provided without following the above tutorial (shame on you!) - you have to go to Load Shapes…, locate the file on your hard drive and open it. Then you will have our custom shape, which we are going to select.

With the shape active, we click and drag our thirds over the image. Starting in the upper left corner, we drag all the way down to the lower right corner. Our artboard now looks like this:

Okaaay - we just applied our custom shape to the image. As we can see, the four intersections are in no specific place. So let’s try to adjust the image to fit into our rule of thirds.

With the path still selected, hit Ctrl+T - or, if you have some kind of keyboard-o-phobia, go to Edit > Free Transform Path. We will now attempt to place at least one of the four intersections of our custom shape on - or near - a focal point. We will do this to stress this point and see if we can come up with a “better” image.

We placed our thirds like this…

…with the upper left intersection on the rock. We did this for a reason we will explain shortly. Now, all we have to do is crop the image to the new borders and see what happens.

We hit Enter or double click somewhere on the artboard to apply the transformation to the path. Then, in our paths palette, we click on Load path as a selection…

…which leaves us with a selection of the outer borders of our custom shape. Now, all we have to do is go to Image > Crop…

…and Oh! Holy Brother! We’re done!!! This is the result:

What do you think? Does this look “better” than the original image?

By applying the rule of thirds, we emphasized the most important focal point of the image (the rock) and moved the secondary focal point (the girl) to the far left. The results are:

• the rock is now the center of attention,
• the role of the girl has been downgraded: she is now a co-spectator, placing
• the viewer (in this case, you) in a more prominent role: next to the girl, inside of the photograph.

There you go. By using this terriffic rule, we just added some magic to the image, making it more appealing to the eye. It’s vibr8ing now!

What do you think: does the photo look better now? Does the rule of thirds make it more attractive to you?

You want more? You want more. Subscribe!