MP Spring 2004 - Lecture 1

1
(No Transcript)
2
Housekeeping

• Exercise One Due Monday 9/27 _at_ 5pm
• SSH FTP for All
• Why?
• What does this change?
• Citrix
• Questions?

3
The Menu 9/23/04

• Super-Quick Run Through of Site Set Up SSH FTP
• Proper intro to Fireworks
• In depth optimization and saving images for the
  web
• Creating Content for the Web
• Dreamweaver More Tables
• Time to work on Exercise One

4
Defining a Site in DWMX 2004 (1/4)

• Site gt Manage Sites

5
Defining a Site in DWMX 2004 (2/4)

• Select New Button
• Choose Site

6
Defining a Site in DWMX 2004 (3/4)

• Select Local Info Category
• Local Info gt Site Name MP for this demo
• Local Info gt Local Root Folder mp in My
  Documents

7
Defining a Site in DWMX 2004 (4/4)

• Select "Remote Info" Category in New Site Dialog
• Select NONE" in pull-down Access
• Click OK. You are all set up

8
To Transfer Files SSH FTP

• Tutorial on Setting Up SSH FTP
• Make sure to transfer the file structure exactly
  as it is on your local computer. Dont forget
  the images folder.
• All Files and Folders need permissions set to
  755

9
Review Graphic Design - Typography

• Serif vs. Sans Serif
• Print Serif
• Web Sans-Serif
• What fonts are Sans Serif?
• Arial
• Tahoma
• Verdana
• Trebuchet MS
• Helvetica
• Geneva
• MoreBut Why cant I use them?!
• Only certain fonts are installed on every
  computer, the list above is pretty safeif you
  want to use a different font for a title or
  something, make it in Fireworks and save it as an
  image

10
Review Graphic Design - Typography

• Make sure font is readable!
• Color Contrast
• Size, big enough to read, small enough to
  minimize scroll
• 7 - 10 Words Per Line
• Overlong or Over short Lines Tire the eyes
• Column Width Proportional to Type Size
• Bold and italic used for small blocks of text
• If you make everything bold, then nothing stands
  out
• If you cram every page with dense text, users see
  a wall of gray

11
Fireworks Raw Images

• Go to
• http//www.scils.rutgers.edu/dans/docs/fireworks_
  samples.zip
• Download and save the zip file. Extract the
  files, we will use these to demonstrate
  Fireworks.

12
Fireworks Tool Bar
Selection Tool
Crop Tool
Marquee Tool
Eraser
Pencil
Rubber Stamp
Paint Bucket Tool
Line Tool
Text Tool
Rectangle Tool
Color Selection
13
Uses of Fireworks (Today)

• Crop Photos
• Resize Images
• Capture and Edit Screen Shots
• Re-Touch Photos
• Annotate Images
• Export Optimized Images for the Web

14
Fireworks Crop!

• To Crop
• Select Crop Tool
• Then, on your workspace, Drag the tool to select
  the area of the picture you want to crop
• Re-size with handles as necessary
• Hit Enter to finalize your crop

15
Resize an Image

• To re-size an image
• Modify gt Canvas gt Image Size
• Then type in the pixel width and height you would
  like
• 99 of the time, you will want to make sure the
  Constrain Proportions is selected
• Click OK

16
Screen Shots

• To capture a Screen Shot use the Print Screen
  keyboard button
• This will put the entire screen into memory
  buffer
• Select File gt New
• Then Select Edit gt Paste
• (NOTE) To capture just the window that is active,
  hold the ALT key down while pressing Print
  Screen

17
Re-Touching

• Fireworks can do A LOT more, but for simplicitys
  sake, we will go over 3 ways of retouching an
  image
• Using the Rubber Stamp Tool
• Using Paint Brushes and Erasers
• Using the Marquee Tool

18
Re-Touching Basics

• Make the image as large as you can in the window
  before editing itThis will yield better results
• You will make mistakes, use the History Panel
• Take your time, quick sloppy jobs are often worse
  than the original

19
Re-Touching Rubber Stamp

• The Rubber Stamp tool clones an area of a bitmap
  image so you can stamp it elsewhere in the image.
  Cloning pixels is useful when you want to fix a
  scratched photograph or remove dust from an
  image you can copy a pixel area of a photo and
  replace the scratch or dust spot with the cloned
  area.
• Select the Rubber Stamp tool
• Select Your Brush Size in the Properties
  Inspector
• To define the SOURCE, ALT click
• Then click in the area you want to cover up

20
Re-Touching Paint Eraser

• Paint works well with drawings solid color
  representations
• Choose the Paint Brush Tool
• Select your color
• Hint- You can drag the selection dropper into the
  image and grab the colors out of the picture for
  a better match
• Define your brush size in the Properties
  Inspector
• Paint over whatever you like
• To use the eraser, simply select it from the
  tools, define the size in the property inspector
  and go!

21
Re-Touching The Marquee Tool

• This method is similar to the rubber stamp
• Select the Marquee tool
• Then, select an area that you want to duplicate
  on the image
• Edit gt Copy
• Edit gt Paste
• Use the Selection Tool (Black Arrow)
• Drag the copies section over the area you wanted
  to replace

22
Annotate Images

• Use the Vector tools
• Text
• Rectangle, Ellipse, etc
• Line
• Make sure you select the color you would like the
  item you are creating to be, before creating it
• For a clear stroke or fill, Select the white
  color swatch with the red line diagonally through
  it

23
Exporting Images for Web

• You can export an image or graphic in 2 formats
• JPEG - Joint Photographic Experts Group
• GIF - graphics interchange format
• Both formats have various levels of compression
  and quality
• Both formats are supported by all Internet
  browsers
• http//www.siriusweb.com/tutorials/gifvsjpg/
• GIF vs. JPEG short article

24
Web Graphics File Formats

• GIF
• Cross Platform Lossless Compression
• Indexed Colors few GIFs need all colors, reduce
  it manually
• Transparency (so no white box around graphic)
• Interlacing Progressive Download
• Create Animations
• Best for
• Images with Large Areas of Solid Color, Simple
  Illustrations
• Small Photos or thumbnails
• JPEG
• Cross Platform LOSSY Compression
• Progressive JPEG
• No transparency, No Animation
• Best for
• Photos Millions of Colors and Subtle Changes

25
Save Image for Web

• RGB Mode
• Resolution 72 dpi
• Computer Monitors can only display 72 dpi, for
  print, typically want resolution of 300 dpi
• Indexed Color Mode
• Reduced Color Palette
• Adaptive Palette
• All done to reduce file size while preserving as
  much quality as possible. Trade-offs are made

26
How to Export in Fireworks

• Once you have your image the way you want it
  (cropped, annotated, re-touched, re-sized, etc)
  then you can export the image for the web File gt
  Export Preview

View 4 Previews at once
Optimized file size and estimated load time
27
Exporting Part 2

• Select the 4 preview option
• Select different settings and quality options
• Your Mission Make the picture look as good as
  possible while keeping the file size as small as
  possible
• Select the one you like, and click Export
• Save this file in your images folder, remember
  file naming rules (no spaces of uppercase)

28
Which Web Graphics Format to Choose?
29
Next Weeks Fireworks

• Creating whole page layouts
• Effects
• Creating rollovers for navigation

30
Basic Design Principles

• Alignment
• Don't Mix Alignment Styles - Simplicity
• Create Sufficient Left Margin
• Constrain Total Width of Page
• Proximity
• Related Things Close Together
• Spatial Separation Conceptual Separation
• Repetition Consistency
• Layout, Navigation, Graphics Color Coding,
  Typeface
• Creates Ease of Use
• Contrast
• Colors and shapes

31
Writing for the Web

• Concise, SCANABLE and Objective
• By Jacob Nielsen
• People scan page
• 79 always scanned only 16 read word-by-word.
  
• Make pages scanable
• Start with conclusion
• One idea per paragraph
• Half the word count (or less) than conventional
  writing
• Highlighted keywords
• Meaningful sub-headings (not "clever" ones)
• Bulleted lists
• Credibility important and increased by
• High-quality graphics Good writing
• Use of outbound hyperlinks

32
Dreamweaver Create Visual Hierarchy

• You can use
• Standard Table
• Standard View
• Regular Columns and Rows
• Layout Tables and Layout Cells
• Layout View
• Irregular Columns and Rows

33
Standard vs. Layout

• I recommend using the Standard table method as
  much as possible.
• This allows your more precise control over exact
  heights and widths
• Easier to troubleshoot
• Can do everything Layout can do
• Layout Tables and Cells
• You MUST always draw a layout table before
  drawing a layout cell
• Quicker than Standard in some cases, however less
  precise

34
Tables

• All tables can be measured in pixels or
  percentage
• Pixels give you exact control, percentage refers
  to the percentage of the browser window the table
  will cover
• If a setting a nested table with percentages, the
  percentage will refer to the percent of the
  holding tables area covered

35
Quick Dreamweaver Tip

• To preview what you are working on in Internet
  Explorer, simply save your file and press the
  F12 key.

36
Dreamweaver Standard View

• View gt Table View gt select Standard View
• Certain changes must be completed in Standard
  view
• Format Edit Table and its Cells
• Format Table and Cells
• Cut, Copy or Paste Table Cell
• Specify Width Pixels or of Browser Width
• Accordion Effect if specified as of Browser
  Width
• If Table Width unspecified, then column widths
  unconstrained!

37
Formatting

• In your layout, Tables must hold EVERYTHING
• No matter if you are in standard or layout view,
  the holding structure must be a table
• Do NOT draw a layout cell outside of a layout
  table, it will mess up the rest of your tables

38
Format - Layout Cell in Layout View

• Fixed Width
• Type a width in pixels in the box.
• (DW will set width equal to at least content
  width).
• "Make Column Fixed Width" from menu at top of
  column.
• Sets width of column to match width of column
  content.
• Autostretch
• Resizes width automatically to fill browser
  window
• Displayed as wavy line
• With Autostretch, transparent spacer images are
  inserted in fixed width columns to control the
  layout.
• Without spacer images, columns will change size
  or even visually disappear completely if they do
  not contain content.
• Only one column in a layout can be Autostretch.
• No Wrap
• Prevent word wrapping

39
Format - Layout Table in Layout View

• CellPad
• Amount of space between content of a cell and
  cell boundary
• CellSpace
• Amount of space between each layout cell
• Make Widths Consistent
• Resets widths of each cell to match the content
  within that cell.
• If width set to 200 pixels, then add content with
  width of 250, top bar of table in Layout view
  will display "200" (250). Clicking "Make Widths
  Consistent" removes the 200-pixel setting and
  keeps 250.
• Remove Layout Table / Cell
• Select Layout Table / Cell and press Delete (Edit
  gt Cut does not work)
• Remove Nesting
• Layout cells will become part of parent table

40
Dreamweaver Troubleshooting

• Make sure Table Width in Layout and Standard View
  Agree
• Layout View Table Width 500 pixels
• Standard View Table Width
• Dreamweaver can suddenly change widths
  specified in pixels to
• Good practice to double check (especially when
  layout behaves strange)

41
Time

• To work on Exercise One
• To ask me questions
• To use the software
• Things will speed up from here, make sure you are
  comfortable using Dreamweaver, SSH FTP, Fireworks