Transcript Information Visualization Course Web Design Prof. Anselm Spoerri [email protected] © Anselm Spoerri Lecture 5 – Overview Meaning – Web Design Matrix: – Writing for the Web User Behavior.

Information Visualization Course
Web Design
Prof. Anselm Spoerri
[email protected]
© Anselm Spoerri
Lecture 5 – Overview
Meaning
– Web Design Matrix:
– Writing for the Web
User Behavior  Design Implications  Design Specifics
Mechanics
– Testing & Debugging Web Pages  Check Easy Stuff First
– CSS
– Recap
– DIVs and Linear “Natural Flow”
– Box Model
– Floating Elements
– HTML 5: Key Concepts
– Exercise 1: Key Steps & Reminder
– Image Editing using Fireworks
– Web Graphics
– Fireworks: Toolbox | Image Size & Resolution | Image Preview |Demo Steps
– Image Composition Principles
© Anselm Spoerri
Web User Behavior
Scan pages - don't read them
Look for anything = Search Interest
Decide quickly
Choose first “reasonable item”
Muddle through
Don't figure out how things work
Resist forming models
Stick to what works
© Anselm Spoerri
Web Design Implications
Scan pages - don't read them
• Design for Scanning
• Make page work at a glance
• Create Visual Hierarchy
Look for anything = Search Interest
Decide quickly
Choose first “reasonable item”
• Make obvious what you can do on a page
Muddle through
Don't figure out how things work
Resist forming models
• Don't make users think
Stick to what works
• Repetition & Consistency
• Make obvious what is clickable
© Anselm Spoerri
User Behavior
 Design
Implications
 Design
Specifics
User Behavior
 Design
Implications
 Design
Specifics
Scan pages - don't read them
• Design for Scanning
Make text short - cut words
• Make page work at a glance
Sufficient left margin,
640x480 = main message
• Create Visual Hierarchy
Look for anything = Search Interest
Decide quickly
Choose first “reasonable item”
• Make obvious what you can do
• Make obvious what is clickable
Muddle through
Don't figure out how things work
Resist forming models
• Don't make users think
Get rid of question marks
Each item = clear purpose
1 Use Grid System
• Maintain Consistency
Helps you decide: location of primary & secondary
navigation; location and sizes of images;
location of headlines, main text, annotations etc.
• Create Visual Hierarchy & Rhythm
• Present Information Clearly & Logically
Users can read info more quickly.
Facilitates understanding and recall.
• Invisible Hand guiding users and creating
sense of place
Stick to what works
• Repetition & Consistency
Grid Layout, Easy Navigation,
Graphics, Color Coding, Typography
© Anselm Spoerri
User Behavior
 Design
Implications
 Design
Specifics
User Behavior
 Design
Implications
 Design
Specifics
Scan pages - don't read them
• Design for Scanning
Make text short - cut words
• Make page work at a glance
Sufficient left margin,
640x480 = main message
• Create Visual Hierarchy
Look for anything = Search Interest
Decide quickly
Choose first “reasonable item”
• Make obvious what you can do
• Make obvious what is clickable
Muddle through
Don't figure out how things work
Resist forming models
• Don't make users think
Get rid of question marks
Each item = clear purpose
Stick to what works
• Repetition & Consistency
Grid Layout, Easy Navigation,
Graphics, Color Coding, Typography
2 Create Visual Hierarchy & Guide Eye
• Important Things = Visually Prominent
(More Important = Larger / Sharp Contrast)
Use headlines to guide the eye
• Visual Contrast
Use sharp changes in size (headline), light intensity
(bold), color, texture, motion to create contrast.
• Proximity: related things spatially close
Spatial separation = conceptual separation.
Don't mix alignment styles.
• Use Grouping & Nesting to Increase
Information Density
(Short-term Memory = 3-7)
Use bounding shapes.
© Anselm Spoerri
User Behavior
 Design
Implications
 Design
Specifics
User Behavior
 Design
Implications
 Design
Specifics
Scan pages - don't read them
• Design for Scanning
Make text short - cut words
• Make page work at a glance
Sufficient left margin,
640x480 = main message
• Create Visual Hierarchy
Look for anything = Search Interest
Decide quickly
Choose first “reasonable item”
• Make obvious what you can do
• Make obvious what is clickable
Muddle through
Don't figure out how things work
Resist forming models
• Don't make users think
Get rid of question marks
Each item = clear purpose
Stick to what works
• Repetition & Consistency
Grid Layout, Easy Navigation,
Graphics, Color Coding, Typography
3 Typography Heuristics
• Sans Serif type is easier to read on screen
• Type size 10 -14 points
• 7 - 10 words per line
• Column width proportional to type size
• Bold and italic for small blocks of text
• Enough contrast between type & background
© Anselm Spoerri
User Behavior
 Design
Implications
 Design
Specifics
User Behavior
 Design
Implications
 Design
Specifics
Scan pages - don't read them
• Design for Scanning
1
Use Grid System
• Make page work at a glance
• Create Visual Hierarchy
Choose first “reasonable item”
• Make obvious what you can do
Muddle through
2
Create Visual Hierarchy
and Guide Eye
• Don't make users think
Stick to what works
• Repetition & Consistency
3
Typography Heuristics
© Anselm Spoerri
Requirements for Web Pages
Web Page needs to easily answer
• What can I do here?
 Layout Presents Info Clearly & Logically
Facilitates Understanding & Recall
• Where do I start?
 Visual Hierarchy Guides Eye to Important Things
Web Navigation needs to easily answer
• What site is this?
 Site ID – logo, image, text
• What page am I on?
 Page name
• Major sections of site?
 Primary Navigation
Top Row or Left Column
Simple text hyperlinks, icons, rollovers, image-maps, pull-downs
• Options at this level?
 Secondary Navigation
Below Top Line or Left Column
 Expanding / Nesting Hierarchies
Static or Dynamic Outlines
• Where I am?
Go higher or home?
 Color Coding, Breadcrumbs
Primary / Secondary Navigation
© Anselm Spoerri
Layout  Visual Hierarchy & Navigation
Site ID
Primary Navigation
Secondary Navigation
Page Name
Intro Text
aaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbb
bbbbbbbbbbb
Text or Thumbnails
© Anselm Spoerri
Layout  Visual Hierarchy & Navigation
Site ID
Primary Navigation
Secondary Navigation
Page Name
Intro Text
Text or Thumbnails
© Anselm Spoerri
Writing for the Web
Concise, SCANABLE and Objective
By Jacob Nielsen
People scan page
– Study: 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
© Anselm Spoerri
Testing & Debugging Web Pages
•
Before looking for a big problem, check common little problems :)
•
Work incrementally
•
Use process of elimination
(use comments to make code active / inactive).
•
Be careful about
•
In CSS, not sure if the problem is with the property or the selector,
use a very simple declaration (color: red).
typos.
© Anselm Spoerri
Check Easy Stuff First - General
•
Refresh browser so that latest file is shown
•
Upload actual file and refresh browser so that latest file is shown
•
Upload file in the correct location
•
Make sure you save file
•
Upload any related files: CSS, images, SWF etc.
•
Make sure
•
Test in multiple browsers
•
Test on different computer than the one used to create the files
spelling of URL = spelling of filename.
© Anselm Spoerri
Check Easy Stuff First – HTML & XHTML
HTML
•
Make sure you used correct spelling of tags
(DW should help with this)
•
Be careful about nesting and make sure you have closing tags
•
Use HTML Transitional
XHTML
•
Make sure all attribute value enclosed in straight, not curly, quotes
(DW helps with this)
•
All elements have opening and closing tags
(always put space before /).
XHTML is case-sensitive.
•
Include # when specifying hexadecimal colors (DW helps with this).
© Anselm Spoerri
Check Easy Stuff First – CSS
•
Use colon (:) to separate your properties from value (color: red;).
•
Complete each property-value pair with semicolon (;)
•
No spaces between number and their units (16px).
•
Close brackets.
•
Don’t quote values.
•
Use accepted value (DW helps with this).
•
Don’t forget closing < /style> tag.
•
Make sure linked (X)HTML document to the proper CSS file(s).
•
Watch the spaces and punctuation between selectors.
•
Want <span class=“X”><a>link</a></span>
© Anselm Spoerri
Check Easy Stuff First – Testing Your Page
1. Validate (X)HTML and CSS.
2. Open in Browser
3. Formatting correct?
4. Hyperlinks work & correct?
5. CSS file referenced properly?
6. All images appear?
If not, check the easy stuff first, especially spelling of filenames
and don’t use spaces in filenames and saved as GIF or JPEG.
7. Upload files to server (and set permissions if needed).
8. View pages in different browsers.
9. Still Stuck  check for typos and check easy stuff first :)
© Anselm Spoerri
Recap – Web Basics: CSS
CSS = Cascading Style Sheets
Why use them?
Ensure Consistent Treatment of Page Layout and Appearance in Browsers
Separation of Content from Presentation
Simpler and Cleaner HTML code  shorter loading times
What
can they do?
Control Appearance of web page: blocks and text
Where
store them?
External CSS file of web page: blocks and text
Easier to Maintain Appearance since Make Change in Single Location
© Anselm Spoerri
Recap – CSS: Selectors Summary and CSS Validator
Combining Selectors
1. Define Context
div#intro
2. Spell out Element’s Name
div#intro p
3. Specify Class or Id of desired element
div#intro p.firstP
4. Specify Pseudo-class or Pseudo-element
div#intro p.firstP:first-letter
example
CSS Validator
http://jigsaw.w3.org/css-validator/
© Anselm Spoerri
Recap – CSS: Cascade
Cascade: Inheritance, Specificity and Location.
Inheritance
example
– Html = Hierarchical Structure
– Many properties, but not all, inherited by descendants of elements
Specificity
example
– The more specific the selector, the stronger the rule
How do you create a specific CSS rule?
– tag
class (.name)
id (#name)
 context
Location
example
– Rules that appear later have more weight.
 Inherit from Parent
 The More Specific the rule, the More Weight
 The one that Appears Later Wins.
© Anselm Spoerri
Mechanics – CSS: DIVs and Linear “Natural Flow”
DIV and SPAN
Block Element of content (<div> always new line)
Inline Element displayed in current line (<span>)
Parents and Children = Hierarchy of Tags
•
elements contain other elements;
•
each element must be properly nested and have closing tags.
Structure Your Pages
Divide logical sections of document into div elements
 Linear sequence of divs
Use header elements (h1, h2 …)
Use comments /* comments help */
Linear “Natural Flow” by default
Elements displayed as (X)HTML flows from top to bottom
with line breaks at beginning and end of each block-level element.
© Anselm Spoerri
Mechanics – CSS: Box Model
Box Model = every element is enclosed in Invisible Box
Width and Height can be specified
Border : can specify all four borders separately
also specify border-style: type; border-width: n; border-color: color;
Padding = space surrounding content inside of box
(all four sides can be specified separately)
Margin = invisible space around border of box
(-top, -bottom,-left, -right, auto)
Overflow : elements are not always contained in their boxes; can
be: visible; hidden, scroll; auto (scroll appears when needed).
If width, margin, border and padding don’t equal size of
containing block  something’s got to give :)
© Anselm Spoerri
Mechanics – CSS: Floating Elements
Making Elements Float so that they float in a sea of text
float: left / right
 element is on left / right
 text flows on right / left.
clear: left / right / both / none to keep elements from floating
on left / right / both sides and none lets elements float on either side.
•
clear property stops affected element from displaying until designated side is free.
•
Add clear property to elements whose sides you want to be clear of floating elements.
<div id=“yellow”>
<div id=“green”>
float
:left
float
:left
clear: left
http://comminfo.rutgers.edu/~aspoerri/Teaching/WebDesign/Lectures/Lec5/Steps/float_and_clear.html
© Anselm Spoerri
Floating DIVs – Demo Steps
Step-by-Step files:
http://comminfo.rutgers.edu/~aspoerri/Teaching/WebDesign/Lectures/Lec5/Steps/
Step 1 – Create External CSS file
Step 2 – Add Floating Sidebar
Step 3 – Non-floating Footer and Floating Image
Step 4 – Embed YouTube Video / Screencast
© Anselm Spoerri
Step 1 – Create External CSS file
Step 1
‒ Download
from
http://comminfo.rutgers.edu/~aspoerri/Teaching/WebDesign/Lectures/Lec5/Steps
‒ “start.html”
‒ Create External CSS file “styles.css”
Add at the top of file:
@charset "utf-8";
/* CSS Document */
‒ Copy and Paste “Clean Slate” Code and Comment it Out
‒
Place /* before “Clean Slate” code and */ after it
‒ Cut & Paste “start.html” Internal CSS Code
(code goes gray)
into external CSS file
‒ Save styles.css
‒ Save “start.html” As “float_step1.html”
(page loses formatting)
‒ Create link to external CSS file in web page
‒ <link rel="stylesheet" href=“styles.css" type="text/css" />
© Anselm Spoerri
Step 2 – Add Floating Sidebar
Step 2
‒ Create Div with id=“rightSidebar”
‒ Place this div in HTML hierarchy as child of “pageContent” div
and before “content” div
Specify CSS Internally and then later move to external file
<style type="text/css">
</style>
‒ Create CSS code for Div with id=“rightSidebar”
float:right;
width:120px;
height:100px;
margin-top:20px;
margin-left:10px;
margin-bottom:10px;
padding:5px;
border-width:thin;
border-style:solid;
border-color:#C1F3BC;
border-top: 20px solid #C1F3BC;
© Anselm Spoerri
Step 3 – Non-floating Footer and Floating Image on Left
Step 3
‒ Specify CSS code clear:both for “footer” div
clear:both;
margin-top:10px;
‒ Create DIV and Insert Image
Create <div> after h1
Insert image
<img src="116.jpg" alt="Intro Image" width="100" height="100" />
‒ Specify class=“floatLeft” and apply to DIV with Image
float:left;
margin-right:10px;
margin-bottom:10px;
border:medium;
border-style:solid;
border-color:black;
‒ Add enough text in opening paragraph so that it wraps around
image and sidebar
© Anselm Spoerri
Step 4 – Embed YouTube Video / Screencast
Step 4
‒ Create DIV for Video / Screencast
Create <div> after opening paragraph
‒ Insert Table: Single Row and Two Cells
‒ Copy & Paste YouTube Embed Code into Cell
http://www.youtube.com/watch?v=h9bwDx1Vrm4
Make sure to set width = 200 and height = 150
in two places in <object> code
‒ Copy & Paste Screencast into Cell
Same steps as for YouTube video … embed on different page
Next Steps
move Internal CSS code to External CSS file
and remove comments for “clean slate” code
and specify CSS rules that are needed
and format page to create your visual look
© Anselm Spoerri
HTML5 – Intro
Why HTML5?
–
–
–
–
–
Reduce the need for external plugins (like Flash)
Better error handling
More markup to replace scripting
HTML5 should be device independent
Based on HTML, CSS, DOM, and JavaScript
What is HTML5
‒
HTML5 specification – http://dev.w3.org/html5/spec/
‒ Officially Working Draft
| “living standard”
Browser Support for HTML5
– HTML5 not yet official standard, no browser provides full HTML5 support.
– But all major browsers continue to add support for new HTML5 features.
– Understanding & implementing features is what matters.
© Anselm Spoerri
HTML5 – New Capabilities
http://www.w3schools.com/html5/default.asp
Video specifies standard way to embed video (no plug-in)
Audio specifies standard way to embed audio (no plug-in)
Drag and Drop any element can be draggable
what to drag | where to drop | do the drop
Canvas used to draw graphics, on the fly, on web page
SVG supported Scalable Vector Graphics to draw shapes
Geolocation can determine user's position with permission
Web Storage better local storage within browser than cookies
Web Workers JavaScript runs in background without
affecting page performance
Server-Sent Events page gets automatic updates from server
© Anselm Spoerri
HTML5 – DOCTYPE | charset | lang | CSS & JavaScript links
‒ HTML5 DOCTYPE: <!DOCTYPE html>
‒ not case sensitive | version dropped
‒ all browsers recognize shortened DOCTYPE & render in strict mode
and deprecated elements will not work
‒ Specify Character Set: <meta charset="UTF-8" />
‒ Specify Language: <html lang="en">
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8" />
‒ Script and Link Declarations: type attribute optional
<link rel="stylesheet" href="styles.css" />
<script src="scripts.js"></script>
© Anselm Spoerri
HTML5 – New Elements
New Media Elements
<audio>
<video>
<source>
<embed>
<track>
sound content
video or movie
multiple media resources for <video> and <audio>
container for external application or interactive content (a plug-in)
text tracks for <video> and <audio>
New Form Elements
–
New form controls, like calendar, date, time, email, url, search
New Semantic / Structural Elements
‒
header, nav, aside, section, article and footer
‒
Focus on your content and consider semantics of each element
‒
Use div if you need containing element strictly for style purposes
‒
Some older browsers treat new elements like inline elements
header, footer, nav, article, aside, section { display: block; }
© Anselm Spoerri
HTML5 – New Semantic / Structural Elements
‒ header element
‒ Used to contain headline(s) for a page and/or section.
‒ Can contain logos and navigational aids.
‒ nav element
‒ Contains major navigation links.
‒ Often contained by header.
‒ aside element
‒ Contains related information, such as sidebar or pull-quotes.
‒ section element
‒ Contains content that is related or grouped thematically.
‒ Only if its content has own self-contained outline (h1,… h6).
‒ Do not use simply for styling purposes – use divs and spans instead.
‒ article element
‒ Stand-alone content such as a blog entry.
‒ footer element
‒ Contains information about a page and/or section.
© Anselm Spoerri
HTML5 – Element Flowchart
http://html5doctor.com/happy-1st-birthday-us/#flowchart
© Anselm Spoerri
CSS3 – Intro
http://www.w3schools.com/css3/default.asp
CSS3 backwards compatible, don’t have to change existing designs.
Borders Rounded, add shadow and use image as border.
Backgrounds new background properties and greater control.
Text Effects new features such as text-shadow or word-wrap.
Fonts can use font you like by including font file on server.
2D Transforms move, scale, turn, spin and stretch elements.
3D Transforms format elements using 3D transforms.
Transitions add effect when changing from one style to another, such as
on mouseover or mouseout events.
Animations specify CSS style inside @keyframes rule and animation
will gradually change from the current style to the new style.
Multiple Columns can create multiple columns for laying out text.
User Interface user can resize elements and other features supported.
© Anselm Spoerri
Exercise 1 – Key Steps & Things to Remember
1 Set up Local / Remote Site and Upload Files
– SFTP | place in public_html
2 Create First Page | Initialize DW and Page
– HTML5 doctype
3 Create Layout using AP Elements
– Drag “Draw AP Div” into Design View and position
4 Convert Layout to HTML5 semantic tags
– Select Div in Tag Bar and use Quick Tag Editor
5 Move Internal CSS to External CSS file
– Select CSS rules in CSS Styles Panel, right click and “Move Rules to”
6 Create Spry Menu Bar with “You Are Here” Indicator
–
–
–
–
Make sure SpryAssets folder inside of ex1 folder
Copy CSS rules control appearance and add .here in rules
Apply CSS class “here” to appropriate primary navigation link
Secondary Link: primarypage.html#anchorname
7 Structure Text, Create Anchor & Format Text
– Create Named Anchors
–
–
Place cursor before headline3 text
Insert > Named Anchor and specify anchor name (use consistent spelling)
© Anselm Spoerri
Recap – Web Graphics
Bitmapped vs. Vector-based Graphics
Web Graphics File Formats
– GIF
–
–
–
–
Cross Platform & Lossless Compression
Indexed Colors
Transparency
Create Animations
– Best for: Solid Color, Simple Illustrations Small Photos
– JPEG
– Cross Platform & LOSSY Compression
– No transparency
– No Animation
– Best for: Photos with Subtle Color Changes
Save Image for Web
–
–
–
–
–
RGB Mode
72 ppi
Indexed Color Mode
Reduced Color Palette (e.g. Adaptive Palette)
Interlaced
Good Form: Alt-labels for Images
© Anselm Spoerri
Web Graphics
PNG
•
Fireworks saves its documents as PNGs
•
Best to export PNG content as GIF or JPEG, since PNG can contain
content not currently shown and produces larger file size.
Specify image size (width and height) for speedier viewing
•
DW includes this info automatically in web page.
Scaling image in Web page does not affect download time.
Making images float and have text flow to the right or left of it
•
Place image directly before the text it should “disrupt”.
Most browser surround clickable images with a border of same
color as the links (generally blue): for no border, use a border value = 0.
Deprecated attributes for images
•
: border; align=”left/right” (use CSS float)
•
clear (use CSS clear)
•
<br clear=”left/right” /> (use CSS clear)
© Anselm Spoerri
Fireworks – Setting Stage
Fireworks  Edit Digital Images
Document = Fireworks File = PNG
Document
contains
Layers
which contain
Objects
Ease-of-use Features
– Property Inspector
– Dynamic panel full of options that change as you work
– Select Object
 inspector shows size, transparency, blending & effects
– Select Tool
 inspector shows tool properties
© Anselm Spoerri
Fireworks – Setting Stage
Collection of “Layers” You Choreograph
– Layer can contain bitmaps, text or vector objects
– Stacking order of “acetate layers” with varying transparencies
– Manipulate visibility and appearance of layer
Save Your “Fireworks Score”
so that you can change it easily
 Fireworks file “.png” not equal to JPEG or GIF file
Publish Your Score in Different Formats
Export as a GIF or JPEG
© Anselm Spoerri
Fireworks – Property Inspector
Blending Control
Transparency Control
Image Effects Control
Can Add or Remove Effects
© Anselm Spoerri
Bitmap versus Vector graphics
Bitmap graphics are comprised of
pixels arranged in a grid.
Bitmap graphics are resolutiondependent.
Vector graphics describe images
using lines and curves, called
vectors, that include color and
position information.
Vector graphics are resolutionindependent.
© Anselm Spoerri
Fireworks – Setting Stage
Pixel-based
(cont.)
versus
Vector-based
– Each representation has its on tools!
Want to Perform Operation
1. Select Object
Or
Move (selection) cursor across image area
and different objects will be highlighted
and you can select them
 Get Visual Feedback in Image Area which object selected
2. Select Tool
3. Perform action(s)
4. (OK or Cancel Action(s))
When in “Trouble” …
– Make sure you selected intended object
© Anselm Spoerri
Fireworks – Layers Panel
Layers Panel
– Options menu
– Name, hide, show, and change stacking
order of layers and objects etc.
Name Layer or Object
– Layers Panel
– Double-click layer/object in Layers panel
– Type name for layer/object and press Enter
– Properties Inspector
– Type name in “Name” field
Activate Layer
– Click layer in Layers panel
– Select object on that layer in Image
Web Layer
–
Special layer that contains web objects, such as
slices & hotspots, used for assigning interactivity
to exported Fireworks documents
© Anselm Spoerri
Fireworks Toolbox - Selection
Pointer Tool
Use to “reveal” and select objects
“Behind tool” selects object that
is behind another object
Subselection Tool
selects individual object
within a group or points of
vector object
Crop Tool
Scale Tool
Scaling object enlarges or
reduces it horizontally,
vertically, or in both directions
Small triangle in lower right corner indicates
that it is part of a tool group.
Click tool icon and hold down mouse button
© Anselm Spoerri
Fireworks Toolbox – Pixels = Bitmap
Select Rectangle or Oval
Lasso or Polygon Selection
Magic Wand
Selecting areas of similar color
You specify range of colors to be included
Remove selection marquee:
• Draw another marquee.
• Click outside current selection.
• Press Esc.
• Choose Select > Deselect.
© Anselm Spoerri
Fireworks - Selection
Rectangular or Rounded, Circle
or Ellipse Selection
– Click tool icon and hold down mouse button
to choose shape of selection
– Square or Circle - hold down shift key while drag mouse
– Rounded  Select “Feather” in “Edge” Pull down in Property
Inspector (see below)
Specify Size or Proportions
© Anselm Spoerri
Fireworks – Lasso Selection
Lasso Selection
– Click tool icon and hold down mouse to choose shape of selection
– Both straight-edged and freehand segments possible
– Lasso
– Hold down mouse and draw shape - release of mouse closes shape
– To draw a straight-edged selection border, hold down Alt key (in
Windows) and click where segments should begin and end
– Polygon
– Mouse click creates corner - double click closes polygon
© Anselm Spoerri
Fireworks Toolbox - Vector
Write Text - Draw Lines, Paths …
© Anselm Spoerri
Fireworks Toolbox - Colors
Colors - Picker, Bucket …
© Anselm Spoerri
Fireworks - Image Size & Resolution
Set Image Size
– Properties Inspector
– Width and Height fields show image size
– Can modify Width / Height, but not linked in this dialog
– Modify > Canvas > Image Size
– Make sure width & height linked
(check “Constrain Proportions” box
 see “padlock” icon)
Set Image Resolution = 72 ppi
– Modify > Canvas > Image Size
– Set Resolution Field = 72
© Anselm Spoerri
Image Size and Resampling
Adds pixels to or subtracts pixels from a resized bitmap to match
the appearance of the original bitmap as closely as possible.
Resampling Up
- Adds pixels to make image larger
- May result in quality loss
Downsampling
- Removing pixels to make image smaller,
- Always causes quality loss
© Anselm Spoerri
Fireworks – Image Mode
Image Mode = RGB
– Color Mixer Panel
(if not visible: Window > Color Mixer)
– Select “Panel Options menu”
(upper right corner of panel)
– Select “RGB”
Although CMY is color model option, graphics directly exported from
Fireworks are not ideal for printing.
© Anselm Spoerri
Fireworks – Image Preview
How to Publish & Save “Fireworks” Score as GIF or JPEG Image?
File > Image Preview
Tabs
– Options
– Choose File Format
– GIF, Animated GIF, JPEG …
– Specify Format Parameters
– 2-Up, 4-Up Display
make sure that you selected option you want
– Crop + Zoom Tools
– File
– Specify File Width & Height
– Specify % Change
– Specify Width / Height
– Constrain and Link Width & Height
– Animation
– Change Timing
© Anselm Spoerri
Image Preview – Options Tab
Format Pull-down
Wizard + Specify File Size
Crop + Zoom Tools
2-Up, 4-Up Display
© Anselm Spoerri
Image Preview – File Tab
Specify Scale
• Set Desired %
• Specify Width / Height
Link Width & Height
© Anselm Spoerri
Fireworks - Step–by–Step
Crop Tool | Selection Tools | Text Tool | Animated GIF
© Anselm Spoerri
Step 0 – Download files and Initialize
Create folder
Download Files in Lec5 > Files > Step-by-Step Files
http://comminfo.rutgers.edu/~aspoerri/Teaching/WebDesign/Lectures/Lec5/Steps/
Open Fireworks
© Anselm Spoerri
Step 1a - Simple Image Manipulation
Create smaller version
– File > Open: “sunset.jpg”
– Zooming: select “magnification” tool (press ALT key to zoom out)
– Zoom in on specific area: drag over part of the image to magnify
– Modify > Canvas > Image Size
– Specify width = 256 pixels ( height = 192)
– File > Image Preview
– Export as “sunsetmedium.jpg”
(creates smaller version which doesn’t overwrite original)
© Anselm Spoerri
Step 1b – Image Preview
Open “sunsetmedium.jpg”
File > Image Preview
Select “4 Up” View:
Top Right: Select “GIF” format
–
Experiment with “Colors” setting
Bottom Left: Select “JPEG” format
–
Experiment with “Quality” setting
Bottom Right: Select “JPEG” format
–
Experiment with other JPEG settings
Select View with best trade-off between quality and file size
Click “Export”
(bottom middle of “Image Preview” display)
Save selected view
(make sure not to overwrite existing file …)
© Anselm Spoerri
Step 1c - Crop Image
Crop Image
– Select “Crop“ tool
– Specify Crop Area by holding mouse down and moving cursor
– Change size of crop area by interacting with its corner handles
– Move crop area by selecting inside crop area
– Specify Width & Height in Property Inspector
– Set Width and Height
– Can not automatically reduces/expands cropped image to specified size
– Double-click inside bounding box or press Enter
– File > Image Preview or File > Export
Create Series of Cropped Images
1. Create Cropped Image Area and Double-click
2. File > Export or Image Preview
3. Edit > Undo Crop Document and return to step 1.
© Anselm Spoerri
Step 2a – Selection Games
File > Open = “Lecture5demo1.png”
Polygon Lasso
– File > Open : “dancemedium.jpg”
– Select “Lasso“ tool
Click tool icon to select “Polygon Lasso”
(Edge = “Hard” in Property Inspector)
– Trace Outline of Dancer 1
– Repeatedly Click Mouse to place polygon corner along edge of Dancer 1
until you have traced Dancer 1
– Edit > Copy
– Window > select “Lecture5demo1.png”
– Edit > Paste
– New object is created with Dancer 1 bitmap
– Select this object and name it “Dancer 1”
(double-click object in Layer Panel)
– Repeat same polygon selection of Dancer 2
and copy and paste into “Lecture5demo1.png”
Save Fireworks file as “Lecture5demo2.png”
© Anselm Spoerri
Step 2b – Selection Games
(cont.)
Open file “Lecture5demo2.png”
Polygon Lasso
Fireworks does not have a “Magnetic Lasso”
– File > Open : “bilbaodogmedium.jpg”
– Select “Lasso“ tool
and mouse right click to select “Polygon Lasso”
– Trace Outline of Dog
– Repeatedly Click Mouse to place polygon corner along edge of Dog
until you have traced Dog
– Edit > Copy
– Window > select “Lecture5demo2.png”
– Edit > Paste
– New object is created with Dog
– Select this object and name it “Dog”
Save Fireworks file as “Lecture5demo3.png”
© Anselm Spoerri
Step 3a – Add Text
Open file “Lecture5demo3.png”
Create Text
– Select “Text” tool (“A” icon in Toolbox)
– Move Cursor & Click Mouse where you want text to start
– In Text Property Inspector, select type face and size = 14pt
and “smooth” for anti aliasing
– Type “Long Live … Delicious Kitsch”
 Many controls in Text Property Inspector as well as Text Menu
Save Fireworks file as “Lecture5Demo3a.png”
© Anselm Spoerri
Step 3b – Pace Text on Path
Open file “Lecture5demo3a.png”
Attaching Text to a Path
– Create Path using “Pen” tool in Vector Tool Section
– Click Mouse to create nodes of path
– Shift-select text block and path
– In Text Menu select “Attach to Path”
Select “Pointer” Tool (or arrows) to move object
Select “Text” Tool and select (part of) text for color change
– In Text Property Inspector click on color box to select new color
Save Fireworks file as “Lecture5Demo4.png”
© Anselm Spoerri
Step 4 - Create GIF Animations
Open Lecture5demo4.png
Open “States” Window: Window > States
Copy States
–
Drag State 1 to “New/Duplicate State” button
at bottom of States panel
OR Choose Duplicate State from States panel Options menu.
Specify Objects Visible in specific States
–
State 1 = only “sunset” layer selected
Set Duration = 0.5 sec
–
State 2 = “sunset” and “dancer 1” layers selected
–
State 3 = “sunset” and “dancer 2” layers selected
–
State 4 = “sunset”, “dancer 2” and “dog” layers selected
–
State 5 = “sunset”, “dancer 2”, “dog” and “text” layers selected
Set Duration = 1.5 sec
Export as “Animated GIF”
–
File > Image Preview > Select “Animated GIF” file format
Save Fireworks file as Lecture5demo5.png
© Anselm Spoerri
Resource: Fireworks – Stacking & Aligning Objects
Stacking
Within a layer, Fireworks stacks objects based on order of creation
To change stacking order of a selected object or group within layer:
Modify > Arrange > Bring to Front or Send to Back
Modify > Arrange > Bring Forward or Send Backward
to move object or group up or down one position in stacking order
Aligning
Align selected objects vertically along their right edge, center, or left
edge, or horizontally along their top edge, center, or bottom edge.
Modify > Align > Right / Left / Top / Bottom …
© Anselm Spoerri
Resource: Fireworks – Effects & Filters
Live Filters in Property Inspector
–
Apply filters in a reversible, nondestructive way
Don’t permanently alter pixels; can remove / edit them
–
Use filters as Live Filters whenever possible.
Live Filters more flexible, but slow down performance
–
Live Filters can be applied to objects,
but not to bitmap selection
 Solution: define an area of a bitmap and create a
separate bitmap from it, select new bitmap object
and then apply Live Filter to it
Filter Menu
–
Applies filters in an irreversible, permanent way
–
Can be applied to pixel selections
–
If applied to vector object, selection converted to bitmap
© Anselm Spoerri
Resource: Fireworks - Retouching Bitmaps
© Anselm Spoerri
Resource: Fireworks - Incrementally Create Selection
Adding to pixel selection
Hold down Shift and draw additional selection marquees
Subtract pixels from selection
Hold down Alt+Shift (Windows) or Option (Macintosh)
and use bitmap selection tool to select the pixel area to be subtracted
Select Menu options
© Anselm Spoerri
Image Composition – Readings
Course Website
- public
• Composition Rules
• Composition Balance
• Flickr: Learn Composition By Example
• Digital Photography Tutorials
• 10-Pro-Photography-Tips
eCollege
– private
Photographically Speaking: A Deeper Look at
Creating Stronger Images
by David duChemin
• Chapter 2 – Elements
• Chapter 3 – Decisions
© Anselm Spoerri
Image Composition - Rules
Rules of Thirds
Photoshop Elements – Cropping using Rules of Thirds
© Anselm Spoerri
Image Composition – Principles
Center of Interest – direct attention to primary idea of picture.
Viewer’s attention is directed by what subject is looking at
and should coincide with center of interest.
© Anselm Spoerri
Image Composition – Principles
Subject placement – Rule of Thirds | Dynamic Symmetry
Simplicity – One Idea per Image
Viewpoint and Camera Angle
Study subject from different sides, viewpoints (low, level, high)
and angles to establish clear center of interest.
Balance – Symmetry | Asymmetrical
© Anselm Spoerri
Image Composition – Principles
Shapes and Lines
Make Shapes more dominant by placing
them against contrasting backgrounds
Lines can structure photos.
Pattern
Pattern can create visual rhythms
Lighting Morning | Sunset
Light and shadows help create mood
© Anselm Spoerri
Image Composition – Principles
Texture
create Forms | Moods
Google Image Search
Tone
white | gray | black shadings
Contrast
Tonal | Color
© Anselm Spoerri
Image Composition – Principles
Framing Subjects enclosed by frame
become emphasized
Foreground | Background
© Anselm Spoerri