| View previous topic :: View next topic |
| Author |
Message |
Jamo 
Joined: 20 Apr 2007
Posts: 12784
Location: United Kingdom
|
 Posted: Sat Aug 06, 2011 2:15 am Post subject: My Videos For Icons Tutorial - Updated, Now Even Easier! |
 |
|
Hey 
Two people asked that i make this tutorial, so i am. Hopefully it will explain how to take a video and convert it to .gif then edit the .gif to resize and add an overly.
If the text is hyperlinked, then its to an image showing you what im talking about. Remember, if you press down with the middle wheel of your mouse they will open in a new tab for you.
the programs i will be using today are (in order of when they will be used) :-
Cam studio - for taking video screen captures
Virtual Dub v1.9.11 - for converting the video to a .gif
Adobe Fireworks - For final adjustments to the gif
ok lets get going...
Stage 1 - Taking A Video
ok this is really simple, first just open cam studio
now open imvu, and run the animation you want to record a few times
make sure you know how much of the screen you need to record
ok now open cam studio
hit the red 'record' button
drag a box over the region of the screen you wish to record
wait for the animation to play through (do not put your mouse inside the region or change windows, it will record exactly what you do)
ok press stop when the video is as long as you want
do not worry about your video being too long we cut it later
a box will appear to save
in the file name it will say '*.avi' Remove that and type your own file name, and save it in the folder you want.
a video will pop up, press play and preview your video
MAKE SURE THE VIDEO IS PERFECT. you don't want to do the next bit only to find that the animation isn't smooth or exactly how you want it.
You can watch my video here
Stage 2 - Making images out of the frames of your video
For this stage you will be working in virtual dub... so open it up!
Go file> open video file...
You should see 2 boxes, a timeline, and some buttons.
i have hilighted the important buttons, and called them 1/2 so i will refere to them with that number
ok drag the marker to where you think the first frame is
hit button 1 (a /--- arrow)
ok drag the marker to the last frame
hit button 2 (a --\ arrow)
The part between the two frames should hi light in blue, if it did, you did it right!
go file > export > Animated .GIF
Give it a file name and make sure the appropriate looping is selected
Hit save and BOOM you have a .Gif
 - Clickable thumbnail, click for full image.
Stage 3 - Adding Icon Overlay
ok so open up Adobe Fireworks
file>new
make the canvas size 100x80 and give it an appropriate background colour
Go file>import...
select your .gif file and it will import it to the canvas
if it asks you to extend the animation beyond the current number of frames click YES!
ok, go to frame one
doube click on the image
....
if you see 2 layers (background and layer 1) then paint the background a matching colour. You do that on one frame and it will sort the bug for all. hit done in the top left hand corner This only happens sometimes, and im just sure why it does it. Sorry about that.
....
go back to frame 1
Press Ctrl +t
you should see 6 handles
drag the corner ones to make it smaller (to fit on the icon)
if you need to play the animation just hit the play arrow (bottom right corner)
Size it, drag it around, move it. Just like you would with a normal image/icon
ok, now, adding the overlay
first copy your overlay (going to be pasting it alot)
Now hit the add new layer button
paste your overlay in, make SURE it goes in your new layer
Now press the next frame button
paste your overlay in, make SURE it goes in your new layer (i.e on top)
repeat this for all your frames
go file>save as
give it a name
MAKE SURE YOU SELECT FILE TYPE - ANIMATED .GIF
To Compress the image (if its too big...)
Click options when saving as Animated.gif
Click the K and the arrow, hi lighted No. 2 in the image
Fill in 50KB for an icon, or 200KB for an Avi pic
Click OK
Compressed image is saved 
boom, done!
14 frames, smooth animation, 28kb file
_________________
Last edited by Jamo on Wed Oct 26, 2011 2:44 am; edited 5 times in total |
|
| Back to top |
|
 |
Jamo
Joined: 20 Apr 2007
Posts: 12784
Location: United Kingdom
|
| Posted: Sat Aug 06, 2011 9:46 am Post subject: |
|
|
can i just ask for your opinion on images being in links?
i did it that way because if you know where the buttons are you dont need them pointing out to you.
i dont know, i might do a video of me making an icon as well.
im glad you like the tut though
_________________
|
|
| Back to top |
|
|
Jamo
Joined: 20 Apr 2007
Posts: 12784
Location: United Kingdom
|
| Posted: Sat Aug 06, 2011 12:55 pm Post subject: |
|
|
| xolollieox wrote: | | You r very welcome:) I learned few more things i did not know ! Thank you |
no problem
was actually fun making a tutorial, been ages since i made one.
back when i was appointed owner of an avatar editing group, LOLS. Can see why i got that position with the skills of my edited avatar. (has text) text was all the rage back then  
_________________
|
|
| Back to top |
|
|
Jamo
Joined: 20 Apr 2007
Posts: 12784
Location: United Kingdom
|
| Posted: Sat Aug 06, 2011 2:20 pm Post subject: |
|
|
make sure you post what you make
i made this earlier today... 
i wanted a smoother looping, but failed cos i rushed it, didnt check it played through properly :/
_________________
|
|
| Back to top |
|
|
WykdVixen
Joined: 18 Feb 2009
Posts: 344
Location: USA - TN
|
| Posted: Sat Aug 06, 2011 7:38 pm Post subject: |
|
|
Great tut! The programs you are using, do they work with Windows 7?
_________________
 |
|
| Back to top |
|
|
Jamo
Joined: 20 Apr 2007
Posts: 12784
Location: United Kingdom
|
| Posted: Sun Aug 07, 2011 8:29 am Post subject: |
|
|
| WykdVixen wrote: | | Great tut! The programs you are using, do they work with Windows 7? |
im using macromedia fireworks 8 (its old school) and it will run in compatability mode, however if you have a newer version then it will run fine. Any of the ones made after adobe bought out macromedia should be fine
| Quote: | | VirtualDub is a video capture/processing utility for 32-bit and 64-bit Windows platforms (98/ME/NT4/2000/XP/Vista/7) |
and easy gif anim works fine too.
im actually on windows 7
_________________
|
|
| Back to top |
|
|
FantasticalFrosting_disab
Joined: 15 Apr 2009
Posts: 111
Location: USA
|
|
| Back to top |
|
|
Jamo
Joined: 20 Apr 2007
Posts: 12784
Location: United Kingdom
|
| Posted: Mon Aug 08, 2011 2:13 am Post subject: |
|
|
| RavennaDarqueWyndz wrote: | | It was so simple that I actually might try it... very excited to understand every single step...usually I sit and wonder abit with trial and error.. Great tutorial |
i tried to break down each step as much as possible, which makes a 10 minuet process look like it is going to take ages, but once you get into it you really can just 'bang em out'
if you do have trouble with any step post here and i will be sure to try and answer.
apparently with the newest version of Virtual Dub you can export straight to a .gif which will be SOOOO handy..., so ima go check for it
_________________
|
|
| Back to top |
|
|
Jamo
Joined: 20 Apr 2007
Posts: 12784
Location: United Kingdom
|
| Posted: Mon Aug 08, 2011 2:25 am Post subject: |
|
|
i have just found a wayyyyy easier (and cheaper, no more Easy Gif Anim) way to do this, i will be updating the tutorial today, keep your eye out.
btw, i have updated to Virtual Dub v1.9.11
[edit] Done!
_________________
|
|
| Back to top |
|
|
XEmperorChaosX 
Joined: 26 May 2009
Posts: 1163
Location: USA - FL
|
| Posted: Mon Aug 08, 2011 5:40 am Post subject: |
|
|
THANK YOU!!!!!
For stepping up to the plate to offer some education on how to animate icons.
I am stuck
Is here a free program that we can use to replace
Adobe Fireworks? |
|
| Back to top |
|
|
XEmperorChaosX
Joined: 26 May 2009
Posts: 1163
Location: USA - FL
|
| Posted: Mon Aug 08, 2011 5:59 am Post subject: |
|
|
This is interesting using windows movie maker.
I haven't had a chance to use this system yet.
http://www.youtube.com/watch?v=2VKa9bYTRA4
I can't yet find an option for 100x80 compression.
I wonder if Audio dub can 'Finalize' to 100x80px???? |
|
| Back to top |
|
|
Jamo
Joined: 20 Apr 2007
Posts: 12784
Location: United Kingdom
|
| Posted: Mon Aug 08, 2011 6:01 am Post subject: |
|
|
Hey
when your in cam studio go to region > fixed region
if you then input 100x80 you will be able to take the video and create the gif in the right size from the very start.
dont know about adding an overlay though
_________________
|
|
| Back to top |
|
|
Jamo
Joined: 20 Apr 2007
Posts: 12784
Location: United Kingdom
|
| Posted: Tue Aug 09, 2011 3:15 pm Post subject: |
|
|
| Yoru wrote: | | Ahh thank you soo much |
No problem
Hope it works for you, if not post it here and I can try to help.
Im having some serious issues with fireworks using a stoopid compression my splitting it up into 2 layers, background and animation. I'm just perfecting my technique on solving this issue for non-solid background colours.
_________________
|
|
| Back to top |
|
|
Jasmyn
Moderator
Joined: 30 Jan 2007
Posts: 8225
Location: Netherlands
|
| Posted: Wed Aug 24, 2011 11:36 am Post subject: |
|
|
thanks for the help hun.. fireworks is giving me serious trouble, lots of errors and slow  Also when I save my item as a gif, when I open it later I only see the first image, as a still, and nothing else.
Maybe I'll try and make it the right size in the camstudio right away see if I can do that
EDIT: can't get a nice image that way, need to zoom out too much, plus my mouse is in the middle of it cause I need to put the frame there
I'm gonna reinstall fireworks see if that helps
_________________
 |
|
| Back to top |
|
|
Jamo
Joined: 20 Apr 2007
Posts: 12784
Location: United Kingdom
|
| Posted: Thu Aug 25, 2011 11:29 am Post subject: |
|
|
| J4SM1N3 wrote: | thanks for the help hun.. fireworks is giving me serious trouble, lots of errors and slow Also when I save my item as a gif, when I open it later I only see the first image, as a still, and nothing else.
Maybe I'll try and make it the right size in the camstudio right away see if I can do that
EDIT: can't get a nice image that way, need to zoom out too much, plus my mouse is in the middle of it cause I need to put the frame there
I'm gonna reinstall fireworks see if that helps |
Make sure you save as an Animated .Gif .... not just .gif
Also, what do you mean your mouse is in the middle?
slowness can be expected upon the resizing of the animation symbol, your editing many images in one go.
which version of fireworks are you in?
_________________
|
|
| Back to top |
|
|
|
FAQ
Usergroups
Register
Profile
Log in for private messages