Web Production  COMS 226
COURSE OF STUDY

Semester Calendar Summer I 2010 (Subject to Change)

Topics Assignments Additional Readings and Support Files 

Week 1 (May 17-20) Monday May 17

-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 1
Tuesday May 18
Last day to Add/Drop for UG students
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). 
 

 

*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 1
Wednesday May 19
- 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.
 

 

*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 1
Thursday May 20
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"

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 2  
Week 2 (May 24-27) Monday May 24 Paint, Edit, and Heal Cont.. TEST I 
_______________________________________
Assignment 3 continued
Continue working on Assignment 3


Study Guide
Week 2 
Tuesday May 25
-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

 

 

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 2 
Wednesday May 26
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. 

 

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 2 
Thursday May 27
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.

 

"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 3   
Week 3 (May 31-June 4)
Monday May 31
Memorial Day No Classes Memorial Day No Classes
Memorial Day No Classes
Week 3

Tuesday June 1

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.  

 

 

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 3 
Wednesday June 2
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


 

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 3
Thursday June 3
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.

 

 

anner 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 3
Thursday June 4
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."

 

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 4  
Week 4 (June 7-10)

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

 

Week 4
Tuesday June 8
Final Project

DUE BY 06/18/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 June 18, 9:00 AM

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

 

 

Example
Week 4
Wednesday June 9
  Work on final Project  
Week 4
Thursday June 10
 

Work on final Project

 
    WEEK 5  
Week 5 (June 14-17)
Monday June 14
  Work on final Project  
Week 5
Tuesday June 15
  Work on final Project  
Week 5
Wednesday June 16
  Work on final Project  
Week 5 EXAM
Thursday June 17
  Work on final Project  
Week 5 EXAM
Friday June 18
Final Project Due by Friday June 18, 9:00 AM. Final Project Due by Friday June 18, 9:00 AM. Final Project Due by Friday June 18, 9:00 AM.