Foundation Fireworks CS4 (eBook)

A bio is not available for this author.

Title Page 1
Copyright Page 2
CONTENTS AT A GLANCE 3
Table of Contents 5
FOREWORD 13
ABOUT THE AUTHORS 14
ABOUT THE TECHNICAL REVIEWER 16
ABOUT THE COVER IMAGE DESIGNER 17
LAYOUT CONVENTIONS 18
Part 1 LEARNING FIREWORKS 19
Chapter 1 WELCOME TO FIREWORKS 21
Fireworks as a web design tool 22
Fireworks as a design and illustration tool 24
Fireworks as a prototyping tool 26
Fireworks and the Creative Suite 28
Photoshop support 29
Illustrator support 30
Flash support 31
Summary 33
Chapter 2 FIREWORKS AND CS4 INTEGRATION 35
What is integration? 35
How integration helps 36
Integration within the Creative Suite 36
Integration with Photoshop 37
Importing a Photoshop file 37
Pixel Dimensions 38
Layer Comp 38
Opening a Photoshop file 39
Photoshop Live Effects 40
Working with shapes from Photoshop 42
Importing a PNG into Photoshop 42
Saving as PSD 43
Integration with Illustrator 44
Opening an Illustrator file 44
Scale 45
Width and Height 45
Resolution 45
Anti-Alias 45
File Conversion 45
Render as images 45
Importing an Illustrator (AI) file 46
Integration with Flash 46
Import as a single flattened bitmap 47
Import 47
Into 47
Objects 47
Text 47
Summary 47
Chapter 3 WORKING WITH BITMAPS 49
Bitmap layers 50
Bitmap tools 50
Selection tools 51
Common selection techniques 52
Shift key 52
Alt key 52
Arrow tool and arrow keys 52
Live marquee option 52
Marquee tool 52
Lasso tool 53
Magic Wand tool 54
Converting selections to paths and vice versa 55
Drawing tools 56
Pencil tool 56
Brush tool 57
Eraser tool 59
Image adjustment/effects tools 59
Blur and Sharpen tools 59
Dodge and Burn tools 60
Smudge tool 62
Additional retouching tools 62
Rubber Stamp tool 62
Replace Color tool 63
Red Eye Removal tool 64
Summary 65
Chapter 4 WORKING WITH VECTORS 67
Using the Vector tools 68
Line tool 68
Pen tool 69
Vector Path tool 70
Rectangle tool 71
Text tool 72
Freeform and Reshape Area tools 73
Knife tool 74
Using the Paths panel 74
Combining paths 76
Altering paths 79
Selecting points on a line or path 85
Editing points 86
Summary 91
Chapter 5 EXPORTING FROM FIREWORKS TO THE WEB 93
File optimization: The tools 93
Slice tool 94
Hotspot tool 94
Image optimization 95
Choosing the right file type 96
Compression and color settings 97
Palette index 98
Loss 98
Matte 98
Colors 99
The color table 99
Dither 99
Transparency 99
JPEG compression options 100
Quality 100
Selective quality 100
Smoothing and sharpening 101
Side-by-side comparison 102
Using the Export command 103
The Export dialog 103
Exporting to Adobe PDF 104
Images only 105
Selected Slices Only 107
Include Areas without slices 107
Current State Only 107
Current Page Only 107
Dreamweaver Library (.lbi) 107
HTML and ImagesCSS and Images (.htm)Director (.htm) 107
Using the Export Wizard 109
The Preview window 112
Summary 114
Part 2 USING FIREWORKS 115
Chapter 6 CREATING VISUAL EFFECTS 117
Building blocks 118
Gradient fills 118
Selecting a gradient type 118
Editing gradient nodes 118
Adjusting the gradient direction 119
Advanced gradient editing 120
Texture fills 121
Blend modes 122
Filters 123
Why use filters? 123
Applying filters 123
Styles 125
Creating popular effects 126
Creating glass buttons 126
Creating reflections 129
Creating web headers 131
Finding the right color palette 132
Creating the thick diagonal background texture 132
Defining the container rectangle 132
Defining the primary rectangle 133
Adding texture to the primary rectangle 133
Adding a highlight border 134
Adding text elements 135
Adding foreground glass 137
Adding “magic” 137
Summary 143
Chapter 7 THE INS AND OUTS OF ANIMATION 145
The States panel 145
Quick onion skinning 146
State position and name 146
State delay 146
Quick glance 146
Onion skinning options 147
GIF animation looping 147
Distribute to states 148
New/Duplicate state 148
Delete state 148
Building an animation 148
Manipulating objects 150
Fading around the circle 150
Creating the animation frames 151
Previewing the results 152
Morphing an animation 152
Preparing the document 152
Making some shapes 153
Applying a morph effect 153
Separating the groups 153
Creating the animation states 154
Duplicating and reversing states 154
Exporting animations for the Web 155
GIF animations 155
Flash (SWF) animations 156
Summary 157
Chapter 8 SKINNING FLEX COMPONENTSWITH FIREWORKS 159
Creating a new Flex skin in Fireworks 160
Reskinning the button 162
Exporting the skin 163
Importing the skin in Flex 164
Creating a new Flex project 164
Adding a Button component 165
Importing the skin images 165
Modifying the nine- slice scaling 168
Summary 169
Chapter 9 CREATING ADOBE AIR PROTOTYPES 171
Designing the master page 173
Defining the background 173
Defining the content container 174
Adding the tabs 174
Adding the application title 176
Designing the information page 176
Designing the gallery page 177
Creating the thumbnail symbol 177
Building the portfolio detail pages 179
Duplicating the pages and finalizing page names 180
Adding hotspots and interaction 181
Global navigation 181
Creating the hotspots 181
Adding interactivity 181
Defining links on the gallery page 182
Creating the Adobe AIR package 182
Packaging content 184
Creating a digital signature 184
Previewing the AIR file 187
Creating and installing the AIR file 187
Summary 188
Chapter 10 FIREWORKS EXTENSIONS 190
Types of extensions 191
Command and command panel extension types 191
Other extension types 192
Default Fireworks commands 193
Modifying objects 193
Modifying the document/interface 195
Finding extensions online 197
Browsing Adobe Exchange: A repository of extensions 197
Additional extension resources 199
Community sites 199
Personal sites 199
Using the Extension Manager 200
Installing new extensions 201
Disabling an extension 201
Uninstalling an extension 202
Summary 202
Chapter 11 EXTENDING FIREWORKS: DEVELOPING AN EFFECTIVE WORKFLOW USING JAVASCRIPT AND FLASH 204
Foundation terminology 205
Learning the basics of an advanced workflow 205
Defining a Fireworks workflow 206
Step 1: Creating a simple JSF command 206
Using the History panel to create a command 207
What just happened? 207
Where is the command stored? 208
Editing and understanding the JSF 209
Step 2: Creating a Flash UI 210
Creating a document and adding a button 210
Steps 3 and 4: Importing and executing the JSF 211
Adding the Mouse.onRelease event handler 213
Step 5: Publishing and testing the SWF 213
Building a functional UI in Flash 214
Draw Rect.jsf updated with the CreateRectangle function 214
Working with returned values: Adding a ColorPicker 217
Streamlining your workflow with the Fireworks developer toolbox 219
Converting JSF to AS using the FDT 220
Updating the Draw Rect panel 222
Defining Flash panel resize behavior 222
Responding to Fireworks events 225
Detecting change of selection 225
Detecting tool changes 226
Building panels with ActionScript 3 226
Creating ActionScript 3 panels in Flash 227
Responding to Fireworks events in ActionScript 3 229
Creating ActionScript 3 panels in Flex 230
Packaging and deploying your panel 234
Learning the Fireworks object model 236
The Extending Fireworks documentation 236
The History panel method 236
The FWAPI_Inspector panel 236
Summary 238
Part 3 FIREWORKS IN ACTION 239
Chapter 12 WEB SITE CASE STUDY #1: BLOG 241
Phase 1: Project planning and preparation 242
Project details example 242
Phase 2: Exploring layouts with wireframes 243
Wireframe example 243
Phase 3: Turning wireframes into gray frames 247
Gray frame example 247
Phase 4: Creating a logo for the design 250
Logo example 251
Phase 5: Putting all the pieces together: The design composition 251
Design example 252
Phase 6: Build- out: From graphics to code 255
Phase 7: Integrating into a CMS 256
Summary 256
Chapter 13 WEB SITE CASE STUDY #2: CSS SPRITES 258
Creating site navigation with sprites 259
Preparing a new page 259
Writing the HTML 260
Writing the CSS 261
List reset 263
Extreme negative text indent 264
Defining the dimensions 264
Sliding the background into position 265
Summary 266
Chapter 14 WEB SITE CASE STUDY #3: E- COMMERCE 268
Checking out with shared layers and pages 268
Setting up the workspace 269
Designing the site’s background 269
Creating a header 269
Defining the page body 269
Establishing the site’s navigation 269
Organizing the document’s objects and layers 271
Organizing the site design into pages 271
Building all the graphics in Fireworks 272
Creating the logo 272
Defining the logo’s basic shape and color 272
Adding some detail and dimension 273
Polishing it up 273
Drawing a T- shirt graphic 274
Making a button 275
Assembling the pages 276
Building the Store page 277
Using symbols for efficient workflow 279
Creating the Cart page 281
Making the Checkout page 281
Building the Confirmation page 284
Summary 285
INDEX 287