I created a new document in Inkscape that was 3″ x 3″, created a circle using the ellipse tool and centered it within the document using the Align & Distribute tool, and kept layering artwork into it. I got the artwork for the flags and the fleur de lis from Open Clip Art, and I drew the derby car using pinewood derby car photo references I found via search. I rotated the text around the circle using the “Put on Path” tool under Inkscape’s text menu. To keep creating circles within circles that are perfectly centered, the trick I used was to Ctrl+D the outermost circle and hold down shift while I scaled the circle down – this scales from the center of the circle rather than from the point you’re dragging the scale edge from.

Anyway, after a few iterations we got to the mockup above and sent it over to the patch makers, Stadri Emblems. They took our Inkscape-produced artwork and created this proof:

I thought it came out pretty awesome so I figured I’d post it. So now you see Inkscape is not just awesome for Girl Scouts, but for Cub Scouts too!

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

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:

Tonight I received an email from Eduardo Villagrán Morales, a Fedora ambassador from Chile. He wrote,

I read your post “Some http://www.fpo header mockups.” I want know what tools you use to create mockups.

As I told Eduardo, I use Inkscape running on Fedora as my primary mockup tool, with some help from Gimp for bitmap processing. I realized while writing my response to him that I actually gave a ~50-minute tutorial on how to use Inkscape specifically to create UI mockups, and I have video of it!.

Actually, I spent hours trying to make the video available immediately following FUDcon, but I experienced issue after issue:

• The camera, the Kodak zi8, encodes in .mov format. I wanted to post Ogg Theora video. I wrote a gstreamer pipeline in hopes of accomplishing this but several runs and many hours later, did not have usable video (it seemed to only play keyframes and nothing inbetween – very jerky.)
• The audio on the video was very low. I decided to give up on Ogg and ran the video through some gstreamer pipelines to boost the audio, keeping it in .mov format. This worked great.
• I attempted to upload the video to blip.tv – a video sharing site I like more than most because it supports Ogg formats and encourages Creative Commons licensing. No matter how many times I tried – both through FTP and the web upload client – the video would not appear on my page. It would complain that the video was corrupted – even the original files straight from the camera.
• Desperate, I tried Vimeo. No dice. The video was over their size limit (2 GB – my video is just a hair over 2 GB.)
• *Really* desperate (this was well before the webm announcement) I tried YouTube. No dice! Over the 10-minute limit.

So I simply gave up and forgot about the video until now. But jtanner from #rhel actually recently and kindly volunteered to provide some hosting space for the videos, so I’d like to make them available to you as well as Eduardo in case they are useful. I apologize for not being able to offer them in a streaming or web-playable format. In case you’d like to check if they are worth the hefty download, the slides are of course available, too. I am offering both this video and the slides that accompany it under a Creative Commons Attribution ShareAlike 3.0 license, and if you find either useful please share them – it’s the highest compliment you could give!

Here’s a run-down of the material:

• Part 1: Take a drive around the Inkscape UI – learn which parts of the Inkscape UI are the most useful for creating mockups. We go over vital keyboard shortcuts in this section as well.
• Part 2: The rectangle and text tools are your best friends. These tools allow you to create – you guessed it – rectangles and text which provide the basic framework for your mockups. Learn tips and tricks for using them to your best advantage in mockup creation.
• Part 3: Ctrl+D and movin’ it. One of the commands I use most often when creating a mockup is Ctrl+D, and you can take advantage of this trick to create perfectly-laid-out grids, tabs, navigation bars, and other UI elements in a mockup.
• Part 4: Get ‘em together and group! How to use Inkscape’s grouping functionality to organize your mockups logically.
• Part 5: Save and Share. Now that you’ve got a nice mockup, how are you going to save it and share it with other people? This section goes over an open-source workflow for doing so, showing how to use a single Inkscape SVG file to store multiple screen mockups, export them out into individual PNG bitmaps, and how to share those mockups using a MediaWiki-format wiki page.

I gave the tutorial with a mostly-developer audience in mind so there’s a healthy helping of, ‘you can do it!’ motivational kind-of talk in the video. You may not need it based on your experience , but I’ll justify it by saying that I get quite sad when developers and other folks who are way smarter than me tell me they don’t think they are good enough to create UI mockups. I believe quite strongly that anybody can be a designer. Creating mockups is an important part of working out a UI design, and there’s no mystique or mysterious smoke-filled rituals and ordaining required for you to be able to do it!

From beginning to end, in the video, I walk the class from a basic UI concept (‘the Fedora store’) to a wiki page with multiple screen mockups on it. It’s a simplistic example, but it pretty much outlines from beginning to end the workflow I follow using Inkscape and Mediawiki to produce mockup specs like this and this. It’s the same process I’m following in creating the Fedora website redesign mockups I’ve been blogging so much about lately.

So if you’d like to learn how to do this sort of thing, I hope you enjoy my attempt at teaching you how. Let me know what you think. And to my friends who still insist on Macromedia Adobe Fireworks or Illustrator or Photoshop being vital to creating mockups – please consider watching this and let me know how my tools fall short of yours in getting the job done! Maybe there’s ways we can improve them such that you can use them as well

Insert Hilarious Caption Here.

Video

• Part 1 (~2.0 GB)
• Part 2 (~ 143 MB)

Slides

• OpenOffice.org ODP format slideshow (40 slides)
• PDF format slideshow

NOTE: The adorable characters sprinkled throughout the slides were created by María “Tatica” Leandro, a quite talented and well-known designer on the Fedora Design team as well as a prolific Fedora Ambassador. She used Inkscape, of course.

Designing UI Mockups in Inkscape by the Fedora Project is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
Based on a work at tannerjc.net.