WARNING: ALL STUDENTS MUST SUBSCRIBE TO THE ONLINE TEXTBOOK BEFORE I CAN APPROVE SUBSCRIPTIONS (DUE TO PASSWORD BREACHES THE ENTIRE CLASS MUST SUBSCRIBE BEFORE PASSWORDS ARE CIRCULATED). SUBSCRIBE TODAY IF YOU HAVEN'T ALREADY. 

NOTE: THIS COURSE REQUIRES THAT YOU UPLOAD TO THE WEB EACH MIDTERM AND FINAL EXERCISE. IF YOU ARE NOT ALREADY COMFORTABLE CREATING WEB PAGES OR UPLOADING FILES TO THE WEB  FOLLOW THESE STEP-BY-STEP YAHOO INSTRUCTIONS.

SYSTEM REQUIREMENTS: Is your computer system adequate? Perform these quick tests to confirm that your computer system is powerful enough for this course. If it is not, use a DIFFERENT computer or contact your professor to obtain a graphics workstation pre-loaded with the software required for this course.

Bitmap Graphics, Part II (plus BLOGs and SECOND LIFE overview)

Jargon/Terminology

• Bitmap
• Compression (lossy vs. lossless)
• Pixel
• Pixels-per-inch (ppi)
• Dots-per-inch (dpi)
• Color model, color space
• RGB and additive color
• CMYK and subtractive color
• Resolution
• Bit-depth
• True-color
• Greyscale
• Transparency
• Antialias
• Palette
• Jaggies
• Dither
• Interlacing and progressive download
• Raster, rasterize, rasterization
• Canvas
• Gamma correction

Basic Bitmap Image Editing Features:

• Crop
• Resize
• Select (rectangle, oval, lasso, magic wand)
• Fill
• Delete
• Move
• Copy
• Smudge
• Adjust (brightness, contrast, hue, saturation)
• Change mode
• Apply filters
• Text
• Stroke
• Background/Foreground colors
• Layers
• Clone
• Pencil
• Lines and arrows

Bitmap formats for the Web

• JPEG and GIF boast widespread browser support
• PNG supported by newer browsers (4.x and higher) or plug-in

FEATURE: Transparency

• Supported by GIF (simple binary "on" and "off") and PNG (sophisticated multiple levels of transparency per pixel, although not supported by all browsers)
• Not supported by JPEG

Exercise: Create a GIF or a PNG text logo of your full name in Photoshop. Use transparency so that the areas of the image that aren't part of the text are transparent. Create a simple Web page and set its background color or background image (so that the page has a background image or background color other than the default), then display your transparent logo images on the page. If you have actually used transparency in your logo the background should "show through" the transparent areas.

Exercise: Apply Photoshop's "blur" filter to a similar text logo, so that the edges of the text are blurred. Save in the PNG format, so that these various levels of transparency are preserved. Create a simple Web page like the one  above (see above Exercise). Does your browser show the levels of transparency?

FEATURE: Animation

• GIF (gif89a variant of GIF) supports in-file animation. With in-file animation such as GIF's all of the individual frames, or cells, of the animation are contained in the image itself (no need for a separate file for each frame) which can be a very compact and space efficient way to do animation.
• PNG and JPEG do not directly support animation, and so JavaScript code (or Java, or a plug-in) must be added to the Web page. In this case the script or code loads a number of images (one for each frame or cell in the animation) and "flips" through them (displaying one after another rapidly) to produce the effect of animation.
• "Preloading" images via script is a valuable technique that ensures the image is actually available before it's displayed. If images aren't preloaded the animation can be choppy and distracting since the animation may advance to the next "frame" in the animation (the next image) before the currently loading image has finished loading over the Web. If preloading isn't used you must ensure that enough time elapses between each frame to allow the download to complete.

Example: See the "MT35801 Discovering 3D and Virtual Reality" animation at the bottom of our course notes home page for example of continuously animated JPEG images using JavaScript.

Exercise:: Using your new bitmap graphics skills to turn this bitmap TIFF format image of the Boston Public Garden Swan Boats into a greeting card. Requirements: a) The image is too dark, so adjust the brightness and contrast as necessary. b) The image is a little too large, so crop the image so that the swan boats are the main focus. c) Place some greeting text on the card, and include your full name, such as:

 Welcome to Boston, where Pat Smith is 
  waiting to take you on a Swan Boat ride 
  in the Public Garden!

d) Finally, save your new greeting card in a format that's as compressed as possible but still looks good. If you apply too much compression the text will look very fuzzy, but if you don't apply any the image will be VERY LARGE. Also consider using a progressive or interlaced graphics format so that the image will appear to load faster on slower network connections. Whatever you do, don't save it in the TIFF format I've given it to you in -- it's almost 2MB in size as a TIFF format image! Instead you must save your card in a Web format such as GIF, PNG, or JPG. Since this is a photo with lots of colors you should have no problem eliminating one of these three formats immediately (one of the three is completely inappropriate for this work; choose one of the remaining two). 

The Need For Speed (or at least the perception of speed)

The total combined size of a Web page's content (HTML file itself, plus images, sounds, etc.) should not exceed 200K in size whenever possible if delivering to users that have slow network connections such as dial-up modems. Click here to read about bits, bytes, and kilobytes (K) if you're not sure what these terms mean. Note that the vast majority of users have slow connections; over 90% of all home users connect with slow dialup modems, for instance.. In cases where your page exceeds 200K in size consider breaking the page into more than one page (i.e., multiple pages instead of one), use progressive/interlaced bitmapped images where appropriate, and streaming media if possible. Unless you are creating pages specifically for users with high-speed connections it's a good idea to keep your total page size as small as possible (200K is actually quite a lot; try to keep your pages under 100K if possible -- consider 200K to be the maximum upper limit). 

Mantra: "Eight's Too Late!"

If your page take more than 8 seconds to grab a user's attention they will leave your page in search of something more interesting unless they have a very compelling reason to stay and wait for it to load. Be SURE that your pages load a reasonable amount of content in less than 8 seconds, otherwise you'll loose a huge amount of traffic. Some estimates indicate that over 80% of casual surfers (those without a compelling reason to wait) will abandon a page if it takes longer than 8 seconds to load. The bulk of this particular class is dedicated to techniques that you can use to speed the apparent loading time of your page when it comes to the graphics they contain, such as using thumbnails, progressive and interlaced images, image slicing, and in-file animation.

Feature: Progressive and Interlacing

• JPEG supports a progressive encoding mode
• GIF and PNG support interlacing

Progressive and interlaced graphics appear to download a little at a time; they either start off being displayed in the Web page quite blurry, or only partially drawn, for example, and become more "complete" or clear (visible) with every passing second until they are 100% downloaded. As a result end users have something to look at as they download. Compared to non-progressive or non-interlaced graphics (which are at best drawn a little at time starting at the top and going to the bottom) progressive and interlaced graphics incrementally render across the full image (equally across the entire image) so that the end users sees a blurry or incremental version of the entire image that eventually becomes complete.

The best way to see this effect is to save a huge image (such as our  monster.jpg sample image) in interlaced or progressive format, and then try to load it over a slow network connection such as a dial-up modem. Note, however, that you'll have to test it both Internet Explorer and Navigator since not all browsers support  interlaced or progressive formats, in which case it'll load just like a normal image (not incrementally, but all at once instead). Also note that once cached by the browser after the 1st time it is downloaded the image no longer needs to be downloaded again and will instead be loaded off the hard drive (very fast!) each time it is subsequently viewed.

Tip: Bypass the browser cache and force reload of your Web page manually (hold down SHIFT-CTRL-ALT and click on the "reload" button at the same time), or clear your cache if needed to ensure that the images are actually transmitted over the Web instead of being loaded from the cache on the hard drive.

Technique: Thumbnails for the Web

Thumbnails are merely smaller renditions ("the size of your thumb", as the saying goes) of a full sized image. There are two main types of thumbnails used on the Web:

• Separate image files (a copy of the image resized using a tool like Photoshop) are recommended when the page is very slow to load. These are useful when the full sized image is big, or there are many on the page, that way the thumbnails are very small separate copies of these larger images. They therefore load quickly by comparison to the full sized originals. When this type of thumbnail is clicked on the browser must then load the original full sized image that the thumbnail represents.
• Scaled image files (the same image, not a copy, just resized in the Web page using HTML code) are recommended in cases when the page loads quickly. Because the full sized original is used as a thumbnail (it's just resized in the Web page), these types of thumbnails are useful when the original image isn't very large or the page doesn't contain to many thumbnails. The main advantage to these types of thumbnails is: when clicked the browser does NOT have to actually load the original full sized image (since it's already been loaded do display the thumbnail itself). This results in a very fast "response" when the thumbnail is clicked; as soon as the user clicks on it, the full sized one is shown because no new download is required.

Exercise: Use Yahoo Geocities, Netscape Composer, Microsoft FrontPage, or another Web page authoring tool to create a simple Web page with your newly created "separate" thumbnails (see above Exercise). Link to the full sized images that reside online (use absolute URLs to the online originals). Experiment with different image border sizes.

Example: The following thumbnail is a separate, smaller image than the full-sized image it links to:

Exercise: View Source of your HTML page to see the <img> tag responsible for the images. Note that the hyperlink is created with the <a> tag, not <img>.

Exercise: Create a simple Web page with scaled thumbnails of the original online test images "Fruit.jpg", "Hands.jpg", and "Mallorca.jpg" test image (see Course Resources). Link to the full sized images that you used to create the scaled thumbnails. Note that you have to alter the <img> tag's height and width attributes.

Example: The following thumbnail is a scaled version of the same full-sized image it links to:

Technique: Slicing large images for the Web

• Web technique used to present very large images to the end user quickly (more of a trick than a reality)
• Makes it more difficult for the average person to steal your images
• Similar in concept to progressive and interlacing, except a large image is "sliced" into smaller pieces
• Tables are used to organize (layout) slices of the image. Typically, the <table> tag's BORDER, CELLPADDING, and CELLSPACING attributes are set to zero:

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>

while the <img> tag's BORDER is also set to zero:

<IMG SRC="slice1.jpg" WIDTH=227 HEIGHT=44 BORDER=0>

Tip: Bypass the browser cache and force reload of your Web page manually (hold down SHIFT-CTRL-ALT and click on the "reload" button at the same time), or clear your cache if needed to ensure that the images are actually transmitted over the Web when you view this example (so that you can see the image "slices" appear one at a time).

Exercise: Search CNET (http://www.cnet.com/) or ZDNET (http://www.zdnet.com/) for the best FREE "image slicing" tool to automate the slicing of a large image into a series of smaller pieces. Assemble the pieces into a Web page table so that they are "assembled" by the Web browser into what appears to be a single large image. Test your page in Internet Explorer and Netscape Navigator.

BLOGs and SECOND LIFE overview

Blogs: Visit http://blogger.com to sign up.

Second Life:

1) Visit ImmersiveEducation.org and read about Immersive Education. When done, visit http://SecondLife.com and choose the option to JOIN (that is, sign up for Second Life). Note that you sign up (join) on the Web site, and then they will email you a link to download and install the Second Life software (you must install Second Life software after joining, since you can't "get in" to Second Life using a Web browser -- you need the Second Life software).

2) Click on the "Join" link that appears in the upper right-hand corner of the Second Life Web page. At this point you may be asked to select a "community" to join, in which case you should join the "Immersive Education" community or group. Note that if you can't find "Immersive Education" when you're signing up for Second Life you can search for it within Second Life AFTER you've signed up (and when you're already running Second Life). Second Life has a search feature built into it, so you can find "Immersive Education" groups (and other places) and join them even after you sign up.

3) Create your Second Life account. For your account create your FIRST NAME by adding "ImmersiveEducation" in front of your real name. Notice that the I and E are capitalized, and so is your name. Also note that there are NO SPACES at all! For example, if your real first name is Jane you will type this in for your Second Life first name:

  ImmersiveEducationJane

Likewise, if your real first name is Joe you would type in this:

  ImmersiveEducationJoe

After you type in your first name you must select a last name from a list of options (you can only choose a last name from the list, so choose whatever last name you want but be sure to write down what you choose so you don't forget!). If your choosen name is ALREADY TAKEN (meaning you can't use it) try selecting a DIFFERENT LAST NAME. If that fails, try using your first and last name after "ImmersiveEducation" (such as ImmersiveEducationJaneSmith).

Chatting in Second Life? If anyone you meet in Second Life asks you what "Immersive Education" is simply tell them to visit ImmersiveEducation.org since ImmersiveEducation.org is the official home page for Immersive Education.

4) Use your real email address (or your Yahoo email address) when you sign up, since the instructions on how to proceed will be emailed to you. REMEMBER that after you create your Second Life account you still have to check your email so that you can download the Second Life software. YOU ONLY USE YOUR WEB BROWSER TO CREATE A SECOND LIFE ACCOUNT, AND AFTER THAT YOU WILL USE THE SPECIAL SECOND LIFE SOFTWARE (a link to download it is emailed to you).

5) Second Life Installer. Check your email for your "welcome" message. In the message is a link to the Second Life Installer. Click on the link, download the "Second Life Installer" and run it. This will install the special Second Life software on your computer. After it has been installed an icon for Second Life will be on your desktop or under your START menu (look under START > Programs).

6) Run the Second Life software, sign in using the Second Life first name and last name that you created in STEP 3 above (refer to your "welcome" email message if you forgot the name you created or if you forgot your password).

7) Navigate using ARROW KEYS (up arrow, down arrow, left arrow, right arrow). Explore Second Life for a while and become comfortable moving around and chatting with people. You might have to navigate around (move around) to find someone to talk with. If anyone you meet in Second Life asks you what Immersive Education is simply tell them to visit ImmersiveEducation.org since ImmersiveEducation.org is the official home page for Immersive Education.

8) Join the Immersive Education GROUP in Second Life. See http://ImmersiveEducation.org/events for details on how to join.

9) Take at least 5 screenshots (snapshots) of yourself in Second Life and post them to your BLOG along with text that describes what you did for this assignment. In other words, "blog it" as usual.

Reminder: If anyone you meet in Second Life asks you what "Immersive Education" is simply tell them to visit ImmersiveEducation.org since ImmersiveEducation.org is the official home page for Immersive Education.

Readings from our online textbook:

Assignments and Exercises:

1) Search CNET (http://www.cnet.com/) for the best FREE GIF animation tool. Start using the tool. Is it easy to create animated GIFs with your new tool? Take a moment to post a message to our Yahoo group telling everyone what the name of this tool is, and how you do (or do not) like it.

2) DO MIDTERM EXERICISE #4, POST IT TO YOUR BLOG, AND THEN SUBMIT IT TO OUR YAHOO GROUP FOR PEER REVIEW:

Exercise [midterm 4]: CREATE A JPEG OR GIF (NOT PNG!) GREETING CARD IMAGE THAT SHOWS YOUR AVATAR IN SECOND LIFE and upload the image  to the Web so that everyone can view it during the next class (be sure to post the URL to your card image to the class email group once it's online). After you upload your card image send the URL of it to the class email group. The avatar you use for this exercise will be the avatar that you use for the rest of this class any time you want to meet me in the chat room for help, so be sure to choose an avatar that you want to represent you and also use your real first or last name (this is how I will identify you in the virtual world). Look at the "Card.JPG" and "Card.GIF" images in the sample images area in our Course Resources  for an example of the card image I created (Course Resources are available at the top of this Web page). You will use the same text, but have your own avatar and name.

Avatar rotation:  The easiest way to see your face (your avatar's face) is to SIT on something, then use the arrow keys to move the camera around to view yourself from the front. To SIT on something in Second Life you must RIGHT-CLICK on an object that can be sat on, then chose "Sit" from the options that appear.

Screenshot: You can then copy the screen to the Windows clipboard by pressing the ALT key and PRT SC keys at the same time (press ALT first and while holding it down press PRT SC). "PRT SC" is the "print screen" key. When you press ALT and PRT SC at the same time the entire screen is copied to the invisble Windows clipboard, meaning you can paste that image into other applications by simply switching to them and choosing "Paste" from the Edit menu. Once you've copied the screen image in this way simply open Adobe Photoshop (or any bitmap editing program) and create a new document, then choose "Paste" from the Edit menu to the copied image from the invisible clipboard into the new document (look for PASTE under the EDIT menu). Note that you never see the clipboard -- it's just an invisible data holder that stores the image for you so that you can paste it later. Be sure to crop out the chat area and any extra parts of the scene -- keep only your avatar and some parts of the scene around you. Then use the TEXT tool to add the following text at the bottom or top of your image, where "myname" is the avatar name you'll use in Second Life for the rest of this class:

I am taking an Immersive Education class! Find out more at ImmersiveEducation.org and then join me in a virtual world.
Look for "myname" in any ImmersiveEducation.org virtual world. I'll be waiting for you!

If you have any questions or problems with this exercise meet your fellow students in Second Life for help. If you are going to be in Second Life for help you should send an email to our email group to let everyone (including me) know that you're going to be there, that way we can meet you (use our email group to coordinate meetings with them in Second Life).

end of midterm 4 exercise requirements

TIP: CLICK HERE TO LEARN HOW TO REMOVE SOFTWARE THAT YOU'VE PREVIOUSLY INSTALLED ON YOUR WINDOWS COMPUTER. This is particularly important to do after you've discovered that you really don't like a new software program that you have install, or when you need to un-install trial or demos when they expire. You'll install a lot of different graphics programs in this course, so you should be very comfortable removing them as well!