Jump to content
You must now use your email address to sign in [click for more info] ×

Golden Ratio Template


mrdzyn

Recommended Posts

I'm sharing this template for golden ratio, original tutorial I followed was for Inkscape which I was previously using before falling in love with Affinity Designer. Original work is from Nick Saporito on youtube. Basically you use the set of "Golden Circles" to create an illustration by intersecting the different sizes of circles. Hope you guys enjoy using it for your own designs!

golden-ratio.afdesign

Link to comment
Share on other sites

hi, i just saw your reply, you use the 6 circles, the original file was in inkscape (tutorial here by Nick) but you can skip the first parts already since the GOLDEN circles were already made in the template.

you copy the different sizes of circles and make them intersect to cut/visualize the design.

 

)

Link to comment
Share on other sites

  • 2 weeks later...

1) draw a  circle 100x100px.

2) duplicate circle 1 and increase the size of it to  162x162 px

3) duplicate the new circle 2

4) select circle1 + circle 2 (leaving one copy of circle 2 ) and downsize them until circle 2 has 100x100px

Repeat this until you have enough circles.

 

here is a useful website for the golden ratio stuff. They also created PhiMatrix plugin ( not sure if they developed it for AP/AD) but used it a lot with photoshop. 

https://www.goldennumber.net/category/design/

Link to comment
Share on other sites

  • 3 months later...

THe only issue i found while trying to do this in AD is when dividing the sections to make them all individual, the divide separates each section on the fill leaving a gap once you delete all the pieces not needed. then when trying to combine them, there's a gap between every piece. Ill include attachments on the process.

 

 

Here: I added a yellow fill layer behind the lines.

 

5a79675bcffa2_ScreenShot2018-02-06at2_22_50AM.thumb.png.a87c0a8fa7a058b187b3bdac814c5cd7.png

 

 

2.. I then selected both to have divided for individual sections.

 

5a7967781d163_ScreenShot2018-02-06at2_23_02AM.thumb.png.9244a3ae81c6231ffae20470534959cc.png

 

 

 

 

3. Heres original result.

 

 

5a79679374a33_ScreenShot2018-02-06at2_24_13AM.thumb.png.5e44804f7ab873583edf8d67024ac240.png

 

 

 

4. I changed selected divides ( Layers to yellow)

 

5a7967c3d8542_ScreenShot2018-02-06at2_26_22AM.png.982ad278d34073f46937519594c6b73f.png

 

 

 

 

5. Here's showing the black outlined divide thats creating the separations between shapes. with it on and then off.

 

5a7967caa319e_ScreenShot2018-02-06at2_28_13AM.thumb.png.6131adbc24a674470b0c8f3e34788df1.png

 

 

 

5a7967c6b12b1_ScreenShot2018-02-06at2_28_02AM.thumb.png.3fb2e073e619e682c0690c8ab3438e80.png

 

 

Link to comment
Share on other sites

  • 7 months later...
  • 1 year later...
  • 1 year later...
  • 1 year later...

Hi there!!

This is a great template. Here's a convenient method. Grab a single circle and do the following:

  1. CMD+J (Windows: CNT+J) to duplicate the shape
  2. In the TRANSFORM box, make sure the constraint-proportions lock is enabled
  3. Click in the WIDTH or HEIGHT box, press the right arrow key to go to the end of the dimension, type *1.618 (asterisk-1.618), then hit enter.
    1. So for example. If the dimensions is 50px in the width, then it should be 50px*1.618
  4. Press CMD+J/CNT+J, and a new duplicate layer will appear but now bigger and proportional to the golden ratio. Keep duplicating for an additional new circle resized.
  5. To decrease the size, simply divide by 1.618.
  6. ???
  7. PROFIT!
Link to comment
Share on other sites

6 minutes ago, Groovdafide said:

press the right arrow key to go to the end of the dimension, type *1.618 (asterisk-1.618)

Alternatively, press Cmd+A (Mac) or Ctrl+A (Windows) to select the entire width or height value, and replace it with *=1.618 to multiply the current value by 1.618. Or if you want to get really fancy, you can use the expression *=(1+sqrt(5))/2 instead!

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

11 minutes ago, Alfred said:

Alternatively, press Cmd+A (Mac) or Ctrl+A (Windows) to select the entire width or height value, and replace it with *=1.618 to multiply the current value by 1.618. Or if you want to get really fancy, you can use the expression *=(1+sqrt(5))/2 instead!

Me like it! I only added the ARROW bit for those who are absolute novice who may not understand. But I loooove expressions!

 

Link to comment
Share on other sites

1 hour ago, Alfred said:

Alternatively, press Cmd+A (Mac) or Ctrl+A (Windows) to select the entire width or height value, and replace it with *=1.618 to multiply the current value by 1.618. Or if you want to get really fancy, you can use the expression *=(1+sqrt(5))/2 instead!

Still easier:

Use the constant phi or gr or φ in your expression. For example *=phi

[Edit] All are equivalent. The letters gr are for Golden Ratio.

Affinity Suite 2.4 – Monterey 12.7.4 – MacBookPro 14" 2021 M1 Pro 16Go/1To

I apologise for any approximations in my English. It is not my mother tongue.

Link to comment
Share on other sites

7 minutes ago, Oufti said:

Still easier:

Use the constant phi or gr or φ in your expression. For example *=phi

Oh no, that’s cheating! :D

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.