Class Preparation

1
Class Preparation

• Get your DW site up and running
• Go to Workshop page (link off of Studio calendar)
  and
• Download either your or my class photo
• Also, download these two pictures to the
  resources folder of your web site
• Right-click on each picture and choose to save
  picture as

2
Introduction to Fireworks

• Lloyd Rieber
• EDIT 6190
• Fall, 2005

3
Basic Skills

• Drawing
• Image editing and optimizing
• Web design

4
Computing 101A Little Background about File Sizes

• K vs. MB vs. GB
• Computers are digital machines
• A bit is either a 0 or a 1
• A byte is the standard unit of memory
• 8 bits in a byte 01110010
• A letter displayed on the screen takes up a byte
  of memory
• 1 Kilobyte 1024 bytes
• Shortcut thinking kilo 1000, more or less

5
Computing 101A Little Background about File Sizes

• K vs. MB vs. GB?
• Do the math, its easy!
• K1,000 (thousand)
• MB 1,000,000 (million)
• GB 1,000,000,000 (billion)
• 1000K 1 MB (about what a floppy disk holds)
• 1000MB 1 GB

6
Why should I care?

• Because people hate to wait!
• 28K modem transfers 28K per second
• Actually, it is always less
• So, a 280K picture will take about 10 seconds to
  download
• A 1 MB picture takes _______ to download.
• But, dont most people now have broadband?

7
Fireworks Advice

• Just face the fact that your first few files will
  be a mess.
• Think of these as rock video pictures!
• Use play files to explore functions of a tool
• Avoid perfectionist tendencies in these play
  files.
• Invest the time to explore. Youll see a return
  on your investment in the long haul.

8
Graphical File Types

• Welcome to the confusing world of graphical file
  types!
• Well, its really not so bad.
• Fireworks can convert from one to another
• The Web uses mostly GIF and JPG

.jpg Good for photosNo transparent backgrounds
.gif Good for clipartTransparent backgrounds
.bmpbitmap
.png
.psd PhotoShop
.pict
.tiff
9
File Types and Fireworks
.png
Your original Fireworks file will always be
NEVER throw the original .png away! It is the
only file that can be modified easily. And, you
can always make more children from it, but not
visa versa.
.jpg
.gif
You will create these as offspring which are
the files actually used in a web site
10
Quickly Adding Microsoft Clipart to your Web
PagesThe Lloyd Way

• Open a PowerPoint file
• Insert ? Picture ? Clip Art
• Repeat as often as you like
• Copy one of the graphics
• Switch to Fireworks
• Open a new file
• Fireworks matches the file size to the contents
  on the clipboard
• Export the file as a GIF graphic to your web
  sites resources folder

11
Fireworks Drawing

• Vector vs. Bitmap Graphics
• Drawing vs painting
• Vector graphics are objects you can manipulate
  after the fact
• Bitmaps are like paintings
• You can only erase or change them at the pixel
  level
• Restaurant Analogy

12
Fireworks Drawing

• Tools for Drawing Both Vector and Bitmap Graphics
• Both rely on proficient use of theselection tools

13
Pay Attention to the Property Inspector

• Like Dreamweaver, it is context sensitive
• Its options change, depending on what object is
  chosen

14
Lets draw!Dont worry if you make a mess!
15
Image Manipulation

• Go to class home page and
• Download either your or my class photo
• Download it and also these two pictures to the
  resources folder of your web site
• Right-click on each picture and choose to save
  picture as

16
How to?
17
How to?
18
Main Tools
Magic wand

• Some important commands
• CTRL and CTRL (Zooming in and out)
• and CTRL d to de-select an area
• While using magic wand, hold down shift key to
  accumulate selected areas

19
Other Image Manipulations

• Image and canvas size
• Changing image resolution
• Computer screens only show 72 dots per inch (dpi)
• Many digital photos are taken at 300 dpi these
  can be huge files which dont look any better
  when shown on a web page!

20
Exporting as GIFS or JPGs
21
File Types and Fireworks
.png
Your original Fireworks file will always be
NEVER throw the original .png away! It is the
only file that can be modified easily. And, you
can always make more children from it, but not
visa versa.
.jpg
.gif
You will create these as offspring which are
the files actually used in a web site
22
Other Skills

• Creating hot spots to hold web links
• Creating roll-overs
• Creating animations

23
What now?

• Practice the skills weve introduced this evening
• Go through chapter 1 of Zero to Hero book
• Go through Hour 7 of Betsy Bruce DW book