budaloco Posted October 9, 2016 Posted October 9, 2016 Hi guys! I needed to create a custom design for a Brand manual and I was struggling with the fact that there's no layout grid option like sketch. So I decided to download the illustrator templates of the 960.gs grid system and adapt it to affinity designer using the constraints (so no matter how wide your artboard is, the grid will always strech porportionally). Hope you find this as useful as me. You've got three files: 12 column layout 16 column layout 24 column layout Happy designing! 960_grid_12_col.afdesign 960_grid_16_col.afdesign 960_grid_24_col.afdesign Patrick Connor, Bauke, A_B_C and 18 others 21 Quote
lordgiotto Posted October 16, 2016 Posted October 16, 2016 Thank you Budaloco, great resources ;) Quote
Richard S. Posted November 23, 2016 Posted November 23, 2016 Hi. Thank you for these resources, but could you please tell me how to install / use them, as I have no idea where resources such as gradients, swatches, brushes, grids etc are stored. Thank you very much. Quote High-End Photographic Prints
Staff MEB Posted November 23, 2016 Staff Posted November 23, 2016 Hi DesignMeister, Welcome to Affinity Forums :) There's a menu on top right of each panel that let's you import the corresponding resources, so for swatches for example, go to the Swatches panel, click on the top right menu and select Import Palette.... Same for brushes. The above templates are just regular files with a few objects (the columns) inside a single layer. Open them as any regular file to use as a base for your project. If you want to keep them at hand you may want to drag them (select the grid on canvas) to a new category in the Assets panel (menu View ▸ Studio ▸ Assets). Quote A Guide to Learning Affinity Software
Richard S. Posted November 23, 2016 Posted November 23, 2016 Thank you very much MEB! Quote High-End Photographic Prints
SrPx Posted November 24, 2016 Posted November 24, 2016 Thanks! Haven't opened the files yet, but having worked with grid systems for the web, I expect this to be super useful. Great! Quote AD, AP and APub V2.5.x. Windows 10 and Windows 11.
Morten_Hjort Posted November 29, 2016 Posted November 29, 2016 Wow hadn't found the Assets before even though I did look for some Sketch-like functions. Is it possible to change how the thumbnails look? It can be tricky to recognize assets when theres only a thumbnail showing the left side. Quote
Staff MEB Posted November 29, 2016 Staff Posted November 29, 2016 Hi Morten_Hjort, Welcome to Affinity Forums :) No, there's no option to change how thumbnail's look. If we showed the entire object it could become unrecognisable (too small) depending on its dimensions (proportions). Quote A Guide to Learning Affinity Software
gr8rck Posted November 29, 2016 Posted November 29, 2016 I had a similar problem and found the "show as list" option works best for me. You still get a thumbnail and as long as you name accordingly then it clears up most issues. Example of how i'm structuring the assets:Guides - Web - - 1170 | 1140 (* 1170px width with an 1140px container) - - 980 | 950 (...) Ryan. Quote
GreyEyes Posted January 6, 2017 Posted January 6, 2017 I played around and figured a way to do it without external dependencies, it's not perfect, but it works. We know a 960 grid is 960px wide (don't confuse this with the width of our workspace, as monitors vary in resolution width), we'll stick with 960px centred. If we want a 12 column grid, 960px divided by 12 = 80px, thus each column occupies: 10px (white space) + 60px (coloured column) + 10px (white space). The way to implement this is Create a new web document in Affinity Designer, doesn't matter on width, as monitor width vary, as we're only interested in 960gs centered. Select 1280 x 800 resolution for this example, select pixels as units (for now), click ok. We need to open the Grid and Axis Manager. From the menu Select: View -> Grid and Axis Manager. With the Grid and Axis Manager open. Ensure show grid check box is checked (enabled) Uncheck Use Automatic Grid Click Advanced Button to expand available Axis options. Uncheck Uniform (make sure it's not selected). On the first Axis: Select spacing 60px (column width) Set gutter to 20px. We know each column has 10px either side, 20px between adjacent columns. I select divisions to 15, creating a 15 x 4px grid within each column (column being 60px wide). On the Second Axis: Select spacing 60px (same as first) Divisions same as first access to 15 (or change to visible desired horizontal partitioning) and Gutter to 0 (this will now leave columns)... ensure ZERO!! Finally to create the 960px 12 column workspace. As our current document has 14 columns displayed on our 1280px wide document. Using the Guides manager (select: View -> Guides Manager) Add 2 Vertical guides at 150px and 1110px. You will have something that resembles a centred 12 column 960 grid system within the 2 guides set. You can play around with snapping and constraints to enhance it further. Also to finish off nicely, as the columns start from the left you've got 20px of white space on the final right column. Just reduce the document by 20px or set/select 1260px width, instead of 1280px. It would be nice if they added a grid offset starting point for x and y (and by gutter or space) and number of times it's repeated for x and y, also each axis (column) has a spacing colour option, to allow us to create a highlighted column background colour. That way, we'd be able to create a proper 960 grid, or any type of dynamic grid, limited to the number of columns we want and centred (offset) and coloured correctly. Quote
chirpy Posted February 26, 2017 Posted February 26, 2017 budaloco, out of curiosity, is there a reason you set your document to use points instead of pixels? Quote
budaloco Posted February 27, 2017 Author Posted February 27, 2017 budaloco, out of curiosity, is there a reason you set your document to use points instead of pixels? None at all I think I forgot to change it...I guess. Quote
Recommended Posts
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.