Building my ePortfolio: A Body of Evidence

My colleague Sean runs a workshop and blog called “The Better Presenter.” Sean has a great eye for visual design, and is really good at explaining and demonstrating how to make presentations suck less. Although I still have a very, very long way to go, I’ve been able to apply a lot of the lessons he’s taught me towards making my presentations, handouts, and my portfolio more visually interesting.

One of the major points I’ve learned from Sean is that consistency is important. From his recent post on Finding and Using Images:

Visual cohesion is important, and this applies to more than just the color palette and fonts used on your slides. Try to use graphics that are similarly styled, i.e. photos vs. illustrations. Use your presentation tool’s graphic styling options to add the same effects to all of your images throughout the presentation (i.e. borders and drop shadows). [emphasis mine]

In my ePortfolio’s theme, there are two different places to include images. The first is a relatively small thumbnail (or, in WordPress parlance, a featured image) that appears wherever multiple portfolio items are listed. The second is a larger image that appears at the top of each individual portfolio item’s page. The two images never appear in the same place, so don’t have to match, but I could feel myself starting to worry about consistency. For some projects, like workshops and presentations, the visual evidence I have is a handout created through Apple’s Pages. For teaching projects, the evidence is a photo of me working with a group of people. For some projects, I don’t have visual evidence at all.

invisible, by andrew cameron. from the noun project collection.

After taking a deep breath and dropping my shoulders, I reminded myself that my ePortfolio will be a work in progress for a while, and it doesn’t have to be perfect right away. (Have I mentioned that I am both an overachiever and a perfectionist?) I decided the best way to move forward was to find a single source of images that were consistently styled, easy for me to work with, and could provide a reasonable representation of my projects until I could develop another strategy.

For this, I turned to The Noun Project (TNP). I first learned about this collection a couple of years ago when Justin, my successor at Oberlin, used images from TNP as icons in the process of redesigning the CILC ‘s website. The Noun Project is a great resource because many of the images are free as in speech, and all of them are free as in beer. What’s problematic about TNP is that all of the images are vector graphics. This means they will scale up or down without any loss of quality (see Wikipedia’s article on vector graphics for more information), but it’s a different format than most casual users are accustomed to working with.

I personally have never worked with vector graphics before. I have Adobe’s Creative Suite installed at work, but I have little experience with Photoshop and zero with Illustrator. Here at home I only have GIMP, which I love but which will not open the vector graphics from TNP. There is another open-source graphics editor, Inkscape, which is designed to work with vector images, but I was really not interested in learning a whole new piece of software just to create images. I wanted something quick and easy, and so after a little experimenting, I came up with a workaround process:

1. Use OS X’s built-in screen capture process (command+shift+4, then drag the cursor) to take a screenshot of the Noun Project image I wanted to use.
2. Open that screenshot in GIMP, use the “Select -> By color” option to select and cut the black part of the screenshot.
3. Go to “File -> Create new”; GIMP will automatically make the new image’s canvas the same size as the screenshot that’s still open. Open the Advanced Options and set “Fill with” to Transparency before hitting okay.
4. In the new image with a transparent background, paste the image from the clipboard.
5. Adjust the new image to match the size of the final image you want to create. I needed to make a relatively square image fit into a rectangle without being stretched. I first used “Image -> Scale Image” to get the right height (310 in my case), then used “Image -> Canvas size” to get the right width (640). Be sure to center the image before you save the new canvas size!
6. Save the image as an editable file (GIMP makes an XCF), this way you can easily make adjustments later without having to re-do steps 1-4.
7. “File -> Export” the file as a PNG.
8. If you need images of different sizes, now’s the time to make them. I needed a second version of the image to be 310 x 170, which I made by using “Image -> Scale Image” and setting the width to 310. This left me with a height of 150, so I used “Image -> Canvas size” to change the height to 170 and re-center before exporting to PNG.

By the time I’d done this two or three times, I could create a pair of images from TNP within 2-3 minutes. Eventually I’ll learn to work with vector graphics, but I’m pleased with the way these images turned out for now. I’m currently using images created using this method for all of the portfolio item thumbnails, even though I’ve recently managed to find different images for the individual portfolio item pages (like this one).

A list of images from The Noun Project currently in use on my ePortfolio.

The one thing I have yet to figure out is how to properly include evidence from workshops and presentations. Ideally I’d like to embed the actual handouts I created for these workshops, but as I discovered after a couple of hours of troubleshooting yesterday, PDFs created by Pages don’t display certain elements properly when they’re opened via GoogleDocs or Acrobat Reader. PDFs created via other applications embed properly — see the OLA Newsletter entry — so I know it can happen, I just have to find a workaround for my existing documents. I tried using Preview to export each of the individual PDF pages as a JPG (which flattens all of the elements so they’ll display properly) and then recombining that into a new PDF, but it ends up being over 24MB in size, which is ridiculous and unacceptably large. Using Preview’s “Reduce File Size” function brings it down to 300kb, but then you can’t actually read anything, it’s too fuzzy. Ugh.

[UPDATE] I spent a little time with Acrobat Pro, and it turns out that you do need to flatten the PDF pages into images, then reassemable them with Acrobat in order for them to display properly on all PDF readers. Here’s the process I used to make my PDFs from Pages display properly:

1. Open the PDF in Preview, and make sure View ->Thumbnails is turned on.
2. Click on the first page’s thumbnail, then go to File -> Export.
3. Set the Format to JPEG, Quality to Best, and Resolution to 300 pixels/inch. Click OK.
4. Repeat steps 2-3 for each page of the handout.
5. In Acrobat Pro, choose File -> Combine -> Merge Files into a Single PDF…
6. Drag and drop the JPEG files you just created into the window, and make sure they’re ordered correctly. Click Combine Files.
7. Save the combined PDF — it’ll probably be big (about 5-6MB per page).
8. Go back to File -> Save As and make sure to choose Adobe PDF (Optimized) from the drop-down menu. This will reduce the size of your finished PDF to about 200-300KB per page.

The last step isn’t completely necessary, but when you’re embedding PDFs into a website it makes a huge difference to load a 1MB file instead of a 25MB one. Overall this is a really annoying process, but given how easy Pages makes it to create the original document to begin with, I’m willing to put up with a little extra work after the fact.

It’ll be a couple of weeks before I can spend another chunk of time on my ePortfolio, but after I’ve cleaned up a few more things and entered another batch of items, I’ll be back here to wrap up this series of blog posts. Questions, suggestions? I’d love to hear from you in the comments, below!