Exercise 8: Resizing Images (aka: Resampling Images)

Do you like Math? I'm not the greatest at it, but luckily resampling pixels requires only the simplest math; adding, subtracting, multiplying and/or dividing. When Resampling your images, whether it's the entire canvas, or individual elements in your image, you must use pixel width and heights that are basically multiples of the existing size. If you want to retain the pixel purity of your artwork, that is. Resampling to arbitrary sizes can lead to some off, non-square pixels and generally mess things up. I recommend you try that out too, just to see what kind of results you get.

Resize/Resample your entire image by choosing "Image" > "Image Size" (or "OPTION" + "COMMAND" + "I" on Mac). This should bring up the Image Size palette.

If you altered your preferences as I suggested in Part 1, "Nearest Neighbor" should be already selected for "Resample Image". If it's not, you should go to Photoshop's General Preferences right now since this will affect resizing & transforming specific elements within your file as well. 72 DPI (Resolution) is what you want for a computer screen.

So, stick to multiples of your pixel numbers. For example, if you have a 50x50 image and want to increase the size, you can easily go to 100x100, 150x150, 200x200, 300x300, 500x500, etc. I'm sure you get the picture. You can have odd numbers, such as 384 pixels by 428 pixels, and you can properly resize them too, but stick to the proper multiple or divisible numbers. If I reduce that image size by -4x, the new pixel dimensions work out evenly to 96 pixels by 107 pixels. This should make a perfect reduction.

If you want to Resize particular elements in your file, say if I wanted to resize that cat above I would use the Transform command. If you want to follow along, make a small drawing on a larger layer, less than half the size of the layer. Now choose "Edit" > "Transform" > "Scale", or press "COMMAND" + "T" on Mac, "CTRL" + "T" on windows. This should make an outline selection appear with little "handles” at the corners and the center, like so:

With this, options will also appear up on the top of your workspace for the Transform Tool:

For pixel art, I just use the width and height percentages to increase things with nice even numbers. Play with this and see what you can get away with. Sometimes the math of a percentage or entire image resampling seems to work out but the image gets distorted anyway. So, in this instance, I transformed the kitty to 500%, and made sure that little chain icon was clicked, which is to "Constrain Proportions".

And if you need to resize something to an odd in-between size, you might just have to deal with some re-touching of your image by hand, if the distortion isn't so bad. It sometimes can be worthwhile to consider the final output size you're going for when designing your images.

Conclusion