13 ms·
CSS Hat translates Photoshop layer styles to CSS3
- sushi 14y agoI 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.
- lachyg 14y agoI would say pretty much ever designer I know still use Photoshop to design first. I also know that the PSD to HTML businesses do HUGE turn over each year, so I think this is very much in demand.
- _mayo 14y agoIt's still pretty prevalent. I'm currently consulting for a largish e-commerce site, and their creative department sends all their page designs over as PSDs.
- jaz 14y agoPhotoshop is still pretty popular in web agencies.
- drtse4 14y agoLooks like they are about to release a tool for that too http://csspiffle.com/ http://csspiffle.com/
- terhechte 14y agoHere's their pitch: http://pitch.csspiffle.com/ http://pitch.csspiffle.com/ Looks quite impressive. The idea is really not new, I've been waiting for more than 4 years now for a good HTML5 tool to go beyond Photoshop/Illustrator/Fireworks/Whatnot. I hope their app lives up to the pitch.
- studio625 14y agoCool pitchdeck, but the navbar is really distracting. Should just be persistent, instead of constantly drawing my eye back up to it.
- joering2 14y agoThey look like a cool team of developers!! congrats to them! Glad to see some amazing projects and awesome team back in my old continent!
- jaems33 14y agoMost people who work in an agency still do it this way as the roles are divided by specialty.
- companyhen 14y agoI always use Photoshop for my mockups for clients, but I'm still pretty new to web design. I've only been at it about 5-6 months, with 1-2 years experience in graphic design. Any advice?
- sushi 14y agoI think getting better at CSS would be my only advice. I got better at it by doing tutorials on https://css-tricks.com/ https://css-tricks.com/. One other thing I do is try to make sure I complete my web design without having to use any image or Javascript. When you limit yourself in this way, you find ways to accomplish in CSS/CSS3 and get better at it eventually.
- SkyMarshal 14y agohttp://24ways.org/2009/make-your-mockup-in-markup http://24ways.org/2009/make-your-mockup-in-markup
- josefresco 14y agoTwo 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 business goals, marketing messaging, platform, audience etc.) HTML/CSS is almost one of the last steps in a complete web project.
- gilrain 14y agoCan you expand on why you recommend Fireworks over Photoshop, please?
- robszumski 14y ago1. 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.
- flyosity 14y agoThe only time I don't use Photoshop is when I'm doing a super simple design (very flat, no graphics) but other than that I'm pushing pixels in Photoshop first before I jump into HTML & CSS.
- artursapek 14y agoI 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.
- wwweston 14y agoA-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.
- deleted 14y ago[deleted]
- DavidAbrams 14y agoUnfortunately, Illustrator is essentially abandonware at this point. It's so hobbled by design defects and other bugs that you're much better off with Corel Draw, even if you have to run it in a VM on a Mac. This is just one example: http://farm3.staticflickr.com/2362/1800773495_d1f776e335.jpg http://farm3.staticflickr.com/2362/1800773495_d1f776e335.jpg 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.
- jasomill 14y agoIn your example, why not select the non-circles with one rectangle select, then invert the selection by Shift-rectangle selecting everything? 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.
- prawn 14y agoAlways Photoshop first. Last time (admittedly a while back) I read about someone creating their design directly in HTML/CSS, it was a rubbish design.
- savories 14y agoThis 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.
- erable 14y agoThis could be good -- any additional info that you can share? The details are somewhat scant and I'm greatly interested.
- lukashurych 14y agoWhat would you like to know? Ask on team@csshat.com
- tomaskafka 14y agoHi erable, I can show you a sample CSS generated by current version: http://jsfiddle.net/tomaskafka/ZXgqN/ http://jsfiddle.net/tomaskafka/ZXgqN/
- treelovinhippie 14y ago"Now waiting for App store approval" - does that mean Mac only?
- ldawoodjee 14y agoYep
- LeZuse 14y agoNo, it is not :) Although the initial release will be for Mac
- DavidAbrams 14y agoWhy and how is a Photoshop plug-in being sold only through the App Store?
- TazeTSchnitzel 14y agoI don't use Photoshop, but the hue-shifting glowing hat and floating words are a pretty cool effect.
- tomaskafka 14y agoThanks - I'll pass it on to Peter who made the effect ;)
- michaelmior 14y ago"Hate Flash? Click here!" That one's clever :)
- bruceboughton 14y agoPretty scummy, more like.
- michaelmior 14y agoI think "scummy" is a bit of an overstatement. I would have preferred it if there was a message first explaining how CSS Hat helps you stop using Flash (I'm assuming that was the intent). I'd be more likely to tweet in that case.
- daleharvey 14y agoIt looks like just a joke to me, I imagine it came from 'How do we get all these web developers to click on this link and maybe tweet'
- why-el 14y agoMine said "hate IE6?". In any case I think it would have been both funny and effective if it led to their products page, something like here is how we will can take your pain away..Redirecting to twitter? I didn't like it.
- michaelmior 14y agoAgreed. If they show me something awesome, that might give me a reason to send out a tweet. As it stands, I just closed the window.
- jzd131 14y agoAny news on when the beta version will be released?
- lukashurych 14y agoCSS hat is going live next week :) So you can get it then ;)
- joshuahornby 14y agoWhat About Piffle? Been waiting far too long now keep checking every day.
- sktrdie 14y agoThis is huge if they can pull it off. I wonder how accurately they can make it happen. Even if they're simply able to position layers exactly the same as in PS, it's already something I would use as being extremely useful. This could virtually allow you to not code in HTML/CSS3 anymore - which is something I really hate to do. 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?
- bzalasky 14y agoI don't think this goes beyond gradients, patterns, shadows, etc... Still looks useful though.
- nthitz 14y agoIt's just blending options from photoshop. It's not layout/positioning/sizing, although that would be boss.
- tomaskafka 14y agoHi sktrdie, we considered this, but we think that the output would become just a mess of absolutely sized and positioned divs - and that's not how websites should be made. 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
- alexobenauer 14y agoIt looks like it only exports webkit-compatitble CSS. If this is the case, this would be really disappointing.
- whalesalad 14y agoNot nearly as disappointing as the fact that Webkit has not become a standard in all browsers. We should all be working on a single rendering engine. Webkit has won, and should be the standard. 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.
- cleverjake 14y agothe html5 spec specifies exact parser behavior, and ensures the same rendering across all compliant browsers. If we did standardize rendering engines (which could /never/ happen, for an incredible number of sociopolitical reasons), what fragmentation would exist? Competition creates innovation.
- darkstalker 14y agoCSS prefixes are dumb, why not just drop them?
- mas1n 14y agohttp://www.alistapart.com/articles/prefix-or-posthack http://www.alistapart.com/articles/prefix-or-posthack
- tomaskafka 14y agoHi, I'm dev from CSS Hat team - we will export regular CSS3, vendor extensions (webkit,moz,o) are optional. Thanks for interest! :)
- pvidler 14y agoFrom the link: "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?
- LeZuse 14y agoWell, a lot of people are stuck in Photoshop, unfortunately. That way there could be some transition from PS to straight HTML/CSS.
- colinramsay 14y agoFireworks CS6 has something related to this. If you select an object in Fireworks, you can get the CSS which will build the shape, gradients, curved borders, etc. http://layersmagazine.com/new-css3-support-in-dreamweaver-cs6.html http://layersmagazine.com/new-css3-support-in-dreamweaver-cs...
- tomaskafka 14y agoYep - kudos to Adobe for doing this; we discovered this while working on CSS Hat. We are in Photoshop, and from CS4 up, though :) Tomas (CSS Hat dev)
- tomaskafka 14y agoHi 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/ http://jsfiddle.net/tomaskafka/ZXgqN/
- mindhunter 14y agowhy '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.
- tomaskafka 14y agoThanks for an idea - so far we just take the angle Photoshop gives us, but it is true that we could convert it to words when the angle is multiple of 90 degrees :)
- tluyben2 14y agoOfftopic: can I have a Piffle invite? I'm very curious; we try out all these tools all the time at our company and none of them are really good. This looks promising, but that's the outside only for now of course.
- tomaskafka 14y agoOops - I didn't expect a comment after the initial wave, so I stopped watching the thread. At this time, I cannot advise you anything better than signing up at http://csspiffle.com http://csspiffle.com - you'll be then first to know our news :).
- unkoman 14y agoWhy is the page calling me a fag?
- Nogwater 14y agoThat says "Faq". Notice how the loopy part of the descender goes to the right. I don't know why it's lowercased.
- analog 14y agoDefinitely want text-transform:uppercase on that acronym with that font.
- victorin 14y agoThat is exactly what I though :)
- lukashurych 14y agoThanks for the notice, it's fixed now.. :)
- jokull 14y agoWhat about exporting Stylus (/w nib) or at least LESS?
- joshmlewis 14y agoIt's not generating total stylesheets, just blocks of CSS from what I can tell. Although an option for loosing the ; and maybe a couple features SASS/LESS has would be nice, and shouldn't be too hard to pull off.
- huhtenberg 14y agoOh, common. Who keeps changing the submission titles? It is really getting out of hand lately. What was wrong with "{css:hat}" ?
- michael_fine 14y agoI think because "{css:hat}", while interesting and amusing, doesn't accurately display what it does.
- jonmrodriguez 14y agoThe page title itself says "CSS Hat" <title>CSS Hat translates layer styles to CSS3 code</title>
- reflexer 14y agoclever name
- tomkin 14y agoI 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.
- colemanti 14y agoHow much is it going to cost? :P