The cliché, "a picture is worth more than a thousand words", sometimes convinces me, especially if we are talking about our students creating these images by photographing, drawing, or making collages, and discussing these with their peers. Using strong images to introduce themes is a great starter and a nice context to question students. Pictures seem to resonate with many students in textbooks, course material, reports, raw material for photo stories or storyboards, and as assignment products in general. Give students a digital camera and they'll just start photographing and filming. And now it's quick and cheap to take even a thousand photos.
As teachers, we also use a lot of pictures in presentations, exams and exercises, and department or club panels, to photograph experiments and activities and students' works to create mascots made of collages and many other things. I did all of this as a teacher, and I particularly enjoyed making those mascots, for example, using the face of my school's patron with different bodies to publicize events (such as a vampire in a blood collection that was open to the community, a nurse for health week, or a mad scientist during a science week). All of these were huge successes in the school, and a great laugh too!
Let's leave the mascots aside and begin learning photo capturing.
One of the activities in our course consists of students putting together a budget for a music studio, which involves doing some research on equipment and prices, visiting real studios around their locality and taking some photos with a digital camera (a prerequisite of the course) of the solutions adopted in these studios, creating a budget using an online spreadsheet, and finally submitting everything to the course.
Giving a digital camera to students without major guidelines, especially if they are going to take photos with interior lighting in music studios, will probably result in problems of file size, lighting, and/or focus. However, let's not make it complicated—digital cameras these days can do fairly well without manual control. So let's just have a look at some basic tips for effective capturing.
There are three basic things that we should take into account while taking photos:
There is a basic rule of composition called the rule of thirds that states that the main element we want to photograph should be at one of the intersection points of four imaginary lines that divide the picture into nine equal-shaped areas.
Notice that the slider in the mixer above (the subject) is in one of these intersection points. Many digital cameras have this option to show the rule of thirds so that we can frame the picture easily by overlaying these lines in the camera's viewfinder. If not, it's just a matter of imagining the lines.
Using a digital camera indoors can result in really bad photos. As interior lighting is usually more limited than outdoors, if we are using the camera in automatic mode, this will probably require flash or the photos will be blurry (and particularly if we are not using a tripod). Flash can be a problem if you want to keep the colors and original lighting of the interiors, and also has the limitation of giving the foreground a big burst of light while the background is left completely dark. A typical range of flash light is around one to three meters, so taking photos of a studio will almost certainly have these results.
One alternative to the flash is to use the camera with a tripod in manual mode, and control the shutter speed and aperture.
The shutter is the mechanical part that blocks all light from exposing the film (in the case of digital cameras, the CCD sensors) until you press the button. Then it quickly opens and closes, letting the light in the camera through the lens. You can control the amount of time that the shutter remains open by setting the shutter speed in your camera settings. The typical values range from 1/250th of a second to a couple of seconds.
Aperture typically refers to the diaphragm aperture, which can be adjusted to vary the size of the pupil, and hence the amount of light that reaches the CCD sensor. Aperture is expressed in the form f/value, meaning that the smaller the value the larger the lens opening (aperture). There is a so-called Sunny 16 rule that states that an approximately correct exposure will be obtained on a sunny day by using an aperture of f/16 and a shutter speed close to the reciprocal of the ISO speed of the film; for example, using ISO 200 film, an aperture of f/16, and a shutter speed of 1/200 second.
In a place with little light, for example, we could use a low value for the f/value (f/2.8) and a higher value for the shutter speed (for example, 1/3). With these settings, we won't be able to hold our camera steady for 1/3 second, so the secret is to use a tripod, and if necessary, a delayed shutter so that our fingers don't shake the camera while taking the photo.
Here's a photo of a studio wall covered with egg boxes, taken with these settings and a tripod:
This kept the actual room lighting pretty much the same and the picture focused (except on the right, where the tips of the egg boxes were too close to the lens).
When we buy a digital camera, we usually look at the maximum number of megapixels (millions of pixels, the elementary points of which a photo is comprised) of the photos it can take, but we should look at other things as well, such as the quality of the lens. "The bigger the better" is not always true, and in the case of digital photos, if we just want to make small prints or use them on our computer and on the Web, a size of 2 megapixels (1600 x 1200 pixels) is more than enough! If the main goal is this, taking photos with 7 megapixels will be just silly; we'll need more space (this means more expensive camera cards to store photos and bigger computer hard disks), and more time to transfer the photos to our computer. Even 1,600 x 1,200 pixels is too much if we want, for example, to post one of these pictures in a forum post in Moodle; it would result in horizontal or vertical scrolling, as the photo would be too big for a typical screen size. The best solution is to resize them to a proper width using an image editing software. Note that nowadays, it's hard to get just a 2 megapixels camera, but if we were to buy a 7 megapixels camera, we could change the settings to take photos with just 2 megapixels.
With photos, digital drawings, or pictures taken from the Web, we will need to crop, resize, rotate, correct, or compose them, so this will be the time to look at these common procedures. And we will do this with a free image editing software application called GIMP.
GIMP (http://www.gimp.org) is a cross-platform free software application for creating and modifying images and a nice alternative to commercial software such as Adobe Photoshop. With this tool, we can do various tasks, right from simple resize and crop operations to complex character drawing and photo editing. There are simple tools included in the Microsoft Windows as well, such as Paint or Windows Photo Viewer, that allow resizing and cropping. However, starting with GIMP to do these operations will get us used to the interface from the beginning of our course, so that later on we can do more complex operations such as photo editing.
After we download GIMP from http://gimp.org/downloads and install it, we will notice something different about this software as soon as we open it.
There isn't a single window that contains several smaller windows, so if you are feeling a little bit confused, don't worry. After using it for some time, we will get used to it really quickly!
The GIMP standard interface has some main elements as seen in the following screenshot:
In several modules of the course Music for everyday life, we will need to resize photos and screenshots so that they can be easily displayed in a web browser in typical screen sizes, usually 1,024 x 768 or even 1,280 x 1,024 pixels. Let's work on an image from Tears of Steel, an open short movie for which our students will have to create a movie trailer and add a soundtrack in Module 3, Music and media.
This image will give the context to this activity and we will add it to the task description in the activity Soundtrackers. There is a problem though—the images available on the website of the movie, for example http://mango.blender.org/gallery/, are too large to fit a standard Moodle course page. If we added the image as is, we would get something similar to the following:
The problem of using an image of this size in Moodle is obvious, so we will solve it by first cropping the image and then resizing it. We will crop the image because there's additional information in it that is not necessary for what we want, which is just to give some context to the activity. We will then resize it because it will be still too large to fit the course aptly.
So let's first open the original image in GIMP after downloading it to our computer. For this we should perform the following steps:
After the picture is opened in the image window, we will start by selecting the region of the picture that we want to crop using, of course, the Crop tool in the Toolbox pane.
Don't forget that we can use the mouse to identify the functions of the buttons just by waiting a second with the mouse pointer over them. We are then ready to drag around the area we want. So, basically, for cropping perform the following steps:
Note that there will be a shaded part of the picture and this area will be cropped. Also, note the squares at the corners of the selection. We can use these to adjust the crop area. When we double-click at the center of the selected area, we will obtain a picture similar to the following:
The picture we cropped is still too large for our course (around 1200 pixels wide). As a result, before we insert it in our Soundtrackers activity, we will need to resize it. The HTML editor allows resizing of the photo, but the problem is that the image loses quality. The best thing to do is resize it in GIMP. Now the obvious question would be, "What works as a good size for Moodle courses?" As a reference for the width of pictures in Moodle, we can use the following values (considering a typical screen size of 1024 x 768 and a standard theme):
Picture width |
When to use |
---|---|
480 px |
If the image is used inside a topic (as a topic title or label) |
160 px |
If the image is used inside a side block |
640 to 800 px |
If the image is used inside a Moodle resource or activity (for example, a forum post) |
Resizing this image width to 640 px will make it look good in our course activity.
The procedure to resize it is as follows:
And the resize is done. Now, we just need to save it and upload it on our Moodle activity.
The original picture format of JPEG can be used in Moodle without great problems, so we will just need to save the cropped-then-resized version of our original. To do this, we should go to the File menu, and click on Export....
We can select the desired picture format using either of two methods in GIMP. The first is really simple—in the Name: field form at the top of the window, we just need to type the intended extension. GIMP will recognize this and convert the image to the desired format. In our case, we will keep the JPEG format, so we will name the file image_name.jpg
. GIMP will then recognize that we want to save the image in the JPEG format.
The second way to select the desired image format is through the interface. To do this, perform the following steps:
And finally, after inserting the image in our Moodle activity Soundtrackers (using the HTML editor as we saw previously), we will get something similar to the following screenshot:
Sometimes when we photograph a scene with a straight line in the background (the horizon is the best example but in a music studio the same can happen), if we are not using a tripod, it's easy to get skewed photos. We can correct these mistakes in GIMP by using the Rotate tool, which is the button to the right of the Crop button in Toolbox.
To rotate an image, we can do the following after opening the image file:
Flipping and rotating are very easy tasks to perform in GIMP. If we need to flip an image horizontally or vertically, or rotate it (for example, 90º clockwise), we just need to go to the Layer menu, click on Transform, and select the required option from the submenu.
In situations with bad lighting, for example, incandescent light, we will need to correct the white balance, and in worse situations, the color balance of the photo.
We can do this in the following three ways:
One quick alternative is to use the auto white balance function of GIMP. Go to Colors | Auto | White Balance.
If the auto white balance doesn't do the trick, the second option is to use the Levels tool. Go to Colors | Levels…. You can then use the Eye Dropper tool on the left in the Levels window to choose a point in the photo that is completely black and the one on the right for a completely white point. If you can't get both points, try to get one and check the results.
The third option is to use the color balance function. Go to Colors | Color Balance…. We can adjust the color levels and compensate for any lack or excess of a particular color, by selecting the range of colors (Shadows, Midtones, or Highlights) and using the slides for each of the color levels.
If the photos are over exposed (there is extra light), we can reduce the brightness and compensate with the contrast to improve the quality. Go to Colors | Brightness-Contrast…. This can also be used to intensify the contrast of the photo, giving it well-defined shadows. However, note that when we use all of these options, the photo loses information, and if we are not careful, the resulting image can be worse than the original one.
We have now seen how to capture and enhance photos and images in general. Let's now see other useful actions that we can perform on pictures.
Let's see how we can make photo collages, a way of combining several images to make a new one, again using GIMP.
Photo collages are a great way to make posters, site headers, CD art, flyers, certificates, or storyboards. They basically consist of placing together parts from several pictures to make a new one. This can be done on paper of course, and then scanned or photographed to convert it to a digital format (try it, it's fun), or we can do the whole process digitally using GIMP.
In our course, in Module 7, Music and the commons, students are required to edit a CD made of music selections or their own music. In this CD, they will need to create a CD cover. This will be a good context to introduce the photo collage technique.
As we are combining different photos into a single one, we should create a folder to keep all the photos and a project file. GIMP, besides saving in JPEG, PNG, and many other formats, also has one dedicated format for projects that contain several layers called XCF
. So as an example, I have created the cd_cover.xcf
file and a folder called photos
as shown in the following screenshot:
An important concept in photo collages is layers. Let's start with this concept.
Layers can be compared in some ways to audio and video projects as kind of tracks, where we can insert pictures and combine them in a final project.
The first thing to do in our photo collage is to get a nice background image, and at least one other image to work as a layer to add on top of the background. The procedure for adding layers is as follows:
Background
.GIMP will automatically create a new layer called Floating Selection (Pasted Layer), which can be seen in the Layers dialog box.
We have to make sure that the photo we have pasted is smaller than the one in the background. Cropping or resizing it before this can be useful. However, it doesn't need to have the final size for publishing, as we will be able to resize it later as a layer.
In the Layers dialog box, we can also change the name of the layers in our project by double-clicking on one of the layers, which can be helpful if we have many.
It's a common procedure in photo collages to eliminate some of the photo's areas such as backgrounds, or cutting around the profile of a person to isolate them. We will use a technique called Layer Mask that will help us do this easily. To do this, first open the Layers dialog box and follow these steps:
We get something similar to the following screenshot in the Layers dialog box:
Note that we can click either on the thumbnail of the picture or on the thumbnail of the mask (in white, to the right of the thumbnail). We should click on the latter to start removing the background.
To remove the background, we need to select the Paintbrush tool in Toolbox, with black as the foreground. When we start painting our foreground image in the selected areas, these will become transparent. To correct any mistakes, we should invert the foreground and background colors and paint with the brush in white, and the original image will return again. Control the zoom and the brush scale to get more or less detail.
Once we are done, we can scale this layer by going to Layer | Scale Layer (don't go to Image | Scale, as this will cause the entire image, including all layers, to be resized) and place it where we want it by using the Move tool.
Finally, let's add some text to it. Using the Text tool, we can enter some text in the GIMP text editor. A new layer will be created for this.
In the tool options, we can select the font, size, and other attributes for the text.
We can now save the file in the XCF format to keep all of the layer's information (File | Save as…). After that, we can export it (File | Export…) to a more usable format for the Web, such as PNG, and publish it on Moodle, for example, as a forum attachment with ratings. Several CD covers proposed by students can be voted and the winner selected.
18.191.233.43