There are lots of free sources of high resolution, public-domain images out there. Many of the best pieces to use are illustrations from old books or oil paintings. And lots of new designers try to use those in their games. There’s usually one problem: just slapping them onto a card usually looks terrible. And while the following might not work for a retail version of the game, this will provide cleaner prototypes. In this quick tutorial, I offer three tips for “doing it better” using Gimp.
This post originally ran on Fairway’s personal site.
The British Library collection on Flickr.com is an amazing resource of old illustrations. There’s one really common issue: everything is yellow.
Getting started ^
Let’s start with an illustration. For purposes of this tip, I’ve cropped it to a reasonable size. The source image is show to the right.
Tip #1 – It’s all about the crop ^
It should go without saying, but you probably can’t and shouldn’t use the image in it’s original form. What’s more, if you’re trying to use lots of images in your game, you’re probably going to want them the same dimensions. So, rather than using the “rectangle tool” we’re going to create an image and then paste the source image into the properly sized image.
Create a new file.
Set your dimensions and click “OK”
In the new file, you’re going to “paste” the source image. Then on your layers’ menu, find the Floating Selection, right-click on it and select “To New Layer”.
Now, you can use the “Move Tool” to move your pasted layer to move the image to a better centering.
I dragged the image around to focus on the ladies’ faces.
Now we can resize the layer. Click “Layer -> Scale Layer…”
I usually try something slightly larger than the image dimensions which will also remove the borders and extra whitespace.
And then use the movement tool (on “Move Active Layer”) to center it. The final result is shown in the next step. The result is also that you’ll have an easily repeatable way to crop any other images.
Tip #2 – Let its true colors shine through ^
Fixing the colors ^
After loading the image into Gimp, go to “Colors -> Levels…”.
Click “Auto”. Then “okay.”
The image should almost immediately appear more “normal” in color.
If that didn’t quite clean it up. You can also use the “pick black” and “pick white” options from the same “Levels…” dialog box.
And then pick a “white” spot on the actual image. You may need to play around with which spots result in the best color results.
This results in the above example is slightly brighter and more white results.
Tip #3 – Use Waifu2x… ^
Lots of paintings and illustrations also have distracting imperfections. These could be a result of the painting technique, the illustration technique or just the consequences of aging. One way to turns those public domain works into something that look more modern or digital is to use an online enlargement tool called Waifu2x. This won’t work for everything and you should use the technique thoughtfully.
There are a few online versions. I use waifu2x.udp.jp. Just upload the image you want to the site. Click that you’re not a robot and then click “Convert”. Don’t change any of the settings.
At the default settings, the image will also be enlarged., but the result can work quite nicely for your illustrations.
(Result after the full upsized resolution)
(Result after waifu2x without scaling the image)