Using Fireworks MX 2004
description
Transcript of Using Fireworks MX 2004
Using Fireworks.1
Using FireworksMX 2004
Designing interfaces in Fireworks, using a scenario methodology
Using Fireworks.2
What does Fireworks do?
It's a graphics editor
Designed for producing graphics for the web
It supports both vector and bitmap editingVectors are objects like rectangles and lines, which can be edited after they've been added to a drawingBitmaps are pixel based, if you draw a line on a bitmap you can't move than line later
Very good at producing screen mock-ups for software, in the design phase, and for production
Using Fireworks.3
Exercise - Movie Database
Scenario1. Someone visits “MRes Online Video
Information Experience” (MOVIE)2. They want to find out who starred in “Get
Carter”3. They type the movie name into the search field
and press return4. The then see that there are two versions of the
film, the 196x version and the 2002 version5. They select one and get the details for the film
(including the cast list)
Using Fireworks.4
Napkin Sketch
Using Fireworks.5
Time to start Drawing…
Using Fireworks.6
Creating a new file
Using Fireworks.7
Fireworks Document (Mac)
Using Fireworks.8
Adding Objects
Everything you add to a drawing is an object (aka vector object)
Unlike with bitmap editors you can change objects after you’ve added them.
Resize, Reshape, Change line and fill colours, texture, shadows, and so on
Fireworks has a number of basic objects, like rectangles, ellipses, text, lines, etc.
(actually, you can also add bitmaps, they too can be resized, distorted etc).
Using Fireworks.9
Drawing the basic layout
Just a few rectangles, some text, a text field and a button.
Objects are stacked up on the document in the order they are drawn.
If you want to place an object behind another one, you can change the order
Using Fireworks.10
Grouping Objects
Several objects can be “grouped” to make a more complex object
Two objects make up the search button
Once grouped they can be treated as a single object so they can be moved, resized etc together
Using Fireworks.11
Layers
Now we’ve got the main layout drawn, we need to draw the content over the top
To separate the stuff on top put it on another Layer
Layers stack on top of each other. The top layers obscure those underneath. They can be named to make it easier to tell what is in which layer
To avoid accidentally changing other layers they can be locked or you can use Single Layer Editing mode
Using Fireworks.12
Layers
Using Fireworks.13
Frames
For a design scenario frames are extremely useful
Each frame can show the interface in a specific state, as needed in the scenario, just like the napkin sketch did
Layers can be shared across frames so they appear in all frames
But which layers are switched on and off can be different in each frame
Using Fireworks.14
Frames
Using Fireworks.15
Frames
Using Fireworks.16
Frames
Using Fireworks.17
Frames
Using Fireworks.18
Frames
Frame Controls
Using Fireworks.19
Using Layers and Frames
Build the document up in layers
Layers should group objects which logically belong with each other
In large documents naming the layers is vital
By default layers are not shared, which means that a layer can have different content on each frame. Bad Idea!!
Using Fireworks.20
Anatomy of Fireworks…
Using Fireworks.21
Quick Tour
The pics show the Mac OS X version, but the windows version is almost identical
The main difference is the Windows version puts the tool panels inside the main window, Mac OS doesn’t
Transferring files from one platform to the other is seamless – I routinely use both versions
Using Fireworks.22
Main Window (Mac)
Using Fireworks.23
Main Tool Palette
SelectScale, Skew, Distort tools
Marquee SelectionMagic Wand Select
Pencil – single pixel freehand linesBlur
Simple LinesShapes (Rect, Ellipse, etc)
Freeform tool (adjust shapes)
Rectangle Hotspot toolHide slices and hotspots
Line Colour
Fill Colour
MDI, SDI, Fullscreen
Sub-selectCrop & Export Area tools
Lasso SelectBrush (Freehand line) tool
EraseRubber Stamp (Duplicate) tool
Fill
Pen tool (Bezier Curves)TextCutting tool
Slice toolShow slices and hotspots
Eye Dropper tool (Sample Colour)
Zoom toolHand tool
Using Fireworks.24
Properties Viewer
Properties for whole document
Properties for vector object
Properties for text object
Using Fireworks.25
PNG - portable network graphics
Fireworks uses PNG as it's native format
However, it hides all the vector data etc, inside the PNG file, where no other applications can see it
If you use a Fireworks document in some other program export the frames you want first, otherwise the file will be excessively large!
You can export as GIF, JPG or PNG (and others). Typically PNG is the best format
Using Fireworks.26
Keystrokes
Ctrl 1 = 100% zoomCtrl 2 = 200% zoomCtrl 3 = 300% zoomCtrl 4 = 400% zoomCtrl 5 = 50% zoom
v = select/select behind mode
q = scale/skew/distort mode
cursors = move selected object by one pixel
Shift+cursors = move selected object 10 pixels
Using Fireworks.27
Questions?