How To Master Fireworks’ CSS Properties Panel And CSS Professionalzr

How To Master Fireworks’ CSS Properties Panel And CSS Professionalzr

• By Gauthier Eloy


• December 10th, 2014


• CSSExtensionsTechniques


• 2 Comments

Today, being a engineer is about many some-more than sketch pleasing interfaces in Photoshop or Fireworks. To scrupulously pattern a website or application, a UI engineer contingency know a record with that their products will be built; therefore, they contingency have a smallest set of front-end growth skills. The World Wide Web is not static. Quite a opposite: It’s responsive¹, fluid², evolving³ and ever changing⁴.

Web designers need to be informed with HTML and CSS⁵ formula and front-end technologies when they detect a website or application’s interface. It competence be of no genuine seductiveness to some of you, nonetheless it could supplement some altered resources to your operation of skills. Or, as Jeffrey Zeldman put it⁶ 5 years ago:

Real web designers write code. Always have, always will.

His difference are still current today.

I suggest that we examination a unequivocally engaging article, “About HTML Semantics and Front-End Architecture⁸¹⁷,” by Nicolas Gallagher⁸, creator of Normalize.css⁹ (a complicated choice to CSS resets¹⁰) and one of a web’s many renouned front-end templates, HTML5 Boilerplate¹¹.

Knowing front-end growth will also promote a work of a developer who will exercise your pattern after (that is, if you’re not both a engineer and a developer).

I still notice that utterly a few designers are intensely good during formulating pleasing user interfaces nonetheless do not have adequate knowledge in HTML and CSS — and coding knowledge is even some-more critical these days.

Adobe Fireworks is a striking pattern tool, nonetheless it has always been focused on web and UI design. In Creative Suite (CS) chronicle 6, a CSS Properties row was combined to a toolset — a apparatus that, if used properly, could assistance both designers with CSS coding knowledge and beginners alike.

By a finish of this article, we should have a softened overview of this underline and also know how to use it with CSS Professionalzr⁷⁰⁴⁷¹², a giveaway prolongation grown by Matt Stow¹³ to serve optimize a formula generated by a panel.

Note: Even nonetheless Adobe Fireworks CS6 was “feature-frozen” in 2013, it still works as of a finish of 2014, with no issues in a latest editions of Windows¹⁴ (8.1) and of Mac OS X¹⁵ (Yosemite). Not customarily does it work, nonetheless it’s still being actively used by many designers — among them, engineer and illustrator Fabio Benedetti¹⁶, who recently wrote an endless piece¹⁷ about conceptualizing and illustrating icons in Fireworks.

The CSS Properties Panel In Fireworks

What Is It?

Initially introduced as a beta underline in Adobe Labs, Fireworks’ CSS Properties panel¹⁸ was finalized and expelled in chronicle CS6.

The essay “Extracting CSS Properties From Design Objects in Fireworks⁷¹¹⁹” was initial published on Adobe Devnet and after republished in Adobe Creative Cloud’s tutorials series. The essay mentions that we need both Fireworks and Dreamweaver, nonetheless we customarily unequivocally need Fireworks CS6.

In a nutshell, a CSS Properties row is a apparatus that displays a many critical properties of any intent comparison on a board in Fireworks. The information supposing by a row enables we to ideally reconstruct a unequivocally same component with CSS3 code. This will save we time and speed adult your work.

(CSS Professionalzr is a giveaway prolongation that serve enhances a CSS panel’s capabilities. More on that later.)

Basic Features

The row displays a CSS properties of any intent comparison on a board (including matrix and calm objects), permitting we to simply duplicate a CSS formula to your clipboard. The row also supports Fireworks’ live filters and Photoshop’s live effects. So, if a Drop Shadow live filter has been practical to an object, afterwards it would be translated to a CSS3 equivalent, box-shadow²⁰.

The CSS Properties row in Fireworks CS6

Here is a discerning list of what a panel’s facilities capacitate we to do:

• Directly duplicate to a clipboard all (or some) of a CSS properties that make adult an element.


• Automatically embody (or exclude) CSS comments, to softened know and classify your code.


• Automatically embody (or exclude) some (or all) browser businessman prefixes: -webkit (for Chrome, Safari and now also Opera), -moz (for Firefox), -o (for aged Opera versions) and -ms (for Internet Explorer).

Note: The row lets we embody (or exclude) browser businessman prefixes.

When chronicle CS6 was being grown (from 2012 to 2013), browser businessman prefixes were still utterly renouned in a web pattern community. Today, their need is utterly reduced given vital browsers (yes, including a latest versions of Internet Explorer — both on mobile and desktop!) have finished good leaps forward. As Roger Johansson recently said²¹:

I cruise there are a garland of CSS properties that we can safely stop regulating businessman prefixes for, or during slightest extremely cut down on a series of prefixes. […] You competence be meditative “But no! You’re shutting out people regulating comparison versions of browser X!” No, this is not about shutting anyone out or not “supporting” a certain browser version. It is about regulating on-going encouragement to make your CSS smaller and easier to hoop and maintain. We’re not articulate about essential facilities here. If a browser doesn’t support an un-prefixed property, well, there won’t be any dull corners or shadows or gradients or whatever. The outcome will demeanour a approach it does in IE8, that now mostly has a lot some-more users than, say, Firefox 3.6 or Chrome 9 or Safari for iOS 4 or some other aged browser chronicle that competence need a businessman prefix. As prolonged as a whole blueprint doesn’t pile-up when something isn’t supported, that’s OK in general, given that during slightest a latest integrate of versions of all vital browsers will request your CSS.

So, we cruise it’s protected to reinstate all of them. To do so, simply unselect all of a checkboxes, and a CSS Properties row will outlay purify CSS. (Chris Coyier has combined about businessman prefixes²², if you’d like to examination more.)

Note: One approach to be protected with browser prefixes is to use Autoprefixer²³. This plugin parses CSS formula and adds businessman prefixes to CSS manners regulating values from Can we Use?²⁴. In fact, a plugin allows we to write CSS formula totally prefix-free by adding all compulsory prefixes automatically. To learn more, take a demeanour during “Autoprefixer: A Postprocessor for Dealing With Vendor Prefixes in a Best Possible Way²⁵,” utterly a minute article. (Autoprefixer is also enclosed in a Grunt²⁶ template in a smashing web app generator from Yeoman²⁷.)

Supported CSS Properties

Here’s an overview of a forms of CSS properties and values you’ll get with a assistance of this panel:

• border values: border-width, border-color, border-style, border-radius (in px or %)


• background color: plain (in rgba() format) or with gradients (including linear and radial gradients, along with their colors and directions)


• box-shadow values: plane offset, straight offset, fuzz radius, widespread radius, color


• width and tallness of comparison component (although we won’t customarily need these in a manageable pattern — some-more on this later)

Limitations

The CSS row doesn’t use a shorthand syntax for borders. As we can see in a screenshot below, limit properties are distant into border-color, border-width and border-style.

The CSS row doesn’t use a shorthand syntax for borders.

Granted, removing a condensed stipulation would be many easier:

 border: 1px plain rgba(43,75,133,1.0);

That’s many cleaner than this:

 border-width: 1px;
 border-style: solid;
 border-color: rgba(43,75,133,1.0);

I also suggest ignoring a width and height properties of objects reported in a panel, during slightest in many cases. Instead, use a padding CSS property. Let me explain.

Sample images in a mockup will mostly have sold widths and heights, given a tangible elements used in a final pattern competence vary. So, defining a stuffing (i.e. a stretch between a calm and a dilemma of a container) is softened given afterwards a component can be as tiny or as vast as required to accommodate a content. You can set a distance to be proportional or even allot smallest and limit measure to control a container’s size.

Let’s see an instance of since regulating a measure with width and height properties is not such a good thought for buttons:

• We customarily need calm to be automatically centered in a button, nonetheless this won’t occur with bound properties.


• By environment a padding, we will have many softened control if we have to change a calm inside a button. We all know that clients are mostly inconclusive about their copy; so, a buttons contingency support calm of opposite lengths. Whether a symbol says “Connect with Facebook” or “Share with Facebook,” a stuffing will control a button’s breadth and tallness perfectly. (A reward is that a symbol will adjust to whatever calm distance a user has set in their browser.)


• Responsive design²⁸. ’nuff said.

Back to a CSS row and a limitations.

Another emanate was that a Fireworks row had some bugs with a instruction of gradients. Fortunately, these issues were corrected in a final refurbish (CS6 12.0.1²⁹). Nevertheless, a CSS Properties row competence still arrangement a few deprecated CSS declarations, that will boost a series of lines in your formula and a weight of your CSS file.

So, while a CSS row is unequivocally useful, it’s distant from perfect. But theory what?! A kind developer³⁰ who is ardent about Fireworks and clean, lightweight CSS has finished a giveaway prolongation that fixes many of a issues mentioned above. I’ll examination his extension, CSS Professionalizr⁴³³¹, in fact after in a essay — nonetheless first, a few questions for Matt Stow, that he was so kind to answer in an email interview!

Interlude: Interview With Matt Stow

Question: Hello Matt, and interjection for holding a time to answer my questions. First, could we deliver yourself in a few difference to Smashing Magazine’s readers?

Matt: I’m Matt Stow, a 30-something English ex-pat vital in Newcastle, Australia. I’m a comparison UI developer for Izilla³² and have been concerned with computers given owning a ZX Spectrum³⁵³³ as a child.

³⁴

ZX Spectrum³⁵³³

Question: When did we start regulating Fireworks? What’s your daily use of a app like?

Matt: we initial started personification with Fireworks MX, nonetheless it wasn’t until Fireworks 8 was expelled in 2005 that it unequivocally grabbed my attention, fast apropos my primary apparatus for conceptualizing and formulating web assets. As we generally do front-end development, we generally import a designers’ PSD files and trade what we can as sprites, nonetheless I’ll mostly finish adult redrawing elements in Fireworks to grasp pixel-perfection and to simply modify them to CSS code.

Question: Can we tell us how we started building Fireworks extensions?

Matt: My initial prolongation was my Frame Commands container in early 2007. During a Fireworks CS3 prerelease cycle, we was doing a lot of frame-based animation and design, and we was undone by not being means to simply loop by my frames (now called “states”) with a keyboard. John Dunning³⁶, Fireworks prolongation developer extraordinaire, gave me some pointers on removing started with fluctuating Fireworks, and it snowballed from there. I’ve combined vast extensions given then, many of that residence my possess needs and urge a potency of my sold workflows. However, I’ve also taken requests from members of a village and built extensions for them.

Question: Why did we confirm to emanate an prolongation to urge Fireworks’ CSS Properties panel?

Matt: I’ve been essay CSS for over 10 years and am unequivocally sold about how it’s formatted and structured. While we admire what a Fireworks group achieved with a CSS Properties panel, a outputted formula didn’t accommodate my standards as it was so verbose, and we knew a row competence not be updated frequently adequate to keep gait with a landscape of complicated browsers. My fears were good founded, too. Without CSS Professionalzr, gradients exported from Fireworks rendered wrongly in Firefox 16+, IE 10+ and Opera 12.10+ (luckily, a Fireworks group resolved this with a latest patch³⁷, expelled in Jun 2013).

Adding base64 SVG gradients for IE 9 was another vital reason for formulating a extension.

Question: Do we devise serve updates to CSS Professionalzr?

Matt: Yes! I’ve usually expelled an refurbish (1.1) to understanding with Fireworks CS6’s new patch, to urge SVG support and to mislay other nonessential businessman prefixes.

In a nearby future, we devise to supplement Sass and presumably LESS syntaxes, too. we wish to embody support for a mixins from my Sass framework, Suzi³⁸, Compass³⁹ and Bourbon⁴⁰. Although we don’t privately use Compass, Bourbon or LESS, we wish to assistance a village and would like it to assistance confirm on that we should support initial and to assistance test.

Question: Last question, what do we cruise about Adobe’s new preference to stop adding new facilities to Fireworks and not to embody it in a new CC subscription model? What are a alternatives to Fireworks? (Or will we continue regulating it for now?)

Matt: It was inevitable. I’ve famous Fireworks was cursed for a while now — Adobe usually didn’t know a potential. But does it matter? Even if Adobe isn’t adding new features, prolongation developers are giving it a life it deserves. For me, there still isn’t an choice (especially on Windows) that does all Fireworks can. So, until one comes along or I’m no longer being prolific in Fireworks, I’ll continue to use it.

Question: Thanks a lot, Matt. I’m certain a readers would be meddlesome in removing in reason with we on a web, so dump us your links here.

Matt: Thank you, and I’d adore to hear from them! You can revisit my website⁴¹, where we recover my Fireworks and Dreamweaver extensions and also where we blog and recover plugins for a web, generally for manageable web design. Alternatively, we can also follow me on Twitter⁴², where we do try to chatter web-related things.

CSS Professionalizr

Features

CSS Professionalizr⁴³³¹ is a giveaway prolongation that improves and extends a functionality of a CSS Properties row in Fireworks. Here are some of a many enhancements that this prolongation brings to Fireworks:

• It consolidates border-color, border-style and border-width into one shorthand border rule.


• It removes width and height attributes (you won’t need these often).


• It formats all of a properties consistently (with commas, colons, spaces, etc.) and removes surplus new lines, that could save we some lines of code. (While this step competence seem unnecessary, in a medium-sized to vast project, it will severely impact a final weight of a CSS file.)


• It uses a new syntax for unprefixed slope properties.


• It sorts all manners alphabetically — handy!


• It translates linear gradients to base64. (In box we are not informed with information URIs, afterwards a essay “The What, Why and How of Data URIs in Web Design⁴⁴” will help.)

Another good indicate is that a prolongation removes deprecated declarations and new properties, such as -ms-gradients and all filters for Internet Explorer. (Tip: If we wish softened CSS3 control in aged versions of Internet Explorer, try PIE⁴⁵ instead!)

Finally, here are some of a improvements that Matt has combined in chronicle 1.1 of his extension:

• fixed SVG era (because a angles changed),


• removed bequest -webkit-border-radius syntax,


• removed bequest -o-gradients and a non-standard bequest -webkit-gradient syntax,


• cleaned adult a -moz-gradient rule.

(This chronicle brought many some-more fixes, all of that we can check in a chronicle history⁴⁶.)

Using CSS Properties Panel With CSS Professionalzr: A Case Study

Installation

1. Download a .MXP record from a CSS Professionalzr⁷⁰⁴⁷¹² page.


2. Double-click on CSS-Professionalzr.mxp, accept a permit agreement, and implement a extension.

Hint: If you’re carrying any kind of problem installing a prolongation or we simply wish to learn some-more about a basis of Fireworks extensions, Ashish Bogawat’s essay “Optimizing a Design Workflow With Fireworks Extensions⁴⁸” (and privately a territory patrician “Working With Extensions in Fireworks”) will give we utterly a few profitable tips.

Now that CSS Professionalzr is installed, it’s time to try it out.

Let’s Create a Button

Suppose we need a certain social-media symbol for a subsequent web project.

“Connect with Facebook” button? Why not!

Before we continue, I’d like to residence one emanate that some designers face when regulating Fireworks.

A Note About Strokes and Live Filters

Fireworks’ cadence underline gives us utterly a lot of options, nonetheless a outcome isn’t always consistent. As Benjamin de Cock⁴⁹ wrote in his unequivocally engaging essay “Refining Your Design in Adobe Fireworks⁷⁴⁵⁰,” regulating a “Align Stroke to Outside” choice customarily gives a best result. (To learn more, check out a territory patrician “Improve Fine Strokes” in Ben’s article.)

The fact I’d like to indicate out here is a multiple of Fireworks’ cadence outcome and a Inner Shadow live filter. To emanate a prominence effect, like in this example, we would use a white Inner Shadow live filter with a darker-colored stroke. The problem is that Fireworks would cruise a shade to start during a tip of a button, including a stroke. This gives an unsightly result.

Notice where a Inner Shadow live filter outcome starts.

The limit tone and middle shade are churned together. This isn’t a function we wish from a Inner Shadow live filter. Rather, we wish a middle shade to start after a cadence (as box-shadow does).

We could use a combination trail instead of a cadence to emanate a border, that would give us softened control of a result. It’s a good alternative, nonetheless a problem is that a CSS row won’t be means to interpret and collect a accurate values of a outcome given a values will come from a matrix trail and not from a live filter practical to a object.

Things are looking many softened in a alternative.

All right, is there a good arguable solution? we trust there is. The pretence is to use a cadence skill from Photoshop’s Live Effects in Fireworks, instead of a local stroke-color option. Go to a Properties row and afterwards name “Live Filters” → “Add a Live Filter” → “Photoshop Live Effects” → “Stroke” and bingo!

⁵¹

(View vast version⁵²)

Tip: You’ll have to put a live filters in a right sequence or else this won’t work. (The Inner Shadow live filter should be first, afterwards a cadence from Photoshop’s Live Effects.)

This should be a sequence of a live filters.

And here we are. Much better, isn’t it?

Our symbol before (top) and after (bottom) — many better!

Another intensity problem with live filters in Fireworks is that a angles of dump shadows infrequently demeanour somewhat “cut” (especially when we use a vast Drop Shadow live filter). It’s not a large problem given a CSS Properties row will modify your live filter to a CSS box-shadow rule, that will arrangement rightly in browsers. (Note: To repair cut angles on some dump shadows, many designers use a rectangle with a dilemma set to “Feather.” The shade outcome positively looks smoother in Fireworks, nonetheless it formula in a same emanate when regulating a limit finished from a matrix path: The CSS row won’t be means to interpret it into a CSS box-shadow sequence given a shade was finished not with a live filter nonetheless with another matrix object. In this case, a live filter is a many softened option.)

How to Get a CSS Information From Objects on a Canvas?

OK, so we have a ideal symbol in Fireworks. Now we would like to see a analogous CSS properties. That’s easy.

First, open a CSS Properties row (Window → CSS Properties in a menu or Control/Command + F7 on a keyboard), name a intent on a canvas, and see what a row outputs:

⁵³

Select a symbol on a board and check a CSS Properties panel.

Let’s wizz around a row a bit:

The CSS Properties row in Fireworks CS6

The CSS Properties row is divided into dual vital sections. The tip lists all of a CSS properties and their analogous values, and a bottom is a elementary box with all of a outputted CSS formula (copying a formula directly from this box is easy). Also, 5 checkboxes let we name either to embody browser-specific businessman prefixes — for Firefox, WebKit browsers, Opera and Internet Explorer — as good as CSS comments. In a bottom-right dilemma of a row are dual buttons, “All” and “Selected.” Pressing “All” will duplicate all of a code; if we reason Control/Command and name some of a properties (in a top partial of a panel) and afterwards press a “Selected” button, customarily these will be copied to a clipboard.

As we can see, now that we’ve comparison a symbol on a canvas, we have all a information indispensable to imitate this component with CSS3 code. (Note: If you’re not certain about a browser support for some of a CSS3 properties that you’re formulation to use, we suggest checking Can we Use?⁵⁴, an glorious resource!)

The CSS Properties row works unequivocally effectively not customarily with matrix shapes, nonetheless with calm objects, too. The text-shadow skill is upheld (but not in Internet Explorer 9 and below⁵⁵).

⁵⁶

Select a calm intent and check a CSS properties: font-family, font-size, color, etc.

How to Retrieve CSS Information With CSS Professionalzr

The routine of retrieving information with CSS Professionalzr is flattering straightforward.

1. On Fireworks’ canvas, name a intent whose CSS3 properties you’d like to get.


2. Open a CSS Properties row (if we haven’t already). You will see a object’s CSS properties listed there. (Now is a time to confirm either to embody browser businessman prefixes in your CSS and, if so, for that browsers. The row will also let we name either to embody comments in a code.)


3. Next, run a CSS Professionalzr command: in a menu, “Commands” → “CSS” → “CSS Profesionnalzr.” we suggest assigning a by-pass pivotal for discerning entrance to CSS Professionalzr, that is simply finished by going in a menu to “Edit” → “Keyboard Shortcuts” on Windows or “Fireworks” → “Keyboard Shortcuts” on a Mac.


4. CSS Professionalzr will take a CSS generated by Fireworks and connect a properties, repair a gradients, purify adult and revoke a code, and afterwards duplicate a purify formula to your clipboard for we to use in a project.

Let’s examination a formula that a CSS Properties row and CSS Professionalzr have outputted:

background: 
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzIyOSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjNjE4NGNlIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjNDk2YWIxIiBvZmZzZXQ9IjAuNCIvPjxzdG9wIHN0b3AtY29sb3I9IiM0MzY0YWEiIG9mZnNldD0iMC40OSIvPjxzdG9wIHN0b3AtY29sb3I9IiM0NTY3YWMiIG9mZnNldD0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnMjI5KSIgLz48L3N2Zz4=);
background: -moz-linear-gradient(-90deg, #6184ce 0%, #496ab1 40%, #4364aa 49%, #4567ac 100%);
background: -webkit-linear-gradient(-90deg, #6184ce 0%, #496ab1 40%, #4364aa 49%, #4567ac 100%);
background: linear-gradient(180deg, #6184ce 0%, #496ab1 40%, #4364aa 49%, #4567ac 100%);
border-radius: 1px;
border: 1px plain 
-webkit-box-shadow: 0 1px 1px rgba(44,76,135,.65), inset 0 1px 1px rgba(255,255,255,.35);
box-shadow: 0 1px 1px rgba(44,76,135,.65), inset 0 1px 1px rgba(255,255,255,.35);

In a dash above, we have enclosed a -webkit and -moz browser prefixes. Omitting them would make a formula even some-more lightweight. Even better, a formula will work usually excellent in all complicated browsers:

background: 
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzIyOSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjNjE4NGNlIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjNDk2YWIxIiBvZmZzZXQ9IjAuNCIvPjxzdG9wIHN0b3AtY29sb3I9IiM0MzY0YWEiIG9mZnNldD0iMC40OSIvPjxzdG9wIHN0b3AtY29sb3I9IiM0NTY3YWMiIG9mZnNldD0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnMjI5KSIgLz48L3N2Zz4=);
background: linear-gradient(180deg, #6184ce 0%, #496ab1 40%, #4364aa 49%, #4567ac 100%);
border-radius: 1px;
border: 1px plain 
box-shadow: 0 1px 1px rgba(44,76,135,.65), inset 0 1px 1px rgba(255,255,255,.35);

As we can see, this formula is many cleaner. Now, all we have to do is duplicate and pulp a formula in your CSS record et voilà!

More Questions?

Do we have any other questions about how to use CSS Professionalzr? Matt has accessible a small screencast⁵⁷ that explains how to use a CSS row with his extension. It should assistance in box we have some questions left.

“Using a CSS Professionalzr Extension for Adobe Fireworks CS6” (screencast by Matt Stow)

Live HTML and CSS Demo

Now, have a demeanour during a live browser preview⁵⁸ of this demo symbol to see what we have achieved by exporting CSS properties right from within Fireworks CS6!

I cruise a outcome looks many softened than a symbol we combined in Fireworks.

A Quick Note on Font Rendering

Fonts competence describe in a browser somewhat differently than in your Fireworks PNG file, that is to be expected. Fireworks, Photoshop and Illustrator (which, by a way, share a same text-rendering engine: Adobe Type Engine, or ATE) can't describe and preview fonts in a same approach that fonts will be rendered by browsers. Font digest varies between striking pattern apps (Fireworks, Photoshop, Illustrator, Sketch, GIMP and so on) and between browsers (and browser versions) on several handling systems (Windows, Mac OS X, iOS, Android, Windows Phone, etc.).

However, we can still control (to some extent) how calm looks when previewed in Fireworks by adjusting a “Anti-aliasing level” environment in a Properties panel. The accessible options are “Crisp anti-alias,” “Strong anti-alias,” “Smooth anti-alias,” “No anti-alias” and “Custom.”

In a Properties panel, we can adjust a anti-aliasing process that Fireworks relates to a retard of text. here is a drop-down menu that shows all of a options.

None of a anti-aliasing settings will ideally compare a calm digest in a genuine browser, nonetheless depending on your idea and a comparison font, we can still grasp a flattering good result; usually play a bit and try a options. (Ivo Mynttinen⁵⁹ shares some tips for operative with calm in Fireworks in his essay “How to Achieve Pixel Perfection in Your Designs With Adobe Fireworks⁷⁵⁶⁰,” quite a territory “Get a Most Out of Your Text.”)

Note: Of course, “Anti-aliasing level” won’t have any outcome on a CSS formula that you’ll get from a CSS Properties row in Fireworks. It will customarily impact a digest of calm on a canvas.

Alternatives To Fireworks’ CSS Properties Panel

Fireworks’ CSS Properties row is not a singular underline in a universe of striking pattern apps. Also, a fact that Fireworks’ growth was feature-frozen recently means that many designers will have to demeanour for alternatives. I’ll examination a integrate of them here.

Copy CSS

Recently, a “Copy CSS⁶¹” underline was combined to Photoshop CC, nonetheless it’s a bit some-more singular than Fireworks’ CSS Properties panel. The underline generates CSS formula from figure or calm layers. For shapes, it captures values for size, position, cadence color, fill tone and dump shadows. For calm layers, it also captures rise family, rise size, rise weight, line height, underlining and calm alignment. (Note that Photoshop CC is accessible customarily as partial of an Adobe Creative Cloud (CC) subscription, given we can still use Fireworks CS6 as a standalone app. If we have an Adobe CC subscription, we competence download and use Fireworks as good as partial of your subscription.)

Creative Cloud Extract

This year, Adobe expelled some new Creative Cloud functionality and integrated it with Dreamweaver CC. While in beta, a underline was called “Project Parfait,” nonetheless after it was renamed to Creative Cloud Extract⁶². With CC Extract, Web designers can perspective PSD files in Dreamweaver CC and use contextual formula hinting to conclude fonts, colors and gradients in their CSS. CC Extract works customarily with Photoshop PSD files and requires a CC subscription.

Sketch

Since chronicle 2.2⁶³, a Sketch⁶⁴ app has has implemented a underline to remove CSS properties (in Sketch, it’s simply called “Copy CSS”). It was serve softened in Sketch 3.

CSS Hat

If we are regulating Photoshop, there is a third-party CSS-exporting apparatus we could try. It’s called CSS Hat⁶⁵, and it performs tasks identical to Fireworks’ CSS Properties panel. The cost is around $35 and a latest chronicle of it (2.0) works with Photoshop CC 2014 only.

Specctr

Also, plugins such as Specctr⁶⁶ concede we to trade CSS formula for objects combined in some Adobe CC and CS6 apps. Specctr 2.0 has both paid and giveaway versions and is concordant with Fireworks, Photoshop, Illustrator and InDesign. Only a Photoshop, Illustrator and InDesign versions have a underline to remove CSS, though, given a final Fireworks chronicle of a plugin is 1.6. (Recently, Smashing Magazine published a integrate of articles about Specctr: “Blueprints for a Web: Specctr Adobe Fireworks Plugin⁶⁷” and “Blueprints for Web and Print: Specctr, a Free Adobe Illustrator Plugin⁶⁸.”)

Did we skip any identical tools? Let me know in a comments!

Conclusion

The CSS Properties row in Fireworks and CSS Professionalzr are elementary nonetheless absolute collection to remove CSS formula from matrix and calm objects on a canvas. Designing a UI component and afterwards duplicating and pasting a analogous CSS3 formula is really one of my favorite local facilities in Fireworks CS6. How it could be faster or easier than that?

Of course, a row does not reinstate your favorite formula editor, nor does it assistance we to write better, some-more semantically scold HTML⁶⁹. Still, together with CSS Professionalzr, it will assistance we to fast perspective a CSS properties of a objects on a canvas. You can also use a extracted formula during a growth stage. It’s a time-saving underline that will make a life of both designers and developers a bit easier.

Further Reading

Finally, for those of we meddlesome in training more, here are a few useful resources associated to a topics lonesome in this article:

• CSS Professionalzr⁷⁰⁴⁷¹², Matt Stow


• “Extracting CSS Properties From Design Objects in Fireworks⁷¹¹⁹,” Shubhashri C. G., Adobe Fireworks Tutorials


• “CSS3 Support: Extraction⁷²,” Patrick Foster, Adobe TV


• “Improved CSS Support⁷³”, Patrick Foster, Adobe TV


• “Refining Your Design in Adobe Fireworks⁷⁴⁵⁰,” Benjamin de Cock, Smashing Magazine


• “How to Achieve Pixel Perfection in Your Designs With Adobe Fireworks⁷⁵⁶⁰,” Ivo Mynttinen


• “Designing a Rocket Icon in Adobe Fireworks⁷⁶,” Fabio Benedetti, Smashing Magazine


• “Useful Adobe Fireworks Resources, Part 1: Extensions⁷⁷,” Michel Bozgounov, Smashing Magazine


• “Useful Adobe Fireworks Resources, Part 2: Tutorials, Articles and Freebies⁷⁸,” Michel Bozgounov, Smashing Magazine


• “Mojo Motors’ Responsive Redesign With Fireworks: UX and Interaction Design Stage⁷⁹,” Olawale Oladunni, Smashing Magazine


• “Mojo Motors’ Responsive Redesign With Fireworks: Visual Design Stage⁸⁰,” Olawale Oladunni, Smashing Magazine


• “About HTML Semantics and Front-End Architecture⁸¹⁷,” Nicolas Gallagher


• “Semantic Code: What? Why? How?⁸²,” Paul Boag


• “Cutting Down on Vendor Prefixes⁸³,” Roger Johansson, 456 Berea Street

(Note: A large interjection to Michel⁸⁴ and Matt⁸⁵ for assisting me with this article.)

(mb, al)

Footnotes

1. 1 http://www.smashingmagazine.com/tag/responsive-web-design/


2. 2 http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/


3. 3 http://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-performance-case-study/


4. 4 http://caniuse.com/


5. 5 http://www.w3.org/standards/webdesign/htmlcss


6. 6 http://twitter.com/zeldman/status/4818978868


7. 7 http://nicolasgallagher.com/about-html-semantics-front-end-architecture/


8. 8 https://twitter.com/necolas


9. 9 http://necolas.github.io/normalize.css/


10. 10 http://stackoverflow.com/questions/11578819/css-reset-what-exactly-does-it-do


11. 11 http://html5boilerplate.com/


12. 12 http://mattstow.com/css-professionalzr.html


13. 13 http://twitter.com/stowball


14. 14 http://twitter.com/optimiced/status/532172093472116736


15. 15 http://twitter.com/gradykelly/status/522982484879753216


16. 16 http://dribbble.com/cocorino


17. 17 http://www.smashingmagazine.com/2014/09/23/designing-a-rocket-icon-in-adobe-fireworks/


18. 18 http://helpx.adobe.com/fireworks/learn/tutorials/how-to/extract-css-properties.html


19. 19 http://helpx.adobe.com/fireworks/learn/tutorials/how-to/extract-css-properties.html


20. 20 http://css-tricks.com/almanac/properties/b/box-shadow/


21. 21 http://www.456bereastreet.com/archive/201311/cutting_down_on_vendor_prefixes/


22. 22 http://css-tricks.com/do-we-need-box-shadow-prefixes/


23. 23 https://github.com/postcss/autoprefixer


24. 24 http://caniuse.com/


25. 25 http://css-tricks.com/autoprefixer/


26. 26 http://gruntjs.com/


27. 27 http://yeoman.io/


28. 28 http://alistapart.com/article/responsive-web-design


29. 29 http://blogs.adobe.com/fireworks/2013/06/fireworks-cs6-update-12-0-1-is-live.html


30. 30 http://mattstow.com


31. 31 http://mattstow.com/css-professionalzr.html


32. 32 http://izilla.com.au


33. 33 http://en.wikipedia.org/wiki/ZX_Spectrum


34. 34 http://www.smashingmagazine.com/wp-content/uploads/2013/10/zx-pectrum48k-large.jpg


35. 35 http://en.wikipedia.org/wiki/ZX_Spectrum


36. 36 http://johndunning.com/fireworks/


37. 37 http://blogs.adobe.com/fireworks/2013/06/fireworks-cs6-update-12-0-1-is-live.html


38. 38 https://github.com/izilla/Suzi


39. 39 http://compass-style.org


40. 40 http://bourbon.io


41. 41 http://mattstow.com


42. 42 http://twitter.com/stowball


43. 43 http://mattstow.com/css-professionalzr.html


44. 44 http://webdesign.tutsplus.com/articles/the-what-why-and-how-of-data-uris-in-web-design–webdesign-8648


45. 45 http://css3pie.com/


46. 46 http://mattstow.com/css-professionalzr.html


47. 47 http://mattstow.com/css-professionalzr.html


48. 48 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/


49. 49 http://www.twitter.com/bdc


50. 50 http://www.smashingmagazine.com/2012/05/07/refining-designs-adobe-fireworks/


51. 51 http://www.smashingmagazine.com/wp-content/uploads/2013/10/ps-live-effects-large.png


52. 52 http://www.smashingmagazine.com/wp-content/uploads/2013/10/ps-live-effects-large.png


53. 53 http://www.smashingmagazine.com/wp-content/uploads/2013/10/vector-object-and-css-panel-large.png


54. 54 http://caniuse.com/#


55. 55 http://caniuse.com/#feat=css-textshadow


56. 56 http://www.smashingmagazine.com/wp-content/uploads/2013/10/text-object-and-css-panel-large.png


57. 57 http://www.youtube.com/watch?v=iBzXt9Y6cBw


58. 58 http://pixelize.be/stuff/smashingmagazine/


59. 59 http://www.smashingmagazine.com/author/ivo-mynttinen/


60. 60 http://ivomynttinen.com/blog/how-to-achieve-pixel-perfection-in-your-designs-with-adobe-fireworks/


61. 61 https://helpx.adobe.com/photoshop/using/copy-css-shape-or-text.html


62. 62 http://www.adobe.com/creativecloud/extract.html


63. 63 http://blog.mengto.com/the-best-hidden-features-in-sketch/


64. 64 http://www.bohemiancoding.com/sketch/


65. 65 http://csshat.com/


66. 66 http://www.specctr.com/products


67. 67 http://www.smashingmagazine.com/2012/05/25/blueprints-for-the-web-specctr-adobe-fireworks-plugin/


68. 68 http://www.smashingmagazine.com/2013/11/15/specctr-an-adobe-illustrator-plugin-freebie/


69. 69 http://learn.shayhowe.com/html-css/getting-to-know-html/


70. 70 http://mattstow.com/css-professionalzr.html


71. 71 http://helpx.adobe.com/fireworks/learn/tutorials/how-to/extract-css-properties.html


72. 72 http://tv.adobe.com/watch/learn-fireworks-cs6/css3-support-extraction/


73. 73 http://tv.adobe.com/watch/learn-fireworks-cs6/improved-css-suppport/


74. 74 http://www.smashingmagazine.com/2012/05/07/refining-designs-adobe-fireworks/


75. 75 http://ivomynttinen.com/blog/how-to-achieve-pixel-perfection-in-your-designs-with-adobe-fireworks/


76. 76 http://www.smashingmagazine.com/2014/09/23/designing-a-rocket-icon-in-adobe-fireworks/


77. 77 http://www.smashingmagazine.com/2014/07/18/useful-adobe-fireworks-resources-extensions-part1/


78. 78 http://www.smashingmagazine.com/2014/08/07/useful-adobe-fireworks-resources-tutorials-articles-freebies-part2/


79. 79 http://www.smashingmagazine.com/2013/08/26/mojo-motors-responsive-redesign-with-adobe-fireworks-part-1/


80. 80 http://www.smashingmagazine.com/2014/03/24/mojo-motors-responsive-redesign-with-adobe-fireworks-part-2/


81. 81 http://nicolasgallagher.com/about-html-semantics-front-end-architecture/


82. 82 http://boagworld.com/dev/semantic-code-what-why-how/


83. 83 http://www.456bereastreet.com/archive/201311/cutting_down_on_vendor_prefixes/


84. 84 http://www.smashingmagazine.com/author/michel-bozgounov/


85. 85 http://www.mattstow.com/

↑ Back to topShare on Twitter

How To Master Fireworks’ CSS Properties Panel And CSS Professionalzr