How to Enlarge Pixel Art Without Blurring Photoshop Cc
Demand to resize pixel art? Larn how to enlarge your artwork and keep those blocky shapes looking well-baked and sharp with Photoshop!
In this tutorial, you lot'll learn how to get great results when resizing pixel art in Photoshop! Pixel art is unlike from standard images and presents unique challenges when resizing information technology. Unremarkably when enlarging an image and adding more pixels, Photoshop tries to prevent the issue from looking blocky and pixelated by blending the pixels together and smoothing everything out.
But "blocky and pixelated" is the whole indicate of pixel art! So to resize pixel fine art, we need a way for Photoshop to just add together more pixels, and that's it. Instead of smoothing things out, we need to continue the shapes and the edges of the artwork looking crisp and abrupt. In this lesson, I'll show you exactly how to do it.
Along with resizing pixel art, I besides employ this same technique for resizing screenshots used in my tutorials. And you can utilise it to resize whatsoever graphic where you lot need to maintain sharp, difficult edges or readable text. To get the best results with this lesson, you'll want to be using Photoshop CC, but whatsoever version of Photoshop will work.
I'll use this little pixel art character that I downloaded from Adobe Stock:
Our pixel art hero. Credit: Adobe Stock.
This is lesson 7 in my Resizing Images in Photoshop serial.
Let's go started!
How to enlarge pixel art in Photoshop
Hither'due south the grapheme open up in Photoshop. And every bit you can see, he's looking pretty small:
The pixel art at its original size.
Step 1: Open up the Paradigm Size dialog box
The all-time way to enlarge pixel art is by using Photoshop's Image Size dialog box. To open it, become up to the Image carte du jour in the Menu Bar and cull Prototype Size:
Going to Paradigm > Paradigm Size.
In Photoshop CC, the dialog box includes a handy preview window on the left, forth with the image size options on the right:
The Image Size dialog box in Photoshop CC.
Viewing the current image size
The current size of the prototype is found at the peak. Adjacent to the word Dimensions, we see that my artwork is pretty small, with a width and tiptop of just 500 pixels:
The current pixel dimensions of the artwork.
Stride two: Turn on the Resample pick
Permit's say I need to make my grapheme much bigger. Perhaps I want to employ him in a poster or as a desktop background. To practise that, I'll demand to enlarge the artwork past adding more than pixels.
First, make sure that the Resample pick in the dialog box in turned on. With Resample off, the pixel dimensions are locked and all nosotros can alter is the impress size. To add or remove pixels, Resample needs to be on:
Resample should be on.
Step 3: Enter a percentage into the Width and Top boxes
Rather than upsampling pixel art to a specific size, the best fashion to overstate it is by using percentages. And to avoid distortions and go on each block in the artwork perfectly foursquare, you'll want to stick to percentages that are multiples of 100 (so 200%, 300%, 400%, and so on). I'll overstate the epitome past setting both the Width and Height to 400 Percent:
Upsampling the width and meridian by 400 pct.
This volition increase the pixel dimensions from 500 px by 500 px upwards to 2000 px by 2000 px:
The new pixel dimensions after resizing the artwork.
Resizing the preview window
Notice that, by making the width and peak four times larger, the artwork is at present too large to fit within the small preview window. To brand the preview window bigger, I'll make the Paradigm Size dialog box itself bigger by dragging the bottom right corner outward. Then, I'll click and drag within the preview window to center the artwork within it:
Resizing the Epitome Size dialog box for a larger preview.
Learn more: Photoshop CC's Image Size dialog box - Features and Tips
The problem with resizing pixel art
And so far so good. Or is it? If we look at the artwork in the preview window, we run into that information technology doesn't look right. Instead of the edges around the shapes looking crisp and sharp, they're looking a bit soft and blurry:
The edges await as well soft after enlarging the artwork.
And if we wait closer, we can see halos around the shapes, particularly in higher dissimilarity areas. I'll zoom in on the artwork using the zoom buttons at the bottom of the preview window. And here, at a zoom level of 400%, we tin clearly see the halos, especially around the character'south optics:
Enlarging the pixel art blurred the shapes and added halos around them.
Detect, though, that if you click and concord on the artwork in the preview window, the halos disappear and the edges expect very sharp, which is exactly what we want:
The pixel art looks great when you click and concur.
Just every bit soon every bit you release your mouse button, yous're back to seeing the halos:
The softness and halos return when the mouse button is released.
The image interpolation method
The reason is that when you click and concord in the preview window, yous're seeing the upsampled artwork before Photoshop applies any prototype interpolation. Interpolation is how Photoshop averages the pixels together and smooths out the result. When you release your mouse push, y'all see the artwork with the interpolation applied. And it's the interpolation method that's causing the bug and creating that halo effect.
The Interpolation option is found to the right of the Resample choice. And by default, it's set to Automated:
The image interpolation selection.
Normally, the Automatic setting is fine considering it lets Photoshop choose the all-time method for the chore. But the problem here is that Photoshop assumes we're resizing a standard epitome with lots of fine detail. And then it's choosing a method that would make a standard image look proficient. But that same method makes pixel fine art, and similar types of graphics, look bad. And so when upsampling pixel art, nosotros demand to cull a different interpolation method ourselves.
Step 4: Prepare the interpolation method to Nearest Neighbor
To do that, click on the Interpolation option to open a list of the methods we tin can choose from. If you're using Photoshop CC, then the interpolation method Photoshop chooses for upsampling images is Preserve Details. And in Photoshop CS6, it chooses Bicubic Smoother. But neither of them piece of work well with pixel art:
Photoshop'south interpolation methods.
To upsample your artwork without averaging the pixels, the interpolation method you need is Nearest Neighbor:
Choosing Nearest Neighbor.
As soon as you cull Nearest Neighbor, the artwork in the preview window looks crisp and sharp! And if yous click and concord in the preview window, and so release your mouse button, you'll see that this time, cipher happens. The artwork looks just as sharp before and later on the interpolation method is applied.
That'due south considering it's now the same interpolation method both times. Photoshop always adds the pixels initially using Nearest Neighbor. But at present that nosotros've called Nearest Neighbour ourselves, it's not using anything else that would cause the pixel art to await worse:
Nearest Neighbor is perfect for upsampling pixel art.
Step five: Click OK
When you're set to upsample the artwork, click OK to accept your settings and close the Image Size dialog box:
Clicking OK to enlarge the pixel fine art and shut the Image Size dialog box.
And now, my little pixel fine art hero looks a whole lot bigger, even so he still maintains the same blocky, pixelated look that nosotros'd expect:
The upsampled pixel art.
How to enlarge pixel art - Quick summary
Before we go whatever farther, let's chop-chop summarize the steps for getting the best results when enlarging pixel art in Photoshop.
- ane. Open the Prototype Size dialog box (Prototype > Image Size).
- 2. Set up the Width and Peak to Percent, and then for all-time results, choose a percentage that's a multiple of 100 (200%, 300%, 400%, and and so on).
- 3. Alter the interpolation method to Nearest Neighbor.
- iv. Click OK.
How to resize pixel art to an exact size
So far, we've learned that the best manner to overstate pixel fine art is past upsampling it using a pct that's a multiple of 100. Simply what if you need to overstate information technology to specific pixel dimensions, and yous can't get there using 1 of those percentages?
For example, past upsampling my artwork past 400%, I've enlarged the width and height from 500 pixels upward to 2000 pixels:
The dimensions of the upsampled artwork.
But what if I needed the width and height to exist something a bit smaller, like 1600 pixels? If I had upsampled my 500 px ten 500 px image by 300%, information technology would have fabricated the width and height but 1500 pixels, leaving information technology withal as well pocket-size. And upsampling it by 400% made information technology too big. What I actually needed was something in between. In that instance, what you lot'll want to do is resize the artwork in two steps.
Step 1: Upsample the pixel art as a percentage
First, upsample the pixel art using a pct, and a multiple of 100, that will go far larger than y'all need. In my case, I've already done that past upsampling information technology by 400%, and then the first step is done.
Stride ii: Re-open the Prototype Size dialog box
Then, resize it a second time, this time to downsample it to the verbal pixel dimensions. To practice that, open the Epitome Size dialog box once over again past going up to the Epitome menu and choosing Image Size:
Going to Image > Prototype Size.
Footstep 3: Leave the Resample option turned on
Make sure the Resample choice is still on so you tin can change the number of pixels:
Leaving the Resample option checked.
Step 4: Fix the Width and Elevation, in pixels
Enter the exact size y'all need, in pixels, into the Width and Height fields. I'll set them both to 1600 pixels:
Entering the new pixel dimensions.
Stride 5: Set the interpolation method to Automatic
And finally, while the Nearest Neighbor interpolation method works bang-up for upsampling pixel art, you don't desire to use it when downsampling. Instead, for the sharpest results, alter the interpolation method back to Automatic. This volition hand command dorsum to Photoshop, and when downsampling images, it will automatically choose Bicubic Sharper:
Setting the interpolation method back to Automated.
When you lot're ready to resize the artwork to the verbal size, click OK to shut the dialog box, and you're done:
Clicking OK to downsample the pixel art.
And there we have it! That's how to become the best results when resizing pixel art, screenshots, or similar graphics, in Photoshop! In the next and final lesson in this series, we'll look at the best fashion to enlarge images in Photoshop using a brand new feature known as Preserve Details 2.0!
Y'all can jump to any of the other lessons in this Resizing Images in Photoshop chapter. Or visit our Photoshop Nuts section for more than topics!
Source: https://www.photoshopessentials.com/basics/how-to-resize-pixel-art-in-photoshop/
0 Response to "How to Enlarge Pixel Art Without Blurring Photoshop Cc"
Post a Comment