Home » Adobe Manuals » Computer Software » Adobe 65011817 » Manual Viewer

Adobe 65011817 User Guide - Page 191

Prototyping websites and application interfaces, Prototyping workflow

UPC - 883919157368

Add to My Manuals
Save this manual to your list of manuals

Page 191 highlights

185 Chapter 14: Prototyping websites and application interfaces Adobe® Fireworks® provides an ideal prototyping environment, seamlessly converting design mock-ups into realworld websites and applications. Prototyping workflow By combining the Pages panel with other powerful Fireworks features, you can quickly create interactive web and software prototypes. To convert a finalized prototype to a functioning site, simply export it to Adobe Flash®, Adobe Flex®, Adobe AIR™, or Adobe Dreamweaver®. See the following articles on Fireworks Developer Center for general tips on prototyping workflows: • Nick Myers' article on designing interactive products with Fireworks: http://www.adobe.com/devnet/fireworks/articles/cooper_interactive.html • Dave Cronin's article on industry trends in prototyping: http://www.adobe.com/devnet/fireworks/articles/cooper_prototyping.html • Matt Stow's article on using prebuilt CSS templates in Fireworks CS4: Prebuilt CSS templates in Fireworks CS4. • Jim Babbage's article, Fireworks CS4 How-Tos excerpts: Importing, exporting, symbols, prototyping, scaling. • Dave Hogue's video tutorials on using Fireworks CS4 for interaction design and rapid prototyping: • Using Fireworks for information and interaction design: http://tv.adobe.com/#vi+f1498v1661 • Creating interactive prototypes with Fireworks: http://tv.adobe.com/#vi+f1498v1660 • Rapid prototyping with Fireworks: http://tv.adobe.com/#vi+f1498v1659 • Fireworks as part of the complete design process: http://tv.adobe.com/#vi+f1498v1658 • Article on designing a website application with Fireworks CS4: http://www.adobe.com/devnet/fireworks/articles/carshare_design.html • Kumar Vivek's article on designing for mobile devices using Fireworks CS4: http://www.adobe.com/devnet/fireworks/articles/design_mobile_devices.html For a video tutorial on prototyping application interfaces, see www.adobe.com/go/lrvid4034_fw. 1. Create the pages In the Pages panel, create the desired number of pages or screens for your initial design. As the design evolves, you can add or subtract pages as needed. 2. Layout common design elements On the canvas, layout design elements that you want to share across multiple pages, such as navigation bars and background images. To align elements, use Smart Guides. For maximum flexibility, structure your layout with CSS. (See "Smart Guides" on page 34 and "Creating CSS-based layouts" on page 189.). Last updated 3/8/2011

Section	Page
Contents	3
Chapter 1: Resources	7
Activation and registration	7
Help with installation	7
License activation	7
Register	7
Adobe Product Improvement Program	7
ReadMe	8
Help and support	8
Community Help	8
Product Help	8
Printed resources	9
Support resources	9
Services, downloads, and extras	9
Adobe creative on-line services	9
Adobe Exchange	10
Adobe downloads	10
Adobe Labs	10
Adobe TV	10
Extras	10
What's new in Fireworks CS4	10
Improved performance, stability	10
New user interface	11
CSS based layouts	11
PDF Export	11
Adobe Type Engine	11
Live styles	11
Workspace improvements	11
Adobe AIR authoring	11
Chapter 2: Fireworks basics	12
About working in Fireworks	12
Draw and edit vector and bitmap objects	12
Add interactivity to graphics	12
Optimize and export graphics	12
Vector and bitmap graphics	12
About vector graphics	13
About bitmap graphics	13
Creating a new Fireworks document	13
Create a new document	14
Create a new document the same size as an object on the Clipboard	14
Opening and importing files	14
Open a Fireworks document	14
Open a recently closed file	14
Open a recently closed file when no files are open	15
Open graphics created in other applications	15
Animated GIFs	15
EPS files	15
PSD files	15
WBMP files	15
Create Fireworks PNG files from HTML files	16
Open all tables of an HTML file	16
Open only the first table of an HTML file	16
Import the first table of an HTML file into an open Fireworks document	16
Insert objects into a Fireworks document	16
Drag an image or text into Fireworks	16
Paste into Fireworks	16
Location of pasted objects	17
Resample pasted objects	17
Resample a bitmap object by pasting	17
Import a PNG file into a Fireworks document layer	17
Import from a digital camera or scanner	18
Direct Fireworks to Photoshop Acquire plug-ins	18
Import an image from a digital camera (Windows)	18
Import an image from a digital camera (Mac OS)	18
Import an image from a scanner	18
Saving Fireworks files	19
Save a Fireworks PNG file for use in an earlier version	19
Save all open documents	19
Save documents in other formats	19
Add a picture frame	20
Reset warning messages	20
Take screenshot (Windows only)	20
Chapter 3: Workspace	21
Workspace basics	21
Fireworks workspace overview	21
The Start page	21
About Fireworks panels	22
Workspace overview	23
Hide or show all panels	24
Display panel options	24
(Illustrator) Adjust panel brightness	24
Reconfigure the Tools panel	24
Manage windows and panels	24
Manage Document windows	25
Dock and undock panels	25
Move panels	26
Add and remove panels	26
Manipulate panel groups	27
Stack floating panels	27
Resize panels	27
Manipulate panels collapsed to icons	27
Restore the default workspace	28
Manage connections to web services	29
Log into Adobe web services	29
Disable automatic extension updates	29
Manually check for updated extensions	29
Disable web services	29
Working with ConnectNow	30
Save and switch workspaces	30
Save a custom workspace	30
Display or switch workspaces	30
Delete a custom workspace	31
(Photoshop) Start with the last or default panel locations	31
The Tools panel	31
Display tool options in the Property inspector	32
Select a tool from a tool group	32
The Property inspector	32
Undock the Property inspector	32
Dock the Property inspector at the bottom of the workspace	32
Expand or collapse the Property inspector	32
Display and move toolbars (Windows only)	33
Show or hide a toolbar	33
Undock a toolbar	33
Dock a toolbar (Windows only)	33
Navigate and view documents	33
Use document tabs to select documents	33
Zoom and pan in and out	34
Zoom in, using preset increments	34
Zoom out, using preset increments	34
Zoom in on a specific area	34
Zoom out of a specific area	35
Return to 100% magnification	35
Pan around the document	35
Fit the document in the current view	35
Use view modes to manage the workspace	35
Display multiple views of a document	35
Control how a document redraws on the screen	35
View documents as they appear on different platforms	36
Change the canvas	36
Change the canvas size	36
Change the canvas color	36
Resize a document and its contents	37
About resampling	37
Rotate the canvas	38
Trim or fit the canvas	38
Crop a document	38
Use rulers, guides, and the grid	38
Show and hide rulers	39
Create a horizontal or vertical guide	39
Move a guide to a specific position	40
Show or hide guides or the grid	40
Snap objects to guides or to the grid	40
Lock or unlock all guides	40
Remove a guide	40
Display distance between guides	40
Smart Guides	40
Undo and repeat multiple actions	40
Undo and redo actions	40
Repeat actions	41
Save actions for reuse	41
Use the saved custom command	41
Chapter 4: Selecting and transforming objects	42
Select objects	42
Select objects by clicking	42
Select objects by dragging	42
Move or modify objects with the Subselection tool	43
Select an object that is behind other objects	43
Selection information in the Property inspector	43
Modify a selection	43
Add to a selection	43
Deselect an object while leaving other objects selected	43
Select everything on every layer in the document	44
Deselect all selected objects	44
Hide the path selection feedback of a selected object	44
Hide selected objects	44
Show all objects	44
Select pixels	44
Options for bitmap selection tools	45
Edge options	45
Marquee or Oval Marquee style options	45
Create pixel selection marquees	45
Select a rectangular or elliptical area of pixels	45
Select a free-form area of pixels	45
Plot points to create a marquee selection	45
Select pixels in areas of similar color	46
Select similar colors throughout a document	46
Create a selection based on opaque areas of objects	47
Remove a selection marquee	47
Adjust selection marquees	47
Reposition a selection while creating it	47
Move an existing marquee	47
Add pixels to an existing selection	47
Subtract pixels from a selection	48
Select part of an existing marquee	48
Inverse a pixel selection	48
Feather a pixel selection	48
Expand or contract a marquee	48
Select an area around an existing marquee	48
Smooth the border of a marquee	48
Convert, transfer, or save marquee selections	49
Convert a marquee to a path	49
Transfer a marquee selection to another bitmap object	49
Save or restore a marquee selection	49
Delete a saved marquee selection	49
Copy or move the contents of a marquee selection	50
Move the contents of a marquee selection	50
Copy the contents of a marquee selection	50
Insert a new bitmap by copying a selection	50
Edit selected objects	50
Move, duplicate, or delete objects	50
Move a selection	50
Move or copy selected objects by pasting	51
Duplicate one or more selected objects	51
Clone a selection	51
Delete selected objects	51
Cancel or deselect a selection	51
Transform and distort objects and selections	51
Transform selected objects by using the transform handles	52
Resize a selected object	52
Resize all selected objects	53
Skew objects	53
Distort objects	53
Rotate or flip objects	53
Rotate a selected object 90° or 180°	53
Rotate a selected object by dragging	53
Relocate the axis of rotation	54
Reset the axis of rotation to the center of the selection	54
Flip an object while maintaining relative position	54
Numerically transform objects	54
Scale or rotate selected objects by using the Numeric Transform command	54
View numeric transformation information	55
9-slice scaling	55
9-slicing symbols	55
Apply 9-slice guides to a symbol	55
Scale in one dimension with three slices	56
Identify symbols that use 9-slice scaling	56
9-slicing standard objects	56
Organize multiple objects	57
Options for organizing objects	57
Group or ungroup objects	57
Select objects within groups	57
Select an object that is part of a group	57
Select the group that contains a subselected object	58
Select all objects within a selected group	58
Stack the order of objects	58
Change the stacking order of a selected object or group within a layer	58
Arrange objects among layers	58
Align objects	58
Align selected objects	58
Evenly distribute the widths or heights of three or more selected objects	59
Chapter 5: Working with bitmaps	60
Creating bitmaps	60
Create bitmap objects by drawing	60
Create empty bitmap objects	60
Cut or copy pixels and paste them as a new bitmap object	60
Convert selected vector objects to a bitmap image	61
Editing bitmaps	61
Draw bitmap objects	61
Paint an object with the Brush tool	61
Change pixels to the fill color	61
Apply a gradient fill to a pixel selection	62
Sample a color to use as a stroke or fill color	62
Erase pixels in a bitmap object or selection	62
Crop a selected bitmap	62
Retouching bitmaps	63
Clone pixels	63
Set options for the Rubber Stamp tool	64
Duplicate a pixel selection	64
Blur, sharpen, and smudge images	64
Lighten and darken parts of images	65
Remove red-eye from photos	65
Replace colors in bitmap objects	66
Replace a color by using the color swatch	66
Replace a color with a selected color in an image	66
Blur edges by feathering	67
Adjust bitmap color and tone	67
Apply a Live Filter to an area defined by a bitmap selection marquee	67
Adjust tonal range in bitmaps	68
Adjust highlights, midtones, and shadows with Levels	68
Adjust highlights, midtones, and shadows automatically	69
Adjust a specific color in the tonal range with Curves	70
Delete a point along the curve	71
Adjust the tonal balance manually	71
Adjust brightness and contrast	71
Change object colors by blending	72
Adjust hue and saturation	72
Change an RGB image to a two-tone image or add color to a grayscale image	73
Invert an image's color values	73
Change an object to grayscale	73
Change an object to sepia tone	74
Blurring and sharpening bitmaps	74
Blurring options	74
Change a bitmap into a line drawing	74
Convert an image to a transparency	75
Sharpen an image	75
Add noise to an image	76
Add noise	76
Chapter 6: Working with vector objects	77
Basic shapes	77
Draw and edit basic shapes	77
Draw a line, rectangle, or ellipse	77
Increase the sharpness of lines	77
Draw a shape from the center point	77
Add arrowheads to a line	78
Adjust the position of a basic shape as you draw it	78
Resize a selected line, rectangle, or ellipse	78
Draw basic rounded rectangles	78
Draw a basic polygon	78
Draw a star	79
Auto Shapes	79
The Auto Shape tools	79
Draw an Auto Shape	80
Add a shadow to an Auto Shape	80
Change Auto Shape properties precisely	80
Change Auto Shape properties by using control points	81
Adjust Arrow Auto Shapes	81
Adjust Arrow Line Auto Shapes	81
Adjust beveled, chamfered, and rounded rectangle Auto Shapes	81
Adjust Connector Line Auto Shapes	81
Adjust Doughnut Auto Shapes	81
Adjust L-shaped Auto Shapes	81
Adjust Measure Tool Auto Shapes	82
Adjust Pie Auto Shapes	82
Adjust Smart polygon Auto Shapes	82
Adjust Spiral Auto Shapes	82
Adjust Star Auto Shapes	82
Use additional Auto Shapes	83
Add new Auto Shapes to Fireworks	83
Free-form shapes	83
Draw free-form paths with the Vector Path tool	83
Draw free-form paths by plotting points with the Pen tool	84
Draw a path with straight line segments	84
Draw a path with curved segments	84
Convert path segments to straight or curved points	85
Convert a corner point to a curve point	85
Convert a curve point to a corner point	86
Edit free-form paths by using points and point handles	86
Select specific points on a selected path	86
Insert a point on a selected path	86
Delete a point from a selected path	87
Move a point	87
Change a straight path segment	87
Change the shape of a curved path segment	87
Adjust the handle of a corner point	88
Extend and merge free-form paths	88
Resume drawing an existing open path	88
Merge two open paths	88
Auto-join similar open paths	88
Special vector-editing techniques	89
Edit with vector tools	89
Bend and reshape vector objects with the Freeform tool	89
Distort selected paths with the Reshape Area tool	90
Redraw or extend a selected path segment with the Redraw Path tool	91
Change path appearance by varying pressure and speed with Path Scrubber tools	91
Slice a path into multiple objects with the Knife tool	91
Edit with path operations	92
Create one continuous path from two open paths	92
Create a composite path	92
Break apart a composite path	92
Combine selected closed paths as one path enclosing the entire area of the original paths	92
Convert a path to a marquee selection	92
Create an object from the intersection of other objects	92
Remove portions of a path object	93
Crop a path	93
Simplify a path	93
Expand a selected object's stroke	94
Contract or expand a path	94
Edit paths using the Path panel	95
Chapter 7: Working with text	96
Enter text	96
Create and move text blocks	96
Change auto-sized and fixed-width text blocks	97
Format and edit text	97
About fonts	97
Previewing fonts	98
Specify a typeface size	98
Make missing fonts available	98
Choose a font family and style	99
Choose a font family and style with the Property inspector	99
Choose a font family and style with the Text menu	99
Change text to uppercase	99
Change text to lowercase	99
Change text to sentence case	99
Insert special characters	99
Insert placeholder text	99
Apply color to text	100
Set the color of text in a selected text block	100
Set spacing between lines and letters	100
Set kerning or tracking	101
Set the leading of selected text	101
Set text orientation and alignment	101
Set text orientation	101
Set text alignment	102
Set paragraph indention and spacing	102
Apply text effects	102
Smooth edges of text	102
Adjust the character width of selected characters	103
Change the proximity of text to the baseline	103
Save stroke, fill, and filter text attributes as a style	104
Attaching text to a path	104
Attach text to a path and edit it	104
Change text orientation and direction on a path	105
Attach text in path	105
Convert text to paths	105
Transform text blocks	106
Solidify text	106
Import text	106
Select replacements for missing fonts	106
Select a replacement font	107
Check spelling of text	107
Spell-check text	107
Customize spell checking	107
Chapter 8: Applying color, strokes, and fills	108
Applying colors	108
Activate, remove, or swap the stroke and fill	108
Activate the stroke or fill color	108
Reset stroke and fill colors to the default	108
Remove the stroke and fill from selected objects	108
Swap the fill and stroke colors	108
Apply and organize swatches	108
Apply a swatch color to the stroke or fill of a selected object	108
Select, change, or add swatch groups	109
Add or replace a color in the Swatches panel	109
Delete a swatch	109
Clear or sort swatches	109
Save a swatch group	109
Create and modify colors in the Color Mixer	109
Apply color to a selected vector object	110
Pick a color	110
Cycle through color models	110
Create colors using the system color pickers	110
Manage colors with the Color Palette panel	111
Find the nearest websafe color for any color value	111
Create and swap color palettes	111
Export a palette	111
Create a color gradation series	111
Create a shared palette	112
Select colors from a color pop-up window	112
Select a color for a color box	112
Display the current Swatches panel swatch group	112
Display a different swatch group in the color pop-up window	112
Sample colors from a color pop-up window	112
Identify color values	112
View the color value of any part of a document	112
View the color value of the active stroke or fill color	113
Display color information for a different color model	113
Dither to simulate web-safe colors and transparency	113
Apply a web dither fill	113
Apply a transparent dither fill	113
Kuler panel	114
About the Kuler panel	114
Browse themes	114
Search themes	114
View a theme online on Kuler	114
Saving frequent searches	114
Working with themes	115
Add a theme to the Swatches panel of your application	115
Edit a theme	115
Create panel tools	115
Applying strokes and fills	116
Apply and change strokes	116
Change stroke attributes of selected objects	116
Change the stroke color of a drawing tool	116
Remove stroke attributes from a selected object	116
Create and edit custom strokes	117
Open the Edit Stroke dialog box	117
Set general brush stroke options	117
Modify the brush tip	118
Set stroke sensitivity	118
Move a brush stroke inside or outside a path	118
Create stroke styles	118
Create and edit solid fills	119
Change the solid fill color of vector drawing tools and the Paint Bucket tool	119
Edit the solid fill of a selected vector object	119
Create and apply pattern and gradient fills	119
Apply a pattern fill to a selected object	119
Create a custom pattern fill from an external file	119
Apply a gradient fill to a selected object	120
Edit a gradient fill	120
Create fills with the Gradient tool	121
Transform and distort fills	121
Modify the edges of fills	121
Save a custom gradient fill	122
Remove a fill from a selected object	122
Add three-dimensional effects to strokes and fills	122
Add texture to a stroke or fill	122
Add a custom texture	122
Create a new texture from an external file	122
Chapter 9: Using Live Filters	123
Applying Live Filters	123
About Live Filters	123
Apply Live Filters	124
Apply a Live Filter to selected objects	124
Enable or disable a Live Filter applied to an object	124
Enable or disable all Live Filters applied to an object	124
Save applied effects	124
Apply beveled edges	124
Apply embossing	124
Apply shadows and glows	125
Filter settings for shadows	125
Apply a solid shadow	125
Apply a drop shadow or inner shadow	126
Apply a glow	126
Apply filters and Photoshop plug-ins as Live Filters	126
Install and apply Photoshop plug-ins	126
Edit and customize Live Filters	127
Edit Live Filter settings	127
Reorder or remove Live Filters	127
Reorder Live Filters	127
Remove a single filter applied to a selected object	127