.Gif / Smiliey tutorial

[Buster's Uncle]

Protok asked for some schooling in Site: https://alphacentauri2.info/index.php?topic=21639.0

I thought I'd like to take it up in here.

-So check at the link to get up to speed, and come back for comments and questions...

[Buster's Uncle]

Making a Samurai-Playing-a-Banjo Smilie:
An Illustrated Tutorial

Reading through an old thread of smilie requests, I saw someone wish for a samurai playing a banjo - what the heck; I thought I'd do it.  Probably not serious, but what the heck.

I'll be concentrating on technique in these remarks.  The step-by-step process is showable/teachable.  Creativity/art, well, I can show you how easier/better than why, but why's in there, too.  Helping an ESL Italian AC2 member quite a few years ago w/ modding taught me to screenshot heavily to help get past the language barrier.

So fire up GIMP -it's a free download; google it- and follow along.

---

I begin, as almost always, with opening my stock blank smilie, in this case, the 15x15 model:


-Skips a lot of time wasted drawing in the same shading over and over, to have some stock blanks...

Next, I made some room for details, the banjo and animation.


Image>Canvas Size...>20x20>Offset all 5 pixels to the bottom, 2 for approximate centering - (I'll put the big end of the banjo on the 3 side).  Thus:


-I'm trying to keep the smilies as small as possible; 20x20 is the ideal upper size.  I'll end up revising this 2x wider; taking up extra width is less disruptive when mixed w/ text.  Tall as x20 pixels spaces text a little extra, so it's worth going to some trouble to try not to exceed that.


Next, it's going to be an animation of at least two frames, so I'll need a Layers box.  That's Windows>Dockable Dialogues>Layers:
  Thus: 


Now to make a second layer:
 
Right-click on the thumbnail in the Layers Toolbar>New Layer>make sure the bottom, Transparency, is checked>Okay.  (Clearly, I went back and took some screenies out of order afterward; no refunds.)

The image/layer(s) is in an invisible box that needs expanding.  SO -
siiigh.  -I've hit the  attachment limit one pic too early.


Next time:  I draw the various elements and, one certainly hopes, it gets more interesting.

[Buster's Uncle]

Making a Samurai-Playing-a-Banjo Smilie Pt. 2​

Continuing a prompt 2.5 years later....



See, as a memory-saving measure, each frame in an animated .gif is/should be invisibly cropped to include only actual pixels in that frame. -But at this stage, about to draw the bits that make a samurai face, I need room. Right-click on the new frame in the Layers box>Layer to Image Size. Now I can draw in the entire 20x20.


So teaching you to cartoon/draw w/ minimal pixels is too vast a subject to get into here, and only practice/experience will really do that, but here's the central element. Add hair w/ a topknot, flat eyes and a smile to the 15x smilie blank, and that's a serviceable samurai face. Not too difficult.

Next came the banjo:

(which was a pain, and doesn't look that great zoomed in - but will serve at actual size).

And the hands in both positions for his left - his right doesn't move.



So that's all the elements drawn - merging them into a two-frame strumming animation is fairly simple, coming next time.

[Buster's Uncle]

Making a Samurai-Playing-a-Banjo Smilie Pt. 3:
This time it's personal​

So here I've checked visible -the eye symbol on the left of the Layers box- for the separate elements -just one of the pairs of hands- to make a complete Samurai Banjo image.


Here, right-click on any layer>New from Visible>Ok.


Which yields this:

-a new frame w/ the complete image.

-Then I repeat the process with the other set of hands.

Having generated the two frames, I proceed to delete the working frames w/ the separate parts now that I no longer need them:


Then I name(number) the layers and set the (preliminary) timing.

1000ms is one second -20ms is about the briefest I can make put at all- and the timing of each frame in an animation is crucial to it looking good. This ends up usually requiring some trial-and-error with the playback, which I do next.


(Note, incidentally, that I had to go back and make this screenshot after I'd finished - I'd realized that my first draft of the head looked more like Sumo-Playing-A-Banjo, and during that trial-and-error I'd realized his left hand looked like it was jumping between the two position, instead of moving, so I added an intermediate frame w/ the hand in between.)

So anyway, Filters>Animation>Playback gives you the playback box.

It's small, like you'd see on the forum page, and frequently significant details only pop out at the smilie artist when they see it on that page. [shrugs]

...

Once you've worked out the timing and cropped out any extra size you didn't need, and all that, never skip running both optimizations. They autocrop the individual frames for you, the invisible thing I started out talking about last time, and they take out all the redundant pixels for the (combine) function -see the Innocent Teddy tutorials I linked yesterday for what combine and replace do, and the difference- and thus, minimize file size.

(A good smilie artist pays attention to technical details like smallest feasible physical size on the page and smallest possible file size - not just prettiness, funniness, clarity of what it represents, and smoothness of animation. -It's a lot to juggle, which is probably why so many smilies suck so hard...)


We're very near the end, but I'm close to the attachment limit.

-Do keep in mind that me being exacting in detail in the service of teaching tends to make what's simple look tedious to the uninitiated. It's not easy, exactly, when you know how, but it's way easier than this tends to make it look...

Next time: Final touches, saving, and signing your work - not in quite that order.

[Buster's Uncle]

Making a Samurai-Playing-a-Banjo Smilie:
Interlude

All this has inspired me to go back -I'd saved an .xcf GIMP-format file while it was still the original separate parts- and make Samurai's brother/rival Sumo...

[Buster's Uncle]

Making a Samurai-Playing-a-Banjo Smilie Pt. 4:
Endgame​

Here's frame 2 after optimization:

That's the hand in the new position w/ a bit of banjo background to cover the hand in the old position.  Nothing else has changed, and I was careful to keep the hand over the banjo face, so the (combine) function saves memory by changing the minimum and displaying the rest of the previous frame.  You can also see the invisible frame cropping as a dotted-line box - just the very minimum.

-You might also notice the first frame having only the timing; the animation resets automatically on cycling back to the first frame, so no need to waste a few bytes of memory entering (replace) or (combine) after the timing.  It's replacing no matter what you do.


 
.gifs require an indexed color palette, and here, before I save the file, Image>Mode>Indexed...  Not pictured is some trial and error doing it several times deciding what's the minimum number of colors that preserves what I've done so far w/o taking out the shading.


I run Playback a few more times before saving, and decide to add that middle frame for smoothness of movement.


Samurai reaches his final form.  Time to save.

 
File>Save As...>Save as Animation>Export


It defaults to "Created with GIMP" but I'm a believer in signing my work.  You should, too.  >Save.

 

Good hunting, my friend.