Using fireworks mx 2004
This presentation is the property of its rightful owner.
Sponsored Links
1 / 27

Using Fireworks MX 2004 PowerPoint PPT Presentation


  • 131 Views
  • Uploaded on
  • Presentation posted in: General

Using Fireworks MX 2004. Designing interfaces in Fireworks, using a scenario methodology. What does Fireworks do?. It's a graphics editor Designed for producing graphics for the web It supports both vector and bitmap editing

Download Presentation

Using Fireworks MX 2004

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Using fireworks mx 2004

Using FireworksMX 2004

Designing interfaces in Fireworks, using a scenario methodology


What does fireworks do

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


Exercise movie database

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)


Napkin sketch

Napkin Sketch


Time to start drawing

Time to start Drawing…


Creating a new file

Creating a new file


Fireworks document mac

Fireworks Document (Mac)


Adding objects

Adding Objects

  • Everything you add to a drawing is an object (aka vectorobject)

  • 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).


Drawing the basic layout

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


Grouping objects

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


Layers

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


Layers1

Layers


Frames

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


Frames1

Frames


Frames2

Frames


Frames3

Frames


Frames4

Frames


Frames5

Frames

Frame Controls


Using layers and frames

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!!


Anatomy of fireworks

Anatomy of Fireworks…


Quick tour

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


Main window mac

Main Window (Mac)


Main tool palette

Main Tool Palette

Sub-select

Select

Scale, Skew, Distort tools

Crop & Export Area tools

Lasso Select

Marquee Selection

Magic Wand Select

Brush (Freehand line) tool

Pencil – single pixel freehand lines

Erase

Blur

Rubber Stamp (Duplicate) tool

Eye Dropper tool (Sample Colour)

Fill

Simple Lines

Pen tool (Bezier Curves)

Shapes (Rect, Ellipse, etc)

Text

Freeform tool (adjust shapes)

Cutting tool

Slice tool

Rectangle Hotspot tool

Hide slices and hotspots

Show slices and hotspots

Line Colour

Fill Colour

MDI, SDI, Fullscreen

Hand tool

Zoom tool


Properties viewer

Properties Viewer

Properties for whole document

Properties for vector object

Properties for text object


Png portable network graphics

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


Keystrokes

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


Questions

Questions?


  • Login