Fireworks MX 2004 Styles Sample Files
Styles are commands that apply Stroke, Fill, Effect and Text attributes to an object.. They are useful for creating a unified look to website elements and for producing creative and inspired new ideas from old ones without too much work! You can share Styles with others and pick up Styles from the various repositories available on the web.
Once installed, Styles are visible in the Styles panel (Window > Styles). They remain loaded in the Styles panel until they are deleted, making them instantly available for future projects. Styles can consist of a single element (such as, Stroke type only), or consist of several elements (such as Stroke type, Fill type, Live Effects). Once you apply a Style to an object, the Style attributes become part of the object. You can then modify them to suit the particular instance without affecting the saved Style. Fireworks will save the attributes with the object, meaning that your saved work can be used on other computers that don’t have the Styles installed, all without adversely affecting the appearance or functionality.
Requirements
Macromedia Fireworks
Try
BuyDownload the Sample Files
WindowsIn this introductory article, I will give you some Styles and some objects to try out. I also give you bitmap versions of the finished work and charts showing you the Styles you will use on each object. Once you're familiar with using the Styles in these settings, let your imagination run wild and use the Styles wherever you like!
Download the ZIP for PC or the SIT for Mac archive and extract it. You don't have to keep Styles in a particular folder to use them. However, I recommend keeping them in the Fireworks directory to avoid accidentally deleting Style files.
Note: If you have trouble downloading or decompressing the files, see Downloading files from the Internet (TechNote 13686).
Installing the STL Files
Once you have downloaded and decompressed the sample files for this article, use the following steps to install them in Fireworks.
- Open Fireworks and select the Styles panel. You can find the Styles panel by choosing Window > Styles if it is not already visible.
- Click the options icon in the top right corner of the Styles panel and choose Import Styles.
- Select the Style files you downloaded and extracted and click OK to import them.
Once imported, your Styles will appear in the Styles Panel, displaying a thumbnail for each imported Style. As I mentioned earlier, you don't have to install Styles in any particular directory on your computer, but it is worth saving them in your Fireworks directory for safe keeping. Once you build a collection of Styles, you won’t want to keep them all installed at the same time. Keeping them in one safe place on your computer allows you to delete Styles from within Fireworks and get them back when you need them.
The Styles in the Sample Files
I have included several files to get you started. Each set of files is a self-contained project containing the Styles (STL files) and native Fireworks work files (PNG files). The styles.html document in the sample files download lists the objects in each file and the Styles that you should apply to them.
The projects are as follows:
Media Player Skin
The media player skin is a simple media player skin with lots of cool textures and effects.
Figure 1. The media player skin
MP3 Player
You can Style the MP3 player in either brushed chrome or blue with gold
accents. The MP3 player is more complex than the media player skin,
but still within easy reach of any Fireworks user.
Figure 2. The MP3 player
Business Site
The business site is a mock business website available in gray, green,
or blue.
Figure 3. The business site Style
How to Use the Styles
To apply a Style, simply select an object on the canvas and click the Style in the Styles panel (Window > Styles). The Style will be applied to the object.
When I create a new Style, it is usually because of a particular need. The Style in this case has been designed for a particular object's shape and size. Remember that although scale may be a factor in the success of a Style you use on future projects, you don’t have to use the same Style on the same-sized object or even for the same type of object for which you created it. When you apply a Style to an object, whether a vector shape, a bitmap, or text object, Fireworks will use as much of that Style information as possible on the object and ignore anything that it cannot use. The following list defines three types of objects and the Style information that each can use.
- Vector object: Only Stroke attributes, Fill attributes and Live Effects of vector objects can be saved in Styles.
- Text object: All – Stroke attributes, Fill attributes, Live Effects, and text attributes of text objects can be saved in Styles.
- Bitmap: Only Live Effects of Bitmap objects can be saved in Styles.
It's worth remembering that if you apply a Style with certain attributes, the Style's attributes will replace any of the same family of attributes already applied to the object. For example, if you create a rectangle with Stroke and Fills defined and then apply a Style that contains Stroke and Fill attributes, the rectangle will take on the attributes of the Style, overwriting the attributes that you already applied to the object.
To use the Styles on the files I supplied, you should be familiar not only with the Styles panel, but also the Layers panel. I have labeled each object in the source file so that you can easily select the right object to apply a Style to.
Styles enable you to produce instantly cool effects. But business web sites don’t necessarily want to be cool! Sometimes, they have to be clean, and simple to give an air of sophistication. Styles can still play a part here. When you design a basic page design, saving object attributes as Styles gives you a web site with consistency, familiarity, and an instant professional appearance. In this case, Styles can be used in a similar way to color—a few select ones add instant class without overpowering the visitor.
Use the business Styles however you wish—Gray Spherical Shine works particularly well on text down to relatively small sizes, ideal for headings and logos. Indent is a welcome addition to anyone’s palette of Styles. If the others are a little too sober for you, just take away with you the idea that Styles give instant consistency. When you’re comping a new site, whether it’s for the next great gaming experience, or a firm of accountants—save object attributes as Styles and re-use them throughout your design. Styles help you build a web page quicker and better, with a consistency that shouts professional.
Now that you know what style are and how to install them, learn how to create your own in my second article on styles.
About the author
Richard Blenkinsopp has been a Fireworks enthusiast since 1998 when version 2 was released. He works at the Memorial University of Newfoundland where his job includes designing and maintaining the School of Music website. Artistically challenged as a child, Richard has found Fireworks to be the perfect solution for creating complex graphics and concepts without the need to be able to draw.
Richard lives in Newfoundland, Canada with his wife Kelly. He enjoys taking scenic photographs and playing the trumpet in local funk and jazz groups.
