 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
When I purchased Fireworks 1, I received Lynda
Weinmans video, "Working with Fireworks" for free. At the time,
I took some notes on my laptop (by hitting pause a lot, and typing). The
following are the notes from the video. Some may not make a lot of sense,
but I guarantee that if you're fairly new at Fireworks (like me), you'll
learn something. I've made the page a little wider for printing, which
I suggest you do, for future reference.
Remember, this is from Fireworks 1.
Aliased - looks jagged Anti Alias - adds blends of colors to lose
the jagged look
Dither - Computer puts colored pixels next to each other to simulate
a color it doesn’t have. Its undesirable in a solid color. Dithering helps
with gradients, by reducing the amount of banding.
Banding - Sort of a halo effect caused by dithering.
Continuous Tone Image - With a gradient, and/or like a photograph
Artifacts - Ugly effect caused by too much JPG compression
lossy JPG is lossy, where it loses info on compression. GIF is lossless
Export - Try using adaptive palette (websnap). Should create smallest
file size. Normally produces much nicer images by pulling colors from
rather than putting colors into an image.
Optimize - By going too low on GIF palettes, you may cause aliasing.
Look at image at 200%
Export Screen - Hold ALT key with magnification on to + or -
Exporting GIFs - One of the first things to decide on is an adaptive
or websafe palette.
Preset palette - Useful if exporting many of the same types of
images, or that share characteristics. After getting options set for optimization,
click small button in bottom right of window, then name palette.
Compression - Whenever you have continuous tones (gradients) it
will always compress better with JPG
Progressive JPG - Do not use progression, because it won’t show
on 2.0 browsers. Will show broken icon.
Objects - When object is selected, little blue lines outline it.
To hide blue lines, choose View, Hide Edges (CTRL-H).
Cursor on left is a selection cursor, cursor on right is a selection
modifier. When cursor on right is selected, the object will get corners
on its edges, making it editable (changing size, shape, etc.)
CTRL-Z = Undo - May do multiple times To create rounded edges on
rectangles, 2X click on rectangle tool, and put in percentages in the
dialog box that opens. Symmetrical shapes - Hold down SHIFT key
when sizing circle to ensure its perfectly round. Also works for rectangle
tool, for making perfect squares.
Polygon tool - May change # of sides with Tool Options dialog box
for polygons Pen Tool - To end selection, 2X click. To draw an
curve, click and drag. Click one time, and on second click, drag. May
take some practice.
Brush, Fill and Effect dialog box - Brush refers to the stroke
of a shape. Used for making changes to lines. To change colors in fill
and brush, instead of 2X clicking on fill box, go to Color Mixer dialog
box. Much more choice here than standard Windows color choices. Same goes
for Brush.
When you use Pattern fill, an additional option box opens, allowing
for many more choices (Aggregate, Bricks, etc.)
To add own patterns, first save the pattern as 8 bit image (256
colors). Save it as a PNG, then place file in the Fireworks, Settings,
Textures directory. If pattern has no seams, it will repeat indefinitely.
Editing Gradients - Have selection in Fill box to linear (or another
gradient), Choose preset gradient, then in box on top right, select Edit
Gradient. Change color of gradient by 2X clicking on paint cans, move
them around (like in Flash) Once you have a gradient, you can rename
it and save, or delete existing gradients, with the box on the top right.
Color of Drop Shadow - can be changed by 2X clicking on color button
on Fill dialog box, or by choosing Color Mixer, and using eyedropper.
Knock Out - takes the color out of the image, and leaves the drop
shadow "knocked out"
Can add more than one Effect to an object by; 1. Select first effect
(say an inner bevel), then choose Modify, Group. The modifiers in the
Effect dialog box are now gone. 2. Now you can add a drop shadow, or any
other effect. By clicking on object, you’ll get the last effect added.
To go to the previous effect, hold down the ALT key, then click on object
to see the bevel effect.
Outer bevel always defaults to Red. To change, 2X click on color
to bring up swatches palette.
You can still modify shape, even after effects have taken place,
by selecting right cursor in main dialog box, then making changes.
With Bitmaps, theres automatically a Foreground and Background
in the Layers palette. The background is where all the work is done.
To select something in image edit mode, you can use the lasso or
the marquee tool.
Adding a Blur(Filter) to a Section - Select marquee or lasso, choose
area to blur, then select Xtras, Blur, then choose Blur type, then how
much, then Enter.
Rubber Stamp - Hold down ALT key, then drawing to the right.
When working with a bitmap layer, a little box shows up to the
right of the layer. Click it to select and edit this layer . Then you
can add filters to it, use lasso or marquee, etc.
To choose a vector, be sure to deselect everything else, then 2X
click the Vector image to alter text, or go to effects menu, and change
color or drop shadow, etc.
Sharing Attributes - Useful for many buttons. Set one up the way
you like, with Effects and fills and so forth, with it highlighted, choose
Edit, Copy. Then, select the rest of the buttons (holding down the Shift
Key), and choose Edit, Paste Attributes.
Masks - A button with a photograph in it is called a Masked Group
in Fireworks. If its selected with the dark cursor, it will show up in
opacity toolbar as a masked group. If selected with the hollow pointer,
its an image. You can move the image around in the shape.
Creating a masked group - With an image on the canvas, choose a
circle for the button, select them both, and choose Modify, Masked Group.
By clicking on the blue marker in the image, you can move the image inside
the shape.
When copying a bitmap, be sure to select the proper layer (probably
background). In order to select a new file to place on an empty canvas,
you HAVE to be on the Background Layer.
Once the bitmap is pasted on canvas, it becomes the Foreground
item on that object. You can then choose your button shape, select them
both, and choose Modify, Mask Group.
With the left pointer, you can select the Masked Group, and add
Effects, and with the hollow pointer, you can still move the button around
the bitmap, to change the view.
Always use browser safe colors for text, link, alink, vlink, etc.
Change Canvas - Modify, Document, Canvas Size or Color
Cant select Text - Background may still be selected. Choose filled
pointer, hold down, and choose item right next to it. This will allow
you to select items behind things.
When picking color schemes, choose your swatches palette, select
Web 216, then sort by color.
When choosing color schemes, be more worried about the intensity
of the background vs. the text, than the actual colors. Better to choose
roughly one color, and varying intensities.
Saving swatches - Choose Clear swatches from swatches upper right
panel, select eyedropper, choose a color from your scheme, click on empty
swatch panel, repeat for all colors, and save swatch.
Hexadecimal equivalent - Open color mixer, select color, and numbers
and letters show up in the color mixer box.
You can drag vector art, and, by selecting colors from your new
swatch palette, color the item with the same colors as your scheme.
When exporting, the transparency options are near the bottom.
If the second option is selected, it will pick the first color that is
in the upper left corner of the object.
Problem - Transparency is showing up incorrectly. Little white
areas due to anti-aliasing. Solution: Change the background before you
save it as a transparent image. Enter colors in color mixer. Create rectangle,
and position behind artwork (Modify, Arrange, Send to Back). Export, to
Index color. Click on add eyedropper.
When making Imagemap, set up your URLs before slicing pics.
To change shape, use cursor on the URL bar.
To add a brush effect, highlight the text, and choose Brush from
Brush, Fill and Effect palette Transform tool (below the eyedropper)
is for text scaling.
Horizontal Distortion - Bottom left option in Text options palette.
Good for making letters fatter.
If you make modifications to a piece of text, and like it, you
can choose Edit, Duplicate. Allow for a lot of consistency
Type Along Path - Create Text and create a path with the circle,
or rectangle, select both of them and choose Text, Attach to Path. When
you click off, the path object disappears. Once its aligned to path, you
can choose Modify, Transform, and choose to skew, scale, etc.
Frames store different states of what is contained in the layer.
Duplicate frame creates identical one thats #2
View, Rulers before Slicing
After creating the first slice, the Object Properties dialog box
will open. Under Slice Export Settings, I can click the little box on
the right or go to the Export dialog box, Optimize the settings, and click
on Save and Close.
To change the properties of an individual slice, choose the second
cursor on the URL toolbar, click the slice in question once, and choose
CTRL-I.
Its all done with Frames.
A lot of extra stuff in the Export window, on the Animation tab.
Symbols and Instances. First, make a symbol from an object. Select
it, and go to Edit, Symbols, Make Symbol. Little plus sign next to it.
Now duplicate the symbol. The duplicate will have an arrow. That arrow
makes it an instance. If you scale the instance, it scales independently,
but if you scale the Symbol, the instance ALSO scales.
Select Instance, select transformation tool, and hold the shift
key to scale in a uniform manner. Position it to the right of symbol.
Select both, select Edit, Symbol, Tween Instances. Be sure to distribute
to Frames. Can also have it fade out with tweening from the Opacity slider
on the main toolbar. (Window, toolbar, Opacity)
Adding an object to animated Frames - When creating Text to add,
its usually done in first frame. To get in all frames, select text, choose
small box in top right of Frames palette, and choose Copy to Frames