Using Inkscape to prepare game screenshots for iTunes

Setting up store pages is one of the most tedious tasks of game development and iTunes is infamous for all the burning hoops one must jump through to get things right. Creating screenshots for your iOS game release can be very frustrating if you, like me, don’t even have an iPhone to take them on. So, we must resort to cheating.

While you can do resize and crop with any image editing application, I have all my art and overlays in Inkscape, so here’s a little guide how to adjust and export screenshots from it.

Preparation

Images can’t contain alpha channels or transparencies

Let’s get this likely annoyance out of the way first by adjusting Inkscape document properties to have a solid color background instead of default transparent one.

Border snapping

For easier aligning of objects enable corner snapping in the sidebar. Optionally, you might want center, grid or guideline snapping too.

Snapping options

Resizing

Hope you got the best quality screenshots you can, because dimension requirements can get quite steep for the latest gens of devices and upscaling isn’t ideal.

Drag and drop image files to Inkscape project, select the screenshot, lock the proportions and enter the required dimension. Whenever you focus on width or height depends on orientation of your game and UI layout, so have upcoming crop in mind if it’s going to be needed. This is also where I align multiple screenshots either vertically or horizontally, select all of them and resize in one go.

Clipping

This is the part where you slap all those eye-catching overlays and high quality game art to hide the fact that screenshots you took aren’t that exiting. For the sake of tutorial I’ll add a huge vector pig. To prepare for simpler clipping, group image and overlays together.

Next, draw a rectangle and set its size to the required dimensions for the screenshot, drag it on top of the group created in the previous step, select them together, press right mouse button and select “Set clip” from the context menu. This option is one of my favorites and can be used to a lot of cool things, like creating icons or complex patterns from groups of game art elements.

This should result in nicely cropped out screenshot, which we can select and export as PNG (File->Export PNG Image) and upload to iTunes. Double check the dimensions in the export dialog, since sometimes Inkscape has the mind of its own.

Hope this basic tutorial was still useful to some!

Cheers!

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.