Digital Media Production
Digital Media
Production
Anselm Spoerri PhD (MIT)
SC&I @ Rutgers University
aspoerri@rutgers.edu
anselm.spoerri@gmail.com
Digital Media Production
© Anselm Spoerri
Lecture 4 – Overview
Image Composition
–
Readings | Rules and Principles
Image Editing
–
–
Cropping Images | Scaling Images for Slideshows | Adobe TV Demos
Color | Web Graphics | Image Formats: GIF, JPEG
JavaScript Slideshows
–
–
CSS: position | z-index | width / height as % of Browser Size
jQuery | Customize Galleria, Galleriffic and Supersized slideshows
Programming Concepts
JavaScript and Document Object Model (DOM)
–
Data Types, Variables, Operators, Statements, Function and Control Structures
–
Document Object Model (DOM)
–
Image Rollovers
Lectures – Week 4 Content
http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures.html#week4
Digital Media Production
© 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
Digital Media Production
© Anselm Spoerri
Image Composition - Rules
Rules of Thirds
Photoshop Elements – Cropping using Rules of Thirds
Digital Media Production
© 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.
Digital Media Production
© 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
Digital Media Production
© 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
Digital Media Production
© Anselm Spoerri
Image Composition – Principles
Texture
create Forms | Moods
Google Image Search
Tone
white | gray | black shadings
Contrast
Tonal | Color
Digital Media Production
© Anselm Spoerri
Image Composition – Principles
Framing Subjects enclosed by frame
become emphasized
Foreground | Background
Digital Media Production
© Anselm Spoerri
Image Editing – Photoshop Elements
Video Demos – Preparing Images for Slideshow
– Resize
– Crop: Thumbnail | Rule of Thirds
Video Demos – Adobe TV
– Overview
– Organize
– Select & Edit
– Text
– Effects
– Collage & Merge
Digital Media Production
© Anselm Spoerri
Image Editing – Changing Size
Image > Resize > Image Size
Select “Constrain Proportions”
and “Resample Image” checkboxes
Specify Desired Width or Height
File > Save As
– Select JPEG
– JPEG Options: Highest Quality
Digital Media Production
© Anselm Spoerri
Image Editing – Cropping
Image > Crop
Aspect Ratio: Use Photo Ratio | Custom
– Custom: specify Width and Height
Overlay: Rule of Thirds | Golden Ratio
File > Save As
– Select JPEG
– JPEG Options: Highest Quality
Digital Media Production
© Anselm Spoerri
Color
Large Areas = Low Saturation = Subtle color
Background / minor elements = Subtle pastel colors
Small Areas = High Saturation = Bold color
Maximum emphasis = Bold, saturated primary colors
Digital Media Production
© Anselm Spoerri
Color
(cont.)
RGB Color used by Monitor
– Direct Light, Not Reflected
Indexed Color
– Limited Selection of Colors: up to 256 colors
– To Reduce File Size
– Color not in the Palette is Approximated and “Dithered”
Creating Web-Safe Colors
– All combinations of 0%, 20%, 40%, 60%, 80%, 100%
for Red, Green and Blue
– 6to3 = 216 colors
– Affects Illustrations, Drawings more than Photographs
– Fireworks has Web-safe Palette
Digital Media Production
© Anselm Spoerri
Web Graphics
Bitmapped or Raster Graphics
– Paint and Photo Programs
Object or Vector-based Graphics
– Draw and Illustration Programs
– Use Mathematical Representation for Shapes
– Used to Create Original Artwork
Artwork Converted into Bitmap using
Fireworks
Anti-aliasing (smoothing)
– Increases file size
Digital Media Production
© Anselm Spoerri
Image 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
Digital Media Production
© Anselm Spoerri
Save Image for Web
RGB Mode
72 ppi
Indexed Color Mode
Reduced Color Palette
– Adaptive Palette
Interlaced
Digital Media Production
© 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
Digital Media Production
© 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
Digital Media Production
© Anselm Spoerri
Key Programming Concepts
Key Programming Concepts
data types
numbers, text, boolean (true, false)
variable = container of data
array = collection of data organized in a sequence
statement
= combination of variables, operators and data
 group of statements
 function
= collection of statements to perform specific task
perform test: true or false
if (test) then
for loop: where do we start? when are done? how to continue?
Digital Media Production
© Anselm Spoerri
Programming Concepts – Overview
Data Types: such as numbers,
text, boolean (true, false)
‒
Integer | Boolean | Character | String | Floating-Point
‒
Array: [5, 4, 7]
(use FOR loop to examine each array item)
Variable: is way to symbolically
‒
to refer to data content
scores = [5, 4, 7];
Operators: can be used to perform built-in operations
‒
5 +5;
(where + is addition operator)
Statement: combination
‒
of variables, operators and data
total = 12 * monthly_average;
Digital Media Production
© Anselm Spoerri
Programming Concepts – Overview
Function:
collection of statements to perform specific task
function add_scores (score1, score2)
{
return (score1 + score2);
}
total = add_scores (3, 4);
Conditional Programming
used so that operations are
performed only if certain condition is met:
‒ IF test (only do something if certain condition is true)
‒ FOR loop (keep doing something only if certain condition is true)
‒ WHILE loop (keep doing something until certain condition not
true anymore)
Debugging code
is essential part of programming ...
chasing typos, missing parentheses :)
Digital Media Production
© Anselm Spoerri
JavaScript
JavaScript
– Client-side scripting language
– Programs embedded as plain text in HTML of Web page,
<script type="text/javascript"> … </script>
– Since text, viewable to the world and for security reasons, scripts
are limited in what they can do
– Browser executes program as it loads page,
integrating dynamic output of program with static content of HTML
– Used to access to elements of HTML document.
– Validate form data
– Create dynamic user interaction such as checking email address
validity in input forms and interactive page elements …
– Major implementation differences between different browsers.
Digital Media Production
© Anselm Spoerri
JavaScript – Data Types, Variables, Operators, Statements
Data Types
– only three primitive data types
Boolean: true, false
Variables
Number: 5, 7.45
String: “Hello World”
= holds value of specific data type
– sequences of letters, digits, and underscores
– start with a letter or underscore
– variables names are case-sensitive
sci_550 = true; create variable sci_550 and set it to true
var count = 100; create variable count and set it to 100
Operators
count = 15 + 8 - 7
count += 5
n++
count = 5 * temp
“Hello” + “World”
Statements
Instructions end with semicolon … If missing, automatically inserted
Assignment : total = earn1 – spend1
Return value from function: return total
Digital Media Production
© Anselm Spoerri
JavaScript – Arrays
Array stores a sequence of items, accessible via an index
items = new Array(10);
items = new Array();
// allocates space for 10 items
// if no size given, will adjust dynamically
items = [0,0,0,0,0,0,0,0,0,0];
items.length
// can assign size & values []
// the number of items in the array
To access array element, use [index]
for (i = 0; i < items.length; i++) {
document.write(items[i] + "<br>");
// displays elements
}
Digital Media Production
© Anselm Spoerri
JavaScript : Function
Functions
function name (para1, para2, …) { … }
Reusable code that consists of Collection of “statements”
Takes one or more values as input “parameters”
Returns “result” value
function convertToCelsius(f) {
var celsius = 5/9 * (f-32);
return celsius;
}
var f = 50;
c = convertToCelsius(f);
Digital Media Production
© Anselm Spoerri
JavaScript : Control Structures
Control Structures
Sequential
top to bottom
Conditional
if (test) { … } else { … }
Repetition
for (i=0; i<100; i++) { … }
Boolean Operators
x == y
x != y
x>y
x <= y
x && y
x || y
!x true if x
true if x and y are equal
true if x and y are not equal
true if x is greater than y
true if x is smaller than or equal to y
true if both x and y are true
true if either x or y is true
is false
Digital Media Production
© Anselm Spoerri
JavaScript – Some Uses
Display information based on Time of Day
JavaScript can check the computer's clock and pull the appropriate data
based on the clock information.
Detect Visitor's Browser
this lecture
JavaScript can be used to detect the visitor's browser, and load another page
specifically designed for that browser.
Validate Forms Data
next lecture
JavaScript can be used to validate form data at the client-side saving both
the precious server resources and time.
Add Interactivity to Website
this lecture
JavaScript can be set to execute when something happens, like when a user
moves mouse over an image.
Create Cookies
JavaScript can store information on the visitor's computer and
retrieve it automatically next time the user visits your page.
Change Page Contents Dynamically
JavaScript can change the display of content without the involvement of
server programs. It can read and change the content of an HTML elements
or move them around pages.
Digital Media Production
© Anselm Spoerri
JavaScript – Stored Where
Location of JavaScript
External file
<script type="text/javascript" src="script.js"></script>
External .js file: must not include any <script> or </script> tags
<head>
<script type="text/javascript“>script code</script>
Place code here to be available when page loads
<body>
<script type="text/javascript">
document.write("<h2>Using JavaScript</h2>");
document.write("Hello World. Today is " + Date() );
</script>
Places h2 and “Hello World. Today is [current date]” in page where JavaScript is located
Digital Media Production
© Anselm Spoerri
JavaScript Example
<html>
<head><title>Hello World</title></head>
<body>
<script type="text/javascript">
document.write("Hello World") ;
</script>
<noscript>
Your browser doesn't support or has disabled JavaScript.
</noscript>
</body>
</html>
Tasks
• Change Text and apply h2 tag
• Add "+ Date()" to text being displayed
• Add paragraph before and after where JavaScript is inserted
http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec4/Steps/HelloWorld.html
Digital Media Production
© Anselm Spoerri
JavaScript and Document Object Model
Document Object Model
http://en.wikipedia.org/wiki/Document_Object_Model
Platform- and language-neutral interface that allows
programs and scripts to dynamically access and update
the content, structure and style of documents.
Examples
–
–
–
–
document.write()
document.images[0]
document.links.linkname.href
document.getElementById("id")
Reference, Tutorial and Examples
http://www.w3schools.com/jsref/default.asp
See Lectures: Week 8 for more resources.
Digital Media Production
© Anselm Spoerri
Document Object Model
url = document.links.linkname.href
Digital Media Production
© Anselm Spoerri
Access HREF using JavaScript and DOM
<html>
<head><title>Link Test</title></head>
<body>
<a id="mylink" href="http://comminfo.rutgers.edu">SCI</a>
<br />
<script>
url = document.links.mylink.href ;
// variable //
document.write('The URL is ' + url);
// access DOM //
</script>
</body>
</html>
http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec4/Steps/linkJavaScript.html
Digital Media Production
© Anselm Spoerri
JavaScript – Detect Visitor's Browser
<body>
<script type="text/javascript">
document.write(navigator.appName);
document.write("<br />");
document.write(navigator.appVersion);
document.write("<br />");
document.write(navigator.userAgent);
document.write("<br />");
</script>
</body>
http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec4/Steps/BrowserDetect.html
More Info: http://www.javascriptkit.com/javatutors/navigator.shtml
Digital Media Production
© Anselm Spoerri
Image Rollover JavaScript
<head>
<script type="text/javascript" language="JavaScript">
littlecat = new Image(143,83)
littlecat.src = "real.jpg"
bigcat = new Image(143,83)
bigcat.src = "dream.jpg"
</script>
</head>
<body>
<img src="real.jpg" name="catpic"
onmouseover="document.catpic.src = bigcat.src"
onmouseout="document.catpic.src = littlecat.src"
/>
</body>
http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec4/Steps/imagerollover.html
Digital Media Production
© Anselm Spoerri