Exercise 5
Anti-aliasing, transparency, and photo basics
Resources for this exercise:
- See the Course Schedule for due date. Exercises are due before the beginning of class on the due date.
- See the Homework Frequently Asked Questions (FAQ) page for answers to questions about homework exercises.
- See What is Anti-aliasing? for information on anti-aliasing.
The purposes of this exercise are to:
- Create and use an aliased transparent image.
- Create and use an anti-aliased transparent image. (Such images may contain "fringe" pixels around its edge that can clash with a background color.)
- Understand the difference between aliased and anti-aliased images, and how to avoid unsightly fringe pixels.
- Optimize photographic images.
To do this exercise you will need to use an image editing program such as Photoshop. You will also need a photograph to start with, either as a print that you will need to scan, or a digital image. If you scan a photo, save it as a TIFF and then convert it to a JPEG in Photshop, or scan it as a JPEG. If you start with a digital photo (such as a photo that has been taken with a digital camera) make sure the photo has not been previously optimized for the Web.
1) Open your photograph with Photoshop.
2) Change the photo size (in pixels) to be the size that it will appear on your Web page: not more than 400 by 400 pixels.
3) Using the "Save as" (not "Save for Web") command, save the photo as a JPEG, at the highest quality possible. Do not optimize it.
4) Using the "Save for Web" command, save the same photo as a JPEG, at the lowest quality possible that still looks acceptible to you. Use a different file name for this optimized image, so you don't overwrite the unoptimized image.
You should now have two otherwise identical JPEG photos, at the same size in pixels: one that is optimized (it has a smaller file size), and one that is unoptimized (it has a larger file size). You will place these photos on your exercise page later.
Now you will create some new GIF images in Photoshop.
5) In Photoshop, create a simple aliased (not anti-aliased), undithered image. To do this, you may wish to use the pencil tool (not the brush tool).
6) Make the height and width of the image no larger than 200 pixels.
7) Create a background layer for this image that is either red, green, or blue.
8) With the background color visible, save the image as a transparent GIF (use the "Save for Web" option), making the background color transparent.
9) Next, in Photoshop, create a different simple anti-aliased, undithered image. To do this, you may wish to use the brush tool (not the pencil tool).
10) Make the height and width of the image no larger than 200 pixels.
11) Create a background layer for this image that is either red, green, or blue.
12) With the background color visible, save the image as a transparent GIF (use the "Save for Web" option), making the background color transparent.
13) Using a basic text editor create an HTML document. This page will become your exercise 5 page.
14) This page must contain the XHTML 1.0 Strict DocType, as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
15) This page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)
16) This page must display your name.and say "Exercise 5."
17) This page's <title> must indicate that this is your
exercise 5 page, so it should say something like "John Sky's DM160B Exercise
5".
18) This page must contain a relative link to your home page.
19) This page must contain a table with 4 cells, with one cell set to a background color of white, one cell set to a background color of red, one cell set to a background color of green, and one cell set to a background color of blue.
Use an internal style sheet — not HTML attributes, local styles, or external styles — to make the table cell background colors on all table cells in this exercise. (You can style other elements of this page any way you wish; I'm just talking about the table cell background colors here.)
20) In each cell place the aliased image. This means that the same aliased image file will appear four times on the page, with different background colors.
You will be creating a folder, within your public_html folder, called "images", that will hold your image files for homework exercises, so the relative path from your exercise to your image files will be something like "images/filename.gif" (changing "filename" to the image file's name. of course).
21) Using the <caption> tag for this table, indicate that
this is the aliased image.
22) This page must contain another, separate but similar table with 4 cells, with one cell set to a background color of white, one cell set to a background color of red, one cell set to a background color of green, and one cell set to a background color of blue.
23) In each cell of this new table place the anti-aliased image. This means that the same anti-aliased image file will appear four times on the page, with different backgrounds.
24) Using the <caption> tag for this table, indicate that
this is the anti-aliased image.
25) If you have done this exercise correctly, you will see the aliased image appear in four table cells as a jagged image with no fringe pixels around it at all. In a separate table, you should see the anti-aliased image appear in one table cell with smooth edges and no fringe pixels around it at all, and in three table cells with unsightly fringe pixels around it.
26) In all cases, use height and width attributes
of the <img> tags in HTML code, using the exact dimensions
of the image. Don’t use HTML or CSS to reduce or enlarge image. If the
image is the wrong size, you will need to change its size in Photoshop.
27) Don't forget to always use the alt attribute of the <img> tag
(the validator will remind you to do this, if you forget).
Now place the two photos on the exercise page. Clearly indicate on the page which photo is optimized, and which one is not, and indicate the file sizes of each.
28) Upload this Web page into your public_html folder on the server. Upload your images into your images folder that is within your public_html folder (if you haven't already created a folder called "images" within your public_html folder, do so now). Don't forget to also upload your two JPEGs.
29) View your page (the page on the server, not the page on your disk) in a Web browser. For example, if you called it exercise5.html:
Go to:
http://www.webhawks.org/~yourusername/exercise5.html
to view your exercise 5 page.
30) Make sure the HTML on this page validates (using the XHTML 1.0 Strict DocType) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.
31) Make sure the CSS on this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/validator-uri.html. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.
32) If there are any errors, fix them, re-upload the page, and validate it again.
33) Make sure your home page has a working link to all your completed exercises, including this exercise, and that the HTML and CSS on your home page validates.
34) Submit the feedback form. To receive credit for this exercise you must submit thi feedback form before it expires. This exercise is due on 3/31/08. Allowing for a one-day grace period, the form will expire at the end of the day following the due date, which means the form for this exercise will expire at 12:00 AM on 04/02/08.