Fireworks Tutorials

Adobe Fireworks CS4 Tips

Web design and graphic design tips & tricks

Adobe Fireworks CS4 Tips

Web design and graphic design tips & tricks for Fireworks CS4 users

Adobe Fireworks CS4 is a fantastic graphic design software for designing both websites and web graphics and is the best web design software to buy if you are starting out starting out in web design or need to save time on delivering your web or design projects. From our vast experience in using Fireworks here are some useful tips and tricks for any Fireworks web professional.

Prerequisite Knowledge

This tutorial teaches you tips and tricks when using Fireworks for graphic or web design, thus assumes you have some experience in working with Fireworks. Also check out our Fireworks help & reference if you are a novice user.

You Are Here ::: Home >> Free Tutorials >> Adobe Fireworks CS4 Tutorials >> Fireworks Tips

Cool Adobe Fireworks CS4 Tips and Tricks

CSS Web Design Guide: Website Design with Dreamweaver and Fireworks
Website Design with Dreamweaver and Fireworks Free CSS web design guide to create your own website using Adobe software. Dreamweaver CS4+ & Fireworks CS4+ users please read Website Design with Dreamweaver CS5 and Fireworks CS5.

The amazing cool new features that have been released with this version are sure to impress even hard core Adobe Photoshop lovers. Please read our review and detailed feedback at Adobe Fireworks CS4 - Cool New Features!

Software Review: Adobe Fireworks CS4 Cool New Features
Adobe Fireworks CS4 Cool New Features Get to know all the cool new features available in Adobe Fireworks CS4 with each new feature explained. Check out the new Pages Panel, Path Panel, PDF Export, CSS Export, 9-Slice Scaling tool, Text Wrapping, etc.

Read on for some more cool Fireworks Tips that you could use:

  • Using Color Fill you can change the color of an image. To adjust the color of an object click on the object, on the right side of the properties window, you will find Filters, click over the + symbol and choose Color Fill from Adjust Color. Now you can change the color and opacity of the image.

  • Using Glow effect you can create an outline around the object by setting the offset value. See how we have use the outline in the Cloud Effect tutorial.

    Cloud Effect

  • Once you click on the image using Magic Wand tool you can adjust the Tolerance level depending upon the image. See how we have adjusted the tolerance level in the Extract Image Effect tutorial

  • Extract Image

  • Feather an image using Eraser Tool and set the Edges as smooth and transparent.

  • Use Onion Skinning to view two or more states in the workspace area at once, which is useful for editing the states in GIF animations.

    Animated GIF Graphic

  • Using Rectangle you can create Rounded Rectangle by setting the value for Rectangle roundness in the properties inspector which is displayed under the stroke category.

  • After applying the Filter Effect, you can rearrange the order by clicking and dragging the effect up/down.

  • In Adobe Fireworks CS4 you have several Special Characters where you can use it Logo’s, Ad’s, Copyright, etc.  You can find the Special Characters in Window (Window >> Special Characters).

  • Press the Alt key and, the down arrow once or drag, to duplicate a graphic easily.

  • When using the vector shapes and auto shapes in Adobe Fireworks CS4, you can modify the shape's properties uniformly by dragging the yellow points (handles).

  • Similarly, the properties of individual corner points in the shape can be modified by keeping the Alt key pressed and then dragging the corresponding point.

  • Try the in-built graphic behaviors that come with Fireworks: Rollover Buttons or Images and Advanced Rollovers (Swap Images).

    Rollover ImagesSwap Images

  • Set the Transparency of Images or Shapes so that the background shows through.

  • Try the various effects given in the Effect Panel of the Properties Window. They include the popular Inner/Outer Bevel, Drop Shadow and Glow.

  • Use Ctrl+Shift+v to paste a graphic inside any vector shape.

  • Use Curves to give your designs a fun look.

  • We cannot use bitmap tools to vector objects directly. If you want to use, just convert vector to bitmap. Easy short cut is Ctrl+Alt+Shift+Z (Flatten image).

  • If you want to break a text, use the key Ctrl+Shift+P (text will be in grouped objects) and press Ctrl+Shift+G (to ungroup the objects).

  • Apply gradient colors to your text using text masking effects look more attractive.

  • When you resize any vector or bitmap images, use Shift for equal proportion of dimensions.

  • When you draw any Rectangle, Circle, Doughnut, Pie and Rounded Rectangle, press Shift for equal proportion of dimensions.

    Swap Images
  • If you want to copy any gradient effects, just copy the effect (vector) then go to Edit >> Paste Attributes (Ctrl+Alt+Shift+v). For auto shapes select the gradient effect using Subselection tool and copy the effect.

Software Required

Adobe Fireworks CS4. If you are using the CS3 and below version please read Fireworks Tips.

Compatible Versions of Adobe Fireworks for this Tutorial

Fireworks CS6 Fireworks CS4 | Fireworks CS5 | Fireworks CS6
Adobe Fireworks CS3 & below users: For lower versions of Fireworks, some features, steps and screenshot images may differ. Please read the CS3 & Below version of this free web design tutorial - Fireworks Tips.
Recommended Version: Fireworks CS6
Please like, +1, link to and share this SmartWebby resource if you found it helpful. Thanks!