Digital_Images

= Digital Images/Manipulation =

Overview:
Being able to capture, manipulate, and save images at an optimal file size are essential skills needed for creating instructional materials in the digital age. This rather lengthy (looking) lab has three main sections in "The More You Know" section
 * Image types used on the web,
 * Web-based image editing
 * Taking a screen-shot on your computer

Objectives:

 * 1) Be able to distinguish between the three most common image formats for the web, and understand when and why to use each format
 * 2) Understand which image editing tools might be most appropriate in particular contexts, for particular tasks, and for particular types of users
 * 3) Be able to perform basic manipulation tasks
 * 4) Be able to save images in an appropriate format for the web
 * 5) Be able to capture your screen

__Image types used on the web__
There are three types of images most commonly used on the web:

Each of these formats compress images in different ways, decreasing the file size, but also introducing distortions. In order to understand these side effects and when to use what format, it's important to understand that a digital image is just a series of pixels organized in rows and columns. If you were to zoom in on a picture you would easily be able to see this.
 * **JPEG** (pronounced "JAY-peg")
 * **GIF** (pronounced with either a hard or soft "G" - "jiff" or "giff")
 * **PNG** (pronounced "ping")


 * 1.) JPEG**

The format most of us are familiar with is the JPEG format, so we'll start there. JPEG compression works best for "photo-realistic" images--images that contain **millions** of different colors. Examples of photo-realistic images are shown below. Note that they are not all photographs!

Image by Steve Evans Released under an Attribution License || "Spiral Again" Image by fdecomite Released under an Attribution License || "Petronas Twin Towers" Image by Shubert Ciencia Released under an Attribution License || When you save a picture as a JPEG, information across large groups of pixels gets averaged together and this helps reduce file size. The more you choose to average across pixels, the smaller the file size becomes. The easiest way to understand this is to look at an example:
 * [[image:http://edutech.msu.edu/online/Labs/images/Page_data/textile_vendors.jpg width="240" height="160"]] || [[image:http://edutech.msu.edu/online/Labs/images/Page_data/3d-spiral.jpg width="240" height="180"]] || [[image:http://edutech.msu.edu/online/Labs/images/Page_data/towers.jpg width="240" height="160"]] ||
 * "Pakistan Textile Vendors"
 * [[image:http://edutech.msu.edu/online/Labs/images/Page_data/polarbear.jpg width="190" height="300"]] || [[image:http://edutech.msu.edu/online/Labs/images/Page_data/polarbear_1200_percent.jpg width="235" height="300"]] ||
 * This image was saved as a JPEG with the compression set at 100% quality. File size at this level of "quality" is 62KB. || If we zoom in to 1200% we can clearly see each individual pixel that makes up the image ||


 * [[image:http://edutech.msu.edu/online/Labs/images/Page_data/polarbear_degraded.jpg width="190" height="300"]] || [[image:http://edutech.msu.edu/online/Labs/images/Page_data/polarbear_1200_percent_degraded.jpg width="235" height="300"]] ||
 * This version was saved at 0% quality (the absolute poorest!) and the file size has been reduced to 4KB || However you can clearly see the sacrifice in image quality when you zoom in to 1200% ||


 * 2.) GIF**

Most of us have never had occasion to use GIFs since the JPEG format is so common. However, life without GIF images would be fraught with slow downloads and disappointed eyes. GIF compression works by limiting the palette of available colors to 256 or less--quite a contrast from the JPEG format which allows for millions of colors. 256 colors doesn't seem like a lot, but in certain instances it is more than enough. Two of the most common uses of GIF compression are logos and pictures of text. In these two instances the GIF format looks far superior to the JPEG of equal file size. Take a close look at these examples: The GIF format has two other unique features that we would point out: **Transparency** and **Animation**
 * [[image:http://edutech.msu.edu/online/Labs/images/Page_data/NBC-logo_sm.gif width="150" height="150"]] || [[image:http://edutech.msu.edu/online/Labs/images/Page_data/NBC-logo_sm.jpg width="150" height="150"]] ||  || [[image:http://edutech.msu.edu/online/Labs/images/Page_data/text.gif width="103" height="45"]] || [[image:http://edutech.msu.edu/online/Labs/images/Page_data/text.jpg width="103" height="45"]] ||
 * GIF format. File size is 2.7KB || JPEG format. File size is 2.7KB ||  || GIF format, file size is 0.2KB || JPEG format, file size is 1KB ||
 * [[image:http://edutech.msu.edu/online/Labs/images/Page_data/transparency.gif width="320" height="320" link="javascript:void(window.open('transparency.gif','pic','resizable=yes,location=no,menubar=no,scrollbars=no,status=no,toolbar=no,fullscreen=no,dependent=no,width=500,height=500'))"]] ||  || [[image:http://edutech.msu.edu/online/Labs/images/Page_data/Zipper_animated.gif width="320" height="320"]] ||
 * The above picture of text has been inserted into a table cell with a dark blue background. Click the image to open it a blank page! ||  || A series of still images can be combined and saved as an animated GIF. This example works well due to the minimal number of colors used.

(amimation by DemonDeLuxe) || Now just for the sake of example, let's take a look at what a **photo-realistic image** looks like when it is **saved in GIF format**. Remember that the GIF format is limited to 256 unique colors, while JPEGs can have millions of colors:
 * [[image:http://edutech.msu.edu/online/Labs/images/Page_data/polarbear_degraded.gif width="190" height="300"]] || [[image:http://edutech.msu.edu/online/Labs/images/Page_data/polarbear_degraded_zoomed_in.gif width="235" height="300"]] ||
 * This is a GIF saved at maximum quality. Compare it the //first// JPEG polar bear example above (//not// the 0% quality one) || When you zoom in to 1200% you can see the compression effects of the GIF format. Instead of averaging across large groups of pixels, the GIF format simply draws the picture with a limited number of colors. ||
 * 3.) PNG**

PNG is the newest of the three image types typically used on the web and was developed to improve upon and replace the GIF. In contrast to GIF and JPEG, PNG //can be// a lossless compression format. That means that you do not lose image quality every time you save and re-save your image (sometimes called "generation loss"). That also means that PNGs are not restricted to a 256 color palette like GIFs--they support millions of colors. Note, however that a **lossless** file format will have a much larger file size than a **lossy** one (such as JPEG). What is interesting about PNGs is that they support transparency just like GIFs. This means you can now have images with transparent parts **and** high quality! Remember the lovely image of blue text above? What did you notice when you opened it in a new window without a blue background? Pretty ugly, wasn't it? Since PNGs are lossless and support millions of colors they can display transparencies without jagged edges--see the image at right. Unfortunately, even though PNGs have been around for years, Microsoft's Internet Explorer has only begun supporting their transparency capability in their latest version (7). That means there are still millions of people browsing with older version of IE, so think carefully about your audience before choosing PNG for transparency. Let's take another look at the logos we saved above. We'll now compare file size and quality between GIFs and PNGs: There is absolutely no difference in quality, but the PNG has a slightly smaller file size (about 15% smaller). You will generally find this to be the case.
 * [[image:http://edutech.msu.edu/online/Labs/images/Page_data/NBC-comparison.gif width="150" height="150"]] || [[image:http://edutech.msu.edu/online/Labs/images/Page_data/NBC-comparison.png width="150" height="150"]] ||
 * Format is GIF, file size is 2.7KB || Format is PNG, file size is 2.3KB ||

Saving images for the web is always a balance between image quality and file size. This decision process is complicated by the fact that there are three file types to choose from, but you should have enough information to make informed decisions. Here are some general guidelines that should start to become apparent:
 * So let's sum up what we've learned about image formats:**
 * JPEG: Good for photo-realistic images saved for the web
 * GIF: Good for images with few colors, images of text, and simple animations
 * PNG: Good for images with few colors, images of text, and will be a smaller file size than GIF. Can also save images as a lossless PNG, but this is not suitable for web content as the file size will be extremely large!

__**Web-based Image Editing**__
Now that we've explored image formats for the web, let's look at some of the applications that allow you to modify images. As in the other labs we'll look at free web-based applications as well as a commercial application.


 * 1.** To get us started, let's take a look at the web-based image editing app called Picnik. You don't need to register for an account to use the site, but you can if you want. If you have a Flickr account, Picnik is now integrated so that you can use the two together right through your Flickr account, so you may want to start from Flickr for the following if you do have an account.


 * Begin by either uploading an image or by opening an image from the web that has a creative commons license. You can do this from Picnik's "Photos" tab.
 * Explore each of the editing functions under the "Edit" tab (rotate, crop, resize, etc.)
 * Next explore the "Create" tab. There are several sub-pages under this tab--be sure to explore them all:
 * Effects
 * Text
 * Shapes
 * Touch-up
 * Frames
 * Finally, click on the "Save & Share" tab and take a look through the options you have there. While you're there:
 * Save a copy of your image to your computer using an appropriate file type
 * Try emailing a copy of your image to yourself and share with someone else if possible.

**2.** Let's take a look at another web-based imaging app--Adobe Photoshop Express
 * Take a look at the Help Videos which guide you through setting up an account and editing photos.
 * Explore the functions in Photoshop Express by uploading and editing a photo, just like you did with Picnik. Experiment with some of the following:
 * Remove red-eye
 * Straighten a crooked picture
 * Resize your picture
 * Save your picture in an appropriate file format
 * Add more than one picture and go to your "Gallery". Grab the embed code for the gallery and add it into a Google Sites or Weebly page or your blog. Here is a brief jing video covering how to do this.
 * The site has changed some since the video, you might find the embed code under Share as Publish To . ..
 * Again, try emailing a copy of your edited photo to someone else.

**Desktop-Based Image Editing with Adobe Photoshop Elements 6.0**
Editing your images online is fun and can save you money, but it's not always practical. For example it's much easier to just dump a couple hundred pictures from your digital camera onto your own computer. You can then browse and edit your photos without the added step of uploading them to a website.

One of the most popular commercial software apps for organizing and editing photos is Adobe Photoshop Elements. This is the little brother to Adobe Photoshop, but it has 90% of the features at roughly 1/7th the cost.

Photoshop Elements 6.0 offers some advanced features that aren't available in the web-based version, and might be an affordable option for teachers.

If you would like to do more advanced photo editing/manipulation, you might want to check out the totally free Gimp application, which has versions for Mac, Windows, or Linux or else check out the gold standard of photo editing applications, Adobe's professional version of Photoshop.

__Taking a Screen Shot on PCs and MACs__
Another skill you need to have is the ability to take a screen shot on your computer. We introduced this in an earlier lab but want to go over it one more time. This is an essential part of creating web-based instructional materials--most of these labs have screen shots in them!
 * Instructions for Mac OSX
 * Instructions for Windows

If you are using a MAC your picture will be saved automatically. If you are using a PC you will need to create a new document in Elements and paste in the contents of your clipboard. Elements automatically detects the size of the screenshot you just took and will create your next new document at that size.

If you use Windows, the instructions may vary based on which version you are using so you may need to search Windows help on how to do this or see below about Jing.

If you are having trouble with the built in version, try using Jing to take a snapshot. It allows you to take both pictures and movies of your computer.

Troubleshooting by using Jing
In addition to being able to use Jing to take a screenshot, its biggest use comes in take screencasts (movies) of you actually working on your computer. This is great for teaching other's how to do something technical on a computer--many of the tutorials you see in this class or on Youtube were made with this software or a variation.

What's also very useful for us, is you can record what you are doing and send me that so I can see if I can trouble shoot it. It's fairly easy to use once you install it. Once you record the screencast, you can either upload to the web (need to sign up for a free account-but easiest method) and send me the link or you can save it to your computer and email me the file.

(A great sidenote about Jing is that it is made by TechSmith, a company founded and based right near here in Okemos)

Skills to Master:
You now have all the information needed to prepare images destined for the web. Generally these skills include the following:


 * Recognizing the strengths and weaknesses of the three popular image formats for the web
 * Rotating, cropping and resizing images, as well as correcting exposure and red-eye
 * Adding text to an image
 * Capturing an image of what is on your computer screen
 * Saving any image in a file type that has the best quality/size combination