Browse DevX
Sign up for e-mail newsletters from DevX


Optimizing the Graphics File : Page 2

Finding the right graphic is just the first step in putting graphics into your Web site. Once you've created or found the graphic, you need to prepare it for online use, structuring it to display quickly at the maximum quality. Optimizing the File shows you how to make the balance between file size and quality level.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Anti-alias with Care
Anti-aliasing can smooth out your edges, making graphics look nicer. However, it can also add overhead.

Look at your design carefully before deciding whether to alias or anti-alias for edge quality. Designers often assume that everything looks better anti-aliased—but that isn't necessarily true.

Save your artwork as an aliased graphic and place it on the page before evaluating it. Remember, the viewers will not look at the page as critically as you do and some elements, such as small text treated as a graphic, actually look better aliased.

Anti-aliased graphics can add size to your graphics file and time to the page load process. In addition, their appearance will vary more from system to system than aliased graphics. Anti-aliasing can add a great deal of value&3151;when it is used well.

How-to anti-alias a graphic:
In Fireworks, any object you draw can be aliased or anti-aliased. You can also specify the degree of anti-aliasing. The anti-alias process is different for fills than it is for strokes.

For filled objects:

  1. Draw the object using any of the drawing tools. The object can be filled as you draw it or by using the paint bucket.
  2. Open the Fill palette and choose Anti-alias from the Edge pop-up menu. Alternately, you can open the Modify menu, select Edge, and then Anti-alias.

    The Fireworks default in both cases is Anti-Alias. To turn off anti-alias, select the Hard Edge option from the menu instead of the Anti-alias option. To create an ever softer edge, select the Feather option from the Edge menu. Feathering allows you to specify how much of a soft edge the graphic object will get. Change the feathering by moving the value slider next to the Edge menu. Higher numbers are fuzzier.

    This table shows the different options:

      Fill Palette settings Full size Magnified

For stroked objects:

  1. Draw the object using any of the drawing tools.
  2. Make sure the object has a stroke and the stroke has width:
    1. Open the Stroke palette, select a Stroke Category from the top pop-up menu. Each category has settings for Stroke Name, Tip Size (width), and Edge Softness (anti-aliasing/feathering).
    2. Choose a Stroke Name.
    3. Change the default Tip Size by entering a number into the value box in the middle right of the stroke palette, or move the value slider to the right of that box.

  3. In the Stroke Palette box, change the default Edge Softness by moving the value slider next to the Tip Preview box (this is located in the middle left of the stroke palette). Higher numbers are fuzzier. Stroke categories Pencil and Basic have Stroke Names that cannot be anti-aliased; these names include the word hard, indicating they are hard edged.

    This table shows some examples of stroke edge options:

    Category Stroke Palette settings Full size Magnified

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date