Skip navigation

What does the Twitter logo have in common with the Parthenon and Da Vinci’s Last Supper? They are all designed using the Golden Ratio. Also the Golden Ratio is found in almost every aspect of nature.

 

The Golden Ratio can help you create natural looking compositions that are pleasing to the eye. In this blog I want to show you a simple way to create a flexible Golden Ratio grid you can use to improve your designs.

 

What is the Golden Ratio?

Trying to put it short and simple, the Golden Ratio is a special number approximately equal to 1,618. It is found when dividing a line into two parts so that the longer part (a) divided by the smaller part (b) is equal to the whole length (a+b) divided by the longer part (a).

Schermafbeelding 2017-08-14 om 12.46.59.png

a+b is to a

as a is to b.

 

You can find the same proportion in the Fibonacci sequence. In the Fibonacci sequence each number is the sum of the previous two numbers.

Fibonacci nummers.png

 

The numbers of this sequence are: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, ... etc.

The ratio of two numbers becomes increasingly closer to the Golden Ratio (1,618..) when the numbers get higher. For instance 21:13=1,615. Comes pretty close to the golden number. 144:89=1,617 and comes even closer.

 

Create a Golden Ratio grid

We will use the Fibonacci sequence to make the Golden Ratio grid in a Golden Rectangle. The grid is very flexible, you can apply the proportions in different ways. You can use it to organize the main content and the sidebar in a website or the column layout in a brochure design, for instance.

 

The grid is made in Photoshop, but you can apply the same procedure in Illustrator or InDesign

 

  • In Photoshop, make a new document (File > New).
  • Use two Fibonacci numbers for the Width and Height: Width 987 px and Height 610 px. This is a Golden Rectangle.
  • Set the Ruler Units to pixels in Preferences > Units & Rulers.
  • Now from the vertical ruler, drag a vertical guide to 610 px. Zoom in to see the exact number in the ruler!

Schermafbeelding 2017-08-14 om 15.16.51.png

Here you see the result after making the guide and giving the two parts a different color.

Schermafbeelding 2017-08-11 om 11.21.54.png

Why 610 px? Well, look at the Fibonacci sequence. The canvas width is 987 px. The previous number is 610 and the number before that is 377. This means the yellow part is 610 px and the turquoise part is 377 px. 610 + 377 = 987.

 

You have now divided the canvas according to the golden ratio!

 

No need to stop here! You can make a new division with the smaller number in the Fibonacci sequence: drag a horizontal ruler to 377 px.

Schermafbeelding 2017-08-11 om 11.46.31.png

And so on. You can make any composition you want, using the Fibonacci numbers.

Schermafbeelding 2017-08-11 om 12.09.00.png

 

Use the grid in other Document sizes

You can apply the grid in other designs with different sizes. Let’s say you want to use the Photoshop grid in a new document called ‘New Design’.

 

  • First, in the grid document, make a new layer (Layer > New).
  • With the Brush tool, draw a line over the guides.

Making the other layers invisible, it looks something like this:

Schermafbeelding 2017-08-14 om 15.47.49.png

Now you can copy, paste and resize the grid.

  • Make sure ‘New Design’ is opened in Photoshop.
  • Go back to the grid document.
  • In the Layer panel, duplicate the layer with the lines. A new window pops up.

Schermafbeelding 2017-08-11 om 16.58.56.png

  • In Document, choose the 'New Design' file.

 

Now go the 'New Design' file and you’ll see the grid appears in a new layer. You can adjust the size of the grid by dragging the corner handles. Press Shift as you drag a corner handle to scale proportionately.

Schermafbeelding 2017-08-11 om 17.11.04.png

I hope you enjoy using the Golden Ratio in your designs as much as I do!