Johnny Nines

Do you use a grid for your web designs? Do you use the 960 Grid System? Well if you do, I have provided a set of Photoshop actions for you to download.

These actions will create a Photoshop document ideal for laying websites out in 12, 10, 8, 6 and 4 columns.

Key Features of the Actions:

• Creates a new Photoshop document from scratch.
• Creates guides to determine grid columns and gutters with transparent layer to show gutter space
• Creates Layer Groups for Header, Content, Footer and Backgrounds making it easier to lay your sites out in a orderly manner.
• Compatible with Photoshop CS3 and higher
• Works on Mac and PC

To install simply download the file below, then unzip and place the “j9s-960-columns.atn” into your Photoshop Actions folder. Open up Photoshop and navigate to your actions palette, select “Load Actions” from the palette options and enjoy.

Download 960 Grid Actions

As a designer of interfaces I have to create wireframes in order to get a good idea of how all the elements of an app or website will fit into a defined pixel space. As I repetitively use the same elements like scroll bars, lists, buttons, tables, tabs, etc. it was natural that I would create Illustrator symbols to drag and drop into my wireframes. Over the past few projects I have tried my best to compile a decent library of elements that any designer, or user interface designer can use in their wireframes.

This download contains the symbol library and a full Adobe Illustrator file with all of the elements spread out on the art board. To install this library just drag and drop the file named “Wireframe Symbols.ai” into your Adobe Illustrator Symbols directory. Once you are in Illustrator go to your Symbols Palette and load the library.

This file is compatible on both Mac and PC. If you know others that would benefit from this file by all means send it along to them. I hope you enjoy the file and happy designing!

Download the File Here

One of the many subscriptions in my reader is PSDTuts. Even though I am very versed in Photoshop the articles and ideas that get spawned after reading PSDTuts is overwhelming.

Tomorrow I will wrap up my Web Design I class, and this article from PSDTuts is such a great example for my students as they continue their studies in design and coding. The article focuses on the many faces of a decent web design template, exploring the diversity of a well prepared layout. It shows how one simple, clean structure of information can be used in an abundance of designs. It is a must read for any budding web designer and the detail the author places on his topic are second to none. Check it out here.