The Designmark Graphics blog
Quality tutorials for Inkscape and GIMP
Today I'm offering a free, downloadable set of templates for all you open source software-using web designers out there. Many websites use layouts based on the 960 grid system, but I haven't come across many ready-to-use templates for GIMP or Inkscape.
The 960 grid system provides a solid but flexible framework for web layouts, consisting of columns to fill with site content, and gutters to space them out or be spanned by images, sliders, navigation elements and so on. It's highly customisable and can form a good base for responsive website design, too. If you're creating a site which uses the 960 grid framework, these files should be perfect for your web design mockups and image slicing for export.
Below, I'll share some further info on what I've created here but if you're all ready to go, click the link at the bottom to download a ZIP file which contains all the template files you'll need.
About this freebie
The document widths are all set to 1280 pixels, with a height of 1100 pixels for both sets of files. This should allow you to focus on the central columns of content, while also being able to add in any backgrounds that expand beyond the margins of the middle area. If the document width or height is insufficient (or too great), jump into the document settings dialog (Ctrl, Shift and D in Inkscape) or Image --> Canvas Size in GIMP and set new values there.
On each I've inserted a series of guides with snapping enabled, to help speed up the process of aligning individual page parts horizontally. You could use it for research, say, and find a site that uses the 960 pixel grid to see how the content is structured. Let me pick one entirely at random:
How to use the XCF templates
In each case I've added a layer group with the reminder annotations, and another translucent layer containing the column overlays. By working on layers below these you can build up your design and align elements to the guides, all the time seeing how your content fits into the column arrangements.
In the Layers panel, click the eye icon next to each one to hide it and see your design without the overlays.
How to use the SVG templates
Similar to the XCFs, these Inkscape SVG files contain a layer (locked to enable easy, click-through editing below) with translucent column overlays indicating the position of each horizontal space in the grid. The guides are set at the intervals to allow your content to snap to the starting points of each column.
Here's the big download link; I hope everyone finds these materials useful. Leave me a comment if you've made something using them.
Be aware that all comments are moderated before being published on site. Please be considerate to others in any comments you post and please don't spam.
3138 comments (newest first)