COMM 226 Digital Imaging
FALL 2010 (Subject to Change)
Aug 30, 2010 - Dec 16, 2010
Date Topic Assignment  Additional Readings and Support Files
Week 1  (August 30-September 03)
Su August 05
Last day for UG students to Add/Drop 
-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 CS5
"The Staging Area"
"Image Essentials"
Week 2  (September 6-10) 
Sept 06 Labor Day - Classes in Session
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 (part 1 and part 2)
Crop and Straighten
 Assignment 1 link

- 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 coms226a@yahoo.com 


Work on assignment. 
Assignment due Friday September 10, 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  (September 13-17)

Sept 13 Last day to Change P/F or Audit Options ALSO Census Date

Sept 17 Last day for UG to apply for Spring Graduation

- 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:

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
 

FREE Copyright Free Images

http://freestockphotos.com/

http://www.freedigitalphotos.net/

http://www.free-stockphotos.com/

http://www.public-domain-photos.com/

Free Images from my website

 

*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 (September 20-24)
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." 

Assignment 3 Link



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

 

Celebrity Photos edited (another example)

Week 5  (September 27- October 01) Paint, Edit, and Heal Cont..

TEST I (2nd class meeting)
_______________________________________
Assignment 3 continued
Continue working on Assignment 3

Study Guide
Week 6 (October 04-08) -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

Assignment 4 Link (step by step)


 

W3C School

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

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

Week 7 (October 11-15)
Oct 13 Mid-Semester grades due by 10:00 a.m. (W)
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"

Assignment 5 Link (step by step)

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 (October 18-22)
Oct 22 Last day for Individual Class Withdraws (from One or More Classes-Not All Classes) with grade of "W"
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 9 (October 25-29)
 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 10 (November 1-5)
(10/27/ registration for spring/summer classes begin)
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 (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)

 

Week 11 (November 8-12) 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:
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)

 

Week 12 (November 15-19)
Nov 16 Last day for University Withdraw (from all classes) with grade of "W"

 

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 13 (November 22-26)
Thanksgiving break November 20-28
 

THANKSGIVING

 

 

Week 14 (November 29-December 03)  

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 December 03, 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 (December 06-10)
Last day of classes 06/10
Final Project

DUE BY 12/06/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

 

EXAMPLE to COPY

Week 16 (December 13-17)
Grades dues by 10AM 12/20/2010 Final Exams 12/13-16
Final Project

DUE BY 12/06/2010

 


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