Semester Calendar Summer I 2010 (Subject to Change)

Week 1 (May 17-20) Monday May 17

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

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

- Introduction to Adobe Photoshop interface. 

- Practice using some of the basic tools

- Discuss photography (analog vs. digital). 
 

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.

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.
 

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.

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)

*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

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.

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. 

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 

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

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)

Tuesday June 1

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.  

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

*Simulation: Define your folder.

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

____________________

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

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

Monday June 7

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

DUE BY 06/18/2010

Work on final Project