Lecture 5
Meaning
– Visual Storytelling and Colors - Food for Eyes
– Image Composition
– Readings | Rules and Principles
Mechanics
– Fireworks
– Create smaller image to reduce file size | Save to Web
– Crop Tool | Selection Tools | Text Tool
– Animated GIF
– JavaScript Slideshows
– CSS: position | z-index | width / height as % of Browser Size
– jQuery | Customize Galleria, Galleriffic and Supersized slideshows
© Anselm Spoerri
Food for Eyes
Visual Storytelling
COLORS Layouts
narrated and Ex3 examples
(numbers associated with layouts different from ones used in Week 3, since
when I recorded narration (noisy background :) more layouts incl. in Week 3).
COLORS Magazine
Initial Designer: Tibor Kalman
you might enjoy exploring …
#25: Fat
#26: Time
#28: Touch
#31: Water
#47: Madness
and others
© 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
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 “mplec5”
Download Files and Images
http://www.scils.rutgers.edu/~aspoerri/Teaching/MPOnline/Lectures/Lecture5/stepbystep/
– Select ZIP file = “stepbystep.zip”
You can also download files individually  more time, but free
– File Download Dialog: select “Open”
– Extract into “mplec5”
and make sure to extract all files.
© 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 Slideshow – CSS, JavaScript and jQuery
CSS Properties
position property of an element
– position: static; default | appear in document / linear flow
– position: relative; positioned relative to its normal position
– position: absolute; positioned relative to first non-static parent
– position: fixed; relative to browser window
Learn CSS Positioning in 10 Steps
z-index property
– specifies stack order of an element
width / height as % of Parent
– width: 50%; height: 75%;
JavaScript | jQuery
jQuery = JavaScript library that makes JavaScript programming easier
© Anselm Spoerri
Image Slideshow – Galleria | Galleriffic | Supersized
Galleria
http://galleria.io/themes/classic/ |
Demo
Width: % to width of slideshowDIV
Thumbnail: scaled versions of large images
Galleriffic
http://www.twospy.com/galleriffic/example-5.html |
Demo
Widest Image: specifies width of slideshow
Highest Image: specifies height of slideshow
Width to use: 500px
Thumbnail: 75px x 75px
Supersized
http://www.buildinternet.com/project/supersized/ |
Demo
Screen filling
High Resolution Images
Width to use: 1200px
Thumbnail: scaled image and still high resolution
© Anselm Spoerri