Blurry Sprite after Resizing?

[Ethereal Grace]

So I just created a sprite and it's currently 1200x2400p but when I size it down to 300X600 it gets really blurry. I've used GIMP and FireAlpaca and had the same results with both programs.
The backgrounds I have are 800x600. Is that a typical background size to use in Ren'Py or should those be bigger?

Apologies if this is a dumb question! I just can't seem to get it right. Here is what the sprite looks like without being resized.

[Ethereal Grace]

Here is the sprite after resizing.

[SexBomb]

Hmm, very strange problem. Maybe try uploading and resizing on imgur? It's worth a shot, if you don't have photoshop. If you can't seem to get it to work, maybe try saving the image under a different filename, or as a different file type? While png is the best format for this type of work, jpg might work better in this instance.

In regards to the backgrounds, 800x600 seems very small to me... Unless you are planning for the game to be on mobile, I would start with 1900x1080 at LEAST. The bigger the better... You can always make it smaller, but unless it is an original vector, you won't be able to make it bigger!

[LateWhiteRabbit]

It looks about as good as you can expect after reducing it that much. I tried my own experiment reducing it using Bicubic Sharper in Photoshop, and got the same result as you. But you are reducing it SIXTEEN times smaller than the original. Basically, the resampling process has to replace every 16 pixels with 1. And you have some very small and fine details in the original.

I would recommend working no more than 4 times larger than your smallest intended resolution. So 600x1200 basically, if you are intending to reduce it to 300x600. But with extremely small resolutions like that, you are getting into "every pixel counts" territory, and would get much better results hand placing pixels - i.e. pixel art, instead of raster.

[Fuseblower]

As LateWhiteRabbit said : you're downsampling to the point your edges get averaged with the surrounding colors. For example : thin black lines, white surrounding colors -> downsample like Hell -> result is gray which is neither black nor white, in other words : blur.

Using sinc instead of cubic gives only slightly better results (hardly noticeable improvement contrast).

You could use "edge directed interpolation" but I don't know of any program that does this (gimp doesn't, afaik).

Or mess around with the Sobel filter (which is an edge detection thing) :



Here I've used the Sobel filter, selected its alpha, painted it all black, added it as a plane on top of the drawing and used transparancy to get some kind of result (darkening the original edges).

Of course, you could do lots more with that Sobel filter but in the end its better to draw close to the final output size and avoid such things altogether.

[Ethereal Grace]

Thanks for the help! I've been feeling unwell so I haven't been able to fiddle with it anymore. It was actually suggested to me to draw it at a larger size for fine details and then resize it later. I'm very new to digital art so I didn't anticipate this issue. This is only my second work.
I appreciate all the advice!
Ren'Py only allows a maximum background size of 800x600, doesn't it? I tried a larger bg image and it ended up zoomed in and cropped in a way that much of the image was not visible.
Could I resize the sprite and then go back and redraw bits of it to look better? I had a lot of trouble drawing images with a lower pixel count to begin with since lines weren't very neat. Any advice on that front would be greatly appreciated!
Thank you!

[SinaAzad]

Heya , Ren'py allows you to use all sizes of images as your background , But I'm guessing that you are developing your VN in 800x600 size right ?
If you draw your works in a higher "ppi" (pixel per inch) when you change their scale it will lose less quality , at least that's what I've experienced !

[Ethereal Grace]

What PPI do you recommend? And is there a preferred screen size that is a tad larger than 800X600? My laptop's screen is at a default resolution of 1600x900 but I've heard of others creating VNs with larger images and getting complaints from people whose PCs had a lower resolution. Those may have been posts from a few years ago, however. It didn't occur to me to check the dates those comments were made.
Thanks so much for all your help!

[SinaAzad]

I'm not sure on that, but I at least set it to 300 ppi which is usual for good quality pictures ... about the resolution , I think most of the people got newer screens , My laptops screen is 1920x1080 , just imagine how small a 800x600 game would look on my screen , I recommend going for 1280 × 720 .

[LateWhiteRabbit]

My laptop's screen is at a default resolution of 1600x900 but I've heard of others creating VNs with larger images and getting complaints from people whose PCs had a lower resolution. Those may have been posts from a few years ago, however. It didn't occur to me to check the dates those comments were made.
Thanks so much for all your help!

You'll get complaints if the resolution is too small too. The only way to make everyone happy is the have multiple resolution options, but that's a pain.

Just remember, the trend is to make resolutions higher and higher, so the lower the resolution of your game to begin with, the faster it will become outdated.

[Ethereal Grace]

Thanks so much! I'll make it at a higher resolution then. That certainly simplifies things.

[chlorofinite]

Which resampling method are you choosing when resizing?

To my understanding, I find that Bilinear resampling leaves no blur, but instead, it leaves images rather sharp looking, to the point where it's actually kinda noticeable. And Bicubic will leave a light edge around darker lines (again, can be noticeable), but is overall smoother looking:


[left: Kagami Wakatsuki - Subarashiki Hibi; right: Natsume Kisaragi - Nanatsuiro Drops]

In the end, the method for resampling you choose is up to personal preference and satisfaction with the end product. I'm a Bilinear person myself...

And don't make your game's default resolution too high, some of us are still stuck with smaller monitors. ^^;; I think 1280x720 is still the standard for commercial PC VNs nowadays.

Uh, sorry if this ends up not helping at all, I'm not good with explaining things... u~u

[Ethereal Grace]

What program do you use to resize images? That is really helpful! The resizing options on FireAlpaca are pretty basic from what I can tell. Can this be done on GIMP?
Sorry if that's a dumb question! Thanks!

[chlorofinite]

I'm not sure about FireAlpaca or GIMP since I don't use those, but in Photoshop CS5, when you resize an image, there should be a checkbox with "Resample Image:" and a dropdown list underneath at the bottom of the window that pops up. Paint.NET has "Resampling:" and the list at the top of the equivalent window. Since GIMP is considered a Photoshop alternative, I'm assuming there should be something similar. If not, check Preferences or whatever equivalent it has. In Photoshop, you can also change your preferred default resampling method in Edit → Preferences → General.

[Ethereal Grace]

Thank you so much! I've gone ahead and cropped the character as I never intended to use a full body sprite. I went ahead and drew his entire body just in case but figured he'd only be visible mid-thigh up. Before I saw your reply I actually resized it on GIMP and then found a filter to sharpen the image which has seemed to make a difference. I will use your advice as well!
I have also changed my BG size to 1280x720 which has given me more playroom. I really appreciate all the help, everyone! I could use all the advice I can get!