How to retain "crispness" when resizing images?

#1

Hi

I’ve been working on some images for a 2D game recently. Currently I’m drawing the images in Photoshop at 3 times the size they need to be (just easier to work with/draw details).

However, when I go to resize the images to their final size, I’m really not liking the results. Depending on what resizing algorithm I use, I either a) get an image with jagged ugly edges, or b) the edges of the image become somewhat transparent, and loose their “crispness” (Most of the images have a alpha channel which surrounds them).

Is there any way for me to retain, crisp, opaque edges, while maintaining a smooth edge after I resize?

Thanks,

#2

You should be using vectors.

#3

I had thought about this, however, I wasn’t sure if assets for 2D games were always made with vectors.

I’m not a huge fan of Flash, and I’m not too experienced with Illustrator… but I guess they would be my only two options if I’m going to go vector based?

Since this is my first attempt at this kind of art, I really wish I could find some sort of documentation on the net that presents a set of “best practices” for this kind of work… unfortunately, I’ve had no luck.

Thanks,

Matt

#4

You should be using vectors.

  I think it's perfectly appropriate to create 2D art using pixels rather than using vectors.  You might try creating the art even larger.  Sometimes converting from a high res to low res gives better results than converting from a medium res to low res.  Do a test first to see if it gains you any sharpness.

As for the problem with the edges not being crisp enough, try a little contrast adjustment to the alpha channel or layer mask to sharpen those up.
 
 Other than that, you may just have to hand-tweak the re-sized images.  I'm hesitant to recommend sharpening them by using Unsharp Mask, but you might play around with conservative usage of that.
 
 But the answers to your questions [i]really[/i] depend on the kind of art you're creating.  Care to show us some examples?
#5

I can’t show you anything as of yet. The style/quality of the games images are similar to this iPhone game (although it’s a different type of game):
Knights Onrush

In other words, the images are not “pixel art”… as in, the sprites of such of old school/cell phone video games. They have a more modern look.

As I said, I’ve never developed 2D images for a game before. There must be some sort of standard method for approaching this kind of work?

Matt

#6

I can’t show you anything as of yet. The style/quality of the games images are similar to this iPhone game (although it’s a different type of game):
Knights Onrush

In other words, the images are not “pixel art”… as in, the sprites of such of old school/cell phone video games. They have a more modern look.

Gotcha. Sounds like a fun project. :slight_smile: Well, then adjusting the contrast of the transparency values and adding a judicious amount of Unsharp Mask might get you closer. I dont know of any standard in this case.

#7

Don’t resize at all then. Zoom in to paint the details.

#8

the screen you posted actually is pixel art, just at a higher resolution that they used to be.
like CIM said, no resizing. paint the stuff properly by hand at the desired resolution. will be good practice too.

http://www.natomic.com/hosted/marks/mpat/index.html
might be interesting for you.

#9

you cannot use vector art in a games engine, at least not in any ive used

#10

you cannot use vector art in a games engine, at least not in any ive used

I’m pretty sure this discussion is about the creation process… 2D vector art would presumably be rasterized to pixels, in most cases.

However, Flash does use vector art. And one could arguably consider it a game engine.

#11

It would depend on the final size you are shrinking the Image to. IMO painting at double res for the final size is ok. Three times might be a tad too much.

As a possible step, try experimenting with the unsharp mask filters before/after shrinking or use one of the options for resampling pixels in the image resize dialogue.

#12

Hi, I would recommend taking the image into Lab mode and then over sharpen it to the point that it doesn’t look good (with unsharp mask). Then reduce by 50% of the final “destination” size, apply the sharpening again, and reduce to the final “destination” size. I find this works well. Then convert back to rgb.

-Jim

#13

There is a very nice thread at the Cartographers’ Guild that goes into resize algorithms and how to get the best results from them. The information is pretty general until post #8, where it starts getting more deep. http://forum.cartographersguild.com/showthread.php?t=2596

You’ll have to register if you want to see the images.

#14

You seem to assume that he only uses images that can easily be converted to vectors. May I remind you that this is often not the case or extremely time consuming.

#15

This thread has been automatically closed as it remained inactive for 12 months. If you wish to continue the discussion, please create a new thread in the appropriate forum.