Gimp, Girl Scouts Class, Inkscape

Girl Scouts’ Digital Media Class, Day 1 & Day 2

This evening I taught the second class session of a 9-week program to teach ~14-year old Girl Scouts how to work with digital media using free software tools. Our first class was last Friday. The classes are two-hours long, on Friday nights (these girls are dedicated!), on a weekly basis.

The Plan

So you may have heard of the Women in free software caucus organized by the Free Software Foundation last year. One of the major goals of the womens’ caucus is to bring free software to girls and young women.

Deb Nicholson and I have been planning a program to do just that over the past few months with Red Hat and the Girl Scouts of Eastern Massachusetts.

My co-worker Sue first got me in touch with the Girl Scouts of Eastern Massachusetts. It’s a really great organization to work with. We started with an informal email exchange this past summer, I met with them at their offices in downtown Boston, we devised a plan, and they helped make it happen. They located a computer lab for us to work in, a group of girls in an appropriate age group for the program who are willing to learn, worked out a schedule, handled the processing of our CORI forms, and also provided a facilitator (Kim, she is great) who is trained and experienced in working with kids to help run the class. Thanks to the generosity of several Red Hat employees, in the meanwhile I gathered a collection of 2GB USB keys and loaded them up with the Fedora Design Suite. I posted a full set of documentation on how the keys are set up with instructions and the KS files on the Womens’ Caucus wiki. (Mad, mad props go to Luke Macken for being my LiveUSB support guru!) I also, in preparation for class, worked out a rough curriculum for the students.

There is no Photoshop™ in the community center lab we’re teaching this class in. No Illustrator™. No Painter™. This is the first time most of these young women have experienced this kind of creative software. Most of these girls don’t have a computer of their own and have to share, some of them don’t have one at home. At the beginning of class, the girls boot up their USB keys (they are already becoming pros at figuring out how to use the BIOS menu – it’s F12 on some of the machines, F9 on some, F1 on others.) We collect the USB keys at the end of class, and at the end of the final class the girls will get to keep the keys – so they will have an operating system of their very own to experiment and play with.

Class Day 1

The general outline for each class that I devised goes something like this:

  • Gather the girls at the front of the room in a circle. Ask them the “question of the day” – going around the room, each girl tells everyone her answer.
  • Using the projector, I’ll give a quick demo, showing the day’s project and how it relates to the question of the day.
  • The girls go off and complete the project, using their answer to the “question of the day” to complete it and raising their hands and asking for help when needed. The majority of the class is this lab-style approach.

So… at the beginning of day 1, I introduced myself and Kim to the girls, and we handed out the USB keys. They had sticker labels on them, and we passed markers, stickers, and name tags around for the girls to label their keys and also to create name tags so I could try to learn their names! I explained to them that they’d get to keep them at the very last day of the class so they better be there on the last day. (Kim had noted this program has had difficulty keeping attendance up.)

Then I asked the girls to go around the room and tell me their name and their answer to day 1′s question of the day. What was day 1′s question of the day….?

If you could visit anywhere in the world (or even in space!), where would you want to go?

The girls answers varied from Paris, to Miami, to the Caribbean. Once we went around the room, I gave them a quick demo on how to combine two photos into the same Gimp file as separate layers – in my demo, one photo was a snapshot of me, the other a picture of my place – Ireland. Then I showed them how to add a layer mask to my photo to cut away the background in my photo, so it looked like the picture of Ireland is where I really was. I ran through it, deliberately making a few mistakes and showing a few tricks off – they are outlined in the course PDF. For example, I showed the girls what the mask looked like, and showed how they could cut away by painting black on the mask – then I cut off part of my face. I showed them by switching to painting in white on the mask, I could paint my face back on.

Because I screwed up the USB images this first time (they were using a 64-bit kernel because I hadn’t cleared /var/cache/live when I created the final set – it had a 64-bit kernel in there for some reason even though I ran setarch i686 when creating the ISO), the girls had to pair up on the half of the lab machines that were 64-bit. We couldn’t use the 32-bit machines. After we’d sorted that out, the girls looked for an image of their destination while one at a time I took portraits of each girl. Then I went around the room with a USB cable and transferred each girls’ portraits onto her desktop. As the girls moved through the lab, a few issues I totally missed explaining cropped up:

  • I wasn’t able to find an ethernet cable for my demo laptop, so I had to run quickly to one of the lab computers and download some images to demo with. Oops. I couldn’t demo search.creativecommons.org because of that.
  • When I did my demo, I had a 1024×768 image of Ireland and an 800×600 snapshot of myself. These girls were finding background photos that ranged from 800×600 to 1024×768, and then importing their 2592×3888 pixel portraits into the photo. I didn’t think to explain how to zoom out to see the yellow layer boundary of the huge image, how to scale that image down to fit within the background (being sure to click the lock icon to keep aspect ratio), and then to move the scaled-down image out of the there-be-dragons-abyss-3000px-outside-of-the-main-image-canvas using the move tool. Whoops. So Kim and I ended up going around to the girls and explained how to do it. Since there’s a few ways to do it and I tried many of them, here’s the workflow that seemed the easiest for the students to make sense of:
    • As soon as you see that your image is too big, click the magnifying glass, select ‘Zoom out’ in tool options, and zoom all the way out until you can see a yellow outline rectangle. That is how big your image is.
    • Click on the scale tool in the toolbox, then click on your image.
    • Click the ‘lock’ icon in the scale tool dialog box.
    • Scale the image down by dragging on a corner handle, until it looks like it is the right size.
    • Click the ‘Scale’ button.
    • Find the ‘move’ tool in the tool box (four blue arrows). Move your photo into the landscape you picked.
    • At this point your image canvas is tiny! Click the magnifying glass, select “zoom in” in the tool options, and keep clicking until your image is a comfortable size!
  • I totally predicted confusion between masking and the eraser tool, and I think I overcompensated for it. Only a few girls’ first instinct was to reach for the eraser tool. I showed them how to add the layer mask. That part of my demo must have been run through too fast – because most of the girls started painting black and white with the paintbrush on top of their photo and got confused as to why it wasn’t doing the same cool tricks they watched up on the projector. So Kim and I also had to go around to the girls and show them how to right click their portrait layer, “Add Layer Mask”, *then* show them how to paint the black to erase, paint white to bring back. Once the girls got to that part, their eyes lit up and you could tell they had a lot of fun with it.
  • Most of the girls did not read very carefully through the packet. I formatted it in the hopes of providing materials that could be reused, but I think the packet is too wordy and not very easy to refer to in a classroom environment. I think the next packet I do will have very large page numbers and more ‘waypoints’ and graphics so it’ll be a bit more engaging to read through. The girls had no problem referencing back to it after they asked a question and I pointed to where the answer was. But they definitely didn’t read through the whole thing (and honestly I cannot blame them! I will try harder to do a better job on the next packet!)
  • Finally, especially on the day of the girls’ first Gimp experience, I think we really needed more hands to help answer the girls’ questions. At any given point I had two or three girls tugging on my shirt or poking my arm or waving their hand in the air wildly trying to get my attention. :) There was just too much material and things to learn that they’d never done before. I hope as the course progresses, the diff between what the girls can do in the Gimp and what they’re learning will be far less and they won’t need as much attention.
  • I had a section in the course packet on image copyright encouraging the use of search.creativecommons.org, but I think many of the girls simply used the built-in Firefox Google search box and didn’t really use search.creativecommons.org. Whoopsie. I decided to let it go for day 1.

In summary, these are the “bugs” we found in day 1!

  • The packet format should be improved. It’s too hard to navigate the packet.
  • Scaling down the huuuuuge portraits is hard!
  • Zoom in / Zoom out is hard. Pressing ‘+’ zooms in, but pressing ‘-’ does not unless you hold down shift. The magnifying glass was more intuitive for the girls, but they still got confused about having to switch between zoom in and out using tool options (they couldn’t find the tool options palette sometimes.)
  • The scale tool icon proved very difficult to find for them. They complained that it looked too similar to the tools next to it in the default Gimp layout.
  • That the aspect ratio lock icon was not checked off by default caused a lot of confusion.
  • When the girls dragged their portraits into their Gimp project, they were typically so much larger than the canvas, that no part of the yellow ‘layer boundary’ border was visible. Confused ensued!
  • The demo was too fast! Many girls missed the step on using ‘Add Layer Mask.’
  • 64-bit keys don’t work on 32-bit systems – and half of them were 32-bit. Ouch!
  • Google image search – bad!
  • No ethernet cable for demo machine!

Despite a few hiccups here and there (the 64-bit USB key issue ate 10-15 minutes), the girls generally seemed engaged with the course material, so even though it could have run more smoothly, day 1 was a success I think!

Day 2

Because of some of the issues that cropped up during day 1, tonight I decided to make the project a bit of a review of day 1′s material, with a minor twist to keep it engaging rather than repetitive. Today Martin Owens came to help Kim and I with the class, and it was a really huge help!

If I’m remembering the order of things correctly, I started out by giving the girls a self-admitted “Public Service Announcement” about image search. I brought up search.creativecommons.org up on the projector, and told the girls a couple of stories to explain why I wanted them to give it a try. The first story I told them was about my adventures in trying to find a wedding photographer who would sign copyright of my wedding photos over to me. I told them about the photographer who told me that she uses a reverse image search engine to see when her clients are using their wedding photos in an unauthorized way, and how she charges them $1000 per violation. So I gave them a bit of the side showing how unfairly limiting copyright can be. Then I told them the story of Gasper Llamazares and how even the FBI goofs up copyright law sometimes, using Gasper’s photo to create a wanted photo of Osama bin Laden. So I gave them a bit of the side of how copyright needs to be respected as well.

I think this explanation worked pretty well, because I noticed all the girls actually using search.creativecommons.org during class.

Then I asked the girls a bunch of the questions on the back of the course packet. The two things that the girls couldn’t remember how to do was how to get two images into the same file, and how to add the layer mask. So we decided to review them first.

Then I asked the group to name a destination. Martin called out “Thailand,” so I grabbed a picture of a Thai beach using search.creativecommons.org. Then I asked the group to call out the name of a celebrity to put on the beach. One of the girls called out “Trey Songz.” Now, this became a big joke for the day, because the girls kept mentioning musicians I had not ever heard of – and they absolutely, jaw-droppingly could not believe I possibly could have not heard of these musicians. One of the girls has made it her mission to educate me the rest of the class. :)

Anyhow, Martin and I figured out a nice system to go through the demo on-the-fly – I stood up by the projector screen and pointed out tools and menu items and things about the image, and Martin drove the laptop so I didn’t have to walk back and forth between the screen and the keyboard. We went through step-by-step, at times prompting the girls to call out what to do next. They really seemed to get things at this point. Once we finished up the demo, I asked the girls the question of the day.

What was day 2′s question of the day….?

If you could hang out with any celebrity of your choosing, who would it be?

However, we did not go completely around the room in answering this question. These girls are so cute – some of them were shy to admit which celebrity they had a crush on, so we decided that they could keep their answer to the question private and just think it over.

Two new girls showed up to class today, so I took their portraits while the rest of the class got started searching for their favorite celebrity. Things did go a lot smoothly this time, although there was still some confusion over painting black & white on the photo vs. painting black & white on the image mask. One problem several girls encountered was that after they finished with their mask, they wanted to move their masked image, but they kept moving the mask instead of the image. So I showed them how to “Apply Mask” so they could then move it again. Sometimes when the girls moved their image, they noticed parts of the image they hadn’t seen to mask out before, so I tried to show them to use the eraser tool to clean those up, but they wanted to mask them out because they were more comfortable with that at this point. (They really liked how they could ‘paint it back on’ when they made a mistake.)

Today I ended up explaining “undo” to a lot of girls, so I’ll need to review it at the beginning of next class. I also think that how to save files out was a bit glossed over, so I want to do an interactive exercise during the demo next time to solidify how to do that.

The results of the girls’ work today were pretty impressive. We had a visitor to the computer lab who was truly amazed when he saw one of the girls’ projects – she had posed so her project looked like she was leaning against a silver Lamborghini Gallardo (her ‘celebrity’ ;-) ). He couldn’t believe she had done it. Some of the girls picked photos of musicians who were on dark stages, which really contrasted with their well-lit portraits. I showed them how to use the curves tool in Gimp to match their image to the darkness of their celebrities. This was definitely an eye-lighting experience. By the end of the class, I watched three girls upload their photos to their Facebook. We’ll find out next week if their Facebook friends believed the images. :)

Warm Fuzzies Bonus

Some “this-is-why-I-love-teaching-kids” moments from today:

  • I got to class a little early, and a couple of the girls had already shown up. I asked them how they liked the first class and if there was anything I could do better. One of the girls told me, “I wish I didn’t have to wait for Fridays to take this class!”
  • The photo of me at the top of this post is by one of the students – she finished her work early today and asked if she could play with my SLR. Of course I let her, and not only did she take photos of the class for me (still working on release forms), but she even took portraits of one of the other students to help her with her project. What a great kid!
  • You had to see the look on another one of the girl’s faces when I showed her Gimp’s curves dialog – and then later on when she uploaded her project to her Facebook page, rubbed her hands together, and said “They are totally going to fall for it! They are going to think I met Nicki Minaj – I can’t wait to see what they say.” I can’t either. :)

Follow Along on Your Own

As I did with Red Hat’s earlier Inkscape class, I’m going to try to make a blog post per session to keep you updated on how the class is going, and hopefully to also be a resource to other folks who might be interested in teaching a similar class. I’d like to document any issues we run into and the solutions we come up with as well as the successes we stumble upon to that end.

So, here’s the lesson plan and exercise sheets we used for the class on days 1 and 2. Because day 2 was a review of day 1, we used the same packet:

Introduction to Digital Media Lesson 1

thumbnail

If you’re following along at home and have any questions about the lesson or exercise go ahead and ask away in the comments! :)

This course is sponsored by:

Red Hat, Inc.
The Girl Scouts of Eastern Massachusetts

Discussion

18 thoughts on “Girl Scouts’ Digital Media Class, Day 1 & Day 2

  1. Great stuff!
    I’m an aspiring GIMP user myself, so I’ll be following along with just as much interest as your actual students :)

    Posted by Psychedelic Squid | October 23, 2010, 1:07 am
  2. Wow, great stuff, keep up the good work! It made my day when I saw that all gathered keys have SUN logo on them :-))

    Posted by Pavol Rusnak | October 23, 2010, 4:45 am
  3. Very good work. Keep it going forward.

    Posted by Renan | October 23, 2010, 11:35 pm
  4. I found that you used term “canvas” and the “images” in the the sense how it is done in Adobe Photoshop.

    I know that Adobe Photoshop is more designed for painter than phtographer or digital art by the terms what they use. And it makes the Adobe Photoshop unintuitive by many ways.

    Example: You do most of the edits grought “Image > adjust” menu.

    In GIMP, the menus are more logical and intuitive way. And there is important to understand that one window is the image and then you have layers and selections.

    And that actually makes it very easy to tell people that when they want to do something what affects the image, they should check the Image menu. When they want to do something for specific layer, they should open the layer menu or filters.

    And filters affects to the active layer or only the selection if there is selection.

    And this is one of the biggest problem what Adobe Photoshop users are trying to solve when they use GIMP, as they are always going to “Image >” menu.

    And it really is stupid to call layers as images and because the window where all the layers (etc) are, is the image what you then manipulate.

    Adobe has started to solve this by focusing Adobe Lightroom for the photographers and Adobe Photoshop only for the painters. As both of those areas use same terms for different things. (Like Canvas vs Image and Image vs Layer).

    And this was the one of the main problems what I noticed when I was teaching photographers (from 18-32 years old) to use Adobe Photoshop and GIMP. Most people found GIMP much easier and intuitive than Adobe Photoshop, but only those who were already very familiar with Adobe Photoshop, they could not understand the layer vs image vs canvas separation so well but they were trying to understand everything by Adobe Photoshop ideas.

    And lots of help to learn GIMP so fast was that at same time there were classes about painting and physical modeling with clay.

    Posted by Fri13 | October 24, 2010, 10:26 am
    • Fri13, I can’t say I agree entirely with you there, unfortunately. I’m not sure why you bring Adobe into this, because neither I nor these girls use Photoshop. The last time I used Photoshop must have been around 2000 or 2001, and I am sure these girls have not ever used it.

      I use the term “canvas” and “images” in the same exact way the Gimp “Image” layer does. If I am not I would definitely appreciate an explanation of where I am going wrong as I’d like to make sure my instructions to these students are correct.

      Either way, thanks for the comment!

      Posted by mairin | October 24, 2010, 11:17 am
      • I brought the Adobe Photoshop as example because it is a application what is using a “Image” “Layer” and “Canvas” by the way as it is very difficult.

        As in the GIMP the image is everything what you see on the window, in simple way Image = all layers. But in Adobe Photoshop the single Layer or selection = Image.

        As if you drop a image file from filemanager in GIMP, it becomes a layer. Even that it have been a image in the nautilus or image viewer, but in GIMP it becomes a layer. In Adobe Photoshop, it stays as Image, but it is still a layer as well. When using a Adobe Ps, it soon comes clearly that it is difficult to do anything with sane way as most of the edits are done to layer trought the “Image” menu.

        In GIMP they are more sane as you have Image for all layers (everything you see), layers for layers and effects for active layer or selection.

        My point was that GIMP is very good for teaching a image manipulation as it does very clear separation between canvas, image, layer and selection. While Adobe Photoshop does not.

        As in GIMP, the image has the size, but as well does the canvas has the size. And you can keep image size at same, but resize the canvas exmp. bigger.

        In Adobe Photoshop that would be more difficult to actually explain as there canvas means almost different thing as in GIMP.

        As in GIMP we do not draw anything to canvas, but to the layer. And canvas stays more or less as just hypothetic illustrator of the virtual canvas where we can place multiple layers to get a image.

        Posted by Fri13 | October 26, 2010, 4:32 pm
        • I’ve been using Gimp for about 10 years now and I can’t say I ever really paid that close attention to the vocabulary, nor did I before with Photoshop.

          Posted by mairin | October 26, 2010, 4:41 pm
  5. If you are interested in having the girls install the following script, it will facilitate scaling the really large layers to fit within the image.

    http://chiselapp.com/user/saulgoode/repository/script-fu/wiki?name=sg-layer-fit-to-selection

    The file should be saved to the ~/.gimp-2.6/scripts directory (this is a normally hidden folder) and then GIMP started. If you’ve already started GIMP then you can run “Filters->Script-fu->Refresh Scripts” to load the new script. Once loaded, you should see a new command under the Layer Menu call “Fit within Selection”.

    After the user has loaded their two pictures into GIMP as separate layers, she just needs to activate the oversized layer (by clicking on its thumbnail preview in the Layers Dialog) and run the “Layer->Fit within Selection” command. The layer will be scaled down to fit within the image (while maintaining the original aspect ratio).

    If there is a selection made (with the Rectangular Selection Tool) before the script is run, the layer will be scaled to fit within that rectangle. This would permit the user to place the oversized layer over a certain region of the background.

    Also, with regard to having to hold down SHIFT in order to zoom in (the ‘+’ key), you might want to have your girls enable Dynamic Keyboard Shortcuts so that they can easily reassign their keys on the fly. This is found under “Edit->Preferences” about halfway down the Interface page. (They may already be enabled by default on your GIMP, in which case you can ignore these instructions.)

    Once Dynamic Keyboard Shortcuts are enabled, it is only necessary to hover the mouse pointer over a command in the menus, and then press a key to have that key assigned to that command. For example, pressing the ‘=’ key while hovering the mouse pointer over the “View->Zoom->Zoom In” command would eliminate the need to hold down SHIFT (while pressing the ‘=/+’ key) in order to zoom in. (Note also that if using a wheel mouse, holding down the CTRL key while “scrolling” in the image window is an easy way to zoom in and out.)

    Posted by saulgoode | October 25, 2010, 6:14 pm
    • That is nice script, thanks for information!

      Although I do not find it so hard first to use measurement tool (Shift+M) to take the wanted size and then resize the layer by Shift+T or from menu Layer > Resize Layer and type the size info there and OK.

      Must really checkout that script!

      Posted by Fri13 | October 26, 2010, 4:37 pm
  6. is Gaspar Llamazares not Gasper LLamazares

    Posted by luzem | December 4, 2010, 1:26 pm
  7. Good job and great materials! I can’t find the materials for the second class, though. I guess you guys just used the ones from Day 1. By the way, what license are these files under?

    Posted by Majid | December 31, 2010, 5:54 am
  8. I must admit it is one of your best ideas.
    They are very useful because it provides an alternative.
    Linux is for smart people.
    Good luck

    Posted by Catalin | January 26, 2011, 2:51 pm
  9. Wow! I needed a good guide to learn picture editing without getting into too much complicated stuff to early because i am not used to working with pictures at all. I have been forced into editing pictures because of the poor quality logos, posters and things people give me to put up on my company’s website. Low quality jpgs far tooo often.

    The course materials were exactly the sort of thing i have ben hoping to find and the comments have helped me understand a lot more too.

    Thanks everyone, especially Máirín Duffy (obviously) but also Fri13 and other in the comments section
    Good luck and regards to all from
    Tom :)

    Posted by Tom | January 31, 2011, 9:30 am

Trackbacks/Pingbacks

  1. Pingback: Fedora Installation User Experience Improvements & Syslinux « Máirín Duffy - November 18, 2010

  2. Pingback: Girl Scouts’ Digital Media Course Materials « Máirín Duffy - January 26, 2011

  3. Pingback: Red Hat News | Opensource.com Names Award Winners - February 2, 2011

  4. Pingback: Opensource.com Names Award Winners | Red Hat Docs - February 3, 2011

  5. Pingback: Daily links for 02/13/2011 | Blog | Bob Sutor - February 13, 2011

Follow

Get every new post delivered to your Inbox.

Join 55 other followers

%d bloggers like this: