Griffith / King / Smith Foundation Fireworks CS4

1. ed
ISBN: 978-1-4302-1619-3
Verlag: Apress
Format: PDF
Kopierschutz: 1 - PDF Watermark

E-Book, Englisch, 304 Seiten

Are you a web designer who is looking for a new and quicker way to prototype and create for the web? Perhaps you are a programmer who finds most design tools to be overkill for what you need to get done. Or, maybe you're an old Fireworks pro, who wants to get up-to-date on the changes in Creative Suite 4. Either way, this book has something for you. Coverage of all that's new and powerful for the Web designer and developer in Fireworks CS4 Targets developers who want design tools that don't get in their way and designers who want development tools that don't constrain their creativity Do all your website and page prototypes and comps in one tool and learn how to take them straight to Dreamweaver to implement your designs

A bio is not available for this author.

Autoren/Hrsg.

Griffith, Hugh

King, Rogie

Smith, Nathan

Mallott, Chuck

Heerema, Matt

Erskine, Craig

Inhaltsverzeichnis

1;Title Page;1
2;Copyright Page;2
3;CONTENTS AT A GLANCE;3
4;Table of Contents;5
5;FOREWORD;13
6;ABOUT THE AUTHORS;14
7;ABOUT THE TECHNICAL REVIEWER;16
8;ABOUT THE COVER IMAGE DESIGNER;17
9;LAYOUT CONVENTIONS;18
10;Part 1 LEARNING FIREWORKS;19
11;Chapter 1 WELCOME TO FIREWORKS;21
11.1;Fireworks as a web design tool;22
11.2;Fireworks as a design and illustration tool;24
11.3;Fireworks as a prototyping tool;26
11.4;Fireworks and the Creative Suite;28
11.4.1;Photoshop support;29
11.4.2;Illustrator support;30
11.4.3;Flash support;31
11.5;Summary;33
12;Chapter 2 FIREWORKS AND CS4 INTEGRATION;35
12.1;What is integration?;35
12.1.1;How integration helps;36
12.1.2;Integration within the Creative Suite;36
12.2;Integration with Photoshop;37
12.2.1;Importing a Photoshop file;37
12.2.1.1;Pixel Dimensions;38
12.2.1.2;Layer Comp;38
12.2.2;Opening a Photoshop file;39
12.2.3;Photoshop Live Effects;40
12.2.3.1;Working with shapes from Photoshop;42
12.2.3.2;Importing a PNG into Photoshop;42
12.3;Saving as PSD;43
12.4;Integration with Illustrator;44
12.4.1;Opening an Illustrator file;44
12.4.1.1;Scale;45
12.4.1.2;Width and Height;45
12.4.1.3;Resolution;45
12.4.1.4;Anti-Alias;45
12.4.1.5;File Conversion;45
12.4.1.6;Render as images;45
12.4.2;Importing an Illustrator (AI) file;46
12.5;Integration with Flash;46
12.5.1;Import as a single flattened bitmap;47
12.5.2;Import;47
12.5.3;Into;47
12.5.4;Objects;47
12.5.5;Text;47
12.6;Summary;47
13;Chapter 3 WORKING WITH BITMAPS;49
13.1;Bitmap layers;50
13.2;Bitmap tools;50
13.3;Selection tools;51
13.3.1;Common selection techniques;52
13.3.1.1;Shift key;52
13.3.1.2;Alt key;52
13.3.1.3;Arrow tool and arrow keys;52
13.3.1.4;Live marquee option;52
13.3.1.5;Marquee tool;52
13.3.1.6;Lasso tool;53
13.3.1.7;Magic Wand tool;54
13.3.2;Converting selections to paths and vice versa;55
13.4;Drawing tools;56
13.4.1;Pencil tool;56
13.4.2;Brush tool;57
13.4.3;Eraser tool;59
13.5;Image adjustment/effects tools;59
13.5.1;Blur and Sharpen tools;59
13.5.2;Dodge and Burn tools;60
13.5.3;Smudge tool;62
13.6;Additional retouching tools;62
13.6.1;Rubber Stamp tool;62
13.6.2;Replace Color tool;63
13.6.3;Red Eye Removal tool;64
13.7;Summary;65
14;Chapter 4 WORKING WITH VECTORS;67
14.1;Using the Vector tools;68
14.1.1;Line tool;68
14.1.2;Pen tool;69
14.1.3;Vector Path tool;70
14.1.4;Rectangle tool;71
14.1.5;Text tool;72
14.1.6;Freeform and Reshape Area tools;73
14.1.7;Knife tool;74
14.2;Using the Paths panel;74
14.2.1;Combining paths;76
14.2.2;Altering paths;79
14.2.3;Selecting points on a line or path;85
14.2.4;Editing points;86
14.3;Summary;91
15;Chapter 5 EXPORTING FROM FIREWORKS TO THE WEB;93
15.1;File optimization: The tools;93
15.1.1;Slice tool;94
15.1.2;Hotspot tool;94
15.2;Image optimization;95
15.2.1;Choosing the right file type;96
15.2.2;Compression and color settings;97
15.2.2.1;Palette index;98
15.2.2.2;Loss;98
15.2.2.3;Matte;98
15.2.2.4;Colors;99
15.2.2.5;The color table;99
15.2.3;Dither;99
15.2.3.1;Transparency;99
15.2.3.2;JPEG compression options;100
15.2.3.2.1;Quality;100
15.2.3.2.2;Selective quality;100
15.2.3.2.3;Smoothing and sharpening;101
15.2.4;Side-by-side comparison;102
15.3;Using the Export command;103
15.3.1;The Export dialog;103
15.3.1.1;Exporting to Adobe PDF;104
15.3.1.2;Images only;105
15.3.1.2.1;Selected Slices Only;107
15.3.1.2.2;Include Areas without slices;107
15.3.1.2.3;Current State Only;107
15.3.1.2.4;Current Page Only;107
15.3.1.3;Dreamweaver Library (.lbi);107
15.3.1.4;HTML and ImagesCSS and Images (.htm)Director (.htm);107
15.4;Using the Export Wizard;109
15.4.1;The Preview window;112
15.5;Summary;114
16;Part 2 USING FIREWORKS;115
17;Chapter 6 CREATING VISUAL EFFECTS;117
17.1;Building blocks;118
17.1.1;Gradient fills;118
17.1.1.1;Selecting a gradient type;118
17.1.1.2;Editing gradient nodes;118
17.1.1.3;Adjusting the gradient direction;119
17.1.1.4;Advanced gradient editing;120
17.1.2;Texture fills;121
17.1.3;Blend modes;122
17.1.4;Filters;123
17.1.4.1;Why use filters?;123
17.1.4.2;Applying filters;123
17.1.5;Styles;125
17.2;Creating popular effects;126
17.2.1;Creating glass buttons;126
17.2.2;Creating reflections;129
17.2.3;Creating web headers;131
17.2.3.1;Finding the right color palette;132
17.2.3.2;Creating the thick diagonal background texture;132
17.2.3.3;Defining the container rectangle;132
17.2.3.4;Defining the primary rectangle;133
17.2.3.5;Adding texture to the primary rectangle;133
17.2.3.6;Adding a highlight border;134
17.2.3.7;Adding text elements;135
17.2.3.8;Adding foreground glass;137
17.2.4;Adding “magic”;137
17.3;Summary;143
18;Chapter 7 THE INS AND OUTS OF ANIMATION;145
18.1;The States panel;145
18.1.1;Quick onion skinning;146
18.1.2;State position and name;146
18.1.3;State delay;146
18.1.4;Quick glance;146
18.1.5;Onion skinning options;147
18.1.6;GIF animation looping;147
18.1.7;Distribute to states;148
18.1.8;New/Duplicate state;148
18.1.9;Delete state;148
18.2;Building an animation;148
18.2.1;Manipulating objects;150
18.2.2;Fading around the circle;150
18.2.3;Creating the animation frames;151
18.2.4;Previewing the results;152
18.3;Morphing an animation;152
18.3.1;Preparing the document;152
18.3.2;Making some shapes;153
18.3.3;Applying a morph effect;153
18.3.4;Separating the groups;153
18.4;Creating the animation states;154
18.4.1;Duplicating and reversing states;154
18.5;Exporting animations for the Web;155
18.5.1;GIF animations;155
18.5.2;Flash (SWF) animations;156
18.6;Summary;157
19;Chapter 8 SKINNING FLEX COMPONENTSWITH FIREWORKS;159
19.1;Creating a new Flex skin in Fireworks;160
19.2;Reskinning the button;162
19.3;Exporting the skin;163
19.4;Importing the skin in Flex;164
19.4.1;Creating a new Flex project;164
19.4.2;Adding a Button component;165
19.4.3;Importing the skin images;165
19.4.4;Modifying the nine- slice scaling;168
19.5;Summary;169
20;Chapter 9 CREATING ADOBE AIR PROTOTYPES;171
20.1;Designing the master page;173
20.1.1;Defining the background;173
20.1.2;Defining the content container;174
20.1.3;Adding the tabs;174
20.1.4;Adding the application title;176
20.1.5;Designing the information page;176
20.1.6;Designing the gallery page;177
20.1.6.1;Creating the thumbnail symbol;177
20.1.7;Building the portfolio detail pages;179
20.1.7.1;Duplicating the pages and finalizing page names;180
20.2;Adding hotspots and interaction;181
20.2.1;Global navigation;181
20.2.2;Creating the hotspots;181
20.2.3;Adding interactivity;181
20.2.4;Defining links on the gallery page;182
20.3;Creating the Adobe AIR package;182
20.3.1;Packaging content;184
20.3.2;Creating a digital signature;184
20.3.3;Previewing the AIR file;187
20.3.4;Creating and installing the AIR file;187
20.4;Summary;188
21;Chapter 10 FIREWORKS EXTENSIONS;190
21.1;Types of extensions;191
21.1.1;Command and command panel extension types;191
21.1.2;Other extension types;192
21.1.3;Default Fireworks commands;193
21.1.3.1;Modifying objects;193
21.1.3.2;Modifying the document/interface;195
21.2;Finding extensions online;197
21.2.1;Browsing Adobe Exchange: A repository of extensions;197
21.3;Additional extension resources;199
21.3.1;Community sites;199
21.3.2;Personal sites;199
21.4;Using the Extension Manager;200
21.4.1;Installing new extensions;201
21.4.2;Disabling an extension;201
21.4.3;Uninstalling an extension;202
21.5;Summary;202
22;Chapter 11 EXTENDING FIREWORKS: DEVELOPING AN EFFECTIVE WORKFLOW USING JAVASCRIPT AND FLASH;204
22.1;Foundation terminology;205
22.2;Learning the basics of an advanced workflow;205
22.3;Defining a Fireworks workflow;206
22.3.1;Step 1: Creating a simple JSF command;206
22.3.1.1;Using the History panel to create a command;207
22.3.1.2;What just happened?;207
22.3.1.3;Where is the command stored?;208
22.3.1.4;Editing and understanding the JSF;209
22.3.2;Step 2: Creating a Flash UI;210
22.3.2.1;Creating a document and adding a button;210
22.3.3;Steps 3 and 4: Importing and executing the JSF;211
22.3.3.1;Adding the Mouse.onRelease event handler;213
22.3.4;Step 5: Publishing and testing the SWF;213
22.4;Building a functional UI in Flash;214
22.4.1;Draw Rect.jsf updated with the CreateRectangle function;214
22.4.2;Working with returned values: Adding a ColorPicker;217
22.5;Streamlining your workflow with the Fireworks developer toolbox;219
22.5.1;Converting JSF to AS using the FDT;220
22.5.2;Updating the Draw Rect panel;222
22.6;Defining Flash panel resize behavior;222
22.7;Responding to Fireworks events;225
22.7.1;Detecting change of selection;225
22.7.2;Detecting tool changes;226
22.8;Building panels with ActionScript 3;226
22.8.1;Creating ActionScript 3 panels in Flash;227
22.8.1.1;Responding to Fireworks events in ActionScript 3;229
22.8.2;Creating ActionScript 3 panels in Flex;230
22.9;Packaging and deploying your panel;234
22.10;Learning the Fireworks object model;236
22.10.1;The Extending Fireworks documentation;236
22.10.2;The History panel method;236
22.10.3;The FWAPI_Inspector panel;236
22.11;Summary;238
23;Part 3 FIREWORKS IN ACTION;239
24;Chapter 12 WEB SITE CASE STUDY #1: BLOG;241
24.1;Phase 1: Project planning and preparation;242
24.1.1;Project details example;242
24.2;Phase 2: Exploring layouts with wireframes;243
24.2.1;Wireframe example;243
24.3;Phase 3: Turning wireframes into gray frames;247
24.3.1;Gray frame example;247
24.4;Phase 4: Creating a logo for the design;250
24.4.1;Logo example;251
24.5;Phase 5: Putting all the pieces together: The design composition;251
24.5.1;Design example;252
24.6;Phase 6: Build- out: From graphics to code;255
24.7;Phase 7: Integrating into a CMS;256
24.8;Summary;256
25;Chapter 13 WEB SITE CASE STUDY #2: CSS SPRITES;258
25.1;Creating site navigation with sprites;259
25.2;Preparing a new page;259
25.3;Writing the HTML;260
25.4;Writing the CSS;261
25.4.1;List reset;263
25.4.2;Extreme negative text indent;264
25.4.3;Defining the dimensions;264
25.4.4;Sliding the background into position;265
25.5;Summary;266
26;Chapter 14 WEB SITE CASE STUDY #3: E- COMMERCE;268
26.1;Checking out with shared layers and pages;268
26.2;Setting up the workspace;269
26.2.1;Designing the site’s background;269
26.2.2;Creating a header;269
26.2.3;Defining the page body;269
26.2.4;Establishing the site’s navigation;269
26.2.5;Organizing the document’s objects and layers;271
26.2.6;Organizing the site design into pages;271
26.3;Building all the graphics in Fireworks;272
26.3.1;Creating the logo;272
26.3.1.1;Defining the logo’s basic shape and color;272
26.3.1.2;Adding some detail and dimension;273
26.3.1.3;Polishing it up;273
26.3.2;Drawing a T- shirt graphic;274
26.3.3;Making a button;275
26.4;Assembling the pages;276
26.4.1;Building the Store page;277
26.4.2;Using symbols for efficient workflow;279
26.4.3;Creating the Cart page;281
26.4.4;Making the Checkout page;281
26.4.5;Building the Confirmation page;284
26.5;Summary;285
27;INDEX;287