Posts in Category "Learning Resources"

February 2, 2012

Using the generated CSS and Sprites in a jQuery HTML page

In earlier posts, we learnt how to export all swatches and sprites, and export individual swatches/sprites. In this post, we’ll link an entire jQuery CSS along with sprites and link individual swatches to a mobile website.

Continue reading…

Share on Facebook
1:23 AM Permalink
January 24, 2012

Generating jQuery CSS and Sprites

In this post let’s generate the jQuery CSS and sprites from the skinned jQuery templates. There are two options available to export the required assets.

  • Export both CSS and sprites at one go.
  • Export Sprites or individual swatch CSS.

Continue reading…

Share on Facebook
12:49 AM Permalink
January 11, 2012

Creating a jQuery theme template

The jQuery Mobile theme Skinning feature in Fireworks includes a template with default sprite images and a set of swatches. This extension lets you modify default sprites and swatches in the template. You can create additional swatches by duplicating an existing page and customizing it. The swatch name is inherited from the page name in the exported CSS.

Continue reading…

Share on Facebook
12:08 AM Permalink
January 3, 2012

jQuery Mobile Theme Skinning

This blog is the first in series of five blogs dedicated to “jQuery Mobile Theme Skinning”, a new feature in Fireworks CS5 that is part of the CSS3 Mobile Pack extension.

  1. Introduction to jQuery Mobile Theme Skinning extension and jQuery Mobile framework
  2. Creating a new jQuery template
  3. Previewing the jQuery Mobile design
  4. Exporting the design to CSS
  5. Creating a jQuery Mobile webpage in Dreamweaver and using the exported CSS file in the new web page

jQuery Mobile Theme Skinning

The jQuery mobile theme skinning is part of the CSS3 Mobile Pack extension for Fireworks. This extension enables you to create or update the theme of a jQuery Mobile website using Fireworks.

In Fireworks, a template with all the modifiable design aspects for jQuery Mobile is provided. After modifying the themes present in the template, you can preview the look and feel of the themes using an in-app preview or a browser, and export the corresponding CSS code along with the sprite assets.

Continue reading…

Share on Facebook
1:18 AM Permalink
October 20, 2011

CSS3 Mobile Pack

At AdobeMAX 2011 Keynote, Fireworks CSS3 Mobile Pack is announced.

This mobile pack contains following feature.

  • CSS Properties panel
    – Extract your design comp to CSS code
  •  jQuery Mobile theme skinnig feature
    – Creative your owm jQuey swatch, include custom icons, or modify default theme

Video: Using CSS3 Mobile Pack

You can download this extension from Adobe Labs


Share on Facebook
10:25 AM Permalink
April 28, 2011

Create Multiple Animated AD-Banners In A Breeze : – Learn from Professional

Create Multiple Animated AD-Banners In A Breeze

Mikko Vartio is web designer / web developer and one of the top Fireworks user. His web site provide great tips and techniques for Fireworks. GIF banner Ads is commonly used and could increase usage since iOS does not support one of Adobe’s technology.

By the way,  Fireworks rename Frame palette to States Panel in order to align same concept with Flex platform. However, you can still use State panel as exactly same way to create animated GIF. We can learn efficient way to create multiple size of Ad-banner from this tutorial.

Share on Facebook
9:39 AM Permalink
April 27, 2011

Trouble Shooting: Could not launch Fireworks CS4. An internal error occurred.

Thanks for sharing information

Some customer suffer from “Could not Launch” problem with “An internal error occurred.” on Fireworks CS4 on Window.

Please delete “Fireworks CS4 Panel Prefs.xml” and re-launch application. This could solve the problem.


The file location is:

Windows XP:
[Drive C:]\Documents and Settings\[username]\Application Data\Adobe\Fireworks CS4\[language]\Fireworks CS4 Panel Prefs.xml

Windows Vista or Windows 7:
[Drive, C:]\Users\[username]\AppData\Roaming\Adobe\Fireworks CS4\[language]\Fireworks CS4 Panel Prefs.xml

Share on Facebook
9:00 PM Permalink
April 26, 2011

“9 Tooltip styles” : webportio – Learn from Professional

New contents : 9 Tooltip styles

Jiri Plistil creates awesome cutting edge graphics and let us download Fireworks Source file. Thus, you can learn from professional design how great web designer creates contents using Fireworks.

The design contents for Webportio is provided by

  • Dave Hogue
  • Henrik Juhl
  • Jiri Brezovsky
  • Jiri Plistil
  • Marek Levák
  • Mikko Vartio
  • Pavel Kout
  • Vitor Reis
Share on Facebook
9:11 PM Permalink
January 31, 2011

Edge Article : Design 101 for developers from Dee Sadler

Here is a new article from Dee Sadler about “Design 101 for developers”
Adobe Edge:  January 2011 Article

This is good article who is not familiar with Fireworks to know the basic idea of what you can do with Fireworks.

Share on Facebook
3:26 PM Permalink
November 4, 2010

Video archive for the David M. Hogue’s Ask A Pro Fireworks sesion is avaiable

It was an exciting “Ask A Pro” Web seminar for Fireworks CS5.
Here is the recorded session video archive in case you missed.
Great tips and lots of Q&A in the Chat pod.

Another good news! David wrote article is available in Developers Central.
Title: Turning a design into HTML and CSS using the Fireworks to Dreamweaver workflow


Share on Facebook
1:40 PM Permalink