Skip to Content

339

LivingDesign.info is a creative and inspiration resource dedicated to design and life and everything in-between

LivingDesign.infoLivingDesign.infoLivingDesign.info LivingDesign - Home LivingDesign - Home

Tag Archives: Grid

16 August Share your
thoughts

Grids, grids and more grids

Under - Design, My Musings, Resources

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.

Gridmaker

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

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

Boks by Quentin T

8 June Share your
thoughts

Grid Designer

Under - Design, Resources

Grid Designer2

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!