Introduction to Computer Science – CSC101
Lab #7 – Photoshop II: Image Manipulation
Due: August, 3 2011 @ 5:00pm (Wednesday)
Points will be deducted for labs that are turned in late!
Your Name: __________________
Summer II 2011
WFU E-mail Address:_________________
Pre-Lab Reading Assignment:
If you have not completed the Pre-Lab instructions then stop now and complete
them. They can be located by going to http://www.wfu.edu/~pryoree and then to
Course Calendar.
Lab Objectives:
1)
2)
3)
4)
To
To
To
To
further gain familiarity with Adobe Photoshop
learn how to replace image content with Photoshop
understand color tables and the GIF format
use tutorials to edit an image
Grading:
-
-
You will be adding another page to your website. This page will display
the three files that you will edit in this lab (image1.jpg, before.jpg,
after.jpg)
o These images will need to display on the following webpage:
o http://www.wfu.edu/~user/csc101/lab7/lab7.html
Point values for the lab are as follows:
o image1.jpg – 2 pts
o questions in this lab (Q1, Q2, Q3) – 3 pts
o after.jpg – 10 pts
o description of how you edited after.jpg – 5 pts
Lab Instructions:
I.
Getting Started:
1. Download the three files needed for today’s lab from the course
webpage. These three files are:
i. sky.psd
ii. devils-tower.jpg
iii. color-table.psd
2. Save these three files in your userdata/lab7 folder
II.
Selectively Replacing Image Content
1. In Photoshop, open the file sky.psd and devils-tower.psd.
2. Select the whole of the sky image (what is the best way to do this?),
and copy it (Edit -> Copy)
3. Switch to devils-tower.psd and select only the sky in the image. To do
this, apply what you have learned about selection tools and techniques
in the last lab to make the selection.
4. Choose Edit -> Paste Into. The sky from the first image should now
be pasted into the selection. See example below to verify your
modified image.
5. Choose File -> Save As. Change the Format to JPEG. Save the file as
image1.jpg. Use 8 as the quality for your JPEG.
Original: with blue sky
III.
Result: blue sky replaced with another image
Understanding GIF images.
Many image formats such as GIF rely on the use of color tables. In this type of
image each pixel contains a number referring to a table of colors, rather than
containing Red-Green-Blue intensities. In this exercise we’ll help you explore
how color tables work.
1. Open color-table.psd. Click OK if you receive a warning when you
open the file. There are six colors in the image and we will work with
it as an “Indexed Color” image.
2. Make sure that the “Info” window is visible in the upper right of your
screen. Choose Image > Mode > Indexed Color. In the option
popup, choose Exact for the Palette option, and None for the Forced
option. Uncheck Transparency. Click OK.
3. Move the cursor over each of the six colors and write down the index
number of each color. The index can be read in the Info window as
Idx (below the RGB values).
Q1.
Write the index number (Idx) for each of the six colors below.
4. Look at the color table: choose Image > Mode > Color Table...
Q2.
The color table for the above image should look like this:
Move the cursor over each of the six colors in the color table and note their
indexes. Does each color match the color with the same index number you
wrote down in the previous question?
Q3.
Now change the entries in the Color Table from Custom to System (Mac OS).
(i) Do the index numbers of the colors in the image change?
(ii) If you’ve done this correctly, the colors in the image will change to shades of
Yellow but the index numbers will not have changed. Explain why.
5. Close the color-table.psd file without saving it.
IV.
Editing Images
Here is your chance to experiment with the various tools Photoshop has to offer.
1. Open the image you selected during the prelab to edit.
2. Before you start editing your photograph, save it as before.jpg
3. Choose a tutorial that you would like to attempt from the various
tutorial pages given in the prelab. If you do not find one that you like,
you can try searching for your own. You may also try to utilize the
tools described in class today to edit your photograph.
4. After you are finished editing your photograph, save it as after.jpg.
V.
Adding your images to your webpage.
1.
2.
3.
4.
5.
Close Photoshop and Open Dreamweaver
Create a new webpage in your csc101/lab7 folder called lab7.html
Place your first image in your webpage by using the <IMG> tag
Repeat these two steps for before.jpg and after.jpg
Add a description between before.jpg and after.jpg of the steps you
took to edit your photograph. (5 pts)
6. Save and close lab7.html
7. Add a link to lab7.html to your menu.html page (be sure to set the
target to ‘content’)
8. Upload your newly edited files to the webserver
i. lab7/image1.jpg
ii. lab7/before.jpg
iii. lab7/after.jpg
iv. lab7/lab7.html
v. menu.html
9. Update your permissions on the WFU webserver
i. Go to users.wfu.edu/update.html
ii. Log in
iii. Click “Set permissions for personal homepage”
iv. Click Continue
v. Select Yes, Click OK
10. Check your webpage:
i. Go to http://www.wfu.edu/~user/csc101
ii. Click the link to your new lab7 page
iii. Make sure your image displays in the content frame