© Anselm Spoerri

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 Kalmanyou 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.

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

© 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

© 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 FormatsExport as a GIF or JPEG

© Anselm Spoerri

Fireworks – Property Inspector

Transparency Control

Blending Control

Image Effects ControlCan Add or Remove Effects

© 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.

© 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

© 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

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

© 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.

© 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

© 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

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

© 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.

© 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

© 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

© Anselm Spoerri

Image Preview – Options Tab

Format Pull-down

2-Up, 4-Up DisplayCrop + Zoom Tools

Wizard + Specify File Size

© 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 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.

© 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 Images1. Create Cropped Image Area and Double-click2. File > Export or Image Preview3. 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 2and 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 = 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”

© 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

© 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

© 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 …

© 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

© 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 selectionHold 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 windowLearn CSS Positioning in 10 Steps

z-index property – specifies stack order of an element

width / height as % of Parent – width: 50%; height: 75%;

JavaScript | jQueryjQuery = 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