Free Pixel Art Cropping Tool

I created and released a pixel art cropping tool, which can be downloaded for free over on itch:

This blog post will walk through how to use it, features, and a few different use-cases. But first...

Why did I create a pixel art cropping tool?

This tool has a very niche target-audience, so I'm sure many won't full understand, but it helps with something I found tedious. So even if it only makes this process easier for me, I'm fine with that, but I'm sure some other pixel artists will also find this useful.

The most concise summary is that this tool will allow you to change the scale without changing the canvas size.

So when you need your pixel art at specific dimensions, you set that first to lock that in. Then can click up and down arrows to see how it looks at different scales - and can drag to manually adjust the crop if needed.

There may be other apps or websites that have similar features, but I haven't seen one for pixel art, which of course without the image smoothing turned off, they will ruin our beautiful pixel art

Walkthrough of Using This Tool

Here's a quick walk through of using the pixel art cropping tool, without diving too deep into any feature yet.

1. Load your pixel art, either by drag-n-drop or file chooser.
2. Set the focal point, which will auto-center to the focal point as scaling
3. Choose what sizes you need, either from the preset sizes or entering your own
4. For each size, zoom in or out. If needed, drag to re-crop.
5. After everything looks good, go to the export screen and save them all at a click of a button.

Number 4 is the key feature here. Like if I'm trying to do this in Aseprite I'll scale it and then crop it, if I want to see it at 700% instead of 600%, I'll have to undo it and redo the scaling and cropping. So that was goal number one: reduce those repetitive steps down to the click of a button.

That's the quick and easy run-through.

Focal Point

Let's take a closer look at the focal point.

If I keep the focal point in the center for this example it doesn't demonstrate the functionality here, but if I put it off to the side like on this person sitting here.

Then when I get into the scaling…

In the first screenshot there was no more image available to the right. But as the zoom increases the focus moves towards her. When zoomed out, you can see that the crop will make sure to keep her on screen, but also keep the canvas filled.

This should help if you have any art with an off-centered focal point.

Note that once you start dragging to re-center, the logic detaches from the focal point. The new focal point becomes the current center of the canvas. You can go back to the focal point screen to reset it.

Cropping Images for Steam

Now lets run through a specific use-case for this tool: Creating images for Steam

For those that haven't launched a game or tool on Steam there is a variety of image sizes you need to upload. Obviously, you probably won't use the same base image for every one, but you can see here that for several of these I did use the same.

Drop in an image, click add all, and then see how many of the sizes it works for!

Of course the images required for a Steam Page have different purposes, so you won't be able to use one for all of them. But I feel that there is some repetitiveness there, and at the least, you won't have to go back and forth figuring out all the dimensions needed.

When you export them, the dimensions will be added in the filenames:

Additional Layers

There is a feature to add multiple layers to your images:

One reason I thought of this is for Steam, as there is one image that I was trying to put my logo over a screenshot. That caused even more back and forth, as I was doing trial and error on scaling two images and putting them in the same file.

So you can add images and solid colors or gradients. Then you can scale and position them individually.

I'm hoping that even though there are only a few options available for layers - size, position, and opacity - that it can be easy and simple to setup some complex setups.

On the simpler side, I feel like this should make it quick to throw your logo or a watermark on the images, as needed.

Cropping for Social Media

To not repeat anything already explained above, everything is the same, but on the preset sizes meant for social media there is a button for that social media in the top right.

Clicking the button will open up a new post:

I couldn't find any easy way to open the new post with the image already in there, but the button will also copy the image to the clipboard. So all you need to do then is ctrl v it in!

For me, a lot of times my folders get filled up with exporting a version for each social media. So not only might this save a few seconds, it might also help keep your folders a little cleaner!

In the settings menu the user can update the default text values. That way if you always use certain hashtags you can set them up here.

Possible Coming Features?

Though I'm happy with the initial release of the Pixel Art Cropping Tool, I have a list of features to add or updates to make:

• Saving Custom Sizes and Creating Custom Groups
• Presets (more/update)
• Supporting Images that don't fill the Canvas
• Multiple Images
• Icon Creator
• More MISC Tools & Features

If you are interested in hearing more about one of these features, or voicing your opinion, check out this blog post on itch.

That's it! Reminder the tool is available for free download on itch, here: Lou Bagel's Pixel Art Cropping Tool