Catch up on stories from the past week (and beyond) at the Slashdot story archive

 


Forgot your password?
Close
typodupeerror
×
Graphics Idle Technology

The Art of the Animated GIF 129

Posted by samzenpus from the high-low-and-animated-art dept.
theodp writes "Some artists work in oils, some in pastels, some in acrylics. Photographer Jamie Beck and motion graphics artist Kevin Burg? Their medium of choice is animated GIFs. 'We wanted to tell more of a story than a single still frame photograph but didn't want the high maintenance aspect of a video,' said the two of their unusual collaboration. Needless to say, these are not your father's GeoCities 'Under Construction' GIFs — it can take several hours of manual editing for Beck and Burg to breathe the whisper of life into each image."
This discussion has been archived. No new comments can be posted.

The Art of the Animated GIF More

The Art of the Animated GIF

Comments Filter:
    • That is way cooler than TFA, make sure you open up "options" and get a look at the changing palette.

    • Re: (Score:2)

      by xded ( 1046894 )

      I was doing the same thing back in '99 with Windows 9x logos. The scrolling bar at the bottom was using the same palette cycling technique of these images. Manually editing the bitmaps of the logo .sys files, you could also choose how many colors would cycle IIRC. It was really easy to get some kind of animation going with this technique. Too bad I never released any of them...

      Still, this art is way cooler than mine! ;)

  • not loading (Score:4, Interesting)

    by phantomfive ( 622387 ) on Monday April 25, 2011 @12:05AM (#35926698) Journal
    The images aren't loading on the page, so here is the original blog with more images: right here [tumblr.com]. And I would also say one of the nicest looking web page designs I've ever seen.
    • thanks to the proper images not loading on gawker, i thought the pepsi throwback ad was the artwork for a moment, and didn't think they qualified as art the way the article was describing.

  • APNG/MNG (Score:3, Interesting)

    by tomstockmail ( 2056752 ) on Monday April 25, 2011 @12:06AM (#35926700)
    We need to start utilizing APNG or MNG. Firefox does support APNG, most Webkit browsers do not sadly. APNG has the advantage of displaying the first frame in any PNG capable program. http://en.wikipedia.org/wiki/APNG [wikipedia.org] http://en.wikipedia.org/wiki/MNG [wikipedia.org]

    • Re: (Score:3)

      by jd ( 1658 )

      APNG is a nice format. Must say an animated version of OpenEXR would be fun too.

    • I think a better idea would just to allow embedding theora, webm or mp4 video clips as img sources. While APNGs are pretty cool in that they're lossless and support transparency, it still suffers from the same fundamental problem as animated gifs which is that there's no interframe compression, leading to insanely large files for anything but the shortest throbber icon loop (which should probably better be done with css transitions anyway). HTML already has some tag weirdness with the fact audio is technic

    • Re: (Score:1)

      by Anonymous Coward

      Amen. I don't particularly care which format it is; can we please just get some format for animations that isn't patented, supports better than 8-bit color, and works in a majority of web browsers?

  • If we don't, remember me. (Score:5, Interesting)

    by bennomatic ( 691188 ) on Monday April 25, 2011 @12:11AM (#35926744) Homepage
    These [tumblr.com] are some of the best animated gifs I've ever seen.

  • From the Article

    So why did Beck and Burg choose the GIF format, rather than something more flexible like Flash? After all, it doesn't take more than a couple of these gorgeous pics to slow most browsers to a crawl. "The format has interesting capabilities as well as some severe limitations which are very influential in the visual style of our images," say the pair. "GIF is very basic, highly linkable through outlets such as Tumblr, and integrated into the web. Flash certainly has more capabilities but since our images are at their heart a traditional photograph, a format like .gif makes the most sense."

    I know its not fully supported across all browsers yet but the format would be even more integrated into the current web. I don’t think GIFs deserve to be called the "Jazz of the Internet"[article]. I was hoping bad GIFs were something from last decade, that stayed there.

    Most work well in Firefox 4
    http://svg-wow.org/ [svg-wow.org]

    http://en.wikipedia.org/wiki/SVG_animation [wikipedia.org]

    PS the pics are quite good but they promote GIF when it should die

    • SVG is vector animation, no? Wouldn't it be absolutely ridiculously awful at something like replacing this style of animated gif? Surely, what you SHOULD be advocating is something like APNG?

      • Re: (Score:1)

        by nzac ( 1822298 )

        There is support for raster graphics according to wikipedia. PNGs would be average for the kind of images they were using.
        Since you use the SVG suffix you can use jpeg 2000 or WebP and maybe kill another solid and useful but now obsolete standard.
        Plus APNG is only supported by Gecko and Presto. SVG will be supported by all modern browsers (though IE will lag as far behind as possible to troll the standard I expect).

    • Re: (Score:2, Informative)

      by antimatter15 ( 1261618 )
      No, SVG is for vector graphics and can't encode a photograph (losslessly anyway with any decent speed) as a SVG document. Plus, the file size would be huge. There's lots of things SVG would be great for, stick figure animations and throbbers. But not this.

      • Re: (Score:1)

        by nzac ( 1822298 )

        Thought it may cause it to be DOA, some people want SVG to include the 'kitchen sink'.

        http://en.wikipedia.org/wiki/Scalable_Vector_Graphics#Compression [wikipedia.org] .svgz (.svg.gz) will help with file size.
        Scroll down or search for raster you can load the image and then draw instances of it. According to the link in GP these can used for animations. I think all raster graphics supported by the browsers would be able to use as well, resulting in terrible performance currently.

    • Well, that's great. The demos on SVG-WOW make my i7 break out into TurboBoost mode. So I can look forward to crappy 1996 era slowness on web pages again in the future. At least we'll know what to blame global warming on in the future.

      • Re: (Score:1)

        by nzac ( 1822298 )

        I noticed that too it is a major draw back. They may need a JIT complier SVG is written in XML or to use more efficient animation methods. Im sure it can be fixed or the standard will die.

      • What browser are you using? I played with SVG a while ago, and found that SMIL animations were pretty smooth in Safari with quite a low CPU load, but caused FireFox to spike my CPU to 100% and still only manage about 5 fps. Oh, and half of the things that I tried didn't work at all in FireFox. That was 3.x, so they may have better support now, but I doubt that they've managed to add both features and performance.

    • Re: (Score:1)

      by Anonymous Coward

      What do you suggest they use to make these putative animated SVGs? It's not like Photoshop can poop out an animated SVG; all the examples you point to seem to be chunks of Javascript that dick around inside an SVG rather than something that can be put together by a non-programmer.

      Plus, as you say: "I know it's not fully supported across all browsers". Why should they limit their audience by encapsulating a sequence of bitmaps in a vector container that won't work on all browsers when there's animgif code th

      • Re: (Score:1)

        by nzac ( 1822298 )

        While photoshop can't it appears illustrator with Ikivo Animator can. Layering raster images in sequence would be not hard to code relative to making it look decent.

        Must be close to 50 percent can view it now and there is google frame for the rest. But all Macs have the required support and the under 40s on their own laptop might run either an alternative or (and) better browser.

        I think you are right, animated SVG is still 1 to 3 years off being feasible on the web.

    • Re: (Score:2)

      by mark-t ( 151149 )
      I have nothing against SVG or animated SVG... I think that the SVG format is a fantastic one, but I am curious why you would be advocating it over PNG or APNG when it comes to things like photographs. APNG support may not be available on all browsers yet, but it's getting there.

      There is room on the web for more than one graphics format... different tools for different jobs, and all that. SVG is ideal for any images where the steps to draw the image are easier to describe than the rendered image itsel

      • Re: (Score:1)

        by nzac ( 1822298 )

        Because its a standard so webkit and trident actually have to make implementations of it. APNG lacks full support and is unlikely to ever get it. Also since APNG shares the suffix with PNG it hurts the PNG standard. Plus PNG is terrible for raster images.
        As is in the link in GP you can use raster graphics when everyone gets around to implementing it so you sneak jpeg 2000 compression in there.
        Its been pointed out to me that its not ready to be used yet, and some devs are still trying to get full javascript

        • Re: (Score:2)

          by mark-t ( 151149 )

          Plus PNG is terrible for raster images.

          Cite references please.

          Anyways, my point remains. If you're just going to embed raster graphics inside of SVG, why not just use the raster graphics format itself?

          Oh... and animated SVG requires javascript, which means you have to run an interpreter. There are more applications for animated web page images than just the web browser itself.

  • 3D Animated GIFs - Another thing to try (Score:5, Interesting)

    by martin-boundary ( 547041 ) on Monday April 25, 2011 @12:14AM (#35926758)
    I've always liked these wiggling 3D animated gifs [well.com].

    • Re: (Score:1)

      by Anonymous Coward

      NSFW image there, careful...

  • Where are the spinning skulls? WHERE?
  • "Shit, I'm running a quad-core with 8 gigs of RAM and a T-1, with only one tab in a single browser window open, isn't everyone??"

    And while you're at it, throw in a lot of JavaScript with loops and poll the server every 9 seconds to see if anything new has been put up on the server. And pull in lots of include scripts from your advertisers doing the same sort of crap. You know, sites like Huffington Post, or, errr, Slashdot....

    • Re: (Score:1)

      by Seumas ( 6865 )

      I'm surprised so many people here read Gawker. When I think of Gawker, I think of all the AOL "People Magazine" style websites full of meaningless crap not of interest to anyone over twelve. Or with a penis. Granted, they're not exactly *that*. But come on. They're awfully close.

  • Back when I was in highschool I wasted all my time in Video Production class on YTMND. Luckily most of Adobe's products (including After Effects) exported to GIF's so I could essentially throw together a top-notch YTMND in mere minutes. Anyone young/old enough to remember Pokesex? After effects! :P

  • Zzz...animated gifs...zzz...1997...zzz...256 colors...zzzzzzz....

    Please. Wake me up when we've invented animated PNGs.

    • Re:Wake me up for animated pngs... (Score:4, Informative)

      by phantomfive ( 622387 ) on Monday April 25, 2011 @12:42AM (#35926896) Journal
      Despite what many people believe, GIFs aren't limited to 256 colors [ipal.org]. Although you would have realized that if you'd actually read the story. It may be another 10 years before animated PNGs are universally supported [wikipedia.org].

      • They are effectively though (Score:4, Informative)

        by Sycraft-fu ( 314770 ) on Monday April 25, 2011 @03:27AM (#35927400)

        That page you sent people to is a good example why. the 32k GIF renders extremely slowly on both FF4 and IE9. It goes one block at a time. Also, when I looked at the properties of it in FF, it only showed the first block, and then proceeded to do so on the page, even after a reload. Not the kind of thing you want on your webpage.

        Also there's the fact that precious little saves them. The reason is that the GIF format does actually NOT support more than 8-bits per pixel. What they are doing to make those high colour GIFs is messing with animation. You make a non-looping animation that doesn't render the whole image area, but rather tiles. Fine but:

        1) It is a rather hacked way of doing things.
        2) It is slow in most browsers (as I pointed out).
        3) It defeats any hope of having an animated GIF since it is using animation.

        For all practical purposes, GIFs are limited to 256 colours. In the case of animations you get 256 per frame, and the frames don't have to be the same though some programs may not support that correctly.

        • 3) It defeats any hope of having an animated GIF since it is using animation.

          Why would that be true? You have delays only between animation frames, and no delay between parts-of-image frames. The only problem then is the speed.

        • As a matter of fact, what they are doing is resetting the color table. The fact that it is an animated GIF has nothing to do with that. The reason it is slow in Firefox is exactly because it is an animated GIF, and was designed to be slow. Not because Firefox is having trouble rendering it. You could still animate the GIF.

          But your first point is rather true, it IS a rather hacked way of doing things.

        • I'd also like to point out it renders fairly slowly in Chrome 12. Also worth noting, I'm not exactly running a slow computer. Phenom II x4 @ 3.8 GHz, 4 GB DDR3 ram (1600 MHz,) and not that it matters for rendering a gif, a geforce 460 GTX factory overclocked.

      • Despite what many people believe, GIFs aren't limited to 256 colors.

        Which is interesting but irrelevant, since these images (the ones I've looked at closely, anyway) each use just one colormap. Or at least, each frame in the animation uses the same colormap.

        I'm actually more impressed that he managed to reduce photos to 256 colors and still have them look good than I am by the animation.

        • yes, actually that is really impressive. I was wondering if they'd managed to do that, but I was too lazy to check.

    • Re: (Score:1)

      by nzac ( 1822298 )

      I know is not quite the same as making GIF completely redundant but animated SVGs using raster graphics (PNG, JPEG (2000) and WebP) can now supposedly be done. Just not in IE.
      http://en.wikipedia.org/wiki/SVG_animation [wikipedia.org]
      Though in the case of PNG they will have to resist purely vectorising it.
      http://upload.wikimedia.org/wikipedia/commons/4/4f/Soccer_ball_animated.svg [wikimedia.org]

    • Comment removed (Score:4, Insightful)

      by account_deleted ( 4530225 ) on Monday April 25, 2011 @12:52AM (#35926942)
      Comment removed based on user account deletion

      • Re: (Score:2)

        by jd ( 1658 )

        Based on the rate at which different Indo-European words change, scholars now place the age of the world "wheel" (along with the words "horse", "chariot" and "axle") at around 5,000 BCE. In other words, it's not just wheels that have survived, but the entire specification of land vehicles. So, yeah, I'd have to agree specs can hang around a very, very long time.

        Not fond of the GIF format, myself, but for limited-pallet lossless bitmapped images, they're certainly the best out there. In some ways, TARGA is b

      • Well, you re right in all points. And that is why it makes it even more interesting for us to learn why the artist of the article chose the GIF format instead of the APNG format.

    • I hate the animated gif format because it's so often abused to make shitty, grainy silent versions of clips that could just be put on youtube or elsewhere - and probably take 5x of the bandwidth a proper format would have taken. Idk why people do that other than they lack basic video editing skills.

  • APNG is still my fav. (Score:5, Informative)

    by Dayofswords ( 1548243 ) on Monday April 25, 2011 @12:34AM (#35926848)

    lossless + animation = movie-like images

    • Re: (Score:1)

      by Anonymous Coward

      APNG is a nice fuckup from Mozilla. They had MNG support, they removed it in 2003 because it was deemed too complex and not widely used (the usual chicken and egg problem). Then they decided they were going to create a non standard format based upon PNG and added it in 2008.

      The problem is that showing the first frame of the animation if the animation is not supported by the reading application is plain stupid, people just use GIF instead. And APNGs, just like GIFs, need to be opened first if you want to rea

  • I believe you can find the original, with more animations, at http://fromme-toyou.tumblr.com/tagged/cinemagraph [tumblr.com]

  • I remember exporting individual frames of animated GIFs, correct/add something to, or just reverse it, put it back together and use it on another crappy Geocities website.

    Oh, and the "Awards"! Apparently clicking links through images was a difficult task back then. I gotta admit, I have a little corner in my heart for the god damned MIDI files.

  • hitler has joined the game (Score:1)

    by Anonymous Coward

    enable animation for lulz [photobucket.com]

  • wow (Score:2)

    by Tom ( 822 )

    I must say, I've just seen the first animated GIFs that I actually enjoyed.

    Thanks, guys.

  • It would be nice to have pause / slo-mo / select frame / reverse / etc for GIFs.
  • The coolest looking animated gifs I've ever seen are on mspaintadventures.com [mspaintadventures.com]
  • These animated images are very reminiscent of the moving photos in the Harry Potter movies. If they could only figure out how to do that in a print medium....

  • Doesn't Harry Potter pictures use this technique?

  • I find the animated GIFs that they produce to be creepy and unnatural. I would think that most people would respond negatively to partial animation as it is unnatural movement. This is one of the reasons why horror movies use these type of techniques. In addition, one of the stated reasons for not shooting video is because of the amount of effort involved. I'm not sure that I buy this argument as it seems that this technique would require more effort to get it right.

    In my opinion either you shoot movies

  • I'm almost disappointed.
  • "an animated gif paranoia about nonstop design workers" - http://www.iamnotanartist.org/index.php [iamnotanartist.org]

Slashdot Top Deals

Business is a good game -- lots of competition and minimum of rules. You keep score with money. -- Nolan Bushnell, founder of Atari

Close