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.

 

Back

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

 
 
@Copy right of Soon Lim 2006. All Right Reserved