This is the output of current version of CSS Hat:
<title>CSS Hat translates layer styles to CSS3 code</title>
Can't wait to try this out.
So would it output the HTML elements and give you CSS3 code for it? How about <forms> and other elements that aren't just simply <div>'s? Can you make those?
It is a coder's job to bring in the semantic structure and we merely aid to assist her/him - so CSS Hat will 'only' transform layer's fills and styles to CSS3. Hope that's cool :).
Tomas - one of CSS Hat devs
If you're missing the UI for styling, you might try Fireworks.
The idea that Photoshop should be used as a layout tool is an unfortunate accident of history -- it was/is the household name for image manipulation as most designers and developers hit the web. But while it's good for raster/photo editing, sets of pixel layers doth not a good layout/design tool make.
Illustrator's a lot better for this. And Fireworks is made for web layout and screen graphics, has a great mix of vector and raster tools, and is evolving some really sophisticated export abilities including some of the CSS export facilities CSS Hat is doing.
This is just one example:
Many (most?) vector-drawing applications let you select only the items that are fully enclosed by a selection rectangle. So if you wanted to select only the circles in that image, you'd need only to draw a selection rectangle around them.
Illustrator gives you no way to do this. Every shape that comes into contact with the selection rectangle (or even the path of the lasso tool) is selected. You can fire up Windows and do the whole thing in Corel Draw in the time you'll waste tediously clicking on everything in Illustrator.
As an aside, the lasso is a "direct selection" tool, operating on individual paths rather than shapes, not that this helps in your example. But it'd work well if I wanted to select, say, only the bottom side of your rectangle, for essentially the reason you dislike.
It's best to prototype first be it on paper or photoshop.
Otherwise your design is shaped by programming requirements, rather than a fully thought out plan/experience.
I've only been at it about 5-6 months, with 1-2 years experience in graphic design. Any advice?
Good web design begins much earlier than Photoshop/Fireworks, and doesn't even move to the graphics/proof stage until you've made dozens of decisions beforehand that will influence your design (think business goals, marketing messaging, platform, audience etc.) HTML/CSS is almost one of the last steps in a complete web project.
I would definitely create buttons or icons in Illustrator (but you still don't have to do that), and do a lot of everything else in Photoshop. You can try Fireworks and see if it's your cup of tea, but Photoshop definitely isn't going anywhere as far as standard practice for awhile, at least from what I've seen. I've worked with startups all over the country and top web development firms and still all I see is Photoshop/Illustrator.
Not to say Fireworks is bad or you shouldn't use it, but take it as a grain of salt and see what works best for you. It never hurts to learn new things.
Ctrl/Cmd+click with Photoshop move tool automatically selects the layer that is under your mouse cursor raster. Not 100% Illustrator-style but less BS than selecting from lists.
People/organizations can continue to experiment on components of that. V8 vs Nitro etc... We'll just have beta/dev forks of Webkit that can eventually be merged back into the core.
Browser fragmentation is fine. It's the rendering engines that are killing us.
Competition creates innovation.
"Photoshop is required to use CSS Hat."
From their main site:
"CSS Piffle. No more photo editing software for web design!"
Eating their own dog food?