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

Affinity Designer Tutorial: centered grid layout


Recommended Posts

Hi all,

 

I figured out a way to configure a centered grid design in Affinity Designer, with a custom number of columns and gutter width.

 

Below is a spreadsheet to calculate the required values. If you make a copy of the file to you Google Drive, you can edit the values.

 

https://docs.google.com/spreadsheets/d/1imTD6Ao3OJyS0_E-fnHTr5l9GKG9zulM4uIutVZGAnE/edit?usp=sharing

 

Example values for the calculation:

 

Grid width: 1170 px

Nr of columns: 12 px

Column width: 97.5 px (= grid width / nr of cols)

AD Gutter: 30 px

AD Spacing: 67.5 px (= col width - gutter)

AD Document width: 1335 px (= 2*spacing + gutter + grid width)

 

Here's how you would use these values in AD to set up your grid.

 

Create a new document, use the calculated document width, 1335 px in this example.

 

post-43817-0-73787000-1484830322_thumb.png

 

 

Go to the View menu, enable 'Show Grid' and open the 'Grid and Axis Manager'

 

post-43817-0-51071500-1484830634_thumb.png

 

 

Apply this grid manager configuration:

 

- Untick 'Use automatic grid'

- Select 'Advanced' mode

- Untick 'Uniform' under 'Grid type'

- First Axis spacing: 67,5 px

- First Axis gutter: 30 px

- Second Axis spacing: 1000px, for this example we use the document height but you can use any height you like

 

post-43817-0-49955900-1484830731_thumb.png

 

 

Add guides to the left side of the first and last gutter.

 

post-43817-0-16999600-1484833224_thumb.png

 

 

Go to 'View' - 'Guides Manager'

 

post-43817-0-03194900-1484833258_thumb.png

 

 

Add half the gutter width to both guides by appending '+15' and pressing enter.

 

post-43817-0-92726800-1484833298_thumb.png

 

 

This should be the final result.

 

post-43817-0-45757900-1484833378_thumb.png

 

 

You will end up with two additional columns on the left and right side of the document.

The reason for this is that there is no way to have a margin on the left side of your document using the grid setup.

By following this tutorial you end up with a document that contains 2 more columns, but you simply do not use them.
In the export persona, you can easily set the slice to export only the part of your design you need.
 
In the screenshot below, I've marked the area you actually use.

 

post-43817-0-41916300-1486818782_thumb.png

 

Of course there is an example .afdesign file to save you the trouble ;)

 

centered 1170 px 12 col grid kareldries.afdesign

 

Link to comment
Share on other sites

I noticed someone asking me for access to the Google Drive file.

It is actually view only at the moment, so the best thing you can do is make a copy.

 

 

Here's a Dropbox link to the Excel file with the calculations in case someone finds that easier.

https://www.dropbox.com/s/kkbh8z9rx3djqt4/Affinity%20Designer%20centered%20grid%20calculation.xlsx?dl=0

 

 

Link to comment
Share on other sites

Hi all,

 

I figured out a way to configure a centered grid design in Affinity Designer, with a custom number of columns and gutter width.

 

Below is a spreadsheet to calculate the required values. If you make a copy of the file to you Google Drive, you can edit the values....

 

Nicely done! Thanks for sharing this. :)

♥  WIN 10 AD & AP  ♥  Lenovo Legion Y520 15.6" Laptop

Link to comment
Share on other sites

  • 3 weeks later...

Hi Jon,

 

There seems to be some confusion as to why you end up with 2 extra columns on the left and right side of the document.
The reason for this is that there is no way to have a margin on the left side of your document using the default grid setup.
By following this tutorial you end up with a document that contains 2 more columns, but you simply do not use them.
In the export persona, you can easily set the slice to export only the part of your design you need.
 

I marked which part you would actually use in the screenshot below.

 

post-43817-0-96856800-1486817940_thumb.png

 

Hope this helps.

Link to comment
Share on other sites

  • 2 weeks later...

Considering how powerful and thought out Affinity Designer's grid features are can anyone think of a reason you wouldn't want a gutter on the left side? Other than an odd outlier here or there I can't think of any, just curious why Affinity designed it this way.
 
Anyway, thanks for getting the math together and creating such a nice tool!
 
I went ahead and expanded upon it a little to also let you calculate spacing and grid size if you'd like to have a full gutter to both sides instead of half.
 
It's the difference between this:

 

post-10624-0-95429000-1487821414_thumb.png

 

And this:

 

post-10624-0-51766200-1487821436_thumb.png

 

Here's my updated spreadsheet.

 

My math skills could be a lot better but I did test this with several different values and always got the expected result, if anyone finds a problem please let me know and I'll do some troubleshooting.

 

I'm not a huge spreadsheet guy myself so I started by converting the calculations into Calca, if anyone else uses Calca and is interested here's the snippet. Note that I included a couple of other calculations and notes relevant to Affinity Designer as well but nothing too interesting.

 
Edit: Fixed my snippet link.
Link to comment
Share on other sites

  • 4 months later...

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.