Digital Design for the Arts and Humanities website

Digital Design homepageDaily Readings for Digitial Design courseDigital Design Course syllabusE-Mail Digital Design StudentsTechnology, Arts, and Media Program homepageSewall Academic Program homepageCU-Boulder homepage

Using Fireworks to create Buttons


Assignment: (Do before Class):
Dreamweaver MX, pp. 92-102, 113-114;
Web Page Design, pp. 48-54, 60-72;
Characteristics of Web Graphics, Graphic file

Assignment for Friday: Create a webpage with at least three different button styles you are considering using for your Webgenre website. Put a workable link to this page on your portfolio page.(20 points)

Assignment: (Do after Class) Study this list of basic elements for your websites:Basic Elements of a Webpage)

1. Webgenre website--work in progress

  1. Professor Lewis' Flowers' webgenre sites
  2. Flowers' Genre Sites

2.. Examples of Websites

  2. Whistler Heli Skiing
  4. JP-Australia
  5. The Vacation Exchange

3. Outlining Graphics and Feathering images

  1. See feather.jpg and feather1.jpg

  2. To crop and feather an image, go to the Bitmap tood
    and select the rectangle or oval marquee tool.

  3. Use this tool to select the part of the image you
    want to feather.

  4. Set the degree of feathering, from 1 to 100. Try not
    to overuse feathering.

  5. Now go to "Select on the menu bar and choose
    "select inverse", and now push the delete button.

  6. You will now have a feathered and cropped image.

  7. Using either the bitmap or vector shape tool, you can
    create a perfect circle image by selecting the oval
    shape tool and then holding the shift key down
    when you draw your circle.

  8. When drawing graphic shapes, notice that you can
    select the body and border color of the shape.

  9. By drawing a vector box around an image with no
    color selected for the body, you will now have
    a border around the image.

  10. In order to get this trick to work, you must first
    create a new layer for this image. Make sure you
    have selected this new layer, and now use
    the vector shape tool to draw a border.

  11. When you are having trouble working with images
    in Firework, it usually is a layer problem. You must
    make sure you have selected the right layer to
    make the changes to.

  12. See flowerborder.jpg

4. See Buttons Website:

5. Buttonmakers and Downloading Softfware

5. You can use Fireworks to create complex
rollover buttons

  • In Fireworks, go to "Edit" and select "Insert New Button"

  • This will call up a menu giving you the ability to control each state of the Button you are making

  • The easiest way to do this is to create a basic button
    and select "copy over graphic" to use this same
    button for each state of the rollover button

  • Now select the state of the button you want to
    edit, for example, "Down", and you can change the
    background color or the text color to vary the
    state of the button on rollover.

  • When you save this button in Fireworks, you go
    to "Export" and make sure you select export
    html file and file slices and check "selected
    slices only"

  • When you insert this button into a webpage, you
    want to go to Dreamwever and select "Insert"
    and choose "Image Objects" and then select
    "Fireworks Html"

  • Remember, when you copy this button image
    over to the web, you will be copy several
    different small gif files--one for each slice of
    the rolloever--and an html file, which contains
    the code to work the rollover.

  • Here are some of the small image files that were
    created when I created rolloverbutton on this
    webpage: tester.gif, tester.htm. tester_f2.gif,
    tester_f3.gif, tester_f4.gif.

5. Remember, you can always use
the Flash buttons and Flash Text tools in
Dreamweaver to create basic buttons.

  • In Dreamweaver, go to "Insert" and
    then choose "Media" and then select
    either Flash buttons or Flash Text.

6. Basic Rules to create Navigation buttons

  1. Keep buttons relatively small. Bigger is not better

  2. Be consistent with your buttons. Use similar
    buttons throughout your website

  3. Try to center or layout text on buttons in
    a consistent, easy to read way.

  4. Make sure that if your button has an
    anti-alias edge that it uses a color that
    blends into the background. Set the Matte
    color to the samecolor as the webpage's
    background color.

  5. Remember that anti-aliasing small type
    can make it harder to read.

  6. In order to make it easier to read small
    type on your buttons, you can double or
    even triple the text layer to make
    the text sharper to read.

  7. These fonts were designed to look good
    as smaller text even though they are

    Geneva, Georgia, Monoco, New York,
    Trebuchet, and Verdana

  8. Make all your website buttons using the
    same settings. This give your website
    a unified and uniform look.

  9. Always save the button template for your
    website as a "png" file. You want to be able
    to go back and see what settings you
    used if you have to create similar buttons
    for another website.

7. Using Spot IT 3.0 to create basic buttons

8. Using Fireworks to create buttons and images for
    your Web genre websites.

  1. Before you really start work on your "web genre'
    website, you need to create a new "site" in
    Dreamweaver and a new local folder on your

  2. The easiest way to make buttons using
    Fireworks is to use buttons from "Styles"
    which is located under "Assets."

  3. You can change the color, texture, and
    rectangle roundness of the button in the
    properties box.

  4. Model Buttons page

  5. Model Buttons page 2

  6. Fireworks creates "png" files.  Do not put
    "png" files on the web.

  7. Use "Export Wizard" or "Export Preview" to
    save your "png" files to either "jpg" or "gif"
    files for the web.

  8. Remember, try to compress the file size of 
    your image files so that they don't take
    too long to download on the web.

  9. Demonstrate cropping and feathering an image.

  10. Demonstrate creating buttons and adding text.

9. You can use Fireworks to insert new Buttons that the
program already has made. (These are called canned buttons")

  1. Go to Edit and choose "Insert" and select New Button."

  2. Go to Edit and choose "Libraries" and select
    "Animations", "Bullets", "Buttons", or "Themes"

  3. In Dreamweaver, you can drag images to a file's
    Library so that you can use them on other parts
    of the webpage.

  4. To view a file's Library in Dreaweaver, go to
    "Windows" and select "Library." Make sure
    your menus table is open.

  5. Using Library in Dreamweaver can be and easy
    and useful way to keep track of the buttons and
    image elements you use on a webpage.

10.. Basic Elements of a Basic Webpage for Digital Design

11 .  Creating a Page Template for your website

  1. Example of Page Template for Digital Design website

  2. Example of Page Template for Digital Photo website

  3. You can use Fixed-width or variable-length tables
    to create the outer limits or your webpage.

  4. Be careful using variable-width tables because
    your webpage content will look different in
    different browsers with different screen resolutions.

  5. Once you have created your initial table, you can
    now use layers in Dreamweaver to layout the
    grid for your webpage.

  6. Once you have created a basic model for all
    webpages on your website, save it as a

  7. Now everytime you create a newpage for your
    website, you can do so by going to "File" and
    selecting "new from template."

  8. Using templates makes it much faster and
    easier to create additional pages for your website.

12. Make sure you layout your website in terms of:

  1. Website Home Page

  2. Main Topic Pages for the Site

  3. Subsidiary or Secondary Pages

13.  Every page in your site should have links to the Home
      Page and the Main Topic Pages.  This helps give the
      Page a clear Information Hierarchy.

14.  Tips for creating your Web Genre Websites.

  1. Create and use a Webpage Template.

  2. Check to make sure your links and images work.

  3. Check for contrast between your text and your
    webpage background.

  4. Use invisible tables and layers to layout a grid 
    to balance the placement of images and text on 
    your page.

  5. Keep a log of what are the names of your image
    files, what fonts you use, what colors you use,
    the size of all your images in Height and Width,
    and the names of your webpage files.

  6. Try to limit your pages to no more than one-and-
    a-half screens in height.

  7. Check your spelling and try to reduce the number
    of words you use in each line of text to the absolute
    bare essentials.

  8. Does your page have a clear focal point, or does it
    have multiple points?

  9. Does your webpage have a clear information
    hierarchy, from most important elements given 
    the most emphasis and the least important 
    elements given lesser emphasis?

  10. Does your webpage look cluttered?  Does every
    thing seem to be balanced and in its place on
    the page?

15. Creating text-based navigation bars for text links

  1. See Digital Design Home Page

  2. See Digital Photography

  3. In Dreamweaver, go to "Insert" and
    select "Special Characters".  Notice
    the special characters you can insert
    into your page

16. Using Dreamweaver to create Image maps

  1. See example of imagemap on

  2. When you use imagemaps, make sure you
    use "Alt" text to let the reader know where
    the link takes you.

  3. Model Buttons and Images page

17. Model Websites from Students' Web Genre Links




Good Web Design Sites
Award-winning Web Designs
Great Web Design Books
Sewall Class Web Designs

| Home Page  | Readings | Syllabus | Web Resources | Top of Page |

Number of Visitors to this site: 
15232      by Chris H. Lewis, Ph.D.

© 2000 by Chris H.  Lewis, Ph.D.
Sewall Academic Program; University of Colorado at Boulder
Created 1 June 2000:  Last Modified: 15 February, 2006

Digital Design Course homepage