Picture Pages, Pictures Pages…time to get your crayons and your pencils

To start out with, what creative thing did you do since Wednesday?

Today we’re going to learn something about images and image editing.  This is useful for a number of reasons.  Many of the things we’ll be doing throughout the semester require images of some sort, and knowing the basics of image editing will help you a lot (and you can make a really fancy picture for your facebook profile)

There are 10 types of people in the world…those that understand binary and those that don’t.
One of the greatest innovations in human history was the transformation of sound, text and color into digital data.  Basically computers can only speak in 1s and 0s, or on and off.  It’s like doing Morse code with a flash light.  If you want to signal dot dot dot, dash dash dash, dot dot dot (SOS) to a boat using a flash light you would do the following:

on off on off on off, on on off off on on off off on on off off, on off on off on off

or

101010 110011001100 101010

What does this have to do with digital images?  Well someone figured out how to turn colors into binary (1s and 0s) by using different letters and numbers, which can then convert easily to 1s and 0s.  So red, for instance, is FF0000.  (If you are interested, you can see how different colors are represented here.  Also, this is a great site for picking out color schemes, and gives the color in these color codes).  So for every pixel on your screen, there is a code that says what color that pixel should be.  Every screen has thousands of pixels (1280 across and 720 down is pretty common, that’s a total of 921,600 pixels!)  The amount of pixels your screen or camera has is called resolution.  Basically, then, to have a high resolution photo you need lots of 1s and 0s to convey all that information, which means the file size is going to be big (like a couple megabytes.)

File types
Bigger file sizes take more time to download (a bummer for websites with lots of pictures, or emails).  So you want to find ways to shrink that down.  One problem is that if your camera is, say, 8 megapixels then the picture has 8 million pixels of data.  But if your screen is 1280×720, it can only see 1 million pixels.  So even if you use the whole screen, you have 8 times the amount of data you need.  And if you are only going to show a picture that is 3″ by 5″, then you have like 1000 times the data you need.  So you want to compress that photo so it still looks good to the eye, but doesn’t take up so much room (in computer talk this is called “lossy” because you loose some data, as opposed to “lossless” which keeps all the original data).

One way of doing that is using less colors.  For instance, instead of representing every shade of blue possible (or 16 million colors), the computer aproximates the shade by blending colors that are close together (from 256 colors).  This is what happens when you save the picture as a GIF format.  The computer simplifies your colors to only 256 available colors, thus saving file size, but sacrificing quality.  This is good when you are doing something with simple colors or simple graphics (like a simple shape or graph)

Another way of doing this is to use complex calculations to remove all the extra info, so that the picture still looks the same, but not every pixel is actually represented in the file. If, for instance, you have white background, instead of saying that every pixel is white, it will just recognize that there is a big section of white, thus saving a lot of data. This is what happens when you save the file as a JPG file.  It simplifies the picture without you actually noticing it, but uses every color available.  So you still get a picture that looks nice on your screen but is much smaller.  JPG was made for photos and is really quite nice.

Another fomat that is similar is PNG.  This also uses complex equations to estimate colors, but can be reversed if you want, but doesn’t do as well with very complex images, like photos. This is better for computer drawn images and animations (like logos) but not as good for photos. There are others, and you can read more about them here if you want

Resize
Sometimes saving a file as JPG doesn’t help reduce your photo size enough.  You just want to put a small picture on your website, and it doesn’t really need to fill up every pixel on the screen.  Even if you shrink the visable size of the photo down on your computer (by pulling the corners in) the data is all still there, and there is way more than you need for a small photo.  Unless you are going to blow the picture up to be on a billboard, you really don’t need that much information, and you can compress, or resize the image.  You can change the size of the picture using any image editor (even Powerpoint will do it), but if you have a lot of images to change, this will take awhile.  So you can use a bulk resizer.  Here are two that are worth downloading to your computer, and are free.  The first is really quite simple and effective.  I use it all the time.

http://www.rw-designer.com/picture-resize
http://www.faststone.org/FSResizerDetail.htm

Copyright
Another major issue with images is copyright.  Briefly stated, you can not just pull a picture off the Internet and use it in your powerpoint presentation, even if it is for educational purposes.  This is against the law.  But there is a growing movement to create photos that can be shared easily without breaking the law.  This is called Creative Commons.  Flickr has a collection of creative commons photos you can explore. Also, any image in Wikipedia is creative commons, so you can use them. There are also a bunch of good copyright friendly image repositories, such as Photos8 or pics for learning that you may want to explore too.

Photo editing
Ok, now the moment you’ve all been waiting for.  Time to explore some editing tools.  There’s no need to pay hundreds of dollars for photoshop.  There are lots of free, web-based tools that do many of the same basic things.

Picnik is a very easy and intuitive tool.  The basic functions are free, and you can upgrade to premium for a small fee ($25 a year).  It links well with Flickr.

Aviary‘s Phoenix image editing tool is quite powerful and in many ways resembles photoshop.  It is web-based (no need to download anything), but requires knowledge of layers, and some tools like magic wand.  There are lots of good tutorials if you want to learn something about how to do complex editing.

There are other tools worth exploring, such as LunaPic or BeFunky.  They all have different features, and may be worth exploring too.

Spend some time playing around with one of these sites.  Watch a tutorial to learn how to do something new.  You won’t have to turn anything in, but we’ll be using these sites later to do a bigger project, so make sure you are familiar with at least one of them.

For Friday
1. Explore some of these tools and try resizing and editing your photos.  Take some time to watch a tutorial to learn a new technique.

2. If you finish a photo, try uploading it on this Troovi site.  For 12:20 upload it here, and 1:25 upload it here.  This is not required, but helps you see how Troovi works.

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.