Announcement

Collapse
No announcement yet.

VMK Icon tutorial

Collapse

Ad Widget

Collapse
This topic is closed.
X
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • VMK Icon tutorial

    I've had many questions on how I made my icon and signature, so I've decided to make a tutorial on how to do this.

    HERE'S AN EXAMPLE OF WHAT YOU WILL BE MAKING:
    Here's a scale on how I rate the level of difficulty of this project...

    Easy Medium Hard Very Hard
    I've rated it hard because it involves complex steps to people who are not used to programming and such.
    Remember to pay close attention! If you've got any questions just post them here on this forum.

    ATTENTION: you will need the following programs in order to make this icon: Download MS GIF Animator *zipped file*) Ask your parents before downloading.

    1. Alright, Let's get started!


    First off, get your behind on VMK. You're gonna be taking some screen shots!

    Now here is where you're gonna have to pay attention: That picture spins, right? But if you look really close, you see different images within it! Take a long look...

    Got it? Now, here's what you're gonna have to do:


    Take some screen shots like the ones above. Those will be the different frames of animation. Ah, now there's a complex term for ya!

    A frame of animation is pretty much the different "steps" or "pictures" it takes to put an animation together, like those pictures above ^o^

    Now what you do is you take 4 separate screen shots of your VMK character posing in those 4 positions. Take a screen shot by pressing the "Print Screen" button on your keyboard, then paste it in paint. Do the same for each position.

    2. Cropping takes patience, folks! You should have 4 poses in paint now! Now here's the part that takes a steady hand...

    You have to crop the images down to just your character as follows:



    If you can't do that, I'll do it for you. But I REALLY don't wanna have to do every single one of yours, so try it out for yourself first. It'll take a while, be warned. Patience is the key!

    3. GREEN SCREEN!! You know how directors put a green screen in the background when they film? That green screen is later erased and something else is put in instead of it. That's what we're doing here...

    This stage is optional, though I HIGHLY recommend doing it!!!!!! It looks much neater. Just do it... honestly

    OK. How am I gonna explain this...
    How about: The green makes the picture's background transparent. This means instead of a white box around the animated image, there will be no white space!

    Draw even boxes around your images like so:


    The boxes must be the same size, or else your animation will be off-centered. The picture must be placed correctly inside of the boxes, as well.
    (in other words: the pictures must be lined up in the boxes!)

    Now, find out the attributes of each image. They should all have the same! (Length and width)

    This is a very difficult step now...
    4. Saving as a GIF image! Open up GIMP shop or Photoshop. Start up a new application. Enter the attributes of your image into the height and width part.



    Paste one image at a time into the program. Save each image ending with: .gif (remember where you save it)
    (THE IMAGE MUST BE GIF IN ORDER TO USE IT IN GIF ANIMATOR)

    Once you've saved each image as a GIF image, you're ready for the next step...

    5. Animation Time! Open up GIF Animator. Press the little folder button to open the first saved image of your animation. Click it and press open.



    Now click the little piece of paper with a plus sign to open up the second picture to add to your second frame. (Keep doing this step until every image is in the program) You may have to re-order it with the little up and down arrows!

    Click the ANIMATION tab.

    Check off "Looping" and then check off "Repeat forever"

    Now change the duration of EACH IMAGE to 15. (the bigger the number the slower it spins)

    Change the undraw method to "Restory background"

    Check transparency and change it to the color green.


    Now GUESS WHAT guys...
    YOU'RE DONE!! remember to save !

    On vmk from 4 months after opening!~Mangamaniac~Boogie

  • #2
    Re: VMK Icon tutorial

    Ty!

    Comment


    • #3
      Re: VMK Icon tutorial

      Very interesting and helpful :csmile: Thank you for the information

      Bionic Village Babe of the RCMC
      "Wisdom is knowing what you don't know" - Socrates

      Comment


      • #4
        Re: VMK Icon tutorial

        Thanks for this! i knew most of this ut never knew that Green would make Transparency!
        VMK was a good memory, won't be forgotten. But just because a games gone does not mean I am

        Comment


        • #5
          Re: VMK Icon tutorial

          Well you can use any color, really! Just that greenish color stands out against the others so when you choose that part to be transparent, it will be the only part invisible

          On vmk from 4 months after opening!~Mangamaniac~Boogie

          Comment


          • #6
            Re: VMK Icon tutorial

            Cool! Awesome Work! I wish I had a program like this. Would it work for Photoshop Elements?

            Comment


            • #7
              Re: VMK Icon tutorial

              I'm not too sure of what that is, haha. You could try it? =)
              As long as you can save something as a GIF image it will work ^^

              On vmk from 4 months after opening!~Mangamaniac~Boogie

              Comment


              • #8
                Re: VMK Icon tutorial

                Nice tutorial!

                Originally posted by iitsxme View Post
                Cool! Awesome Work! I wish I had a program like this. Would it work for Photoshop Elements?
                I have Photoshop Elements, and yes it does work. I'm not quite sure how to animate with the program yet, but I did find a tutorial in the help section.
                sigpic

                Comment


                • #9
                  Re: VMK Icon tutorial

                  Originally posted by Mangamaniac View Post
                  Well you can use any color, really! Just that greenish color stands out against the others so when you choose that part to be transparent, it will be the only part invisible
                  Cool! Thanks for the Tip )
                  VMK was a good memory, won't be forgotten. But just because a games gone does not mean I am

                  Comment


                  • #10
                    Re: VMK Icon tutorial

                    Thanks for the help! I decided to tinker with mine a bit. I made it 8 frames instead of 4, including the diagonal position of the character, and I skipped the character cropping and transparency steps to save some time. Tell me what you think!



                    The character's cut out in a few frames because the frame I started with wasn't cut out, so I didn't leave enough space for the others.


                    Comment


                    • #11
                      Re: VMK Icon tutorial

                      Getting dizzy Becca?

                      Comment


                      • #12
                        Re: VMK Icon tutorial

                        oo thats cool


                        :yea:

                        Comment


                        • #13
                          Re: VMK Icon tutorial

                          Originally posted by iitsxme View Post
                          Getting dizzy Becca?
                          Just a little :lmao:


                          Comment


                          • #14
                            Re: VMK Icon tutorial

                            Originally posted by dance_is_life View Post
                            Thanks for the help! I decided to tinker with mine a bit. I made it 8 frames instead of 4, including the diagonal position of the character, and I skipped the character cropping and transparency steps to save some time. Tell me what you think!



                            The character's cut out in a few frames because the frame I started with wasn't cut out, so I didn't leave enough space for the others.
                            Wow! I never thought of using diagonal poses! That looks a lot better =)
                            Haha, feel free to "tinker" around with this all you want! The point of this was to provide a base to build off of--and BTW to all of you: You can make my icon the same way as you make your avatar spin. ^^

                            On vmk from 4 months after opening!~Mangamaniac~Boogie

                            Comment


                            • #15
                              Re: VMK Icon tutorial

                              Originally posted by Mangamaniac View Post
                              Wow! I never thought of using diagonal poses! That looks a lot better =)
                              Wait I don't get what Becca did different. Hers looks 'smoother' but how..?

                              Comment

                              Ad Widget

                              Collapse
                              Working...
                              X