Gif Banner Tutorial!

7 replies [Last post]
Sleepyraccoon's picture
Supreme Viking Champion
Joined: 07/28/2014

I have no idea where to put this, but some people are asking me how or where I made my banners.  So I want to make a tutorial for those who are out of the loop.




First of all, you need GifCam!  There are probably other methods, but GifCam is by far the easiest and free-est program for making gifs out there. 

Download link:  Here

Offical website:  Here


Using GifCam is a breeze. It allows you to record gifs live at whatever size you want. You can even edit the recorded gif with it afterwords to some extent, though I prefer to use Photoshop.




So now that you have GifCam, boot up the game and figure out what you want to record. Recording your dragon flying is always cool, though it can be tricky since you're moving.  Just make sure you're in a wide open area.  Keep in mind what's behind you.  You can get some really cool shots with this game in the right areas! 


Don't forget that hold+right click is how you change the camera view and the middle mouse button can be used to zoom out.



You can choose what size you want your banner to be right from the beginning, but I prefer to make it a little too big so that I have room to edit and resize.  Once you've planned out and rehearsed what you want to do, simply click record.  Don't worry about the timing. You can delete frames later.  Don't make the gif too long, because then it'll be a huge file and you'll have trouble opening it later.  Press stop when you're done recording.  Don't forget to save!


This would be where I start using Photoshop.  For people who don't have it / can't get it, GifCam itself offers minimal editing features.  Also I believe there are Gif editing websites out there that can help.  Keep in mind that using these websites can cause your Gif quality to lessen every time it's reprocessed.




For those who do have Photoshop, this is the fun part! (note: I have Photoshop CS4 and some features on older and newer versions may be different/nonexistant).  Open Photoshop and click on File and then go down to Import.  From there click on Video Frames to Layers... (Note: the 64-bit version of Photoshop does not have this. You need the 32-bit version.) Enter "*" as the file name. This will allow you to select gifs.  Locate your gif and open it. 





Click okay for the default options.  If the animation tab doesn't open automatically and show all the frames, go to Window and click Animation. You will then see all of your frames. There's a lot! Probably too many to keep all of them.  Trash the ones you immediately know you don't want by Shift+clicking them all in a group.  Then go to the button on the top right corner of the animation tab and delete them. 



It is not suggested that you make the animation any more than 60 frames long, because that's going to wind up being a pretty large gif file.  If you want a longer animation, you will have to lower the size of the entire image. In the end, try to keep the finished gif no larger than 3 mb.  But we can worry about that later. 


I try to make my gifs look like they're looping.  Since all of the animations in the game loop, this isn't difficult.  Just try to find a frame that is almost identical to the first one.  Try to make it easy for yourself.  If your dragon ducks its head suddenly, start from there and find another frame where it ducks its head again. Click from the first from to that frame to make sure they're the same. Delete all frames before and after those moments.  After that, delete either the first or last frame so they're no duplicates.  The loop needs to look seamless.  Don't worry about the backgrounds, there's nothing you can do about that.




Now you can start editing if you want!  Crop the image if necessary using the Crop Tool.  Remember that the bigger it is, the larger the file will be.



Make sure all added things are put in a layer above all of the frames.  Also make sure that the first frame in the animation tab is selected.  I added a 1 pixel white border around mine and some pretty little text.  After that I threw on a texture I found online and put it in a new layer with Overlay as the blending mode.  If the texture or pattern is too strong or the wrong color, you can lower the opacity or adjust the colors with Image > Adjustments > Selective Color.  You can also play with anything else in the Adjustments and Filter tab.  Go crazy!


One you're finished and happy, go to File > Save for Web and Devices... This is important. This is how make sure your gif file will not be too big.  It will show you in the bottom left corner how big your file will be so far.  If it's a huge number like 6M or higher, you need to go back and either resize the image or shorten the length of the animation. 5M and under can be worked with. The easiest way to lower the file size is by lowering the amount of colors.  This will obviously lower the gif's quality.  You can compare the original gif to the edited gif.  If you're not happy with the lower quality gif, go back and resize it.  I had to resize my original banners to 75% before they were a small enough size.  Bigger isn't always better in this case, especially since the signatures on this forum get cut off if they're too long.



Once you're all done with that, save!  Upload the final gif to Photobucket or whatever and slap it on your signature! Note that if it takes a very long time to load up to your signature, it might be too large a file.


Anyway! Hope this tutorial helps. Came out a little longer than I planned, but I made this for people who just don't know what to do to make themselves some really cool banners of their dragons.  Happy flying, guys!




kaylawolf91's picture
Supreme Viking Champion
Joined: 07/21/2014
Great tutorial! I shall try

Great tutorial! I shall try this whenever my game decides to load :)


t1CK t0ck 8r8k H34DS honk HONK



BestTrainer's picture
Supreme Viking Champion
Joined: 05/24/2014
Nice tutorial, i really need

Nice tutorial, i really need some gifs from my dragon.



    Viking Name: RukiaTrainer

     Friend Code:----- (PM me :3)

   Clan: Snow Leopards

      Main Dragon: Aiden (Night Fury)

-Aiden, made by the awesome arkeyla!

End of my signature! Thx for watching!

Hey there! So yes I'm back after a long break that I decided to take :3 I'm so happy to see u all again guys :D Hope to meet you one of this days! 


TheSkrillTamer's picture
Supreme Viking Champion
Joined: 06/10/2014
Cool! Very helpful indeed!

Cool! Very helpful indeed!


im starting a new signature lol

ToothlessLover12345's picture
Joined: 08/09/2014
I have photoshop CS5 so I bet

I have photoshop CS5 so I bet I can do some.



                                                      ~Bouncie Nadder(s) by Rae Didgeridoo~

                                                       Dreamworks Dragons Title with Toothless by DashieSparkle                


    Running Toothless    Running Toothless    Running Toothless    Running Toothless    Running Toothless    Running Toothless    Running Toothless    Running Toothless    Running Toothless    

                                                              Viking name:Midnight Crystal


                                                              Clan: Flame Wings (Member)



Dreamwalnut's picture
Joined: 09/20/2015
GIF maker online

But I will make a better tutorial...

And really thanks
























































































































































Dreamwalnut's picture
Joined: 09/20/2015
My GIF Image


I guess I found out how to....make it...but not using photoshop I just watched

But if you have a way easier to do it instead using photoshop, I'll be glad...

I used OBS and convert the FLV file to mp4 and then used Windows Live Movie Maker and

But anyway thank you so much!

FaolNaOighear's picture
Berk's Power Player
Joined: 06/07/2016
I uploaded my gif to OneDrive, then embed, but...

All I get is a still photo, when I recorded a gif. Trying to Make a clan banner, please help!

-Frozt Wulf


-Frozt Wulf, Humble Leader and founder of the Wulf Pack

"The strength of the pack is the wolf, and the strength of the wolf is the pack!" 

-The Law of the Wolves (Sir Rudyard Kipling)

Wulf Pack, Wulf Pack, ow, ow, aaaooo!

Viking ID made by the talented Navlyn Fury TYSM!


Clan Banner made by Lermus (Thank you!)


A little about me:

 I am one of Jehovah's Witnesses. I try my best to live by the guidance found in the Bible and to share with others what I learned, because it's helped me and my family so much in life. You can learn more about us and find info, carrtoons, comic and videos on pretty much any topic on our official website,


I know ASL, and enjoy using it in music and with my deaf friends. I love acapella, Celtic, Pop, Karaoke, Owl City (pretty much everything but heavy metal and rap). On my YouTube channel IcewolfASL, I post signed version of popular songs that I like, I also sing some of them. I'v been posting recordings from SoD, with the tags, "Frozt Wulf" and or "Wulf Pack". I also plan to post videos of my fursuit progress.

I also enjoy drawing and painting art anything from real-life to landscapes, to cartoons and anthros/furries (only clean artwork, nothing suggestive at all). I'm learning how to digitally color. I'm currently in the process of making a partial fursuit of one of my characters, Icewolf, who is painted down below. So, in that light, I guess that would make me a furry. I loved 90s cartoons growing up, (Sonic the Hedgehog, Talespin, Bonkers, etc) loved Sing!, Zootopia and HTTYD 1 & 2, RTTE and I have been to the Live Arena Show back in January 2011. (Regretably I can't find my photos... >_<) Except these few:


Holographic nadder print from the Liva Arena Show.

Toothless! Plasma Blast! (fibre optic glows in for differeent colors; I will take it with me to see HTTYD3)

Sorry, bud...there's no fish in there!

Wulf Pack Discord

​Click the logo above to start howling with our Pack and see how chill wolves really are on Berk!


Artwork done by other vikings of me and my dragons:


Blizzard and Me, drawn by my wolf bro, GreyWolf53! Thank you so much!


Copykat being a good sport at my poor puns XD. Drawn by the talented ArrowWalker TYSM!


Mirra, my Titan Razorwhip, as drawn by the rocker on campus, FireNightStar! We both really loved this drawing! TYSM!

Blue wolf made by ShiroKageFox (Thank you so much for this beautiful wolf!)

Some art work examples:


Frozt Wulf with a local wolf named Humphrey (drawn by me)


Harold the Western Wolf (one of my anthro characters)


Seán na Lapaíoighir (Irish for John of the Ice Paws), aka Icewolf (my fursona) along with a good friend Tigra Relampaga (This is in acryllic)

The Furry Vikings of the Wulf Pack on Icestorm Island. These are most of the clan elders ith 2 members out of a total of 30. (2 of our new members, Trumpet and Glitch the Raccoon, had joined the pack after this was already in the works, so I may do a drawing of them at a later time as I catch up on other projects)

Yes, I'm happy to say that I'm a furry, who is also makes some YouTube videos irl. My fursona is a 3rd generation Irish Wolf named Seán na Lapaíoighir, meaning John of the Ice Paws, in Irish Gaelic. My nickname is Icewolf and my YouTube channel is IcewolfASL. (Anyone else here on Berk also a furry?)


For Kristal Winter one of the winners of a past quiz contest.


My Dragons: I have about 46 currently and will post pictures as I get them. Unfortunately, their backstories...were deleted, so, I'll be progressively adding them when I have time.


Kryos, my Wooly Howl, saved my life on Impossible Island. What a cool, loyal dragon! He's really skilled at racing too!

Here's a drawing of Kryos done by Fen FireNation from the SoD Discord. Thanks so much for drawing him so well!

Me and Blizzard enjoying the Northern Lights on Icestorm Island. Art by Jewelex of the Wulf Pack (aka CrystalGuitars1214 on Discord). TYSM!