April 26, 2012

Generating CSS from shapes in Fireworks

According to the Fireworks CS6 new features page, you can “Save time by cleanly extracting CSS elements and values (such as color, font, gradient, and corner radius) using the new CSS Properties panel.” Check it out:

 

Would you find this kind of support valuable in Photoshop? How would you rate it compared to, say, improved slicing or sprite generation?  (Speaking of the latter, here’s how Fireworks CS6 does CSS sprites, as well as jQuery mobile theme skinning.)

Posted by John Nack at 6:24 AM on April 26, 2012

Comments

  • Michel — 7:06 AM on April 26, 2012

    If you add a CSS3 Properties panel to Photoshop CSNext, improved slicing, and CSS sprites generation — all of which are current Adobe Fireworks features — what will remain in Fireworks that Ps didn’t copy last couple of cycles?… Pages?

    What is the point of moving all web Fireworks features into Photoshop?

    If you move all Fw features into Photoshop, you’ll make it even more complex. But then you could stop developing Fireworks, which is a great web/UI tool, today?

    Just asking myself all these questions…

    I know what you will reply: People like Photoshop, they use Photoshop… I know I know… :(

    Well, what is the point of Fireworks Team to work hard each cycle, add unique web/screen design features, if after just a few months, you copy the features to Photoshop? And you can do it, because Ps Team is 10x times bigger, for a variety of reasons…

    • Robert — 7:19 AM on April 26, 2012

      @Michel I agree with your point of view 100%. Fireworks is a stepchild of Photoshop in Adobe, it is obvious. I will use FW as long as I can, ‘cos it is a great tool. By the way the new subscription plan of CS6 is impessing.

  • Rob Jones — 7:33 AM on April 26, 2012

    Michael – You summed up my thoughts exactly.

    In addition, with Adobe clearly moving towards a subscription model, in the future maybe they won’t feel so compelled to cram so much into PS for fear that customers are only going to buy that one app … or judge the entire suite on what is added to PS. Since customers will have access to ALL the apps, let each app do what it does best, and stop cramming it all into PS.

    And please kick all the 3D shizz out of PS. Enough is enough with that :)

  • Michel — 7:42 AM on April 26, 2012

    Quote:

    “Clearly PS *is* the Web design tool of choice for a huge number of people. Debating whether it should be is fruitless.

    FW is great, no question, but that’s no excuse for PS to stand still.

    Look at the enthusiastic response to PS CS6 features that have existed in AI for 20+ years, FW for 10+. So, yeah.”

    ( twitter.com/jnack/statuses/195516060630401024
    twitter.com/jnack/statuses/195513817751494657
    twitter.com/jnack/statuses/195514058580033538 )

    John, please, a debate is something good, but let us be exact! You are not!

    What Ai features existed 20 years ago, that Fw had only 10 years ago, and Ps added them only now?!

    Fw is unique, in many ways, and in fact, Illustrator copied a lot of things right from Fireworks, just like right now, you copy Fw features to Photoshop! Let’s be exact, please!

    Now let’s see:

    — Fireworks has a native “snap to pixel grid” for all objects on the canvas, which works almost perfectly, for years! Illustrator was *never* this exact, and many designers struggled to overcome the issue till… Ai CS5, in various ways, including… making 0.9px lines and objects with 0.9px stroke — only then objects in Ai snapped exactly, when doing web layouts @ 72 ppi!

    — Fireworks has an intuitive blend of vector+bitmap tools. You can work equally well in Fireworks with vector objects, and bitmap objects. On the other hand, Ai never had any bitmap-editing tools in it (you can import a PSD in it, but this is hardly “bitmap editing support”), and Photoshop, a few versions ago, had zero support for vectors (Ps is a photographer’s tool, after all).

    — Fireworks had always had special vector Autoshapes. Photoshop and Illustrator never had this feature. Autoshapes in Fireworks are vectors with special functions, for example, in two clicks you can make a vector star change number of corners from 10 to 20, or resize a rounded rectangle, and make each angle with different border radius. Ps and Ai never had this functionality!

    — Fireworks has styles, which work as CSS styles inside one PNG document!

    — Fireworks has Layers and States (since version 1), and Pages (since CS3). Illustrator added Multiple Artboards much, much later! Photoshop never had them.

    — Fireworks always had the option to easily create and export a “live” HTML prototype, right from the design you work on. Ai has this feature? No. Photoshop has it? No.

    — Fireworks has Symbols and Rich Symbols. Does Ai have Rich Symbols? No. Photoshop? No.

    — Fireworks always had easy workflow for working with gradients (gradient handles, easy changing of color stops, etc.) — since version 1 or 2. Illustrator added gradient handles only in CS4, much later than Fireworks! Photoshop never had this.

    — Fireworks has special Twist and Fade command that is extremely powerful and can save you minutes or hours of work. Ai has only “repeat last two steps”. Ps does not have this Command.

    — In Fireworks you easily select an object to edit it, or even multiple objects, and apply multiple properties at once — styles, effects, etc. Ps never had this option.

    — Find and Replace in Fireworks can find and replace many types of properties (font families, stroke and fill colors, etc.), inside one page in one Fw PNG file, or inside many pages in one PNG file, or inside a whole directory with Fw PNG files! When Ai or Ps had this functionality, that is unique to Fireworks?…

    — Fireworks has a very powerful History panel, with options to save commands right from it. Ai never had such a panel!

    — 9-slice scaling was added to Fireworks in version CS3.

    — In Adobe Fireworks, you could always have the option to apply multiple instances of the same live filter (live effect) to any object; you could also re-arrange the stacking order of the applied filters, switch them on or off, change their properties. Ps never had this option. Don’t know about Ai — but since Ai never could edit bitmaps, I’d say, Fw was again unique in this way (since you could apply live filters to bitmap or vector objects).

    — Fireworks always had much more blending modes than Ps.

    — Fireworks now has a CSS3 Properties panel, CSS Sprites generation option, and many other things that Photoshop and Illustrator never had.

    — Fireworks, together with TAP ( http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks/ ) can produce live iOS prototypes! Can Illustrator do it? No. Can Photoshop do it? No. One more unique feature!

    — The list does not stop here… but it’s a good start!

    So let’s be correct and exact, please…

    Obviously, Ps Team could do much more than copy Fw features and call them “new Ps features” — especially with the resources Ps Team currently has… Fw added a CSS3 Panel to CS6, so you ask Ps users if they’d like this panel to be added to Ps CS7? Com’on!

    I hope my detailed list of unique Fw features will be useful to you — and in more ways than “Hey, why not copy some more Fw unique features to Ps!”. I understand your point of view “People love Photoshop” but many designers also love and use Fireworks. Take this into account, please… :-)

  • Daryl — 7:53 AM on April 26, 2012

    Since Photoshop isn’t a web specific design tool like Fireworks is, I don’t think Photoshop will ever catch up to its bigger brother Fireworks for web design, mobile design, and graphics for any type of screen.

    Neither will Fireworks ever catch up to its bigger brother Photoshop for image editing and design for print.

    Fireworks keeps adding web specific features that Photoshop will always lag behind in. (CSS support, Jquery support, Vector support, pages, states, symbols, slicing, image optimization, etc.)

    And Photoshop keeps adding image editing stuff that Fireworks will always lag behind in. (3D, content-aware move, video editing support, etc.)

    I don’t think it’s a bad thing for Photoshop to add web specific features from Fireworks and Fireworks to add image editing features from Photoshop as long as both feed off of each other for improvement. That’s a good thing.

    But that also means Photoshop will always lag behind Fireworks for web based design and mockups, mobile design, and graphics for screen based output. Similarly, Fireworks will always lag behind Photoshop for image editing, photography, print design, 3D, and video.

    So as long as you use the right tool for the right job, it shouldn’t matter. But some people may only be able to afford Photoshop or do not have the knowledge and experience of using Adobe’s proper web design tools in the Creative Suite like Fireworks. For now, adding some web stuff to Photoshop might help them.

    Obviously for the long term though, if you’re a designer that *focuses on the web*, and you’re still using Photoshop for your web mockups, you need to start getting acquainted with Adobe’s web specific tools for designers like Fireworks where all the web workflow improvements are being targeted:

    http://html.adobe.com

    There’s no mention of Photoshop in Adobe’s link above. So that’s your hint.

  • Daryl — 7:55 AM on April 26, 2012

    Sorry, meant to post the direct link to Adobe’s Tools and Services for the web:

    http://html.adobe.com/toolsandservices/

    And again, there is no mention of Photoshop there. :)

  • Tim — 8:30 AM on April 26, 2012

    I would like Photoshop to add more features for UI designers. I personally don’t like FW that much. The videos always look nice but I’ve never been able to really settle in. I like a lot of the new CS6 features, but I’d love to see the following:
    – Edit Smart Objects in place. More like how editing symbols in Flash works.
    – A panel for Layer Styles instead of a popup. I think editing multiple layers styles would come along with this.
    – Snap to pixel for Line Tool
    – Object states and maybe even pages like FW. I don’t care if it’s stealing, I want that!
    – Better Slicing States (as you mentioned)
    – CSS3 Panel (I think it sounds awesome!)
    – Slice-9 Scaling, which I think could work in conjunction with editing smart objects in place. Or at least don’t scale the border radius on rounded rectangles!
    – Finally, stop scrolling the dang viewport if I’m trying to color pick from one of my shape layer’s color thumbnail square thingy.

    Also here is a new idea: A way to set layer style colors relative to the Vector Shape’s base color. So if I have a green vector shape and want a slightly darker green stroke, it would be cool to check a box saying “Relative to Base Color” and then just drag the darkness slider down a bit. Then if I change my shapes color my stroke changes too.

  • zed — 5:00 PM on April 26, 2012

    Michel you need to get out more.

    Ultimately it is about creating eye candy and solving everyday problems.
    We should not allow the tools we use to get in the way of the creation of content.
    The less the software gets in the way the better.

    Btway is there an Extract CSS code with the Properties panel i can add to photoshop or even illustrator??

  • Bill Merikallio — 5:05 PM on April 26, 2012

    I would LOVE this in Photoshop. I’ve never been able to get the hang of FW. Every time I try to use Fireworks, I get frustrated and wish it behaved like an Adobe product.

  • Tim — 2:37 PM on April 27, 2012

    One other thing. I usually like dragging layers from one PSD to another, but when using tabbed PSDs there is no way to do this. I would like the ability to drag layers to another tab.

    [You can do that now, but you need to initiate the drag operation from the canvas, not from the Layers panel. (We know, we know...) --J.]

  • Tomas Kafka — 5:07 AM on April 28, 2012

    Hi guys, we are building a Photoshop CS4-6 plugin you could be interested in – it exports layer styles to CSS3 and we will launch it soon.

    See http://csshat.com or screenshot at http://screencast.com/t/GiJ52BUV

  • Linus — 1:01 AM on April 29, 2012

    This is so a joke. Instead of the product teams focus on the app priority, they compete with each other.

    What John Nack should educate users is to show them how to open PSD in fireworks to make use of the CSS
    panel to extract the codes.

    Not to compete with Fireworks and do another same panel. This is a waste of resource and time. It will never be the same as the engineers are not web centric like the Fireworks team.

  • Andre Reinegger — 11:02 PM on May 08, 2012

    I always read “Hey let’s copy this and copy that from Fireworks”.
    I never read it the other way around. – Why is that?
    Because Fireworks is awesome the way it is. We don’t need any features stolen from Photoshop. Even if Photoshop steals more and more features from Fireworks it will never get even close to the usability, efficiency and speed of this amazing tool.

    Instead of stealing, educate people wo are using Photoshop for webdesign. Educate them how to make a better workflow and the correct use of both applications. Don’t leave the Photoshop user blind. He has to know how to work efficient instead of time consuming, unefficient pushing pixels to create layouts for web.

    Educate instat of copycat!

Copyright © 2014 Adobe Systems Incorporated. All rights reserved.
Terms of Use | Privacy Policy and Cookies (Updated)