Fireworks
Rollover butt | Rollover
editor | NagBar | Popup
Menu | Rounded | Mask
| Remove BG | Shadow | Lighting
| Clone
Rollover Button
1. Open Canvas, File -> New
2. Choose Text Tool (A) , type in button word.
eg Company | Service | Product |Contact
Us
3. Go to Frame and History,
right upper corner
(popup menu) -> Duplicate Frame
(Frame 2)
4. Click Frame 2, choose Pointer tool (black
arrow), go to properties of F2, set color for F2.
5. Use slice tool (under web ),
slice the text into division.
6. Give a name for every created slices by typing name into
properties box of slices.
7. Window-> Behavior panel.
Choose every slice, Click + on
Behavior panel -> swap image
( choose swap to slice corresponding to Frame 2)
8. In Optimize panel,
set same color to each slices and pointer outside canvas, set
fix canvas(possible)
9. File -> Export and type in html file name. Export
.html and all images to local drive.
Back |
Rollover Button Editor
1. Open Canvas, File -> New
2. Choose Rectangular (next to text [A] ) , draw rect on canvas.
3. Choose text [A], type HOME in. Modify text color and rect
color, font , size and so on.
4. Select Text & Rec ( both
highlight ). Modify>align> vertical & horizontal >Convert
to Symbol. (combine to 1)
5. Hide slices,
(web, under rect hotspot tool)
Open Asset Panel/library , drag and
drop multiple
button_name to canvas and align properly.
6. Double click on button, choose [up] state, Copy up graphic,
Click on F2, Choose Text or Rect
on layer panel to modify text color and border
color. Do for all buttons and close it.
7. Back to Properties inspector, modify Link , ALT, X, Y and
TEXT.
8. Modify->Canvas->Trim canvas
9. File->Export (button.html + all btn**.gif)
Back
|
Nagivation Bar ( 6
buttons 125w X 25 h in vertical , same as horizontal )
1. Open file 125 X 150 Pixels (
150 H fix for 6 button with 15 h each )
2. Draw Rect 125 x 25 , place at
coordinator (0,0) in properties inspector
3. Select Rect, click + sign, choose Inner Bevel to give 3-D
look.
4. Choose [A] , enter your text and resize in the rect .
5. Select both, Text and Rect, Modify-> Align->Center
Horizontal +Center Vertical (Done with look)
6. Select both, Modify->Symbol->Convert
to Symbol, Choose button and name it. eg, navbar
7. Double Click the button, Choose Over, copy up graphic and
choose attributes for over stage.
8. Type in the LINK or # for future link modification in Dreamweaver.
(Done with ONE button)
9. ADD extra button. Select button,
Edit->Clone (multiple buttons) 5 times. Use
Properties inspector to set 150 x 25 size and text, and align
button using down key or [0][25] , repeat for rest.
10. File->Export Wizard->Select export format checked->Cont->select
Dreamweaver->cont->save as Html and images.
|
POP-UP Menu
1. Select one button you wanna popup menu located, choose HOTSPOT,
use same size as butt size.
2. Modify->Popup Menu->Add
popup menu. Perform the job of attributing, linking,
placement and color.
Back
|
Rounded Shape Picture
1. Open the Bitmap picture in canvas
2. Draw rectangular shape in canvas and select roundness degree
in properties inspector
3. Select bitmap picture, Edit -> Cut the bitmap
4. Select rectangular, Edit ->Paste Inside . Then do some
properties adjustment to picture.
5. Modify->Canvas-> Trim/Fit
|
JPG Rounded Corner
Using Mask
1. Open Bitmap picture in canvas
2. Draw rectangular shape (white, Top in Layer panel) in canvas
and select roundness degree (40) in properties inspector.
3. Select Bitmap+ rectangular, modify ->Mask-> Group as
mask
4. Save it.
Back |
Remove Background from Image
1. Select the Magic Wand Tool (W)
. [Bitmap] , under marquee tool
2. In the Property inspector, Wand Tool's Tolerance: 20
and the Edge: Edge to Anti-Alias.
3. Click anywhere in the white area to
select the background. Hold the Shift Key to create more
than one selection.
4. Hit Delete
Key to remove the background
5. Import a new graphic (Control-R or Command-R) for the background
or click and drag your image on to another open document in
Fireworks
Back
|
Create Shadow On Image
1. Open Image with background removed.
2. Select image , Edit-> Duplicate ( 2 layers of images [Top
+Bottom] in layer panel)
3. Turn off the eye (unvisualize) on top , Blacken image as
shadow ->Effect (+)-> Adjust color->black, then
Modify->Transform->Distort .
4. Drag to be 45 degree , Use
Linear + Blackwhite
5. Select both image , CTRL+G to group. Then Group again with
TOP
|
Add Lightning To Picture Using
Gradient
1. Open picture
2. Layer panel, click yellow folder to add/duplicate
new layer .
3. Select rect tool, draw rect to cover canvas.
4. In the Fill panel , choose Linear, and the Preset gradient
color set of Emerald Green.
5. Select the Pointer tool and select the gradient layer, the
gradient handles will appear, adjust it.
6. In the Layers panel set the opacity to
60%, the opacity setting is at the top left
corner .SAVE
Back
|
Cloning to a Selected
Area (placing one image into another image)
1. Open Canvas, import two images
pic1, pic2 ( move pics1 to selected area of
pic2)
2. Select the Polygon Lasso tool
(1st right under Bitmap). Properties: Edge =
Anti-alias
3. Click and release the selected
area of pic1, then select>Save
Bitmap Selection
4. In Layer panel, click the New
Bitmap Image icon. Create new, blank bitmap.
( what we do inside selection will occurs in this newly bitmap)
5. Select the Rubber Stamp tool(last
right under Bitmap)
6. Properties:source Aligned &
entire document. reset painting size
7. Move cursor to pic1, click on it & release. Move to Pic2,
selected area,click and drag to "paint"
Hit escape.
Back
|
|
|
|