Arlong Park Forums

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Users
    • Groups

    Utilizing Gifs as Avatars

    Help Forums
    7
    24
    16190
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Rogues' Gallery
      Rogues' Gallery
      last edited by
      Rogues' Gallery
      spiral
      Rogues' Gallery
      spiral

      Hey guys,

      Normally I just stick to using still photos and whatnot for avatars on this forum, but lately I've come across a Gif that I would really like to use, but I have absolutely NO idea how to resize/condense the Gif (it's waay too big at 500x269) and then properly format them so they actually work as Avatars. Whenever I try, I usually end up with a frozen photo.

      If any tech-savy members here on the board would like to lend a hand, I'd more than appreciate it. 😁

      The two Gif(s) in question:

      Thanks. 😉

      Originally Posted by MDL

      Someone married their stepmom and then got murdered?

      Sounds like he used a monkey paw to make a porno story come true.

      Then the curse of the paw eventually killed him.

      1 Reply Last reply Reply Quote 0
      • Purple Hermit
        Purple Hermit
        last edited by
        Purple Hermit
        spiral
        Purple Hermit
        spiral

        Don't know how big you need it but there are some websites online that provide that service.
        http://ezgif.com/resize

        1 Reply Last reply Reply Quote 0
        • Sakonosolo
          Sakonosolo
          last edited by
          Sakonosolo
          spiral
          Sakonosolo
          spiral

          Download GIMP. Just resize the gif and make sure you save it as animated. And make sure it's both 150x150 or less in size and less than 97.7 kb. Which is pretty difficult to do.

          B 1 Reply Last reply Reply Quote 0
          • B
            benjamminbrown @Sakonosolo
            @Sakonosolo last edited by
            B
            spiral
            benjamminbrown
            spiral

            The main trick is in figuring out how to reduce your frame count, depending on how detailed each frame is. The lower the frame detail, the more frames you can use before you hit the file size limit.

            A good way to compress is to figure out if you can eliminate unnecessary frames and essentially "down sample" the video. This means removing frames wherever possible, but lengthening the frame time of the frames remaining as necessary so that the video doesn't get jumpy or sped up.

            Hope this helps. Here's a little tutorial on how to resize a gif in GIMP (it only really helps in getting it to the pixel resolution you want, though): http://www.neoseeker.com/forums/87/t1191994-gimp-tut-gif-animation-resizing/

            –- Update From New Post Merge ---

            I could try to help you with these specific ones that you've posted later in the week if I get a little time to spare. Bear with me.

            1 Reply Last reply Reply Quote 0
            • B
              benjamminbrown
              last edited by
              B
              spiral
              benjamminbrown
              spiral

              This should work for the first GIF you posted:

              I can probably make it less jumpy if you want me to square up the frame a little more. Let me know if you are happy!

              1 Reply Last reply Reply Quote 0
              • B
                benjamminbrown
                last edited by
                B
                spiral
                benjamminbrown
                spiral

                OK. So this has been a learning experience for me.

                The detail of the images in the GIF really seems to be the most important thing. I went through and edited the first one so that all the black pixels were a little blacker, and this had a huge effect on the file size. I was able to keep all of the frames while staying under the file size limit:

                1 Reply Last reply Reply Quote 0
                • B
                  benjamminbrown
                  last edited by
                  B
                  spiral
                  benjamminbrown
                  spiral

                  I was a little dissatisfied with the final product, so I've made a new one where I increased the contrast a bit. Much easier to see in the beginning of the animation, now. I think it's looking pre~tty good. Hope you like it, Rogue!

                  And here's your second one, too:

                  Ultimately, the best way to get your GIF into the file size that you want is to convert it into an indexed coloring scheme (as opposed to RGB or grayscale). Work with the image in either RGB or grayscale as necessary, then, when you've got it to the resolution you want (in this case, less than or equal to 150x150), convert it to indexed colors. You'll need to convert to as many indices as possible while not exceeding the file size.

                  Your first GIF was able to have like 100 color indices since it was already in grayscale, but the second one being in color was a little trickier. The only way to make it fit the file size limit was to reduce it to only 16 color indices (this means that there are only 16 different colors that are used in the entire thing). It still looks pretty good from afar, though!

                  Rogues' Gallery 1 Reply Last reply Reply Quote 0
                  • Rogues' Gallery
                    Rogues' Gallery @benjamminbrown
                    @benjamminbrown last edited by
                    Rogues' Gallery
                    spiral
                    Rogues' Gallery
                    spiral

                    @Purple:

                    Don't know how big you need it but there are some websites online that provide that service.
                    http://ezgif.com/resize

                    Hey, thanks for the Link! Looks useful. 😉

                    @Sakonosolo:

                    Download GIMP. Just resize the gif and make sure you save it as animated. And make sure it's both 150x150 or less in size and less than 97.7 kb. Which is pretty difficult to do.

                    Heh, already tried that exact method in GIMP once, and it didn't work (avatar still came out as frozen). Maybe I wasn't doing it right?

                    @benjamminbrown:

                    I was a little dissatisfied with the final product, so I've made a new one where I increased the contrast a bit. Much easier to see in the beginning of the animation, now. I think it's looking pre~tty good. Hope you like it, Rogue!

                    http://s27.postimg.org/e9tb7n29r/Ray_Avatar_Small_Indexed.gif?noCache=1397689618

                    And here's your second one, too:

                    http://s28.postimg.org/6fwfkqvw9/Ray_Avatar_2_Small_Indexed.gif

                    Ultimately, the best way to get your GIF into the file size that you want is to convert it into an indexed coloring scheme (as opposed to RGB or grayscale). Work with the image in either RGB or grayscale as necessary, then, when you've got it to the resolution you want (in this case, less than or equal to 150x150), convert it to indexed colors. You'll need to convert to as many indices as possible while not exceeding the file size.

                    Your first GIF was able to have like 100 color indices since it was already in grayscale, but the second one being in color was a little trickier. The only way to make it fit the file size limit was to reduce it to only 16 color indices (this means that there are only 16 different colors that are used in the entire thing). It still looks pretty good from afar, though!

                    Awwwwww~~

                    You're so sweet, taking the time to actually compose and ready the gifs for me! I do love them, BenBrown!

                    Thank you! And thanks for the advice too even though I don't understand any of it, LOL 😆

                    And a question: would increasing the Gif size from 150x81 to 150x150 distort and ruin the Gif/image quality?

                    And lastly, could you do me one more favor? How would you/I insert transparent backgrounds with a still image or picture so that the transparent background always matches the forum colors, no matter what style/template you choose? :blink:

                    I ask this because I'm curious as to how my current Avatar (Tentacle Coffee) would look with a transparent background. Do you think you could help with this? 😉

                    [hide][/hide]

                    Originally Posted by MDL

                    Someone married their stepmom and then got murdered?

                    Sounds like he used a monkey paw to make a porno story come true.

                    Then the curse of the paw eventually killed him.

                    1 Reply Last reply Reply Quote 0
                    • Silverblade
                      Silverblade
                      last edited by
                      Silverblade
                      spiral
                      Silverblade
                      spiral

                      To have an image with a "transparent" background all you have to do is delete the original background (select the part of the image you want to keep and move it to a separate layer, delete the original layer; magic wand tool makes this an easy task) and save your image as .png.

                      1 Reply Last reply Reply Quote 0
                      • Sakonosolo
                        Sakonosolo
                        last edited by
                        Sakonosolo
                        spiral
                        Sakonosolo
                        spiral

                        Gifs will be frozen as avatars if they're larger in dimensions than what is allowed. So if your gif is 150x151 the forum will resize it and only show the first frame because I guess the forum can't handle animations itself.

                        B 1 Reply Last reply Reply Quote 0
                        • B
                          benjamminbrown @Sakonosolo
                          @Sakonosolo last edited by
                          B
                          spiral
                          benjamminbrown
                          spiral

                          Happy to help, Rogue! I will get back to you with a better explanation on how to DIY these things in GIMP. May need to wait until next week, though, since I am taking a trip this weekend.

                          Making the frames square shouldn't be a problem, but we need to decide how much you want to crop off of each side of the video.

                          Rogues' Gallery 1 Reply Last reply Reply Quote 0
                          • Rogues' Gallery
                            Rogues' Gallery @benjamminbrown
                            @benjamminbrown last edited by
                            Rogues' Gallery
                            spiral
                            Rogues' Gallery
                            spiral

                            @Silverblade:

                            To have an image with a "transparent" background all you have to do is delete the original background (select the part of the image you want to keep and move it to a separate layer, delete the original layer; magic wand tool makes this an easy task) and save your image as .png.

                            http://i57.tinypic.com/a082fa.jpg

                            Hey Silver, thanks a lot for the transparent image! Using it now. 🆒

                            @Sakonosolo:

                            Gifs will be frozen as avatars if they're larger in dimensions than what is allowed. So if your gif is 150x151 the forum will resize it and only show the first frame because I guess the forum can't handle animations itself.

                            Ah, that's likely the problem. I did have access to GIMP, but that was on my previous laptop, which is no longer functional due to a virus and is currently waiting to be repaired. For now, I use my home computer, which is an older model (at least a decade old). I was thinking of trying to download and use GIMP on this one, but I'm unsure if the program would be able to install/run smoothly or not. 😊

                            My specifics in case you want to know:

                            [hide]
                            Yeah, 2002. Talk about antiquated. 😆
                            Then again, my laptop was from 2006, so I guess I need to upgrade XD[/hide]

                            @benjamminbrown:

                            Happy to help, Rogue! I will get back to you with a better explanation on how to DIY these things in GIMP. May need to wait until next week, though, since I am taking a trip this weekend.

                            Making the frames square shouldn't be a problem, but we need to decide how much you want to crop off of each side of the video.

                            No worries, take your time! Not like I'm in a rush or anything. 👅

                            Originally Posted by MDL

                            Someone married their stepmom and then got murdered?

                            Sounds like he used a monkey paw to make a porno story come true.

                            Then the curse of the paw eventually killed him.

                            1 Reply Last reply Reply Quote 0
                            • B
                              benjamminbrown
                              last edited by
                              B
                              spiral
                              benjamminbrown
                              spiral

                              I haven't had the time to write up a how-to, but here are square versions of your GIFs that should work as AVs. Stay tuned for more info.

                              Unfortunately, I couldn't figure out how to make them look nice at a 150x150 resolution while staying under 98kBs. These are each at a resolution of 128x128. Let me know what you think!

                              1 Reply Last reply Reply Quote 0
                              • B
                                benjamminbrown
                                last edited by
                                B
                                spiral
                                benjamminbrown
                                spiral

                                Here are the steps that I followed to make an avatar from your first GIF:

                                1. Download and install the GNU Image Manipulation Program (GIMP) and an essential plugin called the GIMP Animation Package (GAP). Together, these can be used to give you all sorts of options for editing videos and GIFs in GIMP.

                                  [hide]I'm not well versed with Photoshop, but I've heard that GIMP is a very powerful free alternative that is nearly as good. It takes some learning, but the program is actually a lot of fun to use if you are interested in this kind of thing.[/hide]

                                2. Obtain a copy of the GIF you would like to make into your avatar.

                                  [hide]Right click, "Save image as…"

                                  It's originally about 874kB in file size.[/hide]

                                3. Open the GIF in GIMP.

                                  [hide]Immediately when the file opens, check what GIMP says about it in the window title. Since I saved the file as "Ray_Original.gif", my GIMP window is titled:

                                  [Ray_Original] (imported)-9.0 (Indexed color, 118 layers) 500x269 - GIMP

                                  The only really important thing to notice here is that the original GIF was encoded using an indexed color scheme at a resolution of 500x269 pixels. Color indexing is typically (always?) used because it attempts to build the video out of as few colors as possible in order to minimize the file size. Of course, you shouldn't do this too much, otherwise the quality of the video is noticeably degraded. We'll get into this a little more later.

                                  Also notice that you can only currently see the last frame. This is because each frame of the GIF is given its own separate layer, which you can see in the Layers dialog window.

                                  We will ultimately be shooting for a GIF with a resolution of less than or equal to 150x150 pixels and a total file size of under 97.7kB.[/hide]

                                4. Convert the GIF to either Grayscale or RGB mode as appropriate.

                                  [hide]Simply use the drop-down menu at the top of the window to select Image/Mode/Grayscale or /RGB. We want to do this because many of the image manipulation tools in GIMP will not work on an indexed color scheme. When we are done with all of our editing, we will convert the GIF back to an indexed color scheme to compress our file size as much as we want.

                                  Because this GIF doesn't have much (any?) color, I converted it to Grayscale.[/hide]

                                5. If necessary, increase the contrast of the GIF.

                                  [hide]As we convert to lower resolution, we will be blurring out the original GIF. Because blurring can decrease contrast and make faint details even fainter, we're going to want to edit the original video so that it has a little more contrast. I think that the best option here is to use the Levels tool.

                                  Using the Layers dialog window, hide the layers at the top of the list one at a time and you can start to see the GIF play back in reverse. Do this until you've found a nice representative frame. In this case, I think that frame 86 looks pretty typical:

                                  Make sure you've left clicked to select the frame you're currently seeing in the Layers dialog window. Using the drop-down menu again, go to Colors/Levels… and the Levels window should pop up. Here's how I used this tool to give the GIF more contrast:

                                  This tool shows you a graph called a histogram that helps you see how the color values of the pixels in the GIF are distributed. The black lines in the graph are taller when there are more pixels with the color directly below that line.

                                  First, I increased the minimum pixel level by 20 color values, from 0 to 20. This will make the black pixels in the GIF a little blacker, and should do wonders to get rid of the unnecessary graininess in the black background of the video. It will hopefully be a big help in reducing the overall detail of every frame.

                                  Next, I decreased the maximum pixel level by 45 color values, from 255 to 210. This will make the white pixels in the GIF a little whiter, and will hopefully have a similar effect as the previous step.

                                  Last, I greatly increased the Gamma from 1.00 to 2.25. This was in an attempt to put the little gray triangle under the histogram about half way along the pixel distribution. We'd like the middle of the distribution to be about where the 50% gray color is used.

                                  Leave the output levels where they are, at 0 and 255, respectively. If you've made it so that frame 86 is visible and applied this Color Level filter as I have suggested, then here's what you should see (back to back with the original frame 86 so you can see the difference):


                                  Now, here comes the tricky part. You don't want to apply this filter to frame 86 alone. So if you made this edit, quickly undo (Ctrl-Z) it, or cancel out of the Levels window. We're now going to apply this exact same filter to all of the frames in the GIF.

                                  Use the drop down menu to select Filters/Filter all Layers… This option will only be available if you have correctly installed GAP (see step 1). In the window that pops up, scroll down to find and select the "plug-in-wr-color-levels" filter and click the "Apply Constant" button. Simply apply the same color levels filter that I've already described above and click "OK":

                                  Hit "Continue" on the next pop up, and after a bit of time the filter will be applied to every layer/frame in the GIF. If you want to see the result of this change, then export the edited video as a new GIF via File/Export as… Save the file as a GIF and give it a new name. In the next window, make sure you have checked the "As animation" box and then click "Export".

                                  Following this process reduced the size of the original GIF from 874kB to 424kB for me.

                                  Here's what the result looks like, back to back with the original:


                                  [/hide]

                                6. Crop the GIF so that it is square shaped.

                                  [hide]From here on out, it's a lot easier. Crop your GIF so that it is square using the crop tool. I cut it down to a size of 269x269 pixels starting from a position of x=125 and y=0.

                                  Now the file size is only 291kB. Making progress…[/hide]

                                7. Scale the GIF.

                                  [hide]To get down to a maximum of 150x150 pixels in resolution, we'll need to take two steps. First, we'll blur the image slightly, then we'll scale the image to a slightly lower resolution. We can repeat this process as necessary until we are at the final resolution that we want.

                                  Once again, use Filters/Filter all Layers… This time, however, use the "plug-in-blur" filter and hit "Apply Constant". Hit "Continue", and a simple blurring effect will have been applied to all of the frames in the video. This helps to get rid of artifacts we might see when scaling down the video.

                                  Now, use the drop-down menu to select Image/Scale Image… I recommend not to scale the image down by anything more than a factor of 3 since the simple blur tool that we use is not quite strong enough for anything else. Since our current resolution is 269x269 pixels, and we would like to shoot for 150x150 pixels, we are only scaling down by a factor of about 1.8, so we should be fine with only one down-scale of the image. Fill out the next window this way, and click "Scale":

                                  If we were to save the GIF now, it would have a size of only 211kB. Coming right along.[/hide]

                                8. Compress the GIF by converting back to an indexed color scheme.

                                  [hide]To get the rest of the way towards our file size goal, we'll need to find a way to further reduce the detail in each frame. The simplest (but probably not always the best) way to do this is to just go back to an indexed color scheme.

                                  From the drop-down menu, select Image/Mode/Indexed… In the next window, you're going to want to reduce the maximum number of indexed colors from 255 to a MUCH smaller number. Without changing anything else, hit "Convert", and your GIF will be reconstructed from a maximum of that number of different colors. For this particular GIF, I found that the optimal number of color indices to use with a resolution of 150x150 pixels was only 16.[/hide]

                                9. Export (Save) the final product as a new GIF.

                                  [hide]This final step is the most important and will help you figure out where you might (1) have gone wrong, or (2) need to do some more work. If you've picked a sufficiently small number for the maximum number of color indices to use in the previous step, then your avatar's file size will be under 97.7kB. If it is a lot smaller than this file size, you might want to try to increase the maximum number of indices to see if this improves the video quality without exceeding the 97.7kB limit.

                                  From the drop-down menu, select File/Export As… Save the file as a GIF, and on the next window, be sure to check the box next to "As animation" before clicking on the "Export" button.

                                  This one ended up having a file size of about 93.8kB[/hide]

                                10. Enjoy your new GIF avatar!

                                1 Reply Last reply Reply Quote 0
                                • Sakonosolo
                                  Sakonosolo
                                  last edited by
                                  Sakonosolo
                                  spiral
                                  Sakonosolo
                                  spiral

                                  You actually don't have to do the whole indexing thing yourself, as when you save it as a gif it'll automatically do the converting (although I see there's a menu where you can customize things in your post so that might be useful). Also, under Filters -> Animation there are two optimization algorithms that you can use to further reduce the file size. They're essentially the same and don't stack so only choose one and it'll give you a new image that is smaller in size. Then you can save it, and make sure that it's set to be animated.

                                  1 Reply Last reply Reply Quote 0
                                  • Rogues' Gallery
                                    Rogues' Gallery
                                    last edited by
                                    Rogues' Gallery
                                    spiral
                                    Rogues' Gallery
                                    spiral

                                    Benjammin, why do have to be such an incredibly awesome person time and time again?

                                    Going through the time and effort to help me, and to be so damn thorough about it…

                                    you're so...unbearably dandy. 😛

                                    you a' make me feel soooooooo guilty if I didn't slap that beautiful Gif on right this instant.

                                    Speaking seriously, to everyone who contributed either helpful advice or new avatars (or both!) on this thread, I truly thank you from the bottom of my heart. I did not expect this much generosity, and it goes a long way in making me feel at home in this community where I know I have the support of friendly individuals like yourselves to answer any questions or problems I may have, regardless of how major or minor they are in significance.

                                    Thanks Y'all.

                                    Originally Posted by MDL

                                    Someone married their stepmom and then got murdered?

                                    Sounds like he used a monkey paw to make a porno story come true.

                                    Then the curse of the paw eventually killed him.

                                    B 1 Reply Last reply Reply Quote 0
                                    • B
                                      benjamminbrown @Rogues' Gallery
                                      @Rogues' Gallery last edited by
                                      B
                                      spiral
                                      benjamminbrown
                                      spiral

                                      @Sakonosolo:

                                      You actually don't have to do the whole indexing thing yourself, as when you save it as a gif it'll automatically do the converting (although I see there's a menu where you can customize things in your post so that might be useful).

                                      You're right that the GIF is automatically converted to an indexed color scheme when you save it. Unfortunately, as far as I can tell, GIMP decides what maximum number of indices to use, and typically uses way more than is necessary. This usually leaves you with too big of a file size, as you can see that by the end of step 7 we still had a 150x150 pixel avatar with a file size greater than 200kB.

                                      You're also right that the advantage of my approach is that you can force GIMP to use an appropriate number of indices so as to really reduce your file size.

                                      @Sakonosolo:

                                      Also, under Filters -> Animation there are two optimization algorithms that you can use to further reduce the file size. They're essentially the same and don't stack so only choose one and it'll give you a new image that is smaller in size. Then you can save it, and make sure that it's set to be animated.

                                      I've only just started playing around with GAP, so I didn't know about these. They may make my process a lot simpler if I make use of them. I'll check them out, thanks! 🙂

                                      @Rogues':

                                      Thanks Y'all.

                                      He's a good man.

                                      And thorough.

                                      Really, it was my pleasure to help out!

                                      And don't worry about not using the GIF if you aren't interested anymore. I'm so happy that you asked the question in the first place, because you gave me something to do instead of what I should be doing have so much fun with. I really learned a lot from the process, and am enjoying using GIFs now for my own AVs, as you can see. 🙂

                                      I hope you can make use of what I've learned to do some of your own in the future!

                                      1 Reply Last reply Reply Quote 0
                                      • B
                                        benjamminbrown
                                        last edited by
                                        B
                                        spiral
                                        benjamminbrown
                                        spiral

                                        I really liked your Conan GIF, Rogue:

                                        😄

                                        Seems like 128x128 pixel resolution has a HUGE effect on the file size. Probably because 128 is a perfect power of 2, but that's just the robot in me speaking.

                                        1 Reply Last reply Reply Quote 0
                                        • Purple Hermit
                                          Purple Hermit
                                          last edited by
                                          Purple Hermit
                                          spiral
                                          Purple Hermit
                                          spiral

                                          This is a much lengthier and more thorough thread than I initially could have suspected

                                          1 Reply Last reply Reply Quote 0
                                          • B
                                            benjamminbrown
                                            last edited by
                                            B
                                            spiral
                                            benjamminbrown
                                            spiral

                                            You're lengthier than I could have suspected.

                                            😉

                                            G 1 Reply Last reply Reply Quote 0
                                            • Sakonosolo
                                              Sakonosolo
                                              last edited by
                                              Sakonosolo
                                              spiral
                                              Sakonosolo
                                              spiral

                                              This thread is getting weird.

                                              1 Reply Last reply Reply Quote 0
                                              • B
                                                benjamminbrown
                                                last edited by
                                                B
                                                spiral
                                                benjamminbrown
                                                spiral

                                                Yer weird .

                                                1 Reply Last reply Reply Quote 0
                                                • G
                                                  Gorixan @benjamminbrown
                                                  @benjamminbrown last edited by
                                                  G
                                                  spiral
                                                  Gorixan
                                                  spiral
                                                  This post is deleted!
                                                  1 Reply Last reply Reply Quote 0
                                                  • M
                                                    mergen
                                                    last edited by
                                                    M
                                                    spiral
                                                    mergen
                                                    spiral
                                                    This post is deleted!
                                                    1 Reply Last reply Reply Quote 0

                                                    • 1 / 1
                                                    • First post
                                                      Last post
                                                    Powered by NodeBB | Contributors