Welcome to Fireworks
Adobe Fireworks (formerly Macromedia Fireworks), known as Fw for short, is a bitmap and vector graphics editor. It was originally developed by Macromedia, which Adobe acquired in 2005, and aimed at web designers (with features such as: slices, the ability to add hotspots etc.) for rapidly creating website prototypes and application interfaces. It is designed to integrate easily with other former Macromedia products, such as Dreamweaver and Flash. from wikipedia
If you are a visual designer intending to expand your skill set this could be a very important program for you to learn. It is widely used as a prototyping tool in the design industry. The ability to rapidly prototype is a much sought after skill throughout the design industry. Take a look at this video, Rapid Prototyping in Fireworks CS4 [9:42]
If this is a little confusing don't worry we'll cover much of this in class. Just get a feeling for the range of prototyping features offered by Fireworks.
When you start using Fireworks you will run into some application specific terminology and terms that are used in several Adobe applications. These might be a little confusing a first so spend a little time looking through some of the Fireworks "terms" help in the Fireworks Terms section below. Work through these terms and if you have questions we'll discuss them in class.
Fireworks Tutorials
Go through the following tutorials before we bein working with Fireworks in class.
Getting started understanding Fireworks
- Introducing Fireworks CS4 [6:37]
- Get acquainted with the workspace and productivity enhancements in Fireworks, plus the new options for exporting content to HTML/CSS, PDF, Flash, and AIR.
- Getting Started: 01 Understanding Fireworks [3:50]
- Get an overview of what Fireworks does. Work with bitmap and vector images in the same document. Deliver content in multiple formats.
- Getting Started: 02 The Fireworks Interface [5:26]
- The Fireworks interface by Jim Babbage
- The Complete Design Process [7:21]
- Create a web page with standards-based HTML and CSS. Insert slices, avoid overlaps, and learn techniques for using divs and exporting text.
- A full listing of Fireworks Tutorials from Adobe TV [varies]
- Lance Christmann shows how to prototype Adobe AIR applications with Fireworks CS4 [57:35] - advanced
A little more about Adobe AIR
a little more on using Fireworks...
- Setting up a Fireworks web design mock-up for CSS and images export [a step-by-step guide]
- By Michel Bozgounov from optimiced.com
- Several Step-by-Step tutorials for using Fireworks to prototype a website [a step-by-step guide]
- from Rachna at entheosweb.com
- Design Learning Guide for Fireworks: Using Smart Guides and tooltips for precise positioning and layout [a step-by-step guide]
- Tommi West from tommiland.com
- Prototyping for the Apple iPhone using Fireworks [a step-by-step guide]
- Learn how to use a few scripts to make your Fireworks prototype work for the Apple iPhone.
- Designing a Website in Fireworks CS4 [1:01:02] - intermediate
- Paul Dorian shows how Fireworks CS4 helps you rapidly prototype websites, application interfaces, and other interactive designs
- Send me any good tutorials for Adobe Fireworks you find useful.
Fireworks Help
The online help guide for all of the Adobe applications we will use this semester is always available from within the specific application under the "Help" menu.
Additionally, most applications in the CS4 package load a "Start page" - some times still called the "Welcome Screen" - when you first launch the application. This screen contains links to "Getting Started", "New Features and "Resources". Take a look!
"When you start Fireworks without opening a document, the Fireworks Start page appears in the work environment. The Start page gives you quick access to Fireworks tutorials, recent files, and Fireworks Exchange, where you can add new capabilities to some Fireworks features. To disable the start page, click Don't Show Again when the Start page opens." You will receive an alert box explaining how to turn the Start page on again.
To turn the Start page on again, check "Show Start page" from the General category in the Fireworks Preferences dialog.
The direct link to Adobe Help on the Web for Fireworks is: http://help.adobe.com/en_US/Fireworks/10.0_Using/index.html?trackingid=DYNQA
Fireworks Terms
Symbols: Symbols are reusable elements - images, text, etc. - that once converted into symbols are stored and then can be placed in multiple pages or on the same page. When the master symbol is edited, the changes are propagated to all the instances of that symbol automatically. Read more about Fireworks Symbols online
Slices: Read more about Fireworks Slices online.
Hotspots: Hotspots are areas of a larger graphic that are interactive; similar to image maps in older web work. Read more about Fireworks Hotspots online.
Layers: Layers divide a Fireworks document into discrete planes, as though the components of the illustration were drawn on separate tracing paper overlays. A document can be made up of many layers, each containing many sublayers or objects. Fireworks layers are similar to layer sets in Adobe Photoshop®. Photoshop layers are similar to individual Fireworks objects. Read more about Fireworks Layers online.
Prototyping: Originally developed prototype web sites Fireworks is now used to prototype many web applications and device interface. Read more about Prototyping with Fireworks online.
Workflow: A workflow consists of a sequence of connected steps. The modern history of workflows can be traced to F. W. Taylor and H. Gantt. Together they launched the study of the deliberate, rational organization of work in the context of manufacturing. Today the term ia applied to any organized sequence of activities leading to the desired result. A sample workflow starting with Fireworks, Creating simple interactive content using Fireworks, Flash, and Dreamweaver [a step-by-step guide]
