Creating a Paper-like Look in Photoshop

This is a follow up to my post creating great game artwork from paper. Today I thought I would shed some more light on the subject of Petunk’s artwork focusing on how I achieved the results using Photoshop. As a quick recap, for Petunk I created the artwork by hand using construction paper and scissors. Once ready I scanned the artwork into my computer and loaded things into Photoshop. With the artwork on my computer it’s time to explore how to prepare it for use in a game.

In my mind there are several objectives I’d like to achieve through Photoshop:

1. Design and layout assets scanned in earlier
2. Create text which is easy to update and maintain
3. And, re-use scanned in assets as much as possible

Since creating artwork is relatively time consuming I want Photoshop to help me avoid doing so whenever possible. If we can address each point above I think we will have reduced our workload quite a bit.

Design, layout, and testing interactions

Using layers makes it easy to design and manage the game’s layout, and if you are smart about how you scan in your artwork you should be able to move pieces around independently as needed. For the times where you can’t scan things in separately I have found using the wand tool with tolerance set to 100 allowed me to quickly and accurately separate different parts of my composition on separate layers.

For instance, in Petunk I scanned the red border and green background together. Using the wand tool I was able to separate the two. Next, I scanned in the five stages of the curtain. Finally, I inserted the red curtain between the border and background layers to achieve the desired effect.

One thing to be careful about when scanning pieces in separately is that doing so will lose the subtle shadows and creases which appear when you layer things naturally. In my opinion, it is often necessary to scan things in together as those subtitles are what make the art style work.

Re-using Assets

Of course sometimes you have to scan items in separately. For example, in Petunk all of the actual physical objects in the game needed to be scanned in separately and placed on the stage at runtime. For these cases I’ve found that it’s possible to apply a small drop shadow. Compare the following balls against the green background:

While the drop shadow is not quite the same as you’d see if the ball and background had been scanned in together it’s acceptably close. I’ve found setting the drop shadow distance to 2 or 3, the strength to 3-5, and the alpha to 25% works best.

Creating Paper-like Text

Text is a tricky problem. Cutting text out of paper requires a steady hand and some artistic ability if you plan to draw your own font. Worse, text often changes and cutting and recutting out new text would be a big time sink. Fortunately, I don’t feel like it’s necessary to go through that trouble. In my experience it’s possible to simulate a cut-from-paper look by combining several effects for text.

To start create some text using a font of your choice then:

1. Using the marquee tool select an area of construction paper you’ve previously scanned in
2. Save that selection as a pattern (through Edit > Save as Pattern)
3. Through blending options apply a pattern overlay to the text
4. Add a stroke, typically the color should be a little darker than the pattern overlay
5. Add a slight drop shadow as described above
6. Optionally add a slight inner glow

This may sound like a lot but in practice you can usually do it once and then duplicate layers for future text. I’m quite happy with the results with one exception. Unfortunately, it’s not possible to maintain the text’s look in Flash without converting it to a bitmap. This means anytime I want to change text in the game I need to update the assets in Photoshop. While not as bad as creating new text from scratch this is still an unwanted burden.

Wrapping it All Up

Alright we’ve covered a lot of ground but I think we’ve managed to address all of the goals above. I’ve found that using these techniques allows me to create my artwork once and mix and match the results until I’m satisfied. Now, I’m able to quickly create new things and bring them into the game for testing and hopefully you can too!

Related posts:

1. Create Great Looking Game Artwork Using Paper
2. Moving fonts between Photoshop and Flash CS4
3. Petunk Week 2: Creating a distinctive look