0

We're in the middle of a redesign and since we now have nicer looking dashboards, would like to utilize some gifs showing them in use. The problem is, whenever I save a gif out in photoshop, it appears pixel-y and blurry.

example animated gif optimized

I was wondering what could I be doing wrong here? These were done with all vector art so I don't think sizing should have been an issue. They weren't resized in PS, only sized in AI.

I am looking for a result similar to this. The section I am looking at is mainly in the "overview" section. I understand this example is an HTML video, but I have seen examples using simple gifs. Would my best bet be to use HTML5 Videos instead and forget the gifs altogether?

Thanks for the insight!

Improve this question
6
  • As you may know, GIF's Support 256 colors only that's mean you couldn't get a better result using gradients and true color photos. you have to optimize your images to handle 256 colors. The good example you carried 1. is a limited color illustration 2. the images are .jpg which can handle millions of colors.
    – hsawires
    Dec 22, 2015 at 14:12
  • Thanks for the tip, just to clarify your points, for 1. the part I'm talking about is under the "overview section" there is a video, which I guess is an html 5 video
    – knocked loose
    Dec 22, 2015 at 14:17
  • 1
    ok, the Video is an .mp4 video which is also support millions of colors. if you want to improve your quality switch you output to .mp4
    – hsawires
    Dec 22, 2015 at 14:20
  • 2
    Sounds like that's my best option, screen cap the dashboard then convert to mp4 video. Thanks for the help!
    – knocked loose
    Dec 22, 2015 at 14:21
  • Please edit your question to say the part you're referring to is the Overview Section preferably with screenshots as well so if that site goes down this can still be a useful question to others.
    – Ryan
    Dec 22, 2015 at 17:14

1 Answer 1

Reset to default
1

The things that are not great for a gif output are the parts that have

  • Photos.

  • Gradient images, like the fish, the graphs.

  • Gradients like the buttons have.

So your pallete is getting devoured by thoose.

The current trendy use of gifs is becouse the "flat" design. The other example you posted is flat.

In your particular case (if you can not remove thoose elements) a single gif is not the best option.

If you have a suficcient flat design, then the next thing is to export without a gradient (dither) This also reduces the file size.

An alternative is probably use a series of jpg and animate then using CSS.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.