Pixelation
General => General Discussion => Topic started by: RemboRage on December 05, 2017, 08:01:15 pm
-
(https://i.imgur.com/PkdDnet.gif)
Hi Guys, I started pixeling a few days ago and did some little animation exercises.
The last one was a coin that's spinning around itself. Its dimension are 20x20 pixels. After I exportet it (with the help of an adobe tutorial) as a gif it was completely blurry. Does anybody of you guys know what could have gone wrong?
-
Oh I just realised that the blurry effect doesn't occur in this forum.. Im a bit confused right know.
When im opening it regular in the browser it is completely blurry.. ???
-
The gif is fine, but when it gets enlarged by a browser, it'll get blurred. This doesn't happen on Pixelation because Pixelation has special CSS in place that tells the browser to use Nearest Neighbour (non-blurry) resampling. Most websites do not have such CSS because the "blurry" upscaling works well for non-pixel art images such as photos and paintings.
If you're using a high-DPI display such as some phones and tablets, then all images are scaled by default, hence the image appearing blurry without any "obvious" zooming.
-
Thx for your answer eishiya, I guess I get it now. :y: But im still wondering if there is a solution to display the gif high resoluted anywhere..?
-
If it's on a website where you control the CSS/HTML, yes, because you can add the same CSS Pixelation uses:
img {
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
}
If you mean on any website online: No, you're at their mercy. You could pre-zoom your art for sites not meant for pixel art, so that you can keep at least some of the crispness.
-
OK. And how can I pre-zoom? Is there a tool in photoshop?
-
I don't own PS, but it is usually named something like "resize image" or "resample image" and be sure to choose "nearest neighbor" for the scaling algorithm so it doesn't auto smooth when it scales up.
-
Image menu -> Image Size...
(https://i.imgur.com/7YC7wBu.png)
Select Nearest Neighbour at the bottom.
Make sure you scale up evenly by scaling in terms of percent, and making the value a multiple of 100 (200, 300, etc). This makes sure that all your "pixels" stay the same size and keep their aspect ratio.
-
Thank you guys! You helped me a lot! :y: