COMM 226 Digital Imaging
SPRING 2010 (Subject to Change)
Date Topic Assignment  Additional Readings and Support Files
Week 1  (January 19-22) -Course Introduction
-Course of study
-Course Calendar 

-Explain/Discuss Digital Imaging - what is it and why optimization 

-Cover image formats used for the web, print media, and digital media 

 
Introduction of the course
Review course of study 
Intro to and overview of Adobe Photoshop interface
Digital Image Formats
Exploring Photoshop CS4
"Discovery Tour"
"The Staging Area"
"Image Essentials"
Week 2  (January 25-29) 
Last Day for UG students to Add/Drop Sunday 01/24/2010)
Photoshop interface
menus, tools, palettes
new features
preferences
- Opening and organizing images in  Photoshop.
- Cropping, straightening and optimization
- Saving assignment - working with the .JPEG 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.
Assignment I 
Crop and Straighten
  
Assignment 1: Part 1: Create a new folder within the public_html folder. Name the folder "crop" (ALL lower case letters). 
Using the tools and methods covered in class crop and straighten two different images. One is an image that was improperly scanned at an angle and the other was an photograph that was shot at a crooked angle. Save both images as .JPEG files and save within the newly created "crop" folder within the "public_html" folder.
.
Part 2:Students are required to take pictures using a digital and/or analog camera. Images will need to be in a digital format (.JPEG, GIF, .BMP) and placed on the "H" drive. Create a folder within the "H" drive called "mstd226images."
High resolution should be used and there should be a minimum of twenty images to use for future assignments. 

- Introduction to Adobe Photoshop interface. 

- Practice using some of the basic tools

- Discuss photography (analog vs. digital). 
 
E-mail URL (http://www.radford.edu/USERNAME/crop) to mstd226@yahoo.com 


Work on assignment. 
Assignment due Friday January 29, 9:00 AM.

*Managing web pages and Setting Web Permissions(By Dr. Bob Stepno)

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

Read the "Art" and "Photography of War" sections of the PBS American Photography Website.

Week 3  (February 1-5)
(Last day to change P/F or Audit Options 02/01 -Also Census date)
- Working with multiple layer compositions - creating multiple payers 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.

 

Assignment 2:

Part 1: Create a new folder within the public_html folder. Name the folder "selections" (lower case). Using Photoshop, create a new blank document. Using the various selection tools covered in class create THREE images that have elements selected from at least FIVE other images using a different selection tool for each.. 
The elements must be sized and cropped appropriately. Using the text tool list tools used to modify final product.  Save all of the original images and the new images as .JPEG files format to the newly created "selections" folder.
Part 2: Create a new, blank document. Using the "Text" tool, provide a small synopsis (about one paragraph) explaining the selection tools and processes you used to complete the first part of the assignment for each image Example. Save the blank text document as a .JPEG file into the "selections" folder.
Web Permissions must be set before I can access your submitted work.
 

E-mail URL (http://www.radford.edu/USERNAME/selections) to mstd226@yahoo.com 

Assignment due Friday February  5, 9:00 AM.

*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 "Presifential Image Making" sections of the PBS American Photography Website.

Week 4 (February 8-12) 
(Last day for UG to apply for Fall Graduation 02/05)
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." 
Basic text in Photoshop.
Create a new folder within the public_html folder. Name the folder "restore" (lower case). Using the practice photos on the website, create examples of image restoration (6 images total)  using a combination of the paint, edit, or healing tools (one can be the "red eye" example image). 
Save all of the original images AND completed images as a .JPEG file and as a .PSD file to the "restore" folder within the public_html folder. 

"Image Correction"
E-mail URL (http://www.radford.edu/USERNAME/restore) to mstd226@yahoo.com
Assignment due Friday February 12, 9:00 AM.

"Image Correction"

Red Eye Example

Healing Tools Image 1

Healing Tools Image 2

Healing Tools Image 3 

Healing Tools Image 4

Healing Tools Image 5 
(Old Image example)

Simulations: Using the "Dust & Scratch" filter (Photoshop CS3).

Before/After Red Eye .JPG

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

Celebrity Photos Edited with Photoshop 

Celebrity Photos edited (another example)

Week 5  (February 15-19) Paint, Edit, and Heal Cont..

TEST I (2nd class meeting)
_______________________________________
Assignment 3 continued
Continue working on Assignment 3
E-mail URL (http://www.radford.edu/USERNAME/restore) to mstd226@yahoo.com 
- Assignment due Friday February 19, 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)

Study Guide
Week 6 (February 22-26) -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:
 
"Building Layered Compositions." 
Work lab assignment
Assignment 4: PART 1:Create a new folder within the public_html folder. Name the folder "html" (lower case).
 Inside the new folder create an HTML page (index.htm) with an embedded image (JPEG or GIF file). Using HTML make the image a link to a particular site. 
- The page should display a title in the browser window (25pts). 
- A border should be applied to the image (25pts).
- The image should be a link to another site (25pts).
- The image (when viewed via a browser) should contain ALT tag information with the assignment number and the student's first and last name (25pts).

The final page should be viewable as a web page from the public_html folder by typing "http://www.radford.edu/~USERNAME/html."
 PART 2: Using Macromedia Dreamweaver (100 pts) Go back to the first three assignments and embed the before and after images in an HTML page. Save the new HTML pages as "index.htm" (all lower case letters) within the original source  folders. Also, use the "ALT" tag to add your name and assignment number. 

 

*Write a brief summary (at least one paragraph) on each page describing the assignment and what tools and processes were used. 

SET YOUR PERMISSIONS THROUGH THE PORTAL 
The final pages should be viewable as a web page from the public_html folder by typing 

"http://www.radford.edu/~USERNAME/crop."
"http://www.radford.edu/~USERNAME/selections.""http://www.radford.edu/~USERNAME/restore."
Assignment 4 Due
Friday February 26, 9:00 AM

E-mail URLs  to mstd226@yahoo.com 

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

W3C School

W3C website

Bandwidth Calculators 

File Size Calculator

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 Macromedia Dreamweaver 8.0.

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

Week 7 (March 02-05)
(Mid Semester Grades are due by 10AM 03-03) 
Introduction to the .GIF image format - use Photoshop to create .GIF images. 
Introduction to image transparency - Use Photoshop to create images with transparent backgrounds (.GIF format).
Image swap effect using Dreamweaver - to compare and contrast before/after image improvements. 
Using Photoshop to replace color and correct over/underexposed images - Use various filters and techniques to edit color and improve exposure issues with various digital image formats.
"Text and Shapes."

Assignment 5:

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


  PART 1: (50%): Create a new folder within the public_html folder. Name the folder "gif" (lower case). Using Adobe Photoshop create five different transparent GIF file examples. Save the five new transparent GIF files to the newly created "gif" folder.
PART 2 (50%): Create a new folder within the public_html folder. Name the folder "colorcorrect" (lower case). Using Adobe Photoshop CS4 to modify and correct the following underexposed and overexposed  images: Old Barn (1), The Met (2), Cave (3), and Garden (4)
Continue (using the tools and techniques covered in class) to correct overexposure and underexposure and color for the following images: 
Image 5 Image 6  Image 7  Image 8 Image 9 Image 10
Image 11 Image 12 Image 13 Image 14 Image 15 Image 16

 Use Adobe Dreamweaver to define the newly created "gif" and "colorcorrect" folders. 
Once the "gif" and "colorcorrect" folders have been defined, create a new page in Dreamweaver and save it as "index.htm" for each folder.  
Again, using Dreamweaver, embed all of the new images into the "index.htm" page. Use Dreamweaver image swap "rollover" effects option to create an effect to compare and contrast the original image to the modified image. 
Use Adobe Dreamweaver to define the newly created "gif" and "colorcorrect" folders. 
Once the "gif" and "colorcorrect" folders have been defined, create a new page in Dreamweaver and save it as "index.htm" for each folder.  
Again, using Dreamweaver, embed all of the new images into the "index.htm" page.
Save all work and set permissions. 
Files should be viewable as a web page from the public_html folder by typing "http://www.radford.edu/~USERNAME/gif" and "http://www.radford.edu/~USERNAME/colorcorrect"within the browser URL window. 

E-mail URLs  to mstd226@yahoo.com 
Assignment due Friday March 05, 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: 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 

Week 8 (March 08-12)
(Last day to withdraw from one or more classes but not ALL classes 10-23 with grade of "W")
 

 

 

 

SPRING BREAK

 

 

 

 
Week 9 (March 15-19)
Introduction to image maps. 

Use Photoshop to create an image map -
create layouts using selection tools and add slices (Slice tool) for hyperlinks to designated areas of image layout (X -Y coordinates). 

Assignment 6:

"Creating an Image Map"

PART 1 (50%):

  Create a new folder within the public_html 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/map" within the browser URL window.
  
  PART 2 (50%):

  Create a new folder within the public_html 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/~USERNAME/webmap."within the browser URL window.

E-mail URLs  to mstd226@yahoo.com 
Assignment due Friday March 19, 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)

 

"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)

 

Week 10 (March 22-26)
(10/27/ registration for spring/summer classes begin)
Creating Rollover Effects Within An Image Map Menu-
Create rollover effects menu using Adobe Photoshop CS3 and  Dreamweaver (image swap technique). 

Assignment 7

"Creating Rollover Button Effects Within An Image Map Menu"

Create a new folder within the public_html folder. Name the folder "menubuttons" (lower case). Using Adobe Photoshop CS4, create another image map with a  series of four image buttons with rollover effects (Or, download the .PSD file to the right and open it in Image ready). 
Next, use Adobe Image ready (if applicable) to add a different rollover effect for each button (a total of four or more buttons). 
*The "Up State" MUST be the SAME on each button to receive full credit. The "Over" and/or "Down" states must be present and DIFFERENT for each button.
Also, add a real URL and ALT tags (ALT tags to explain or describe the destination URL) for each button.
Once the process is complete save the new document as "index.htm" to the "menubuttons" folder within the "public_html" folder located on your "H" drive.
If necessary, use Dreamweaver to define the "menubuttons" folder and center the menu bar on the newly created "index.htm" page.
Remember that there should be a different effect for each button on the menu.
 Files should be viewable as a web page from the public_html folder by typing "http://www.radford.edu/~USERNAME/menubuttons" within the browser URL window.  

E-mail URLs  to mstd226@yahoo.com 
Assignment due Friday March 26, 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)

 

 

 

 

 

 

 

Creating an image map website with rollover buttons with rollover effects (Only use the first tutorials for Photoshop CS4 - Required).

Simulation (Via Adobe Site): Slice tool (ImageReady Effects)

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

___________________________

 

Week 11 (March  29-April 02) Creating static web banners
Using knowledge gained from previous assignments create ten static web banners.


Assignment 8: 

PART 1 (50%):

Create a new folder within the public_html 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


E-mail URLs  to mstd226@yahoo.com 
Assignment due Friday April 02, 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: Create a new folder.

*Simulation: Define your folder.

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

Interactive Advertising Bureau
Guidelines

 Interactive Advertising Bureau
(Main Site)

 

Week 12 (April 05-09)

(Last day to withdraw from ALL classes with grade of "W" 04/13)

Creating animated web banners
Create two animated .GIF and .SWF banners.

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.

E-mail URLs  to mstd226@yahoo.com 
Assignment due Friday April 09, 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)

 

Banner Info

Partial Banner Download:

Download image For graphics layer effect/animation

Simulation:
Importing the partially created static JPG banner

Simulation: Adding a text layer and adding a motion tween effect. 

Simulation: Making animated banner a link.

DOWNLOAD: Gas can image

Animated Banner example 


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

 

Week 13 (April 12-16) Creating Logos - use shape, selection, and text tools within Photoshop  to create logos. Use techniques and  processes from previous assignments to create and save as .GIF, .JPEG, .PDF, and .PSD files.

 

____________________

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 ten different logos (10 pts each). The 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 5 of the images.  Create a new folder within the public_html 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/logo."

E-mail URLs  to mstd226@yahoo.com 
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 "mstd226images" folder within your "public_html" folder. 
Create a folder called "layout" (lower case).
1) Create layout. 2) Save as .PDF file. 
3) Create a web page using Dreamweaver (save to the "layout" folder as "index") and create a link from this page to the .PDF file.
File should be viewable as a web page from the public_html folder by typing "www.radford.edu/~USERNAME/layout."

E-mail URLs  to mstd226@yahoo.com 
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: Creating a new document (tutorial 1).

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

 

 

Week 14 (April 19-23)  

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 from the public_html folder by typing 
"www.radford.edu/~USERNAME/webgallery."

E-mail URLs  to mstd226@yahoo.com 
Assignment due Friday April 23, 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)

TEST II

Flash "Web Photo Gallery" tutorial

 

Study Guide

 

Week 15 (April 26-30)
Last day of classes 04/30
Final Project

DUE BY 05/04/2010

 
FINAL PROJECT

Create a folder called "final" and create the following page as "index.html." 

Create a website/image map (only for the main page) using a Photoshop and Dreamweaver. 
 The main page should be a navigation page that leads to every assignment throughout the semester. The menu (each button) MUST be an image map with rollover effects.

*There will be a reduction of 50% if the menu is not an image map - with rollover effects.

The Final Project will also serve as an e-portfolio of the work done within the COMS 226 course throughout the semester.  On the navigation page, write a synopsis (five paragraphs) describing some of the tools, techniques, and processes used throughout the course for various assignments. 


There should be a paragraph written for each one of the individual assignment web pages describing the specific tools, techniques, and processes used for that particular assignment.

Legible readable text and clear graphics = 10 pts
Accurate terms and clear presentation of ideas = 10 pts
 Spelling, grammar, punctuation = 10 pts
Functioning links and navigation = 10 pts
Optimized (main page should be less than 100 KB) = 10 pts
Layout, creativity, color scheme, aesthetics = 20 pts
One paragraph synopsis's on each assignment page = 30 pts

Total of 100 points - 40% of final grade 



Additional points will be deducted accordingly for missing assignments. 

File should be viewable as a web page from the public_html folder by typing 
"www.radford.edu/~USERNAME/final."

*E-mail URLs  to sjennings15@radford.edu 
Assignment due Tuesday May 04, 11:00 AM

Each late assignment loses a letter grade per day that it is late.

 

Example
Week 16 (May 03-06)
Grades dues by 10AM 12/21 | Final Exams 05/03-07
 


FINAL PROJECT

File should be viewable as a web page from the public_html folder by typing 
"www.radford.edu/~USERNAME/final."

E-mail URLs  to sjennings15@radford.edu 
Assignment due Tuesday May 04, 11:00 AM

The FINAL Project loses a letter grade per day that it is late