using fireworks.1 using fireworks mx 2004 designing interfaces in fireworks, using a scenario...

of 27 /27
Using Fireworks.1 Using Fireworks MX 2004 Designing interfaces in Fireworks, using a scenario methodology

Author: lynne-payne

Post on 18-Dec-2015




0 download

Embed Size (px)


  • Slide 1
  • Using Fireworks.1 Using Fireworks MX 2004 Designing interfaces in Fireworks, using a scenario methodology
  • Slide 2
  • 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 editing Vectors are objects like rectangles and lines, which can be edited after they've been added to a drawing Bitmaps 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
  • Slide 3
  • Using Fireworks.3 Exercise - Movie Database Scenario 1. 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 return 4. The then see that there are two versions of the film, the 196x version and the 2002 version 5. They select one and get the details for the film (including the cast list)
  • Slide 4
  • Using Fireworks.4 Napkin Sketch
  • Slide 5
  • Using Fireworks.5 Time to start Drawing
  • Slide 6
  • Using Fireworks.6 Creating a new file
  • Slide 7
  • Using Fireworks.7 Fireworks Document (Mac)
  • Slide 8
  • 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 youve 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).
  • Slide 9
  • 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
  • Slide 10
  • 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
  • Slide 11
  • Using Fireworks.11 Layers Now weve 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
  • Slide 12
  • Using Fireworks.12 Layers
  • Slide 13
  • 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
  • Slide 14
  • Using Fireworks.14 Frames
  • Slide 15
  • Using Fireworks.15 Frames
  • Slide 16
  • Using Fireworks.16 Frames
  • Slide 17
  • Using Fireworks.17 Frames
  • Slide 18
  • Using Fireworks.18 Frames Frame Controls
  • Slide 19
  • 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!!
  • Slide 20
  • Using Fireworks.20 Anatomy of Fireworks
  • Slide 21
  • 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 doesnt Transferring files from one platform to the other is seamless I routinely use both versions
  • Slide 22
  • Using Fireworks.22 Main Window (Mac)
  • Slide 23
  • Using Fireworks.23 Main Tool Palette Select Scale, Skew, Distort tools Marquee Selection Magic Wand Select Pencil single pixel freehand lines Blur Simple Lines Shapes (Rect, Ellipse, etc) Freeform tool (adjust shapes) Rectangle Hotspot tool Hide slices and hotspots Line Colour Fill Colour MDI, SDI, Fullscreen Sub-select Crop & Export Area tools Lasso Select Brush (Freehand line) tool Erase Rubber Stamp (Duplicate) tool Fill Pen tool (Bezier Curves) Text Cutting tool Slice tool Show slices and hotspots Eye Dropper tool (Sample Colour) Zoom toolHand tool
  • Slide 24
  • Using Fireworks.24 Properties Viewer Properties for whole document Properties for vector object Properties for text object
  • Slide 25
  • 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
  • Slide 26
  • Using Fireworks.26 Keystrokes Ctrl 1 = 100% zoom Ctrl 2 = 200% zoom Ctrl 3 = 300% zoom Ctrl 4 = 400% zoom Ctrl 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
  • Slide 27
  • Using Fireworks.27 Questions?