-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

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

Sept 17 Last day for UG to apply for Spring Graduation

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

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.

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)

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

Assignment 4:
 
Part 1: Working with HTML

Part 2: Working with DreamWeaver

Assignment 4 Link (step by step)

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.

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 

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)

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)

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

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)

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

THANKSGIVING

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

DUE BY 12/06/2010

EXAMPLE to COPY

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