Image alignment and resizing using PowerPoint

In a previous assignment, you create three images.

Combine those three into a single, perfectly aligned image as shown below:

My advice would be to create the combined image using PowerPoint, which makes it easy to resize and align images exactly. Once you have the PoweerPoint slide, display it full screen and record a screen shot to create the final, composite image.

Post that image on your blog and turn in a printout of the blog post. (If you do this with a partner, put the image on both of your blogs, but only turn in one copy of the composite image).

Play with image layers

The purpose of this assignment is to become familiar with the idea of multi-layer images and to be comfortable creating them.

Use Paint.Net to create an image with text labels positioned over a background image like the example shown below. You can use any background image, but place at least three labels on it.

When you are finished, merge all the layers of your image down to flatten it and upload the image to your blog.

Link to topic module

Transparency

Combine these two images, placing the green circle inside the red circle. You can center the green circle by eye, but be sure to make its background transparent so the entire red circle is visible. (Right-click on the images to get copies).

Post the final result on your blog along with a copy of the complete history window from the editing session.

Link to topic module

Place an image on the Web

This assignment will test your ability to include images in Web pages.

Create a Web page with two copies of your picture, one with no border the other with a ten pixel border.

Upload the page to your Web site and check to be sure it is correct using a Web browser.

When it is exactly like mine -- including the title, text and heading -- print a screen shot showing your photo in the browser and a listing of the HTML file to turn in.

Your page should look like this, with your photo substituted for Lucas.

Link to topic module

Image encoding

This assignment illustrates image encoding and file sizes.

Post answers to these questions on your blog and print them out to turn in.

1. An image is 800 by 500 pixels, and each pixel can be one of four colors. How much memory would it require?
2. An image is 800 by 500 pixels, and each pixel can be one of four colors. How much storage space would it require?
3. How many different colors could one represent using two, three and four bit codes?
4. When you add one bit to a code, what happens to the number of possible colors?

Link to topic module

Install Paint.Net

Paint.Net is an open source image editor that was developed at the University of Washington.

It is great for the things that I do -- enhancing photos and creating images for presentations and articles.

Your assignment is to download and install Paint.Net on the computer you use for homework assignments.

You will find it at: http://download.cnet.com/Paint-NET/3000-2192_4-10338146.html.

Paint.Net requires that you have MicroSoft's Dot Net software installed on your computer. It will have been installed at the factory in almost all cases, but, if you do not have it, the installer will show you how to get it.

You do not have permission to install software in the campus labs, so, if you want to use Paint,Net there, you have to download and install a portable version on a flash drive. You can find that here: http://www.liberkey.com/.

Have you installed software on your computer before? It is easy, but you might want to get help from someone the first time you try it.

When you have it installed, open any image you have and play around with it for a while. Don't worry if it seems confusing -- I will demonstrate it in class and we have several topic modules on image processing.

When you are finished playing, print a screen shot of Paint.Net with your image loaded to turn in.

Link to topic module

A collaborative image collection -- the CSUDH brand

The purpose of this assignment is to collaborate on a collection of user-generated content -- the group will succeed if we create excellent images.

We will collaborate to compile a collection of images that communicate an idea or feeling about CSUDH. A marketing person might say were are trying to define the CSUDH "brand." Begin by considering your feelings for and ideas about CSUDH. What would you like your image to say?

The images can be photos, collages, drawings, logos, graphs, etc. Here are four I made as examples:

• An image I took from the Web
  
• A photo from the CSUDH Web site
  
• A photo I took myself
  
• A drawing

And here is the winner from last semester:

Its title is "Diversity" and the tag line is "CSUDH is uniquely diverse". Create an image and upload it to the Flikr photo sharing site. Log in as dhillscis using the password torosrule. After uploading the image, give it a title, a tag line or brief explanation of why you think it reflects the DH brand, and assign the tag dhbrandf2010 to it.

When it is on the Flickr site and the title, tagline and tag are correct, print a screenshot showing your image on Flickr.

These images will be entered in a contest, and winners will receive extra credit.

If you wish, you can enter a second image in the contest, but you need only one to complete this assignment.

Upload your picture

This assignment will give you practice with file transfer.

Upload a 250 by 250 pixel picture of your face to your directory on sws.csudh.edu.

(Be sure to retain the aspect ratio of the original image so it is not distorted).

Give it the name me.jpg.

After it is uploaded, view it using a Web client at:

http://sws.csudh.edu/<your account name>/me.jpg.

Print and turn in a copy of your picture as viewed on the server using a Web client and a screen shot of FileZilla showing the image file on the server.

Link to topic module

Compress an image

Here is an image of Lucas:

(Click the image to enlarge it, then right click to download).

The image is in the JPEG format and is 107 KB. Compress the image two times, once saving it as a JPEG and once saving it as a PNG file. Compress both until the file size is less than 50 kilobytes, then print them to turn in. Which looks best?

Link to topic module

Make a head shot

Here are two pictures of Lucas:

Make each into a tightly cropped, 200 by 200 image that contains only his face.

The starting pictures are similar -- one is just larger than the other.  Click on the image to get the full size copy to download.

Print you two final, cropped images to turn in.

Link to topic module

Image characteristics

Here are links to two pictures of Lucas:

• Lucas1
  
• Lucas2
  

One was taken with my camera set at high quality, the other with my camera set at low quality.

1. Which one was taken at high quality?
2. What is the size in pixels of the high quality image?
3. What is the size in pixels of the low quality image?
4. How many pixels in Lucas1?
5. What image format do these images use?
6. What is the aspect ratio of Lucas1?
7. What is the aspect ratio of Lucas2?
8. Which image has the most information? (explain)
9. Which image has the highest resolution? (explain)

Image processing practice

This assignment will give you practice with image processing. Your assignment is to modify the three images shown below. (You can get full-size copies of the images by clicking on them, then right-clicking to save the full-size image or copy and paste it directly into your image editor). Think about how you will approach each task before doing it and be sure not to distort the images.

Remove the last sentence from this image:

Shorten the window in this image so there is only about half an inch of white space between the words and the bottom of the window (retain the frame, page number, etc. at the bottom). Make sure the appearance and size of the words remain the same and also erase the black dash under the "T" in the word "This."

Remove both of the oarlocks (the u-shaped hardware that holds the oars when you are rowing) from the boat in this image:

Post the before and after of the three images on your blog. Print and turn in the blog post.

Make and post a square thumbnail picture of yourself

Prepare a 250 by 250 pixel, closely cropped image of your face. (I will check the size).

Be careful not to distort the shape of your face -- the final result will have an aspect ratio of 1:1. You will probably have to crop your photo in order to make it square. That will leave a square image, which can be re-sized to 250 by 250 and saved.

(Hint: The "Rectangular Select" tool has a "Fixed Ratio" option).

Focus on your face, and crop out most of the background. Feel free to cut off part of your hair, one of your ears, etc., for example:

Adjust the contrast and color so that it looks good on the screen.

When you are pleased with the image, post a copy of it and a copy of the picture you started with on your blog. Give it the label "Asst. 18".


Link to topic module
Link to topic module
Link to topic module
Link to topic module