AuthorTopic: Blurry GIF after PS export, what went wrong? (Absolutely beginner question)  (Read 3727 times)

Offline RemboRage

  • 0001
  • *
  • Posts: 11
  • Karma: +0/-0
    • View Profile

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?
« Last Edit: December 05, 2017, 08:07:07 pm by RemboRage »

Offline RemboRage

  • 0001
  • *
  • Posts: 11
  • Karma: +0/-0
    • View Profile
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..  ???

Offline eishiya

  • 0100
  • ***
  • Posts: 1266
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Website
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.
« Last Edit: December 05, 2017, 08:53:55 pm by eishiya »

Offline RemboRage

  • 0001
  • *
  • Posts: 11
  • Karma: +0/-0
    • View Profile
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..?


Offline eishiya

  • 0100
  • ***
  • Posts: 1266
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Website
If it's on a website where you control the CSS/HTML, yes, because you can add the same CSS Pixelation uses:

Code: [Select]
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.

Offline RemboRage

  • 0001
  • *
  • Posts: 11
  • Karma: +0/-0
    • View Profile
OK. And how can I pre-zoom? Is there a tool in photoshop?

Offline yaomon17

  • 0011
  • **
  • Posts: 660
  • Karma: +0/-0
    • YaomonKS
    • taiya.sun
    • http://pixeljoint.com/p/28472.htm
    • yaomon17
    • valedev
    • playvale
    • View Profile
    • portfolio
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.

Offline eishiya

  • 0100
  • ***
  • Posts: 1266
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Website
Image menu -> Image Size...


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.

Offline RemboRage

  • 0001
  • *
  • Posts: 11
  • Karma: +0/-0
    • View Profile
Thank you guys! You helped me a lot!  :y: