Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

Dedicated to helping you learn the art and science of the web.

Golden Rectangle / Golden Section PSD Guide

There is a lot of misinformation out there when it comes to the gold section. I hear everything from "essentially it is the rule of thirds" to people describing it in as a way to make two column layouts. Neither of these are completely accurate however. The golden section is a ratio that creates a rectangle with sub-rectangles in the most visually appealing way. The ratio and golden section has been found in everything from the ratios and proportions of ancient artwork, modern and historic architecture and even can be seen in what we perceive as natural beauty in the human face and body.

To say that the golden rectangle is powerful is an understatement. Powerful and skilled designers can use this ratio to improve their designs dramatically, and what is amazing about it is that people won't be able to directly place their finger on how or why the design is so effective.

The Golden Rectangle Explained

The golden rectangle is a rectangle with its sides in the 'Golden Ratio' or 1 : 1.618. Where most people get this wrong with they might account for the ratio to divide a canvas horizontally (ie: into two columns) but they don't account for the fact that the ratio also specifies a height (vertical divisions). Failing to account for the vertical ratios will reduce the impact and effect of using this tool for visually pleasing designs.

The Photoshop Guide

To make it easier to use this principal we have created a simple tools that lays out a golden rectangle and it's divisions (on all four corners) that you can overlay onto any of your designs. While it is originally designed for a 960 pixel wide canvas, it was created using vector shapes so it can be easily re-sized to any dimension with out losing any quality.

It also is organized based on folders so you can hide / show any portion of it to best fit your design needs.

Downloads and Suggestions

I am open to all suggestions, thoughts or improvements. I am releasing this under the creative commons, so if you choose to post it somewhere or repurpose it please do the right thing and at least attribute me with a link (or two).

Download the golden selection PSD guide here and let us know what you think!

Leave a comment on Stylized Web Have some feedback? Leave a comment

15 Comments So Far

  1. The golden section is a really interesting and highly applicable bit of maths. I’m sure there are many ways it could be applied to design work, and I look forward to exploring its power. So thanks for the post and I’ll dowload the psd.

  2. By Matt posted on March 29, 2010 at 6:12 pm

    I use it in wedding announcement designs. The brides typicly choose the golden over the non (unless they are looking for square).

  3. I’m really into using grids to design my sites at the moment, of late I have been using the 960 grid layout which has improved my designs 100%. The reason for using grid layouts just helps secure easy navigation and attracts the viewers to all the right places. Making the site uncluttered and everything has its own place and still looking attractive and well designed.

    I will give this a go as well, see how it compares to using the 960 grid, I’m sure it will offer me another new way to layout site designs really well.

    Do you have any examples of designs in which this was used in?

    Thanks for sharing this, wouldn’t of found

  4. Nice post. I use a different grid grid system in my designs to help with the layout, it helps a lot. So I look forward to trying this one out.

    Thanks for sharing

  5. By clea walford posted on April 24, 2010 at 12:46 am

    thanks for the interesting post!

  6. By thanks posted on November 13, 2010 at 6:46 pm

    Wow, I’ve seriously been looking for this everywhere. Thank you so much!!!!!

  7. ukash satis ve ukash kart

  8. teşekkürler admin verry good

  9. Nice post. I use a different grid grid system in my designs to help with the layout, it helps a lot. So I look forward to trying this one out.

    Thanks for sharing

  10. sumomax throat cancer surgeries used to be looked at and all of these operations were made more frequently in the larynx was taken. Now for the disease in the early diagnosis can be caught earlier. Laser application, the problem of hoarseness can be treated and residents can go from the hospital the same day. These steps away from cigarettes and alcohol to absent oneself
    need to focus.

  11. Thank you so much for doing this! I learned the Golden Section the old fashioned way, with rulers, compasses, and finely sharpened pencil points, which is great, because I draw and paint. However, now I’m doing a postcard, and was hoping I didn’t have to fiddle around in Photoshop to make my own GS. I’m glad you offered this up for free.

  12. Woah this weblog is great i love studying your posts. Keep up the good work! You know, a lot of individuals are hunting around for this information, you could aid them greatly.

  13. kiz benim ahlarumdan bir heyur gormeyecesun

  14. ofss zaman ne cabuk geciyor

  15. I’ve said that least 2483157 times. SCK was here

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>