Digital Imaging MSTD 226
|
Semester Calendar Spring 2006 (Subject to Change) |
|||
|
|
Topics | Assignments | Additional Readings and Support Files |
|
Week 1 (January 9-13) |
Course Introduction Course of study Course Calendar
|
Go over assignment submissions via the
"H" Drive. Discuss digital image formats. Introduction to Adobe Photoshop. |
Digital Image Formats
|
| Week 2 (January 16-20) | Opening and organizing images in Photoshop New Features. "Making Selections" Taking photos |
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. The assignment is due by Friday Jan 27, 9:00 AM. - Introduction to Adobe Photoshop interface. - Practice using some of the basic tools - Discuss photography (analog and digital). |
Simulation: Create
a new folder Simulation: Cropping an image Simulation: Straightening an image taken at a crooked angle Simulation: Saving the image Simulation: Cropping and Straightening a scanned image.
PBS
American Photography Website
Text: Graphic Communications Today |
| Week 3 (January 23-27) | Selecting image elements Cropping, straightening, and sizing images |
Assignment 2: Part 1: Create a new folder within the public_html folder. Name the folder "selections" (lower case). Using the various selection tools covered in class create TWO images that have elements selected from at least THREE other images using a different selection tool for each.. The elements must be sized and cropped appropriately. Using the text tool add name and RU ID. 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. 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. The assignment is due by Friday Jan 27, 9:00 AM. Text: Adobe Photoshop CS2 One-on-One Lessons 4. "Making Selections." Work lab book assignment. Work on assignment Text: Adobe Photoshop CS2 One-on-One Lessons 5 "Crop Straighten and Size." Work on assignment. |
Practice Images Text: Graphic Communications Today
Simulation (Part one): Loading and accessing web pages from home via Radford Portal's "Unlimited FTP" program. Simulation (Part two): Loading and
accessing web pages from home via Radford Portal's "Unlimited
FTP" program. Simulations: using the "Filter Extract" selection method. Simulations: Magic Wand tool. Simulations: Moving selections between images. Other Tools Used: |
| Week 4 (January 30-Feb 3) | Paint, Edit, and Heal. Healing tools. |
Text: Adobe Photoshop CS2 One-on-One Lessons 6 "Paint, Edit, and Heal." Basic text in Photoshop. Assignment 3: Create a new folder within the public_html folder. Name the folder "restore" (lower case). Using the practice photos on the website, create four examples of image restoration using a combination of the paint, edit, or healing tools (one can be the "red eye" example image). Save all four original images AND completed images as a .JPEG file and as a .PSD file to the "restore" folder within the public_html folder. The assignment is due by Friday Feb 10, 9:00 AM. |
Text: Graphic Communications Today Ch 4 "Creative Typography" Red Eye Example |
| Week 5 (February 6-10) | Paint, Edit, and Heal. Healing tools. |
TEST I _______________________________________ Assignment 3 continued Continue working on Assignment 3 - Assignment due Friday Feb 10, 9:00 AM. |
|
| Week 6 (February 13-17) | Introduction to HTML Bandwidth Working with text Working with layers |
Text: Adobe Photoshop CS2 One-on-One Lessons 9 "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. - Image should be positioned on the page using HTML. - A border should be applied to the image. - The image should be a link to another site. - The image (when viewed via a browser) should contain ALT tag information with the assignment number and the student's first and last name. The final page should be viewable as a web page from the public_html folder by typing "www.radford.edu/~USERNAME/html." PART 2: 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. Assignment due Friday Feb 17, 9:00 AM. |
Text: Graphic Communications Today 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.
|
| Week 7 (February 20-24) | Creating a Transparent GIF
|
Text: Adobe Photoshop CS2 One-on-One Lessons 10 "Text and Shapes." Work lab book assignment. Assignment 5: PART 1: Create a new folder within the public_html folder. Name the folder "gif" (lower case). Using Adobe Photoshop CS2 create five different transparent GIF files. Save the five new transparent GIF files to the newly created "gif" folder. PART 2: Use Macromedia Dreamweaver to define the newly created "gif" folder. Once the "gif" folder has been defined, create a new page in Dreamweaver and save it as "index.htm." Again, using Dreamweaver, embed all of the new .GIF 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 "www.radford.edu/~USERNAME/gif" within the browser URL window. Assignment due Friday Feb 24, 9:00 AM. |
Text: Graphic Communications Today Ch 14 "Magazine Design and Redesign" 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. |
| Week 8 (February
27-March 3) Mid-Semester Grades Due March 1 by 10:00 AM |
Create rollover effects menu using Photoshop CS2 and Macromedia Dreamweaver MX 2004 | Assignment 6:
Create a new folder within the
public_html folder. Name the folder "buttons" (lower case). Using Adobe Photoshop CS2, create a series of five image buttons
and five corresponding buttons for rollover effects. Using Macromedia Dreamweaver MX 2004, create a menu at the top of the "index" page and add each of the five buttons, add the corresponding rollover effects buttons, and create links for each button. Also, add ALT tags for each button explaining its destination. There should be a different effect for each button. Files should be viewable as a web page from the public_html folder by typing "www.radford.edu/~USERNAME/buttons" within the browser URL window. Assignment due Friday March 3, 9:00 AM. |
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 Macromedia Dreamweaver (tutorial 3). |
| Week 9 (March 6-10) |
Create an image map using Adobe Photoshop CS2 |
Assignment 7: PART 1:
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 "www.radford.edu/~USERNAME/map" within the browser URL window. PART 2: Create a new folder within the public_html folder. Name the folder "web" (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 "www.radford.edu/~USERNAME/web"within the browser URL window. Assignment due Friday March 10, 9:00 AM. |
Online Test Example
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: PART 2: Simulation: Creating and saving the site (tutorial 1). Simulation: Editing and adding CSS in Dreamweaver (tutorial 2). |
| Week 10 (March
13-17) Spring Break - No Classes |
SPRING BREAK | SPRING BREAK | SPRING BREAK |
| Week 11 (March 20-24) | Layer effects Create a web banner. |
Text: Adobe Photoshop CS2 One-on-One Lessons 11. PART 1: Assignment 8: Create a new folder within the public_html folder. Name the folder "banner" (lower case). Using Adobe Photoshop, create five web banners (utilize techniques from the selections assignment). Save the five banners as .jpeg files to the newly created "banner" folder. Next, define the new folder using Macromedia 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. Finally, using Macromedia Dreamweaver, select a portion of each banner (using the "Hotspot Tool" in Macromedia Dreamweaver MX 2004) or the entire banner to link to the specified website. File should be viewable as a web page from the public_html folder by typing "www.radford.edu/~USERNAME/banner." Assignment due Friday March 24, 9:00 AM. |
Simulation: Create a new folder.
Simulation: Define your folder. Simulation: Using Macromedia Dreamweaver, add the new banners and add links. |
| Week 12 (March 27-31) | Create a web banner continued. |
Assignment 8: Continued. Continue working on web banner assignment. PART 2: Download the partially created banner to the right or create your own partially created banner. Using Macromedia Flash MX2004, add effects/text effects and save the output as an "animated GIF" file. Save the animated GIF file to the "banner" folder and using Macromedia Dreamweaver MX2004 (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). - Assignment due Friday March 31, 9:00 AM. |
Partial Banner Download: Simulation: Import the partially created .JPEG banner into Flash. Simulation: Adding a text layer and adding a motion tween effect. Simulation: Continue adding text effects to layer two. Simulation: Adding layer three text effects. Simulation: Adding final text layer four (with effects). Simulation: Saving and exporting animated GIF file. |
Week 13 (April 3-7) April 7 last day to withdraw with "w" |
Create a logo. | Assignment 9: Using
Adobe Photoshop (shape tools) and images taken earlier in the semester (if applicable),
create five different logos. 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. Create
a new folder within the public_html folder. Name the folder
"logo" (lower case). Embed the logo into an HTML file
(call it "index.htm") using Macromedia 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." Assignment due Friday April 7, 9:00 AM. ____________________________________ Text: Adobe Photoshop CS2 One-on-One Lessons 12. TEST II * |
Study Guide Simulation: Creating a new document (tutorial 1). Simulation: Using the "Shape" tools (tutorial 2). Simulation: Adding text (tutorial 3).
|
| Week 14 (April 10-14) | Printing and Output Page layout. |
Assignment 10: Create
a fictitious magazine cover layout (8" x 10.5")based on all information
covered in the course up to this point. Create a folder called "layout" (lower case). 1) Create layout. 2) Convert to CMYK color mode (from RGB). 3) Save as .PDF file. 4) 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." Assignment Due by Friday April 14, 9:00 AM. |
Text: Graphic Communications Today Ch 13, 14 (review) "Advertising Design" "Magazine Design and Redesign" 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 Macromedia Dreamweaver (step 4). |
| Week 15 (April 17-21) | Assignment 11: 5 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." Assignment Due by Friday April 21, 9:00 AM. |
Flash "Web Photo Gallery" tutorial | |
| Week 16 (April 24-28) April 28 - Last day of class |
Present Final Projects | Begin Creating/Finalizing Final
Project/Presentation PART 1: Create a main web-navigation page to link all of the assignments (1-11) and the web gallery together. Create a folder called "final" and save the web-navigation page as "index.htm." File should be viewable as an web page from the public_html folder by typing "www.radford.edu/~USERNAME/final." PART 2: On this navigation page, write a synopsis (three to five paragraphs) describing some of the tools, techniques, and processes used throughout the course for various assignments. Example Assignment Due by Wednesday April 28, 9:00 AM. |
Example |
| Week 17 (May 1-5) Final Exams Grades due May 8 (M) by 10:00AM |
Present Final Projects | Final Project Due by Wednesday May 3, 9:00 AM. | |
