Creating thumbnails for the item browser

Hello, Josh here, also known as Akazi on the Wolfire forums and the rest of the Internet. I’ve been helping Wolfire with Overgrowth for a while now -- one thing I worked on was creating object thumbnails for the item browser in the level editor. Here are a few of the thumbnails I created.

Here are my steps for creating these thumbnails, in case you would like to create them for your own objects or prefabs.

You will need GIMP, this is a free image manipulation program. If you are more familiar with another image editor you can probably use that one to achieve similar results.

Load up any level and press 9 to go into the editor. Double-click the sun and move it so the lighting in the level is how you'd like it, this will affect the lighting of the object in your thumbnail. Move the editor camera away from any objects in the level and load in the object you want to make a thumbnail of, I’m going to load in a weapon I created a while ago.

Set up a shot that you think would make a good thumbnail and press F8 to take a screenshot. When you take a screenshot with F8 instead of F7, the sky and terrain will be transparent in the image, so you don't have to manually crop them out. We moved away from other objects in the level to make sure they aren't visible in the image.

Depending on what operating system you use, the screenshot will be saved in a different location.

Windows
C:\Users\username\Documents\Wolfire\Overgrowth\Screenshots

Mac
Macintosh HD/Users/username/Library/Application Support/Overgrowth/Screenshots
Note: If you are using Lion, your library folder is hidden by default... in the finder, click the "Go" menu, then Press Option, and Library will appear in the list.

Linux
~/.local/share/Overgrowth/Screenshots

Find your image file in the folder that is relevant to you and open it in GIMP.

Select all transparent areas by activating the Select by Color tool in the tool bar. Next, invert the selection by pressing Select/Invert in the menu bar along the top of the window. Now the object is selected instead of everything around it. Activate the scale tool from the tool bar and click on your selection, a little menu should pop up. Make sure the chain is linked, then change the largest of the two values to 230 px and press the scale button.

In the menu bar, press Image/Canvas Size. Make sure the chains are not linked this time and set both the width and height to 256 px. Press Center and then Resize. Activate the move tool from the tool bar and move your selection onto the new canvas.

Now press Ctrl+M to merge the layers, select Clipped to image and press Merge. Last thing is to add a nice drop shadow to the image via Filters/Light and Shadow/Drop Shadow.... The Opacity controls how visible the shadow is, I like to set mine to 70. Make sure to uncheck Allow resizing and press OK. Finally, press File/Export As... and save your final image out as a PNG.

I hope this was helpful in some way, and that you enjoyed my first blog post!