While working on a site’s CSS, I’ve been using transparent PNGs to overlay a grid image on the page in order to align design elements to the grid. Previously, I specified a repeating background grid image on the body tag, and commented it out when I didn’t want to see the grid. That works fine, but any child elements that use background images or colors will sit on top of the grid, obscuring it. And the repeating grid image will take the place of any background image which is supposed to be part of the design.
Here’s a Photoshop template for a page based on a grid 960 pixels wide. I have found this combination to be useful and start most projects with a variation of this file (the color palette I start with is different).
I’m working to incorporate some more varied fonts into a new design without resorting to Flash or image replacement.
Let’s say you need to take a screenshot of a website for your portfolio. A common task, right? If you are on a PC, simply print screen, paste in Photoshop, and away you go. On the Mac, use some unintuitive key combination, open in Photoshop, and wait! The color is different.
I recently read a nice little guide called “Twenty-two tips on typography…”
A while back I started investigating grids—what they were, and how they could help my design. As a web designer, I never thought much about grids. It seemed to be some esoteric thing print designers used. Back in the table-based layout days, I probably used grids without even knowing it. Table columns and rows naturally structured the layout, the cellspacing attribute acted as a gutter between rows and columns, and cellpadding added a bit of buffer for the text. Of course, I normally set both to zero for pixel-precise layouts. I’m glad I don’t work that way anymore…