Tutorial: GIF Avatars Tutorial by Yash.

Yash.

Staff Member
Moderator
India
Ireland
ENG....
SRH...
QG
PlanetCricket Award Winner
Melbourne Stars
X Rebels
Joined
Aug 24, 2015
Location
Bareilly
Profile Flag
India
Gif Avatar Tutorial by @Yash.
As requested by @AK MODS

Since, GIF avas are catching up nowadays, and I have been requested multiple times for a tutorial. Here it is.

----

Requirements
  • A Video (I will be using this in the tutorial)
  • ffmpeg (Recommended for most users if you don't want to slow your computer down. Else, you can use your own video editor for it)
----
Procedure
Step 1

Download the video of your choice, from Youtube, by using clipconvertor. I am using this video, cause its AB de Villiers, of course :p .

Step 2

Download FFMPEG according to your OS.

Step 3


Find the clip you want to use as ava, and note down its time (8:44 in my case). Make sure it is focused on the player, and the player is in the center of the frame. Copy the video to the bin folder in FFMPEG.

upload_2018-2-12_19-1-45.png
Step 4

Now, get the dimensions of the video, (1280x720 in my case) and subtract the height from width (1280 - 720 = 560). Then, go to the bin folder in ffmpeg, and hold, Shift and Right Click and chose "Open Command Window here". Then, type this command there.

Code:
ffmpeg -i <Your File Name.mp4> -ss <Your Starting Time in the format HH:MM:SS.MS> -t <Duration> -filter:v "crop=in_w-<Width - Height>:in_h" -s 100x100 <Output Name.gif>

Screen1.png upload_2018-2-12_19-14-11.png
Step 5

Check your first made gif, in Chrome. If the timings seem somewhat wrong, alter them in the command (even by decimals) and again make the gif. This is what I got after first try and some fine tunings.

ab.gif

Size - 189kb

Step 6

However, the file size is way too large (189 kb). So, now we will decrease the frame rate with this command. Keep the frame rate from 8 to 12. If it still is bigger, decrease the time, by either starting point or the duration. Don't use the starting point and duration together. I used frame rate 9.

Code:
ffmpeg -i <Original.gif> -r <Frame Rate> -ss <New Starting Point> -t <New Duration><New.gif>

ab2.gif

Size - 74kb
Step 7

Now, we have to decrease the size by optimizing the gif. Use this website. Upload your gif. Use Compression and/or Colour Reduction + Dither to decrease size. I compressed it to 200 level, and then click on the frames tag, given in the result. Skip all the frames that look similar. Then, save the result.

screen2.png

screen3.png
----

Final Result...

ezgif.com-gif-maker.gif
@LiveLoveABD GO Nuts!
 

Attachments

  • upload_2018-2-12_19-10-42.png
    upload_2018-2-12_19-10-42.png
    8.8 KB · Views: 6

Ashutosh.

Staff Member
Moderator
Sportsbookie
Fantasy Cricket Team
PlanetCricket Award Winner
Survival Games Finalist
TPCL Titans
Joined
Feb 23, 2017
Location
India
Profile Flag
India
Gif Avatar Tutorial by @Yash.
As requested by @AK MODS

Since, GIF avas are catching up nowadays, and I have been requested multiple times for a tutorial. Here it is.

----

Requirements
  • A Video (I will be using this in the tutorial)
  • ffmpeg (Recommended for most users if you don't want to slow your computer down. Else, you can use your own video editor for it)
----
Procedure
Step 1

Download the video of your choice, from Youtube, by using clipconvertor. I am using this video, cause its AB de Villiers, of course :p .
Step 2

Download FFMPEG according to your OS.
Step 3

Find the clip you want to use as ava, and note down its time (8:44 in my case). Make sure it is focused on the player, and the player is in the center of the frame. Copy the video to the bin folder in FFMPEG.

View attachment 204929
Step 4

Now, get the dimensions of the video, (1280x720 in my case) and subtract the height from width (1280 - 720 = 560). Then, go to the bin folder in ffmpeg, and hold, Shift and Right Click and chose "Open Command Window here". Then, type this command there.

Code:
ffmpeg -i <Your File Name.mp4> -ss <Your Starting Time in the format HH:MM:SS.MS> -t <Duration> -filter:v "crop=in_w-<Width - Height>:in_h" -s 100x100 <Output Name.gif>

View attachment 204931 View attachment 204934
Step 5

Check your first made gif, in Chrome. If the timings seem somewhat wrong, alter them in the command (even by decimals) and again make the gif. This is what I got after first try and some fine tunings.

View attachment 204935

Size - 189kb

Step 6

However, the file size is way too large (189 kb). So, now we will decrease the frame rate with this command. Keep the frame rate from 8 to 12. If it still is bigger, decrease the time, by either starting point or the duration. Don't use the starting point and duration together. I used frame rate 9.

Code:
ffmpeg -i <Original.gif> -r <Frame Rate> -ss <New Starting Point> -t <New Duration><New.gif>

View attachment 204938

Size - 74kb
Step 7

Now, we have to decrease the size by optimizing the gif. Use this website. Upload your gif. Use Compression and/or Colour Reduction + Dither to decrease size. I compressed it to 200 level, and then click on the frames tag, given in the result. Skip all the frames that look similar. Then, save the result.

View attachment 204937

View attachment 204939
----

Final Result...

View attachment 204940
@LiveLoveABD GO Nuts!
Thank You for making this tutorial
Thank You so much
 

Ashutosh.

Staff Member
Moderator
Sportsbookie
Fantasy Cricket Team
PlanetCricket Award Winner
Survival Games Finalist
TPCL Titans
Joined
Feb 23, 2017
Location
India
Profile Flag
India
Tutorial is good and easy to understand
 

AliB

ICC President
India
AFG...
Mumbai Indians
PlanetCricket Award Winner
Adelaide Strikers
X Rebels
Joined
Oct 7, 2014
Online Cricket Games Owned
  1. Don Bradman Cricket 14 - Steam PC
That's a good tutorial, I used Adobe Prmiere for my stuff then optimized.
 

Yash.

Staff Member
Moderator
India
Ireland
ENG....
SRH...
QG
PlanetCricket Award Winner
Melbourne Stars
X Rebels
Joined
Aug 24, 2015
Location
Bareilly
Profile Flag
India
That's a good tutorial, I used Adobe Prmiere for my stuff then optimized.
I really hate Adobe Premiere. Sony Vegas is much better than it.

FFMPEG is just a quick fire option, and requires no beast of a computer to run.[DOUBLEPOST=1518451851][/DOUBLEPOST]
Can you make a GIF of his six to get to the century? :D

I suck at this and to complicate matters I have a Mac.
Of course. Will give in some time.
 

VDQuint

International Cricketer
Mumbai Indians
Joined
Jul 24, 2012
Profile Flag
India
Gif Avatar Tutorial by @Yash.
As requested by @AK MODS

Since, GIF avas are catching up nowadays, and I have been requested multiple times for a tutorial. Here it is.

----

Requirements
  • A Video (I will be using this in the tutorial)
  • ffmpeg (Recommended for most users if you don't want to slow your computer down. Else, you can use your own video editor for it)
----
Procedure
Step 1

Download the video of your choice, from Youtube, by using clipconvertor. I am using this video, cause its AB de Villiers, of course :p .
Step 2

Download FFMPEG according to your OS.
Step 3

Find the clip you want to use as ava, and note down its time (8:44 in my case). Make sure it is focused on the player, and the player is in the center of the frame. Copy the video to the bin folder in FFMPEG.

View attachment 204929
Step 4

Now, get the dimensions of the video, (1280x720 in my case) and subtract the height from width (1280 - 720 = 560). Then, go to the bin folder in ffmpeg, and hold, Shift and Right Click and chose "Open Command Window here". Then, type this command there.

Code:
ffmpeg -i <Your File Name.mp4> -ss <Your Starting Time in the format HH:MM:SS.MS> -t <Duration> -filter:v "crop=in_w-<Width - Height>:in_h" -s 100x100 <Output Name.gif>

View attachment 204931 View attachment 204934
Step 5

Check your first made gif, in Chrome. If the timings seem somewhat wrong, alter them in the command (even by decimals) and again make the gif. This is what I got after first try and some fine tunings.

View attachment 204935

Size - 189kb

Step 6

However, the file size is way too large (189 kb). So, now we will decrease the frame rate with this command. Keep the frame rate from 8 to 12. If it still is bigger, decrease the time, by either starting point or the duration. Don't use the starting point and duration together. I used frame rate 9.

Code:
ffmpeg -i <Original.gif> -r <Frame Rate> -ss <New Starting Point> -t <New Duration><New.gif>

View attachment 204938

Size - 74kb
Step 7

Now, we have to decrease the size by optimizing the gif. Use this website. Upload your gif. Use Compression and/or Colour Reduction + Dither to decrease size. I compressed it to 200 level, and then click on the frames tag, given in the result. Skip all the frames that look similar. Then, save the result.

View attachment 204937

View attachment 204939
----

Final Result...

View attachment 204940
@LiveLoveABD GO Nuts!

You made it more complicated But a nice effort!

How to do it easily ?

1. Copy youtube Link and and paste it here
2. Select your video start time and gif total time Then Convert and download it.
3. Now open photoshop (above cs5) And Open Gif in photoshop
4. Now turn on timeline by going Windows>Timeline (Easy to modify any layer)
5. Now Change Canvas size to 100x100 (Image>Canvas Size)
5. Select all layers and move or resize as you wish Make sure you are on first layer in timeline.
6. To save gif go to File>Export>Save For Web
7. Now you can know size of gif and all colours and other stuff select loop as forever and save it

Hope it will help !

Like this one
freegifmaker.me_2bBJ1.gif
 
Last edited:

Yash.

Staff Member
Moderator
India
Ireland
ENG....
SRH...
QG
PlanetCricket Award Winner
Melbourne Stars
X Rebels
Joined
Aug 24, 2015
Location
Bareilly
Profile Flag
India
You made it more complicated But a nice effort!

How to do it easily ?

1. Copy youtube Link and and paste it here
2. Select your video start time and gif total time Then Convert and download it.
3. Now open photoshop (above cs5) And Open Gif in photoshop
4. Now turn on timeline by going Windows>Timeline (Easy to modify any layer)
5. Now Change Canvas size to 100x100 (Image>Canvas Size)
5. Select all layers and move or resize as you wish Make sure you are on first layer in timeline.
6. To save gif go to File>Export>Save For Web
7. Now you can know size of gif and all colours and other stuff select loop as forever and save it

Hope it will help !

Like this one
View attachment 204948
I know this is easy. Its just that I always use FFMPEG, just because it gives me more control over video than Photoshop.
 

Samarth27.09

International Cricketer
India
RCB...
Joined
Sep 17, 2016
Location
India
Profile Flag
India
Online Cricket Games Owned
  1. Don Bradman Cricket 14 - Steam PC
All the credits goes to me..... I was the one who taught Yash to make it... Even I was the one who helped the online gif optimizer team to make that website and my without my contribution even Tim Berners Lee was not able to create the WWW; I was its original creator... And then I had pity on Tim as he was really a hard worker and gave WWW away.... I'm very proud of myself....


(Great tutorial Yash; Will make a Karate GIF soon.... may be I'll add some additional effects.... Thank Brother...)
 

Ashutosh.

Staff Member
Moderator
Sportsbookie
Fantasy Cricket Team
PlanetCricket Award Winner
Survival Games Finalist
TPCL Titans
Joined
Feb 23, 2017
Location
India
Profile Flag
India
without my contribution even Tim Berners Lee was not able to create the WWW; I was its original creator... And then I had pity on Tim as he was really a hard worker and gave WWW away.... I'm very proud of myself....
LOL:lol:lol
I am Sachin Tendulkar
 

Samarth27.09

International Cricketer
India
RCB...
Joined
Sep 17, 2016
Location
India
Profile Flag
India
Online Cricket Games Owned
  1. Don Bradman Cricket 14 - Steam PC
LOL:lol:lol
I am Sachin Tendulkar

yes, yes... I knew that before..... BTW sachu how is your Cover-Drive and although now your career is over as an regular cricketer but I still think that you can improve your Cover Drive. So tomorrow morning just come to Eden Gardens, I'll help you improve it... And BTW I still remember that last time you came to me you forgot to pay your fee for the last month and left without even notifying me... although that was very harsh and embarrassing but I forgive you but this time pay the fee in advance...[DOUBLEPOST=1518536060][/DOUBLEPOST]--Lets not get away from the topic though--
 

Ashutosh.

Staff Member
Moderator
Sportsbookie
Fantasy Cricket Team
PlanetCricket Award Winner
Survival Games Finalist
TPCL Titans
Joined
Feb 23, 2017
Location
India
Profile Flag
India
yes, yes... I knew that before..... BTW sachu how is your Cover-Drive and although now your career is over as an regular cricketer but I still think that you can improve your Cover Drive. So tomorrow morning just come to Eden Gardens, I'll help you improve it... And BTW I still remember that last time you came to me you forgot to pay your fee for the last month and left without even notifying me... although that was very harsh and embarrassing but I forgive you but this time pay the fee in advance...[DOUBLEPOST=1518536060][/DOUBLEPOST]--Lets not get away from the topic though--
Tomorrow I will come to Eden Garden at 9:00 AM (IST)
Help me in improving my cover drive and I will pay my fee
 

Users who are viewing this thread

Top