Please help: making my small animated Avatar gif much larger

birder · **Posted:** Thu Sep 22, 2011 18:55:25 pm

As everyone can see, my Avatar image is very small.

It seems that the size is only 69 x 74 whereas stampboards allows and prefers a size of 160 x 160.

I have loaded this gif file using 800 x 600 onto photobucket. I do not know how to increase the size of this Avatar image using Microsoft Paint.

Any help would be greatly appreciated.

Global Administrator · **Posted:** Thu Sep 22, 2011 19:13:27 pm

We actively discourage animated gifs as avatars, but when they are used we like to see them around the normal size of other avatars - 160 pixels.

http://i150.photobucket.com/albums/s113/ozstamps/volume%202/1-1803-1.jpg

This is the ideal size above, but of course unless YOU wrote the code for the gif, you are not going to get it animated. :idea:

birder · **Posted:** Fri Sep 23, 2011 01:13:36 am

Thanks Sheriff.

Managed to get it the right size.

Thanks and regards.

GlenStephens · **Posted:** Fri Sep 23, 2011 01:19:24 am

Well done.

birder · **Posted:** Fri Sep 23, 2011 14:18:43 pm

Mission One (increasing the dimensions to 160 x 160) has been accomplished successfully.

Mission Two (decreasing the rate of flip from once per second to once in three seconds) appears impossible at this stage.

Any tips any one?

RobRoyH · **Posted:** Fri Sep 23, 2011 22:30:47 pm

First step.... prepare a sequence of images which you wish to sequence together into an animation. In your case, this would be just two images, (one with the head upright, one with it inverted).

These images should already be sized identically and be identical in every way EXCEPT for the animated portion.

I would recommend that they already be sized 160 pixels across or smaller, (too big and the end result file will be too large).

Go to this web site.
http://picasion.com/

Upload your images in the intended order.
Specify a custom size of 160 pixels.
Specify a frame change rate, or use one of the settings provided in the drop down... this is the basic answer to your question.

Generate your animated GIF and right-click save the image to your computer for later upload to stampboards.

If you are using some other software to create your GIF animation, then there should be a frame rate option buried in it's options somewhere.

As an example... To illustrate what a blushing "Red Guy" might look like... I saved NotBruce's avatar locally twice... as files NotBruce1 and NotBruce2.

I changed the color saturation on NotBruce2 so as to make a darker red....

I then uploaded both images to http://picasion.com/ and created this...

Total time... about 2 minutes.

birder · **Posted:** Fri Sep 30, 2011 20:10:49 pm

Thanks Robroy but this is too technical for me. I cannot get past the first step.

How about we start with a given .gif file?

The first step then would be to split it into two images.Even that appears to be a Herculean task..

RobRoyH · **Posted:** Sat Oct 01, 2011 00:15:30 am

OK.... full bore tutorial time.

I've broken the entire process down into many steps... and we'll subdivide further if needed.

I'll use an actual project as illustration.

MODERATORS - if your "discouragement" of animated avatars goes so far as to not want this process spelled out in such detail... feel free to delete. If, on the other hand, you approve, then feel free to move it over to the technical threads forum.

Let's say I feel it's time to move on to a new G. K. Chesterton quote and avatar, (I will never run out of quotes in 10 lifetimes, nor will I run out of stamps).

Let's go with one from the cover of my latest copy of "Gilbert" magazine.

"There is a whole truth of things, and that in knowing it and speaking it we are happy."
- G.K. Chesterton

For illustrating... I'll start with a fresh scan of a stamp from my collection. In this case we'll go with an illustration of George Washington... someone known for his veracity.

I have many images of him, certainly... but we'll go with a nice copy of a US 1st issue revenue... I'll pick R87c as my copy has fresh color and a light manuscript cancel... never mind the centering.... I'm not made of money after all...

Here is the scan... done at only 75 dots per inch as any more and I'd have to reduce it and thus loose detail anyway.

So my first image is ready and saved into a folder... as we can see in this screen shot.

Now let's make a copy for editing to create a second frame... next posting.

admin · **Posted:** Sat Oct 01, 2011 00:17:44 am

No - great to have an expert's input on this stuff .. I have no clue, so will learn like all others!

RobRoyH · **Posted:** Sat Oct 01, 2011 00:25:20 am

This is all being illustrated on a Windows system... if you are a Mac user however, other than which mouse button to click... it will be much the same.

I will first select the R87cImage1.jpg image by holding down my left mouse button, and I'll drag the mouse pointer over to the side... as shown here...

Releasing the left mouse button brings up a dialog asking me what I want to do... let's choose "Copy Here"

I should mention at this point that, as in most things, there are many different ways to make a copy of a file... this is only one way. I could use keyboard shortcuts. If I'm grabbing an image off the web, I might just save it twice with different names. Again... this is only one method.

Next posting...

RobRoyH · **Posted:** Sat Oct 01, 2011 00:35:08 am

And once I release that mouse button... I can see the second file.

It has an ugly Windows generated name which offends my sensibilities.... here I've renamed it to R87cImage2.jpg.

Not an essential step, but accomplished by just selecting the file and using the "F2" function key on my keyboard... then typing over the part of the file name I wanted to change.

We have identical copies of the same file, but saved with different names. We are going to leave R87cImage1.jpg absolutely alone..... it is our first frame.

R87cImage2.jpg, however, needs to be edited to become our second frame in the animation.

On to the next posting.

RobRoyH · **Posted:** Sat Oct 01, 2011 00:51:20 am

Now an admission. I know computers, but i am the furthest thing from being artistic that God ever placed on this earth.

My efforts at being artistic are going to be a bit rudimentary, to say the least.

I'm going to open up R87cImage2.jpg in plain old Windows Paint... installed on every Windows computer ever sold.

If you are endowed with more artistic gifts, you're laughing now.... please use your gifts to the fullest and use whatever graphics editing software you are comfortable with.

All I did inside Windows Paint was to add a black text box with a George Washington quote on Truth... "Truth Will Ultimately Prevail"

And also a black line extending from the bottom of the text box to his mouth... cartoon text bubble style. Here is the completed R87cImage2.jpg

And here is what my folder looks like once I've saved my changes and closed Paint.

So my second and last frame is ready.

You can of course prepare as many frames as you like. I could have had a text bubble that just said "TRUTH..." and then made, from a new copy of the first image, a third frame that said "... Will Ultimately Prevail".

Don't go crazy though. Every frame increases the size of the animated GIF greatly and the only way you can keep it under the maximum is to reduce the file and image size of each frame.

On to the Picasion web site to create my Animated GIF file.... and to the next post.

RobRoyH · **Posted:** Sat Oct 01, 2011 01:16:34 am

Here we see the http://www.picasion.com web site dialog.

I have already used the "Browse" buttons to select both R87cImage1.jpg and R87cImage2.jpg from their locations on my hard drive.

For "Size" I have selected "Userpic - 100px wide". Picasion will change my images from 97 pixels to 100 pixels wide... but that isn't enough for my eyes to notice.

This is why I only scanned at 75 dot per inch. I was trying to get images of exactly 100 pixels across... 97 was close enough. Every resize is going to make the images "blurry". Do as little of this as possible.

I have also selected the "Speed" as "Slower (3 sec)". This will mean that my Animated GIF will show frame 1 for 3 seconds, then frame 2 for 3 seconds before changing back to frame 1.

You can specify longer if you like by using the "Advanced" selection.

I now select the "Create Animation" button. Picasion thinks for a while and then pops up a screen showing my my new Avatar.

Here's that end point screen... and you can see me right clicking the image to save to my hard drive.

On to the last posting.

RobRoyH · **Posted:** Sat Oct 01, 2011 01:30:50 am

Picasion will create a very long, computer generated name... no good at all.

So... with my mouse pointer over the Picasion screen, on the animated GIF it created, I selected the right mouse button browser function "Save As" and I get this file name dialog asking me what to call the file when it is saved on my hard drive.

I typed over the long name Picasion provided and called the file R87cAniAvatar.gif and then I click on "Save"

All done. I now have the new Avatar on my hard drive.

One last check.

I select the new file with a right button click and select "Properties"

I want Windows to tell me how big the file is.... here is a screen shot.

Excellent... the file is only 36.6 KB. That's half the size of my current Avatar. Don't want to slow down Stampboards!

And just for good measure, here is the Animated Gif as shown after upload to Photobucket.

I hope that is detailed enough. I suppose I can step through the Windows paint process also... but what you do there is highly dependent on the specific project... you might not want to just add a cartoon text bubble.

Birder... you specifically would want to "Crop" just the image of Queen Victoria and save it as a new file... so that the head alone is in the file, and no frame.

Then you would "Rotate" that third temporary image 180-degrees... to make it upside down.

Or you could "Flip" instead of rotate to make it duplicate what you are doing now... although Windows Paint won't do that... I'd have to go with MS Publisher to accomplish that.... or some other editor.

Or you could have Vickie put on sunglasses or pick her nose.... but that WOULD require more frames and more talent than I have.

You would then copy and paste the upside down, flipped, or nose picking head only over the top of the head in your second frame image and save that to become your second frame.

I'm off to my user control panel to update... then on to the What's your Avatar thread!

birder · **Posted:** Sat Oct 01, 2011 02:49:29 am

Many thanks Robroyh,

That was a fantastic tutorial. You are a great teacher.

I followed it completely and was able to view a working GIF with slower flips.

Thanks.

But some new issues have cropped up. You see I have one image with the head inverted. I copied that and made a second image with the head inverted too. Now in the second image, in MSPaint, i zoomed it, cropped the circular centre rotated in 180% and fixed it back again before dezooming to original size. This new image I saved on the second image (same name). So now I had two images one with the Head inverted and the other with the head erect.

But two problems appeared :

1. When the central portion was cropped with irregular edges, rotated and then repasted in the circular space, some kind of gaps remained at the edges in a few places.

2. The background somehow became snow white from a pale yellowish white earlier. I don't know how this happened. Compare my Avatar with this image 2.

It can be observed that not only is the background much whiter (so as to be totally different) but even the central circle ius not a perfect circle as was in image 1.

But yes, I have tried many other pairs of image 1 and image 2.
And created animated gif successfully. Your method works. And is a beautiful method.
...Even for dummies.

Thank you.

Global Administrator · **Posted:** Sat Oct 01, 2011 03:29:57 am

RobRoyH - great tutorial.

I'll move this to the tech tips and issues Forum where it will be seen by far more members in future! :mrgreen:

Glen

RobRoyH · **Posted:** Sat Oct 01, 2011 03:40:29 am

The change in color is because JPG images describe 16 Million different colors.

A "GIF" file, (and only GIF files can be animated), can encode only 256 different colors. There is no solution to this problem, it must be lived with. You might want to just save your original image as a GIF.

How you lost the original round... I'm not entirely sure, but somewhere you must have resized the image in either the vertical or horizontal dimension only.

Since the image you include within the post above is a JPG, I suspect you did this yourself rather than that Picasion did it to you.

Here is the image I grabbed above.

Here is after creating the second frame in Paint... I avoided creating any NEW breaks in the frame by making sure that the "Draw Opague" setting under the "Image" drop down menu was NOT checked. This meant the white background was transparent when I pasted it back onto the frame.

And here is the resulting GIF from Picasion... choosing the advanced size and specifying 70 so as not to let Picasion resize the image much.

And the artifacts/remainders of Vicky's lower neck at the lower right... that's because I have no skill, art wise. :lol:

Is that of any help?

drvvr · **Posted:** Sat Oct 01, 2011 04:22:44 am

Is this okay???? :roll:

By the way great tutorial RobRoyH...

Thank you

Edit- Oops.... Just the head must flip right???..

Will try again...

RobRoyH · **Posted:** Sat Oct 01, 2011 04:27:53 am

I don't think he wants to flip the entire frame too! :lol:

But I see you got the idea.

Is this a common invert?

Here is my magic, cropped to 160 pixels and with a 4 second frame rate from Picasion.

It might be too big a file for an avatar though.

This is cut down to 125 x 135 with a 2 second frame rate... It didn't get much blurrier and it's a much smaller file.

Oh... and clearly I was wrong above... plain old Microsoft Paint does indeed support both vertical and horizontal flip as well as rotate. It is impossible to try and teach something without learning a lot yourself.

beekeeper · **Posted:** Sat Oct 01, 2011 08:57:23 am

Would your avatar look better, if you rotate the image 90 degrees to do 360 degrees per time cycle, at a slower rate rather then do a flip?

RobRoyH · **Posted:** Sat Oct 01, 2011 09:12:32 am

It would require more frames and create a much bigger file, unless you go even smaller in total image area.

I don' think 90 degree jumps would do it... here's a quick test with a 17 pixel wide file I just grabbed and rotated three times...

At some point, maybe 8 frames in 1 second, with a 45 degree rotation each frame, the "persistence of vision" optical illusion will make it appear to be a smooth rotation of the vignette.

But MS-Paint will only do the 90 degrees... Photoshop or GIMP will do custom rotations.

Feel free to experiment here... but just post them as images in the posts.

You probably don't want an Avatar file to get over 75 KB total, else it will slow down Stampboards when you are loading a full page of posts in a busy thread.

A page of beautiful images of stamps is fine... waiting for them because of a lot of big Avatars probably isn't.

drvvr · **Posted:** Sun Oct 02, 2011 04:38:44 am

Now I have a doubt....

Birder must reply... What do you want the inverted image to be??? Just the invert of queen as in your avatar which IS NOT the original invert 4 anna....
In invert 4 anna the Queen was facing right side...

Do you want the your avatar to be like this????

Your avatar no has two images... One is the 4 anna and the other has the head facing left....

like this....

Which is not how the queen`s head is if I am right in the inverted 4 anna...

I am right now working in photoshop. So thought of clarifying before proceeding!!!

birder · **Posted:** Sun Oct 02, 2011 11:56:14 am

Yes Drvvr, I would want my Avatar to flip between the two positions of the head as found in the actual stamps. The frame should remain constant and not shift at all.

Robroyh, I have since taught this technique of making instant gif to 5-6 school students. The way their faces light up on seeing their efforts bear fruit....priceless experience.
Thanks for making it possible.

drvvr · **Posted:** Sun Oct 02, 2011 14:33:47 pm

Is this fine???

birder · **Posted:** Sun Oct 02, 2011 16:18:37 pm

Excellent.

But cannot be used as such.
Because the size is 160 x 181 while stampboards limit is 160 x 160.

Thanks and regards.

drvvr · **Posted:** Mon Oct 03, 2011 04:08:19 am

Okay now??? :roll:

i kept both images in 160 x 160 range but in picasion I left it as user specified at 160 and it came as 160x 181.

Now corrected.

birder · **Posted:** Tue Oct 04, 2011 15:09:37 pm

..and used. Thank You.

admin · **Posted:** Tue Oct 04, 2011 15:54:33 pm

Great tutorial, from all who added to it.

drvvr · **Posted:** Tue Oct 04, 2011 19:47:40 pm

Have always been indebted to birder for the knowledge he had shared on board about the Uglies!!!

My way of payback to him...

Thanks to RobroyH for that tutorial which even a kid will understand...

Patient and DETAILED explanation (something which I will never be able to give!! :mrgreen:

)

Global Administrator · **Posted:** Sat May 19, 2012 14:55:08 pm

We have great tech knowledge out there.

Can those moving images like the Austria soccer player kicking a goal stamps be posted here?

tonga2 · **Posted:** Sat May 19, 2012 15:56:00 pm

RobRoyH and others - Glen is asking this last question for me - I had a friend save a number of lenticular motion stamps on photobucket for me for a thread I would like to do on this type of stamp, but I don't seem to be able to bring them over to Stampboard.

You can email me direct and I can let you open the Photobucket page to see where we are at so far
gjorgens(at)bigpond(dot)net(dot)au

Thanks
Greg

RobRoyH · **Posted:** Thu May 24, 2012 02:19:47 am

tonga2 / Greg

I gather you are having troubles getting from Photobucket to the board.

Stepping quickly through the process.... on the album view of your PhotoBucket account.... "hover" your mouse over the image you want to paste into a stampboards message.

A list of options will pop up below the image as shown here for the skater stamp...

"Click" once in the box next to the title "IMG Code" and you will briefly see the acknowledgment "Copied". You are ready to go over to Stampboards now.

It is important to "copy" nothing else until you have pasted that IMG Code into your Stampboards message.

Write any text you need in the Stampboards posting and wherever you want the image.... you use a "Paste" function.

As always... there are many ways to do a paste.... I hold down the "Ctrl" key and press the letter "V".... this is called a keyboard shortcut.

You can also right-click your mouse button, (on a windows PC only), and select the "Paste" option.

Hope this is where your road blocks lie.


Buy/Sell all paper made collectibles!	*Click for our Current Auction*	*Click For Our Newest Issues*	Internet Auctions-Buy & Sell Stamps

Postage Stamp Chat Board & Stamp Bulletin Board Forum

Please help: making my small animated Avatar gif much larger

Who is online