EDAD660 (2010)

Last night Radwa discovered shapecollage.com which allows you to create photo collages using your own photos.  You can even embed the collages once you’re finished.  Here’s an example of what you can create (I used one single photo for this demo but you can use any number of pictures.)

Screenshot of my shapecollage - visit the link above to see the interactive version

Reeham and Omneya asked a great question in class last night – can you incorporate images into the description box that appears when you click on a place in Google Earth?  After a little bit of research I found a solution.  It’s requires a few steps but it’s not too difficult – here’s how you can do this yourself.  For more information please check out the official Google Earth user’s guide.

1. Find an image on Flickr that you would like to use in Google Earth.  This can be an image that you find via the Flickr search tool or one that you upload to the site yourself.
2. With the picture displayed, click on the ‘All Sizes’ button.
3. Select a size – I recommend going with ‘medium’ or ‘small’ as you don’t want to overload the Google Earth text box with a very large image.
4. At the bottom of this page find the ‘photo URL’ box – copy this link.
   

   The photo URL that you should copy

5. Next, open up Google Earth and edit one of your placemarks.
6. To add in an image you need to type in a little HTML code.  Here’s what you should type:<img src=”PASTEPHOTOURLHERE”>
7. Make sure to paste in the URL that you copied in the correct spot.
8. Your photo should now show up when you click on your placemark!

This tutorial is based largely on a PhotoShop tutorial set authored by John Kuiphoff.  The original version of this tutorial, including directions on how to accomplish these tasks within Photoshop, can be found here.  The materials referenced in this exercise can be downloaded here (ZIP File).  You can download a free copy of Gimp by clicking here.

Tutorial #1: Rotating an Image

This is probably the most basic task that you’ll be called upon when working with digital images.  You can easily rotate the entire canvas of an image in Gimp by doing the following:

1. Open an image
2. Click on the Image menu
3. Highlight the Transform submenu
4. Select the operation you wish to use (i.e. Flip Horizontally, rotate 90 degrees clockwise, etc.)
5. Save your image (File -> Save As)
6. If the image is photographic in nature, save it as a JPEG.  If not, save it as a PNG file.  Adjust the JPEG quality settings as necessary.

Tutorial #2:  Resizing an Image

Modern digital cameras take ultra high quality photographs that print out beautifully. However, using these high quality photos in an online environment, such as your blog, is generally not advised. Larger image sizes take much longer to load in, and they will eat up your available space on Globalblogs, Edublogs or any of the other major blogging services. Here’s how you can resize your image to be a bit more manageable:

1. Open an image
2. Click on the Image menu
3. Click Scale Image
4. Type in a new size in the width and height boxes.  Changing one value will change both, so your image stays in proportion.

Web images generally work best in the 300-700 pixel range.  Images on our class blog are generally shrunk down to about 300 pixels to minimize load time.

Tutorial #3:  Levels

Adjusting the color levels of a photograph is probably the easiest thing you can do to improve the quality of your picture.  Here’s how you can get started:

1. Open an image
2. Click on the Colors menu
3. Click on Levels
4. Here you will see a graph of the color values present in your image.  At the bottom of the graph are three sliders.  Grab the first sliders and move it such that it appears close to the beginning of the graph.
5. Grab the last slider and move it so that it is near the end of the graph.
6. Like magic, your image quality will improve – sometimes dramatically!

Tutorial #4:  Contrast

Sometimes you need to make an image “pop out” a bit more.  Adjusting the contrast can sometimes help.  Here’s how to get started:

1. Open an image
2. Click on the Colors menu
3. Click on Brightness – Contrast
4. Adjust the sliders accordingly

Tutorial #5:  Color Adjustment

You can easily adjust the color balance of an image to add more red, green and blue colors into the environment by doing the following:

1. Open an Image
2. Click on the Colors menu
3. Click on Color Balance
4. Adjust the sliders accordingly

Tutorial #6:  Fixing Damaged Photographs

Sometimes you need to “clean up” an image that has been (physically) scratched or damaged.  Here’s how to use the “virtual skin graft” tool to do this

1. Open an image
2. Click on the “clone tool” (looks like a rubber stamp)
3. Identify a rip that you would like to fix
4. Hold down the CONTROL key and select an area that appears to be undamaged close by the ripped area
5. Click on this area
6. Release the CONTROL key
7. Now move your mouse over to the ripped area and hold down your mouse.  Move it around to cover the area.

This technique works best if you zoom very close into the image.  You can zoom by using the percentage drop down box that is located at the very bottom of your image.

Tutorial #7:  iWarp

iWarp is a distortion tool that lets you exaggerate, shrink, move and spin portions of an image.  Here’s how to get started

1. Open an image
2. Click on Filters -> Distorts -> iWarp
3. Use the tools in the iWarp menu to modify your image.  For example, to make someone’s eyes bigger, simply click on the ‘Grow’ button and then click on their eyes.  Make sure that you click on the small preview image inside the iWarp menu and not your main image.
4. When you are finished click the OK button to apply the changes to your image

Here’s the Dove video that we watched in class that illustrates some of these techniques in action:

Tutorial #8:  Filters

Gimp has some built-in special effects that can be used to create interesting effects on top of your image.  Here’s how to get started:

1. Open an image
2. Click on the Select Menu and choose All
3. Click on the Filters menu and select a filter.  Each filter operates in a slightly different way, but in the end the filter will apply a new effect to your image.
4. Filters can be combined and layered on top of one another to create a wide range of interesting effects

Tutorial #9: Combining Two Images

You can easily combine elements from multiple images into the same image using Gimp – here’s how:

1. Open up two images – we will copy content from one image and bring it into another. In my example in class I used one file that contained 8 fish and another that contained a small aquarium scene.
2. Use the lasso tool (third tool in the first row) and select a portion of the first image (the fish) – try and stay as close as possible to the image to create a smooth cut-out.
3. When you are finished, connect your beginning and end stroke.
4. Click on the Edit menu, and then on Copy
5. Switch over to your second image (the aquarium)
6. Click on Edit -> Paste as Layer
7. Use the move tool (third row of tools, second tool in) to move your object around.
8. Use the scale tool (fourth row of tools, first tool in) to resize your item.  Click the Scale button in the pop-up dialog box to accept the resizing once you are happy with it.

Color

Being colorblind is tough.  I can’t tell the difference between reds, greens and browns, and even some blues and purples give me trouble.  Matching colors has always been a nightmare for me, and for a long time my digital projects looked as though they were thrown together in a dark room.

Thankfully technology came to my rescue a few years back and provided me with a number of software packages that help me to compensate.  Here are two of my favorites:

1. Colr.org (http://colr.org/): Create a color scheme from any image – just upload a photo or pick on on Flickr and have the program select a color-correct palette for you!
2. Color Scheme Designer (http://colorschemedesigner.com/): Use color theory to mathematically select perfect color combinations.  Amazing!

Fonts

1. Fontifier (http://www.fontifier.com/): Fontifier lets you design your own font using a downloadable PDF template.  To use it, simply hand-write the individual letters and numbers that you would like to include in your personal font.  Scan the paper in and voila – instant font!  It costs US $9 to create a font through this tool.
2. daFont (http://www.dafont.com/): Thousands of free fonts for both Macs and PCs.
3. 1001 Free Fonts (http://www.1001freefonts.com/): The name says it all!

The following is a list of great online tools to help manage your digital photographs:

1. Photoshop Online (https://www.photoshop.com/): Upload, edit, store and embed your digital photographs using Photoshop Online’s free interface.  The editing capabilities are fairly basic (level adjustment, color manipulation, etc) but for small projects the site works very well.  The free version of site allows you to store up to 2GB of photos.
2. Aviary (http://aviary.com/): Aviary offers an impressive array of photo manipulation tools that can be accessed directly via your browser.  Edit photos using advanced tools that are normally reserved for desktop applications, add special effects, and even make a movie out of your photos.
3. Picnik (http://www.picnik.com/): Picnik is a slick web-based tool that lets you perform basic image manipulation tasks such as cropping, rotating, red-eye correction, etc.   It has an impressive array of sharing options, including a direct link to Flickr, Facebook and Myspace.
4. Flickr (http://www.flickr.com/): Flickr delivers a wide range of educator friendly services, such as image annotations, integrated discussions and commenting, and the ability to make all of your Flickr images private to the outside world.
5. PhotoSynth (http://photosynth.net/): Photosynth turns your digital photographs into an explorable 3D space!  Simply upload a set of images (20 or more) and the software will “stitch” them together into a cohesive 3D space.  Photosynth requires a download and is only available for PCs.
6. Make your own Magazine Cover (http://bighugelabs.com/magazine.php): Create your own customized magazine cover using photos from your desktop or from Flickr.