Page 1
© Anselm Spoerri
Lecture 5
Housekeeping– Exercise 1
– Score & feedback Make use of option to improve score
– Exercise 2 category about YOU
Example … see also other examples of previous students work in Lecture 1
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
Page 2
© 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 Kalmanyou might enjoy exploring …
#25: Fat
#26: Time
#28: Touch
#31: Water
#47: Madness
and others
Page 3
© 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
Page 4
© Anselm Spoerri
Image Composition - Rules
Rules of Thirds
Photoshop Elements – Cropping using Rules of Thirds
Page 5
© 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.
Subject placement – Rule of Thirds | Dynamic Symmetry
Simplicity – One idea per Image
Viewpoint and Camera AngleStudy subject from different sides, viewpoints (low, level, high) and angles to establish clear center of interest.
Balance – Symmetry | Asymmetrical
Page 6
© Anselm Spoerri
Image Composition – Principles
Subject placement – Rule of Thirds
Simplicity – One Idea per Image
Viewpoint and Camera AngleStudy subject from different sides, viewpoints (low, level, high) and angles to establish clear center of interest.
Balance – Symmetry | Asymmetrical
| Dynamic Symmetry
Page 7
© 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
Page 8
© Anselm Spoerri
Image Composition – Principles
Texture
create Forms | Moods Google Image Search
Tone
white | gray | black shadings
Contrast Tonal | Color
Page 9
© Anselm Spoerri
Image Composition – Principles
Framing Subjects enclosed by frame become emphasized
Foreground | Background
Page 10
© 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
Page 11
© 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)
Page 12
© 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
Page 13
© 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 FormatsExport as a GIF or JPEG
Page 14
© Anselm Spoerri
Fireworks – Property Inspector
Transparency Control
Blending Control
Image Effects ControlCan Add or Remove Effects
Page 15
© Anselm Spoerri
Bitmap versus Vector graphics
Bitmap graphics are comprised of pixels arranged in a grid.
Bitmap graphics are resolution-dependent.
Vector graphics describe images using lines and curves, called vectors, that include color and position information.
Vector graphics are resolution-independent.
Page 16
© Anselm Spoerri
Fireworks – Setting Stage (cont.)
Pixel-based versus Vector-based– Each representation has its on tools!
Want to Perform Operation1. Select Object
Or
Move (selection) cursor across image areaand different objects will be highlighted and you can select them
Get Visual Feedback in Image Area which object selected
2. Select Tool3. Perform action(s)4. (OK or Cancel Action(s))
When in “Trouble” …– Make sure you selected intended object
Page 17
© 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
Page 18
© Anselm Spoerri
Fireworks Toolbox - Selection
Small triangle in lower right corner indicates that it is part of a tool group.
Click tool icon and hold down mouse button
Pointer ToolUse to “reveal” and select objects
“Behind tool” selects object that is behind another object
Subselection Toolselects individual object within a group or points of vector object
Crop Tool
Scale ToolScaling object enlarges or
reduces it horizontally, vertically, or in both directions
Page 19
© Anselm Spoerri
Fireworks Toolbox – Pixels = Bitmap
Select Rectangle or Oval
Lasso or Polygon Selection
Magic WandSelecting 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.
Page 20
© Anselm Spoerri
Rectangular or Rounded, Circleor 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
Fireworks - Selection
Page 21
© 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
Page 22
© Anselm Spoerri
Fireworks Toolbox - Vector
Write Text - Draw Lines, Paths …
Page 23
© Anselm Spoerri
Fireworks Toolbox - Colors
Colors - Picker, Bucket …
Page 24
© Anselm Spoerri
Set Image Size– Properties Inspector
– Width and Height fields show image size– Can modify Width / Height, but not linked in this dialog
Fireworks - Image Size & Resolution
– 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
Page 25
© Anselm Spoerri
Image Size and Resampling
Resampling Up
Adds pixels to make image larger
May result in quality loss
Downsampling
Removing pixels to make image smaller,
Always causes quality loss
Adds pixels to or subtracts pixels from a resized bitmap to match the appearance of the original bitmap as closely as possible.
Page 26
© Anselm Spoerri
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.
Fireworks – Image Mode
Page 27
© 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 Displaymake 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
Page 28
© Anselm Spoerri
Image Preview – Options Tab
Format Pull-down
2-Up, 4-Up DisplayCrop + Zoom Tools
Wizard + Specify File Size
Page 29
© Anselm Spoerri
Image Preview – File Tab
Specify Scale• Set Desired %• Specify Width / Height
Link Width & Height
Page 30
© Anselm Spoerri
Fireworks - Step–by–Step
Crop Tool | Selection Tools | Text Tool | Animated GIF
Page 31
© Anselm Spoerri
Step 0 – Download files and Initialize
Create folder “mplec5”
Download Files and Imageshttp://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.
Page 32
© 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)
Page 33
© 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 …)
Page 34
© 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 Images1. Create Cropped Image Area and Double-click2. File > Export or Image Preview3. Edit > Undo Crop Document and return to step 1.
Page 35
© 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 2and copy and paste into “Lecture5demo1.png”
Save Fireworks file as “Lecture5demo2.png”
Page 36
© 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”
Page 37
© 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 = 14ptand “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”
Page 38
© Anselm Spoerri
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”
Step 3b – Pace Text on Path
Page 39
© 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 panelOR 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
Page 40
© 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
AligningAlign 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 …
Page 41
© Anselm Spoerri
Resource: Fireworks – Effects & Filters
Live Filters in Property Inspector
– Apply filters in a reversible, nondestructive wayDon’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
Page 42
© Anselm Spoerri
Resource: Fireworks - Retouching Bitmaps
Page 43
© Anselm Spoerri
Resource: Fireworks - Incrementally Create Selection
Adding to pixel selection Hold down Shift and draw additional selection marquees
Subtract pixels from selectionHold down Alt+Shift (Windows) or Option (Macintosh)and use bitmap selection tool to select the pixel area to be subtracted
Select Menu options