Travis Vocino Experiments in Art, Science & Technology.

With Photoshop CS3 Beta out and blazing on my MacBook Pro, I have indulged myself in some deep design work. Partly for fun, partly to get back into it, and of course for business. As most people have also said, I love CS3 so it’s pretty enticing to play around in there as much as possible right now (wow, that is a pretty geeky statement, sorry).

No, the new branding doesn’t really bother me. In fact, I really like it. Maybe I just like the sciencey feel or something. I’m not sure what everyone is so polarized about, personally. They look hip and fresh in classic “2.0″ minimalist style.

Anyway, as I was saying, my new thing is that I try to make every element needed in the final design, first in Photoshop. This means, rollovers, comments areas, how lists will look, how each header size will look, and more. Basically I create a huge page in Photoshop that acts as an “every-page” for the site.

The result is a huge Photoshop file but it’s definitely worth it.? Moving things around is no problem when everything is organized & layered properly.? Everything is left in layers (my last file had tons) so it’s pretty easy to break apart if you’re careful to consider organization early on.? I have everything broken up into groups of such as Header, Navigation, Comments, Footer, etc. with groups within those to organize individual elements.

From here, I take that graphical layout and extract the main large elements such as the backgrounds and basic wireframe.? This generally doesn’t take much time, especially since I have all my spacing and pixel values available right there in Photoshop.? I can measure the distance between elements and then set accurate values in my CSS files.

When creating links, I’ll have a link layer, a rollover link layer, and an active (depending on the particular need).? Hiding and displaying link styles, getting color hex values, and other textual data is no problem.? This continues to increase the effectiveness of the full Photoshop Layout method.

In the past I would proceed with a half-and-half approach where I’d create elements in Photoshop as needed.? Usually what ended up happening was the code would get too hung up on itself (does that make any sense?).? What I mean is, as the design evolved I would start to realize some spacing issues and have to go back to change a great number of CSS values.? I didn’t really like this because I couldn’t get an overall composition of what the site would look like before I really got into it.

I’m much happier with my new workflow method for now.  The first test from start to finish will be coming up shortly.? I’m currently in the XHTML/CSS extraction phase of a full Photoshop layout.