Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS Hat translates Photoshop layer styles to CSS3

csshat.com

Post reply on HN
Print view View original

61–70 of 77 posts

Re: CSS Hat translates Photoshop layer styles to CSS3

#61

Post by wwweston »

artursapek wrote: post #30
sushi wrote: post #2

I wonder how many people still use Photoshop to create mocksups first and then move to HTML/CSS. Ever since CSS3 became popular I create my mockups directly in HTML/CSS3.

I prefer Illustrator, it's more "element-oriented" if you will. Easier to move things around. Even if it's lacking a good UI for styling.

A-men.

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.

Re: CSS Hat translates Photoshop layer styles to CSS3

#62

Post by savories »

sushi wrote: post #2

I wonder how many people still use Photoshop to create mocksups first and then move to HTML/CSS. Ever since CSS3 became popular I create my mockups directly in HTML/CSS3.

This is like starting a big coding project without first writing a plan.

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.

Re: CSS Hat translates Photoshop layer styles to CSS3

#63

Post by tomkin »

I was just talking about this with colleagues. If some piece of photo manipulation software centered its features for the web developer and actually outputted the CSS for shadows, blend modes, etc. I am sure that many would be interested. Photoshop is great, don't get me wrong, but it is shoehorned into being a web development tool. It isn't by nature. Fireworks and tools like it were never well rounded enough. Now we're in an era where CSS can actually do a lot of the stuff Photoshop is capable of.

Can't wait to try this out.

Re: CSS Hat translates Photoshop layer styles to CSS3

#64

Post by robszumski »

gilrain wrote: post #56
josefresco wrote: post #52

Earlier quoted context omitted.

Two things from someone with 12 years in professional web design: Switch to Adobe Fireworks now before you get too used to Photoshop. And ignore all of the engineering advice here about jumping straight to CSS/HTML. 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 busi…

Can you expand on why you recommend Fireworks over Photoshop, please?

1. an Illustrator-style object selection engine so you don't have to do that "right-click > pick layer from list" BS. 2. Multiple versions of one screen in a single file. Think collapsed/uncollapsed states of a form or all of the tabs of a form. 3. Small file sizes because it uses PNGs. 4. Ability to import PSDs and use style from PSD layers. Same with Illustrator files. 5. Customizable patterns UI so you can drag and drop custom buttons, etc. 6. Built in prototyping. Just click-through stuff using hotspots, but it's a good way to see if an interaction is going to be worth pursuing further or not.

Re: CSS Hat translates Photoshop layer styles to CSS3

#67

Post by AhtiK »

robszumski wrote: post #64
gilrain wrote: post #56

Earlier quoted context omitted.

Can you expand on why you recommend Fireworks over Photoshop, please?

1. an Illustrator-style object selection engine so you don't have to do that "right-click > pick layer from list" BS. 2. Multiple versions of one screen in a single file. Think collapsed/uncollapsed states of a form or all of the tabs of a form. 3. Small file sizes because it uses PNGs. 4. Ability to import PSDs and use style from PSD layers. Same with Illustrator files. 5. Customizable patterns UI so you can drag an…

> 1. an Illustrator-style object selection engine so you don't have to do that "right-click > pick layer from list" BS.

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.

Re: CSS Hat translates Photoshop layer styles to CSS3

#68

Post by mindhunter »

tomaskafka wrote: post #37

Hi guys, I'm one of CSS Hat devs and I'd like to thank you for your interest and show a little bit more: This is the output of current version of CSS Hat: http://jsfiddle.net/tomaskafka/ZXgqN/

why '90deg'? using no direction, and otherwise 'to bottom' etc. for the non-prefixed and 'top', 'left' etc. for the prefixed gradients seems easier to understand.

Re: CSS Hat translates Photoshop layer styles to CSS3

#70

Post by [deleted] »

wwweston wrote: post #61
artursapek wrote: post #30

Earlier quoted context omitted.

I prefer Illustrator, it's more "element-oriented" if you will. Easier to move things around. Even if it's lacking a good UI for styling.

A-men. 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 Firewo…

[deleted]
Post reply on HN