Gandalf reading a book. "A Wizard is never late, nor is he early. He returns his books precisely when he's meant to"

Making Posters - Productive Procrastination

Some of the most commented-upon posters on my library walls are these classics from the wonderful PaperZip website (click the images for links to high quality downloads):

Batman Returns His Library Books (or at least, he gets Alfred to do it for him)
If you had a time machine, you'd never have any late fees.

I've also got a few nice comments about this Spock poster I made myself:

Mr Spock wants to learn about The Humans

A student said to me the other week, "You just need a Star Wars poster and a Lord Of The Rings poster, and then ALL the nerds will be happy!" So, while looking for a productive way to procrastinate from putting together an assembly, I decided to make all the nerds happy.

This is what I came up with:

Funny book it is, yes.
Or he gets Frodo to take them back for him.

I was quite pleased with how they turned out, so I shared them on Facebook where they have been one of the most popular things I've ever posted. I have been asked by numerous people how I made them, so I thought I'd write a blog post about it. And here it is.1

Tools

I used the following free online tools to create these posters:

Gandalf

I'll start with the Gandalf one, as it's the most straightforward:

Step 1 - Setup

  • In Google Slides, create a new blank presentation document, and delete all the elements that appear on the page by default.
  • Change the page size to A3 (click File >> Page Setup... then select Custom from the dropdown menu and set the dimensions to 42cm width, 29.7cm height).
  • Then change the background colour of the slide to Black (click Background... >> Colour >> select black then click Done).

Step 2 - Find Your Picture

  • In Google Images (or your image search engine of choice), find the picture you'd like to use. I searched for "Gandalf book" to find the above image2.
  • Download the picture and insert it into the slide (click Insert >> Image... then choose one of the upload methods).

Step 3 - Finishing Touches

  • Resize and reposition the image so that it is in the middle and fills the width of the page.
  • Insert one text box at the top of the page, and another at the bottom. Change the font colour to white, then enter your text and set your font (I used Open Sans Extra Bold3, size 84 for the top text box, and 68 for the bottom one). Centre align the text, and position the text boxes as best pleases your aesthetic sensibilities.
  • Export to pdf - click File >> Download As >> PDF Document (.pdf). Open up the downloaded document and print (you can also just print from within Google Sheets, although I sometimes get inconsistent results that way).
  • Laminate, mount, frame... do what you do with your posters!

Yoda

I am very pleased with the Yoda poster. Here's my method:

Step 1 - Setup and Background

  • If you don't already have one, you'll need to set up a Canva account.
  • Select the Poster template to start a new design (it will open in a new tab).
  • Select Background and click the black box.
  • In the search bar, type “frame with a solid line”. Select the first option that appears.
  • On the canvas, make sure the frame is selected and click the square colour box above the canvas. Click the + button, enter FFEB00 in the Color Code # box at the bottom, and press the enter key.
  • In the search bar, type "picture of sky at night" and select the first image in the results (or which ever one you like the look of). Resize it so that it almost fills the canvas - but leave a small border around the edge - and position in in the centre of your image.
    • I also played around with filters to change the look of the picture - select the image in the editor, click Filter in the top left menu and experiment with the settings until you've got it to your liking. Click Advanced options for the full range of settings. If you’re interested, the settings I used are:
      • Brightness: -28
      • Contrast: +100
      • Saturation: -40
      • Tint: 0
      • Blur: 0
      • X-Process: -100
      • Vignette: +100
  • Resize the yellow frame so that it borders the galaxy picture.

Step 2 - Find Your Pictures

  • In Google, search for "Yoda", then click Images.
  • Here’s the clever bit: under the search bar, click Tools and a menu will appear below. Select Color >> Transparent. Click on your Yoda of choice, right click over the image and save the image to your computer.
  • Next, you need to find the book that you would like Yoda to return to the library. Repeat the above steps (it doesn’t have to be a transparent image) to find an image of your book cover of choice.

Step 3 - Edit your images

If you look closely at my Yoda poster, you will see that his thumb is visible in front of the book - to make it look more like he’s actually holding it (see also the Spock picture above). To create this effect, I used the pixlr image editor. It does get a bit more fiddly from here, so if you are not bothered about this level of detail or are a bit overwhelmed by the software, just import the pictures of Yoda and the book cover into Canva, put them in your design and skip to the step 4.

Still with me? Good.

  • In pixlr, select Open Image From Computer and browse to the Yoda picture you just downloaded.
  • Click Layer >> Open image as layer and browse to the book cover you just downloaded.
  • Click Edit >> Free transform to resize and rotate the book cover to make the size and position look good in Yoda’s hand (hold down the Shift key when resizing to maintain the image’s aspect ratio). When you are happy with the book cover’s size and position, press the Enter key.
  • In the Layers window on the right of the screen, change the opacity of the book cover to about 50%.
  • Press the E key to switch to the Eraser tool. In the Eraser menu at the top, change the size of the brush to 9.  
  • Zoom in (“Ctrl +” keys) to about 200% and centre on the book cover. You should be able to see Yoda’s thumb through the cover. If it’s not clear enough, lower the opacity a bit more.
  • Carefully erase the book cover around the top of Yoda’s thumb. If you make a mistake, you can always undo. Keep at it until you’re happy with how it looks.
  • Change the opacity back up to 100%.
  • Click File >> Save. Make sure that Format is set to PNG (otherwise the image’s background will no longer be transparent) then click OK.
  • Back in Canva, upload your new image of Yoda holding the book. Pop them into your design.

Step 4 - Text

There are two bits of text in this image.

“Library Wars”

  • Open the Star Wars font generator. Scroll down to the first text box and type the following (with the same capitalisation):
    • library waRs
  • In the SELECT A FONT box, choose STARJEDI (if it isn’t already selected).
  • Change FONT SIZE to 400
  • Leave SELECT AN EFFECT set to None.
  • In SELECT A COLOR, type FFEB00
  • Click GENERATE, then right click over the generated text and save to your computer.
  • In Canva, upload the Library Wars image
  • Click the newly uploaded image to pop it on your canvas. Click Crop, and crop the image to just the first word.
  • Repeat this process for the second word, too.
  • Resize and position these words at the top of your image.

“Return Of The Books”

  • Click Text in the menu on the left, then select one of the Add text options (heading, subheading, a little body of text… it doesn’t matter which you choose).
    • Select the text you have just created and type RETURN followed by 4 spaces, then BOOKS.
    • Set the font to Forum, size 64.
    • Click the colour picker and choose the yellow option next to the + symbol (this is the colour you set for the frame, earlier).
  • Create another text box as above.
    • Type OF, followed by the Return key, then THE.
    • Set the font to Forum, the size to 32 and the colour to yellow. Set the text to Left aligned.
    • Click Spacing and set the Line Height to 0.7.
  • To create the yellow lines above and below, click Elements in the left hand menu and select the first square in the list.
    • Change the colour to yellow (as above).
    • Click either the top or bottom middle circles on the square and drag to resize it so that it is just a thin line.
    • Position it where you want it above the text, then click Copy in the top right of the screen. Drag the new line to where you want it below the text.
  • Play around with the position of things until you are happy with your picture.
    • If you have trouble selecting an item, it may be because it is “behind” another item. If this is the case, select the item that is in the way, click Arrange in the top left, then click Back until it is behind the item you want to move.
    • This is also how I got Yoda to be in front of the frame and the lettering - Yoda is “in front” of everything (select Yoda, click Arrange, then Forward until he is at the front).

Step 5 - The End

If you’re happy with your poster, all that’s left to do is to export and print!

  • Click Download in the top left hand corner, select PDF - Print (Recommended), then click Download.
  • Open up the downloaded document and print.
  • Laminate, mount, frame... do what you do with your posters!

Let me know how you get on. Have fun!

Asides

  1. This post is only intended to illustrate the tools and methods I used to make the posters. There are copyright issues with using images like these in your posters. Ideally, you’d get permission from the rights holder, or use copyright-free - or Creative Commons licensed - images. See the note below for some suggested sources.
  2. To find copyright-free or Creative Commons licensed pictures, you can search places like pixabay, Pexels, Flickr's Creative Commons gallery, Wikimedia Commons, or even Google Images itself.
  3. If you don't have Open Sans listed in your options, you can add it (and many more) by clicking More Fonts... at the bottom of the Fonts menu

2 thoughts on “Making Posters - Productive Procrastination

What do you think?