It is currently Sun Sep 06, 2026 5:51 pm


All times are UTC - 5 hours [ DST ]



Post new topic Reply to topic  [ 18 posts ] 
Author Message
 Post subject: Hobo Lobo
PostPosted: Mon May 02, 2011 8:16 am  (#1) 
Offline
Script Coder
User avatar

Joined: Apr 23, 2010
Posts: 1553
Location: not from Guildford after all
I encountered this interesting web comic* which appears to be produced using just a combination of PNGs and a some Javascript. The approach is rather interesting and I would be keen to learn how to do something similar in GIMP (the Hobo Lobo strip is made in Photoshop CS3).


* Warning: the comic contains some inappropriate language; nothing that really assails the senses, just the occasional curse word.

_________________
Any sufficiently primitive technology is indistinguishable from a rock.


Share on Facebook Share on Twitter Share on Orkut Share on Digg Share on MySpace Share on Delicious Share on Technorati
Top
 Post subject: Re: Hobo Lobo
PostPosted: Mon May 02, 2011 8:22 am  (#2) 
Offline
GimpChat Member
User avatar

Joined: Sep 24, 2010
Posts: 12845
Wow; surprizingly fast loading too. Only glimpsed (did not read; lol). Still wonder why MNG (or aPNG for that matter) was really never adopted by the browser decision makers (other then Firefox of course w.r.t. aPNG). Still cool that javascript can be used to do animations like this using plain PNG files though. :)

_________________
Lyle

Psalm 109:8

Image


Top
 Post subject: Re: Hobo Lobo
PostPosted: Mon May 02, 2011 8:27 am  (#3) 
Offline
GimpChat Member
User avatar

Joined: Apr 18, 2011
Posts: 620
Location: New York
just looked at this fellows About page and I love what he says:
Quote:
PUBLIC SERVICE ANNOUNCEMENT: Hello Internet Explorer user in the year 2011! The site will probably not look totally borked in your browser, but I won’t guarantee that I will care to test it much or make patches to get everything to look the same in IE as it does in proper browsers. Please get a real browser. Here are some decent options: Chrome, Firefox, Opera, Safari. Pick the one with the neatest name, whichever one you like the most. Friends don’t let friends use Internet Explorer.
:rofl

_________________
Ubuntu 24.04.1, Kernel i686, 6.8.0-52-generic
python3 v3.12.3 ----- GIMP - ver 2.10.38


Top
 Post subject: Re: Hobo Lobo
PostPosted: Mon May 02, 2011 8:28 am  (#4) 
Offline
GimpChat Member
User avatar

Joined: Apr 18, 2011
Posts: 620
Location: New York
lylejk wrote:
Wow; surprizingly fast loading too. Only glimpsed (did not read; lol). Still wonder why MNG (or aPNG for that matter) was really never adopted by the browser decision makers (other then Firefox of course w.r.t. aPNG). Still cool that javascript can be used to do animations like this using plain PNG files though. :)

Opera can also play animated pngs, btw

and I agree......this should be the standard

_________________
Ubuntu 24.04.1, Kernel i686, 6.8.0-52-generic
python3 v3.12.3 ----- GIMP - ver 2.10.38


Top
 Post subject: Re: Hobo Lobo
PostPosted: Mon May 02, 2011 8:56 am  (#5) 
Offline
Retired Staff
User avatar

Joined: May 22, 2008
Posts: 6946
Location: Somewhere in GIMP
Very cool.

_________________
Image
World War IV will be fought with sticks and stones. - Albert Einstein


Top
 Post subject: Re: Hobo Lobo
PostPosted: Mon May 02, 2011 9:14 am  (#6) 
Offline
GimpChat Member

Joined: Apr 11, 2010
Posts: 545
Location: In the mini-chat, saying silly things
Looks pretty amazing!

Quote:
Everything here is made by a Stevan Zivadinovic
of some sort, or otherwise righteously stolen.
:lol

_________________
Image


Top
 Post subject: Re: Hobo Lobo
PostPosted: Mon May 02, 2011 9:14 am  (#7) 
Offline
Global Moderator
User avatar

Joined: May 16, 2010
Posts: 16169
That is a real cool way to show animation though. :)

_________________
Image


Top
 Post subject: Re: Hobo Lobo
PostPosted: Mon May 02, 2011 1:30 pm  (#8) 
Offline
GimpChat Member
User avatar

Joined: Jul 04, 2010
Posts: 2253
Location: Retired Moderator Slowly Returning to the Living.
That was pretty interesting! I would love to do something like that!

_________________
Artists aren't crazy! We're eccentric! ~G.M. Ross

Image

My Sigs = My Photos
Check out my work at http://www.flickr.com/photos/photomastergreg.


Top
 Post subject: Re: Hobo Lobo
PostPosted: Mon May 02, 2011 5:26 pm  (#9) 
Offline
Global Moderator
User avatar

Joined: May 16, 2010
Posts: 16169
I've seen that effect before seems like on a documentary about something.

_________________
Image


Top
 Post subject: Re: Hobo Lobo
PostPosted: Mon May 02, 2011 6:34 pm  (#10) 
Offline
New Member

Joined: May 02, 2011
Posts: 1
Hey gents, thanks for the kind words. Noticed this thread in my googalerts, wanted to answer your questions.

First, a clarification: the only real animation is the crystal ball (and it is just an animated gif). All other things are either jpegs (where no transparency is needed) or plain pings otherwise (they're 32-bit pings that have been processed into 8-bit pings with palleted alpha).

On the art side of things, in Photoshop, I have created a master document with smart objects for each level of the parallax—and then sliced up the smart objects on the inside to be able to export assets as smaller image files. One document per page of the comic. I don't know if/how Gimp handles slices and smart objects, but that is basically it. Essentially, any program that can export transparent things such as gifs or pings can be used to export assets for this kind of comic. I am just most comfortable with Photoshop and my method makes it relatively easy to keep track of how things will look while I am working, before anything has been exported and plugged into the website.

Some of this jargon may differ for Gimp so I am not sure about what these things are called, if they exist or whether they work the same.


Top
 Post subject: Re: Hobo Lobo
PostPosted: Mon May 02, 2011 6:48 pm  (#11) 
Offline
GimpChat Member
User avatar

Joined: Oct 06, 2010
Posts: 4050
Quote:
Friends don’t let friends use Internet Explorer


Hahahaha, I like this guy!

_________________
"In order to attain the impossible, one must attempt the absurd."
~ Miguel de Cervantes


Top
 Post subject: Re: Hobo Lobo
PostPosted: Mon May 02, 2011 6:54 pm  (#12) 
Offline
GimpChat Member
User avatar

Joined: Mar 02, 2011
Posts: 1850
Location: Michigan
http://www.zazzle.com/friends_dont_let_friends_use_internet_explorer_tshirt-235250956290256769
I want one!

_________________
Image
I'm back I think


Top
 Post subject: Re: Hobo Lobo
PostPosted: Mon May 02, 2011 8:56 pm  (#13) 
Offline
GimpChat Member

Joined: Dec 20, 2010
Posts: 174
Location: Wherever the voices in my head tell me I am.
That really was a neat effect applied to that comic strip. Would be interesting to try to mimic that animation effect using Gimp and/or GAP.

:)


Top
 Post subject: Re: Hobo Lobo
PostPosted: Tue May 03, 2011 11:30 pm  (#14) 
Offline
GimpChat Founder
User avatar

Joined: May 22, 2008
Posts: 5241
Location: Gimpville
That is a cool effect. :bigthup

From what I can tell, the website uses a technique similar to the JQuery plug-in: Parallax. You basically create your images and the plug-in allows you to scroll them on separate planes, at different speeds, giving you a nice depth effect.

JQuery plug-in: Parallax - Allows animation of simple parallax animations by animating the background-position of <div> elements.

Usage:
jQuery("#header").parallax("create");
jQuery(".scene-1 .slice-1").parallaxSlice("create", {speed: 5});
jQuery(".scene-1 .slice-2").parallaxSlice("create", {speed: 3});
jQuery(".scene-1 .slice-3").parallaxSlice("create", {speed: 1});

This site looks like a good resource with some basic demos of the technique: jonraash.com.

Here's another: jParallax.

Cool header using jParallax on this page.

The Hobo Lobo website calls this script: parallaxer.js, which looks to contain lots of code to get the left<-->right scrolling synced and smoothed up just right.

It shouldn't be too difficult to build a webpage template where you could just drop in image frames for a scrolling comic strip.

This is an excellent example of programming and graphics design coming together to create dynamic art.

_________________
“If you reach for the stars, you just might land on a decently sized hill.” - Stuart Hill


Top
 Post subject: Re: Hobo Lobo
PostPosted: Wed May 04, 2011 9:37 am  (#15) 
Offline
GimpChat Member
User avatar

Joined: Sep 24, 2010
Posts: 12845
GIMP can do slice for mapping areas to URL links (only done this once for a web linked image a long time ago). To intermingle different graphics in mapped areas I'm not so sure. Still that is a cool idea to reduce bandwidth (only have selective areas animate keeping other image parts intact that is). Cool info. :)

_________________
Lyle

Psalm 109:8

Image


Top
 Post subject: Re: Hobo Lobo
PostPosted: Wed May 04, 2011 11:30 am  (#16) 
Offline
Retired Staff
User avatar

Joined: May 22, 2008
Posts: 6946
Location: Somewhere in GIMP
lylejk wrote:
GIMP can do slice for mapping areas to URL links (only done this once for a web linked image a long time ago).
AFAIK, Slice is only available for Linux/Python. I've used it many times to chop up images.

Don't know if it would install in Windows if Python is installed.

_________________
Image
World War IV will be fought with sticks and stones. - Albert Einstein


Top
 Post subject: Re: Hobo Lobo
PostPosted: Wed May 04, 2011 3:58 pm  (#17) 
Offline
GimpChat Member
User avatar

Joined: Oct 06, 2010
Posts: 4050
If it will help the Windows users, I am prepared to rain dance. My rain dance gear is at arm's length and now has some new tools and instruments for accuracy performance testing. Anything to help an artist out. Besides this type of art is far more captivating than those normal block cells.

_________________
"In order to attain the impossible, one must attempt the absurd."
~ Miguel de Cervantes


Top
 Post subject: Re: Hobo Lobo
PostPosted: Wed May 04, 2011 5:17 pm  (#18) 
Offline
Global Moderator
User avatar

Joined: May 16, 2010
Posts: 16169
I agree i would much rather look at a animation such as this one.
This is more like real art you know?

_________________
Image


Top
Post new topic Reply to topic  [ 18 posts ] 

All times are UTC - 5 hours [ DST ]



* Login  



Powered by phpBB3 © phpBB Group