Denver Adobe Fireworks Training Aspen Colorado

Denver Adobe Fireworks,adobe fireworks cs3,adobe fireworks cs3 how-tos,essential techniques,what adobe fireworks 8 can do,adobe fireworks abilities,adobe fireworks mac osx,be fireworks tutorial,how to use adobe fireworks,adobe fireworks and how it works,adobe fireworks cs3 how to,adobe fireworks tutorials,like adobe fireworks,what adobe fireworks can do,adobe fireworks,contribute,adobe fireworks cs3 forums,adobe fireworks cs3 tips & tricks adobe fireworks pros cons,adobe fireworks review,adobe fireworks tricks,canvas adobe fireworks,create slideshow.

 

adobe fireworks
adobe fireworks cs3
adobe fireworks cs3 how-tos
essential techniques
what adobe fireworks 8 can do
adobe fireworks abilities
adobe fireworks mac osx
adobe fireworks tutorial
how to use adobe fireworks
adobe fireworks and how it works
adobe fireworks cs3 how to
adobe fireworks tutorials
like adobe fireworks
what adobe fireworks can do
adobe fireworks contribute
adobe fireworks cs3 forums
adobe fireworks cs3 tips & tricks
adobe fireworks pros cons
adobe fireworks review
adobe fireworks tricks
canvas adobe fireworks
create slideshow adobe fireworks cd dvd

 

Fireworks Training

Fireworks to Dreamweaver Process
I. Organize & Plan Your Website Design
a. Logo-Header Design
b. Page Color
c. Background Color
d. Navigation Normal
e. Navigation Rollover
f. Footer
g. File Management
II. Slice
a. Header Area
b. Each Navigation Link
c. Content Area
d. Footer
e. Simple Rollover
III. Rollovers
a. Layers- Normal ON
b. Frames Panel—Duplicate Frame 1
c. Frame 2
i. Turn off Normal Layers
ii. Turn on over layers
d. Preview
e. Save PNG
IV. Pop-up Menus
a. Click on O Nav Link
b. Create Pop-up Menu
c. Text
d. Link
V. Crop & Export
a. Crop Header Area -> Export
b. Ctrl-Z Ctrl-Z
c. Crop Nav Area -> Export
d. Ctrl-Z Ctrl-Z
e. Crop Footer Area -> Export
f. Ctrl-Z Ctrl-Z
VI. Build Template in Dreamweaver
a. Define Site
b. DIV Tag structure
c. Insert Fireworks HTML
d. Update NAV Links
e. Insert Editable Region
f. Make Template

 

  1. Using Fireworks, open the file “Really Nice Hotel.psd”
  2. Sample the background color and write it down for use later.
  3. Click on layer “Bitmap 0”
  4. Choose Edit > Crop Document
  5. Turn off the content layers:
    1. Shape 6, Bitmap 4, Bitmap 5, Bitmap 6, Bitmap 13
  6. Duplicate the links layer
    1. Rename one layer “Normal”
    2. Rename the other layer “Rollover”
  7. Using the text tool, change the color of the “Rollover” layer
  8. Edit > Copy or Ctrl-C the “Rollover” layer
  9. Turn off the “Rollover” layer
  10. Click on the “Normal” layer
  11. Go to the Frames panel and create a new frame
  12. Edit > Paste or Ctrl-V the “Rollover” layer into Frame 2
  13. Click on Frame 1
  14. Click on the Layers panel
  15. Edit > Insert > Rectangular Slice
  16. Using the select tool, click on the slice.
  17. Now click on the handle in the middle of the slice
  18. Choose “Create Simple Slice”
  19.  

 

Where Does Fireworks Fit In?

Fireworks CS3 is a software program for designing professional on-screen graphics. Its innovative solutions tackle the major problems facing graphic designers and webmasters. Using the wide range of tools in Fireworks, you can create and edit both vector and bitmap graphics within a single file.

The advent of Fireworks freed web designers from having to jump back and forth among as many as a dozen task-specific applications. Its nondestructive Live Filters eliminate the frustration of having to re-create web graphics from scratch after any simple edit. Fireworks generates JavaScript, making rollovers easy to create. Efficient optimization features shrink the size of web graphic files without sacrificing quality.

Fireworks is a versatile program for creating, editing, and optimizing web graphics. You can create and edit both bitmap and vector images, design web effects such as rollovers and pop-up menus, crop and optimize graphics to reduce their file size, and save time by automating repetitive tasks. When a document is complete, you can export or save it as a JPEG file, GIF file, or file of another format--along with HTML files containing HTML tables and JavaScript code--for use on the web. You also can export or save a type of file specific to another program, such as Adobe Photoshop or Adobe Flash, if you want to continue working in the other program.

Today’s Learsning Objective:
The preferred creative suite progression is to design your prototype design in Photoshop or Fireworks.

Create your master design with rollovers and slices in Fireworks and export it to Dreamweaver. Fireworks is used to create templates for your website design. Fireworks is also used to create non-flash animations which do not require a plug-in.

Dreamweaver is where you will insert specific pictures, animations, flash, and text for each page. You only need to go back to Fireworks to change the master design. Dreamweaver is also used to create Cascading Style Sheets (CSS), Search Engine Optimization (SEO), and Ecommerce.

 

Vector and Bitmap Graphics

Vector graphics render images using lines and curves, called vectors, that include color and position information. For example, the image of a leaf may be defined by a series of points that describe the outline of the leaf. The color of the leaf is determined by the color of its outline (the stroke) and the color of the area enclosed by the outline (the fill).

When you edit a vector graphic, you modify the properties of the lines and curves that describe its shape. Vector graphics are resolution-independent, which means you can move, resize, reshape, or change the color of a vector graphic, as well as display it on output devices of varying resolutions, without changing the quality of its appearance.

 

 

 

 

 

Bitmap graphics are composed of dots, called pixels, arranged in a grid. Your computer screen is a large grid of pixels. In a bitmap version of the leaf, the image is determined by the location and color value of each pixel in the grid. Each pixel is assigned a color. When viewed at the correct resolution, the dots fit together like tiles in a mosaic to form the image.

When you edit a bitmap graphic, you modify pixels rather than lines and curves. These bitmap graphics are resolution-dependent, which means that the data describing the image is fixed to a grid of a particular size. Enlarging a bitmap graphic redistributes the pixels in the grid, often making the edges of the image appear ragged. Displaying a bitmap graphic on an output device with a lower resolution than the image itself can also degrade the image’s quality.

 

Slices and Hotspots


Slices and hotspots are web objects that specify interactive areas in a web graphic. Slices cut an image into different sections to which you can apply rollover behaviors, animation, and Uniform Resource Locator (URL) links. In addition, you can export the sections using different settings. On a web page, each slice appears in a table cell. Hotspots let you assign URL links and behaviors to all or part of a graphic.

Slices and hotspots have drag-and-drop rollover handles that let you quickly assign swap image and rollover behaviors to graphics directly in the workspace. The Button Editor and Pop-up Menu Editor are convenient Fireworks features that help you build special interactive graphics for navigating websites.

Creating a New Document

When you select File > New to create a new document in Fireworks, you create a Portable Network Graphic, or PNG document. PNG is the native file format for Fireworks. After you create graphics in Fireworks, you can export or save them in other familiar web graphic formats, such as JPEG, GIF, and animated GIF. You can also export or save graphics in many of the popular formats used off the web, such as TIFF, PSD, and BMP. Whatever optimization and export settings you choose, the original Fireworks PNG file is preserved to allow easy editing later.

To create a web graphic in Fireworks, you must first set up a new document or open an existing one. You can adjust the setup options later in the Property inspector.

To create a new document:
1. Select File > New.
The New Document dialog box opens.

2. Enter the canvas width and height measurements in pixels, inches, or centimeters.

3. Enter a resolution in pixels per inch or pixels per centimeter.
4. Select white, transparent, or a custom color for the canvas.
Note: Use the Custom color box pop-up window to select a custom canvas color.

5. Click OK to create the new document.
To create a new document the same size as an object on the Clipboard:
• Copy an object to the Clipboard from any of the following:
• Another Fireworks document
• A web browser
• Any of the applications listed in Pasting into Fireworks

2. Select File > New.

The New Document dialog box opens with the width and height dimensions of the object on the Clipboard.

3. Set the resolution and canvas color, and click OK.

4. Select Edit > Paste to paste the object from the Clipboard into the new document.

Opening and Importing Files

In Fireworks, you can easily open, import, and edit both vector and bitmap images created in other graphics programs. In addition, you can import images from a digital camera or scanner.

Note: Fireworks preserves many, but not all JavaScript behaviors when you import a file from Adobe Dreamweaver. If Fireworks supports a particular behavior, it recognizes that behavior and maintains it when you move a file back to Dreamweaver.

 

 

 

 

 

 

 

 

To open a Fireworks document:
1. Select File > Open.

The Open dialog box appears.

2. Select the file and click Open.

To open a file without overwriting the previous version, select Open as Untitled, and then save the file using a different name.

Dragging images into Fireworks

You can drag vector objects, bitmap images, or text into Fireworks from any application that supports dragging. These applications include the following:

• FreeHand 7 or later

• Flash 3 or later

• Photoshop 4 or later

• Illustrator 7 or later

• Microsoft Office 97 or later

• Microsoft Internet Explorer 3 or later

• Netscape Navigator 3 or later

• CorelDRAW 7 or later

 

 

 

The Fireworks Environment

When you open a document in Fireworks for the first time, Fireworks activates the work environment, including the Tools panel, Property inspector, menus, and other panels. The Tools panel, on the left of the screen, contains labeled categories, including bitmap, vector, and web tool groups. The Property inspector appears along the bottom of the document by default and initially displays document properties. It then changes to display properties for a newly selected tool or currently selected object as you work in the document. The panels are initially docked in groups along the right side of the screen. The document window appears in the center of the program.

To drag an image or text into Fireworks:
From the other application, drag the object or text into Fireworks.