Tag: photoshop

Dear Print Designer Doing Web Design

Dear Print Designer Doing Web Design

Great graphic design and great typography will always be great graphic design and great typography no matter what the medium. And print design and web design are two mediums which have a great deal in common. But there are some differences in the mediums. Switching from print design to web design can reveal some limitations and constraints along with some new freedoms I’ve worked almost exclusively in the field of web design (and development) and very little in print design. Not much as someone who “does design” but very heavily as someone who “implements designs” with (X)HTML and CSS. Over the years, I’ve seen patterns emerge with print designers doing web design. Little web design details that are often overlooked that don’t usually apply to…

Pixel Precision with Diagnostic CSS

Pixel Precision with Diagnostic CSS

Here’s a little CSS trick I started using a while ago that has really helped me to achieve pixel precision when converting Photoshop PSD (or Fireworks PNG or whatever) design comps into (X)HTML and CSS web standards goodness. The idea is to take the page that you’re developing in HTML and CSS and overlay it on top of the design mockup you’re working from. And you can do this inside of any browser. The idea borrows upon the spirit of “Diagnostic Styling” evangelized by Eric Meyer by using a few extra classes. First I take the design file and save it (save for web) as a flat PNG-32 into a directory that’s easily accessed by the css file I’m developing.  Then I open the HTML…