Tag Archives: Grid

Grids, grids and more grids

A while ago I mentioned Grid Designer for web page layouts that I used as Photoshop overlay. I just discovered two more apps that can do the same with some advance features.

Developed by Paul Holliday, Gridmaker is a free plugin to create grid layers within Photoshop CS4. Gridmaker offers almost the same functionalities as Grid Designer apart from grid export to CSS. With real-time grid formation (online only) and export to a PNG, this utility is quite handy for web layouts.

Gridmaker by Paul Holliday

In my tests the online version appears to be more flexible as Photoshop plugin simply adds a new layer every time you update grid and render it. The best way to work with this tool is to layout grid online and exports it as PNG to use in Photoshop.

Boks

This visual grid editor based on blueprint CSS appears to be the most advance grid solution yet. Built by Quentin T with Adobe Air, the application has a very simple interface to layout grid with PNG and CSS export. You can in fact create a basic HTML structure in Boks and it generates the script for you.

It handles grid configuration, baseline rhythm pimpin’, CSS (with or without compression) and grid.png export, HTML layout and much more goodie-goodie!

Boks by Quentin T

8 June Share your
thoughts

Grid Designer

Under - Design, Resources

Recently came across this excellent handy tool by Rasmus Schultz to setup grid and generate CSS for web page layouts. I like the fact that you can see the grid taking shape in front of you and its flexibility to maximize web page ‘real estate’ use. I haven’t tried it in any of my projects yet but using a grid screenshot as Photoshop overlay in one of my existing web design projects and finding it quite helpful!