COMM 226
Digital Imaging

rev. Jan 26

Spring 2011  with Bob Stepno

... with many thanks to Sam Jennings for the overall structure and Flash tutorials,
and to Lora Gordon and Bill Kovarik for assignment ideas and photojournalism connections

Explain/Discuss Digital Imaging - what is it 
why optimization 

Image formats used for the web, print media, and digital media 

Introduction of the course and its home page:

http://www.radford.edu/rstepno/226

Review of Macintosh OS-X desktop and networking

Overview of Adobe Photoshop interface
Intro to "H-drive" private and public spaces
Review library interface to Photoshop e-books
See Bob's bookmarks for coms226
http://delicious.com/bstepno/226

Exploring Photoshop CS5
"The Staging Area"
"Image Essentials"

Text: Adobe Photoshop One-on-One

Digital Image Formats by Bill Kovarik

Photoshop interface - 
menus, tools, palettes
new features
preferences
- Opening and organizing images in  Photoshop
- Cropping, straightening and optimizing. 
- Saving assignment - working with the .JPG format.
- File structure - creating directories and sub-directories within given web space.
- FTP (File Transfer Protocol).
- Taking photos - digital versus analog, scanning, digital camera quality settings.

Managing web pages and
Setting Web Permissions

- Introduction to Adobe Photoshop interface. 

- Practice using some of the basic tools

- Discuss photography (analog vs. digital). 
 
Work on assignment. 

Creating an "about" page with Dreamweaver

Watch for e-mail follow-up to Wednesday's class:

1. Set "public" permission so make your coms226 folder visible
2. Reminder to read the Photoshop One-on-One book
3. Reminder to watch the PBS video or start reading its transcripts and searching the Web for background about photographers it mentions. (Details on Photography Readings page)

Assignment I Downloadable Support Files
Crooked Image Example

Scanned Image Example

PBS American Photography Website
Kodak Photography Tips

More photography tips

Simulation: Create a new folder

Simulation: Straightening and cropping an image photograghed at a crooked angle

Simulation: Straightening and cropping a scanned image

Homework: Read the PBS American Photography Website

and PBS video on reserve at library (Details on Photography Readings page)

Week 3  (Jan 31 - Feb 4)

- Working with multiple layer compositions - creating multiple layers within Photoshop
- Selecting and transforming image elements - using selection tools within Photoshop. 
- Cropping, straightening, and sizing images
- Adding text - using the text tools within Photoshop. 

-Saving/Image Formats - .JPEG and .PSD.

Inserting images on Web pages with Dreamweaver using Bob's layouts. Save these HTML pages in your coms226 folder, then duplicate, edit, adapt and reuse as needed.

Simple two-column table layout

Large image, caption underneath; two images, caption underneath

• Intro to Photography & digital cameras (visit from Chris Carter)
• Discuss Photo.net's introduction to cameras, pixels and file formats.
• Add a paragraph to your "about" page that completes this sentence: "Before this class, my experience taking pictures consisted of..."
• Add an HTML page for the cropped photos.

Assignment 2:

Creating a collaged image using the selection tools (use the tutorials in the right cell to learn how to use the selection tools in Photoshop). Create THREE collaged images from FIVE images of your choice. Detailed steps are outlined via the link below:

Assignment 2 Link (Bob's version)

Copyright Free Images (included on both assignment sheets)

Put final collage images on one or more HTML pages using one of the templates in the left column. We will walk through this process in class.

Photo.net Digital Photo Intro

*Practice Images

Simulations: Rectangular Marquee tool.

Simulations: Eliptical Marquee tool.

Simulations: Selecting a Color Range. 

Simulations: Magnetic Lasso tool.

Simulations: Magic Wand tool. 

Simulations: Moving selections between images

Read the "Digital Truth" and "Presidential Image Making" sections of the PBS American Photography Website.

Paint, Edit, and Heal - Using the various healing and brush tools within Photoshop to retouch images (also retouch and restore older scanned images). 

Assignment 3:

"Paint, Edit, and Heal." 

Bob's updated Assignment 3 page (If there are problems with that page or its links to the tutorials, try Sam Jennings' original Asmt 3, just be sure to use your coms226 folder)

Put finished images on Web pages with Dreamweaver using Bob's layouts or your own design. Save these HTML pages in your coms226 folder, then duplicate, edit, adapt and reuse as needed. We will walk through this process in class.

Simple two-column table layout

Large image, caption underneath; two images, caption underneath

Read the "Persuasion," "Social Change," and "Cultural Identity" sections of the PBS American Photography Website.

Celebrity Photos edited (another example)

TEST I : Photography History (Wednesday)
_______________________________________
Assignment 3 continued
Continue working on Assignment 3 and catching up on 1 and 2

-Introduction to HTML - Create an HTML document (via Notepad/Textedit) to add  images, text, and hyperlinks. 
-Introduction to W3C School/Website.
-Bandwidth issues - calculating bandwidth.
-Calculating file size (bits, bytes, kilobytes, megabytes, gigabytes).
-Introduction to web editors

- Use Adobe Dreamweaver to add images, text, and hyperlinks.   
All content for assignments that are submitted as web pages within the specified sub-folders. 

Assignment 4:
 
Part 1: Working with HTML

Part 2: Working with DreamWeaver

The four "assignment 4 tutorial" movies on the right use Microsoft Windows Notepad to make a simple Web page using 1995-style HTML. The Macintosh program "TextEdit" can be used the same way. However, the videos use an out of date (or "deprecated") HTML tag called "center" -- we'll see the "new, improved" way in class.

Using plain HTML pages or Dreamweaver layouts, put samples of all your work on your coms226 site before you leave for Spring Break. Don't forget to set the permissions to "public" using MyRU!

W3C website

Bandwidth Calculators 

File Size Calculator

PRACTICE:

Simulation: Assignment 4 Tutorial 1

Simulation: Assignment 4 Tutorial 2

Simulation: Assignment 4 Tutorial 3

Simulation: Assignment 4 Tutorial 4

More information about adding an image to an HTML document. 

________________________

Using Adobe Dreamweaver

Simulation: Defining the "crop" folder in Dreamweaver

Simulation: Creating a new HTML document for the "crop" folder.

Assignment 5:

"Working with .GIF Format and Transparency"
"Correcting Over/Underexposure and Replacing Color"

Assignment 5 Link (step by step)

Digital Imaging Vocabulary test coming up: If you haven't read the textbook's first four chapters, do that over Spring Break!

Take-home test questions will be posted here on or about March 3.

Simulation: Create a new folder.

Simulation: Creating the transparent GIF

Simulation: Sizing and saving the transparent GIF

*Simulation: Defining the "gif" folder in Dreamweaver.

*Simulation: Creating the new .HTML page and embedding the images via Dreamweaver.

Simulation: Color Correction

Reading: Celebrity Photos Edited with Photoshop 

For March and April Assignments, see Sam's updated page

and Bob's Final Assignment Checklist

Take-home test on Digital Imaging Vocabulary (Due March 18)

Assignment 6:

"Creating an Image Map"

PART 1 (50%):

Create a new folder within the public_html/coms226 folder called "map." Download the Southeastern United States JPEG file (Right Click and save as) "Map1" and save it to the newly created "map" folder. 
First, use the paint bucket to add a different color to each state.
Next, use the Text tool to add the names for each state. 
Finally, using Slice tool, add links to each states using state government URLs (example: http://www.virginia.gov/) and corresponding ALT tags for each state (state name). Save the page as "map.htm" to the "map" folder. 
Files should be viewable as a web page from the public_html folder by typing "http://www.radford.edu/~USERNAME/coms226/map" within the browser URL window.
  
  PART 2 (50%):

Create a new folder within the public_html/coms226 folder. Name the folder "webmap" (lower case).  Inside the new folder create a website/image map with five links. The site should include at least a paragraph of  alt tag information to describe and explain each link.
Define and open the site in Dreamweaver to edit. Also, using Dreamweaver, duplicate the same links at the bottom of the page using CSS mouse over effects. 
 Files should be viewable as a web page from the public_html folder by typing "http://www.radford.edu/%7EUSERNAME/coms226/web" in the browser URL window.

Check-off sheet for finished "webmap" maps at class:
Assignment due by end of class time March 21.

Each late assignment loses a letter grade per day that it is late (starting after the first class period of the next week)

"Web Publishing - Slicing"

PART 1:

Simulation: Create a new folder called "map." (tutorial 1)

Simulation: Download the "map1.jpg" file to the "map" folder (tutorial 2).

Simulation: Use the Paint Bucket tool to add color to the image (tutorial 3).

Simulation: Use the Text tool to add a label to each state (tutorial 4).

Simulation: Use the Slice tool to select and add URL information for each state and save the site (tutorial 5).

Simulation: Test and preview the new site in the browser window (tutorial 6).

Image Map Example Site: 
Geography site

National Weather Service Site

PART 2:

Simulation: Creating and saving the site (tutorial 1).

*Simulation: Editing and adding CSS in Dreamweaver (tutorial 2)

In-class quiz on Digital Imaging vocabulary (to be announced)

BOB's REALITY CHECK WEEK: I am updating these assignments using new information from Sam.

For now, Check his version of the schedule here.

The assignmentshave changed from Sam's original version; our original "Assignment 7" instructions referred to old versions of Adobe's software. View the simulations demonstrating them on the right, but don't worry about trying to create the project described there until we meet on March 30.

In the meantime, just catch up with previous assignments and use the Photoshop tools you have learned on some of your own images.

Stay tuned to the course home page for selections from these Photoshop CS5 and Dreamweaver CS5 video assignments to take the place of the Monday March 28 class, so that Communication majors can attend the opening session of Communication Week, 5 p.m. March 28 in the Bonnie Auditorium.

You have used some Dreamweaver page layouts to position images, but we haven't discussed how Dreamweaver does its magic or why to choose one tool over another. Watch Adobe platform evangelist Paul Trani take it one step at a time by following the first five parts of his Dreamweaver tutorial.

We also might try to Do the Puppet Warp, one of the newer features in Photoshop.

Simulation: Creating a rollover effect for each button -part one.

Simulation: Creating a rollover effect for each button using DreamWeaver - part two.

_________________________

Simulation: Creating buttons in Photoshop (tutorial 1).

Simulation: Creating effects and saving buttons as GIF (tutorial 2).

*Simulation: Adding the images and rollover effects in Dreamweaver (tutorial 3).

___________________________

Assignment 8: 

PART 1 (50%):

Create a new folder within the public_html/coms226 folder. Name the folder "banner" (lower case).  Using Adobe Photoshop, create TEN web banners (utilize techniques from the selections assignment). Save the ten banners as .jpeg files to the newly created "banner" folder. Next, define the new folder using Adobe Dreamweaver. After defining the "banner" folder create a new page and add all five banners to that page. Save the page as "index" to the "banner" folder. Use the Interactive Advertising Bureau Guidelines site as a guide to create the following:

1 Full size horizontal banners (~2 x 7) or (1 x 5) = 5 pts
1 Half size horizontal banners (~2 x 3) or (1 x 2) = 5 pts
1 Full size verticle banners (~7 x 2) or (5 x 1) = 5 pts
1 Square banners (2 x 2) or (3 x 3) or (4 x 4)  = 5 pts  
1 Half size verticle banners (3 x 1) or (4 x 2) = 5 pts
Create 5 more banners of the specifications that you like = 25 pts

*Simulation: Define your folder.

Simulation (CS5): Create your banner in Adobe Photoshop (New)

*Simulation: Using Macromedia Dreamweaver, add the new banners and add links. 

Interactive Advertising Bureau
Guidelines

 Interactive Advertising Bureau
(Main Site)

Assignment 8: Continued.
Continue working on web banner assignment. 
PART 2 (50%):
Download the partially created banner to the right or create your own partially created banner. Using Adobe Flash, add  effects/text effects (3 layers) and save the output as an "animated GIF" file. Also, publish another file as a .SWF. 
A) Save the animated GIF file to the "banner" folder and using  Dreamweaver  (define the "banner" folder via Dreamweaver first), add the new animated GIF file to the "index.htm" page and make it a link (using either the "hotspot" tools or make the entire GIF image a link). Also, save/export one version as a .SWF file (Save original .FLA file within the "banner" folder). The banner (including the .SWF version) must have a live working link. 

B) Next, create your own example of an animated banner. There should be at least THREE layers of animated content. The banner (including the .SWF version) must have a live working link. 
25 pts. each = 50 pts.

Partial Banner Download:

Download image For graphics layer effect/animation

Simulation: Step 1a openning and saving Flash file (.FLA)

Simulation: Step 1

Simulation: Step 2

Simulation: Step 3

Simulation: Step 4

DOWNLOAD: Gas can image

Animated Banner example 

Animated Banner example 2

Research Article 2006 (AEJMC Archives)
Research Paper Abstract about CASA Research (Association for Education in Journalism and Mass Communication -AEJMC)

____________________

Magazine Cover Layout Example - use Photoshop to create a (8" x 10.5") fictitious magazine cover layout example. Save as .PDF.

Working with multiple layer .PDF files.

Assignment 9

Creating Logos  (Via Photoshop)

Using Adobe Photoshop (shape tools) and images taken earlier in the semester (if applicable), create five different logos (20 pts each). A logo can be for an organization, business, or club, or, can have a fictitious theme. Students will be introduced to the shape tools within Adobe Photoshop and reintroduced to the text tool and text effects. Use transparent backgrounds (.GIF format) for at least three of the images. Create a new folder within the public_html/coms226 folder. Name the folder "logo" (lower case).  Embed the logos into an HTML file (call it "index.htm") using Dreamweaver.  Also, save a copy of the logo as both a .PSD file and as a .PDF file. 
 File should be viewable as a web page from the public_html folder by typing "www.radford.edu/~USERNAME/coms226/logo"

E-mail URLs  to rstepno@radford.edu  
Assignment due Friday April 16, 9:00 AM
________________________________________________
Assignment 10

Creating a Magazine Cover Layout
(Working with .PDF format)

Create ONE fictitious magazine cover layout (8" x 10.5") utilizing all information and techniques covered in the course up to this point. Use only images from your "public_html/coms226/" folder.
Create a folder called "layout" (lower case).
1) Create cover. 2) Save as .PDF file. 
3) Create a web page using Dreamweaver (save to the "layout" folder as "index.html"), including a paragraph describing the magazine idea, a thumbnail of the cover image, and a link to the .PDF file.
File should be viewable as a Web page by typing "www.radford.edu/~USERNAME/layout."

E-mail URLs  to rstepno@radford.edu  
Assignment due Friday April 16, 9:00 AM

Each late assignment loses a letter grade per day that it is late (starting after the first class period of the next week)

Simulation: Using the "Shape" tools (tutorial 2).

Simulation: Adding text (tutorial 3).

___________________________

For examples of Layouts
Google.com | Images | Keyword: magazine covers. 

Simulation: Starting a layout (step 1). 

Simulation: Creating a layout (step 2).

Simulation: Saving the layout (step 3).

Simulation: Defining and linking in Dreamweaver (step 4). 

#11 is NO LONGER ASSIGNED; GIVE THIS A TRY IF YOU WANT MORE EXPERIENCE WITH FLASH. SEE FINAL ASSIGNMENT LINK BELOW

Assignment 11: 
TEN (10 pts each) photos must be either taken via camera or scanned. Images MUST BE the students own work. The images must be optimized for web display. 
Photos can be of people, places, things.  Students must explain the significance of each of the five photos.  
File should be viewable as a web page at "www.radford.edu/~username/coms226/webgallery"

Flash "Web Photo Gallery" tutorial

April update: No graded final exam; just the final Web site with links to all of your work and "response" essays. However, the study guide below is still a good reference to concepts and tools you have used.

Study Guide

For March and April Assignments, see Sam's updated page

and Bob's Final Assignment Checklist