+ Reply to Thread
Page 1 of 3 123 LastLast
Results 1 to 10 of 24
Like Tree6Likes

Thread: Graphics Tutorial (Step-By-Step How-To)

  1. #1
    Best Ever Pool Runner Angry Birds Champion pikachu's Avatar
    Join Date
    Nov 2003
    Location
    Tallahassee, FL
    Age
    43
    Posts
    5,051

    Graphics Tutorial (Step-By-Step How-To)

    I get a lot of questions from forum members about how to set up an avatar, how to make an animated avatar, how to post pictures on the forum, etc, so I thought it would be helpful to post tutorials. I'll make some lessons to show people how to do graphics. I'll start with setting up an avatar since that's the most frequently asked question.

  2. #2
    Best Ever Pool Runner Angry Birds Champion pikachu's Avatar
    Join Date
    Nov 2003
    Location
    Tallahassee, FL
    Age
    43
    Posts
    5,051

    Re: Graphics Tutorial (Step-By-Step How-To)

    I'm going to have to break this into a few posts because of the number of pictures.

    Lesson One: Editing Your Forum Avatar, Part One

    1. The first step to setting up or changing your forum avatar is to go to Settings. This can be found at the top right of the forum webpage. Click on Settings to go to it.



    2. On the left-hand side of the page are some menu options. Go down to the menu My Settings and click on Edit Avatar.



    3. From here, you can choose where you want to retrieve the image you’re going to use for your avatar. You can use an image that’s on a website (Option 1) or an image that’s on your computer (Option 2).



    An important thing to notice before you get started is the note about the maximum image size. Your image can be up to 125 by 125 pixels in diameter or have a file size up to 29.3 kb.

    Here’s how to check your image size. If you’re using an image from a website, go to the website the image is on, right-click the image so you can see its properties. 29.3 kilobytes equals about 30,000 bytes so make sure the size is 30,000 bytes or less and the dimensions are 125 x 125 pixels or less.



    To check the image size for an image on your computer, go to the location where you have your image. You can hover over it with the mouse without clicking and it should show the image information.



    Or you can right-click on the image, then click on the details tab to see the image properties.





    In this example, the file dimensions are ok but the file size is too big. The file type is a PNG (Portable Network Graphics), which tends to be larger than a JPG (Joint Photographic Expert Group). An easy fix for this is to open the file in Microsoft Paint and save it as a JPG. That should bring the file size down enough to use the image on this forum.
    Last edited by pikachu; 10-15-2013 at 02:44 PM.

  3. #3
    Best Ever Pool Runner Angry Birds Champion pikachu's Avatar
    Join Date
    Nov 2003
    Location
    Tallahassee, FL
    Age
    43
    Posts
    5,051

    Re: Graphics Tutorial (Step-By-Step How-To)

    Lesson One: Editing Your Forum Avatar, Part Two

    4a, Option 1. You'll need to get the URL of the image you're going to use from a website.

    In this example, I'm using an image from my Photobucket account. Photobucket and other photo hosting sites sometimes have links prepared for your image. You can copy the Direct link and use it as your URL.




    If the image doesn't have a direct link, you can get the URL by right-clicking on the image, then clicking on Properties.The address, or URL, can be found on this menu. Copy the entire URL, beginning with http and ending with jpg.





    Then, paste this URL into the box to the right of Option 1 at this forum. There's already "http:www." in that box but that's just a prompt to let people know what information is being asked for. You should delete the prompt before entering your URL. If your image doesn't upload, make sure you don't have any blank spaces before or after the URL.



    4b, Option 2. To get an image that's saved on your computer, click the Browse button to the right of the Option 2 box. Then go to where you have your image on your computer. Click on the image, then select Open.



    5. The last step is to click on Save Changes.



    If you were successful, you should be able to preview your avatar and see that it's changed.

  4. #4
    I have a new love now JunkieGirl's Avatar
    Join Date
    Jul 2003
    Location
    Where the Thunder Rolls
    Posts
    2,503

    Re: Graphics Tutorial (Step-By-Step How-To)

    Animated avatars? Oooooh! Hopefully your instructions are easy for a simpleton like me. Can't wait to see this pikachu.
    Sheldon Cooper: Woman, you're playing with forces beyond your ken

    Penny: Yeah, well your Ken can kiss my Barbie.

  5. #5
    Best Ever Pool Runner Angry Birds Champion pikachu's Avatar
    Join Date
    Nov 2003
    Location
    Tallahassee, FL
    Age
    43
    Posts
    5,051

    Re: Graphics Tutorial (Step-By-Step How-To)

    I can make that the next lesson, JunkieGirl. There are a number of steps to it but each step is pretty easy. I'll start with a simple animation that won't give you many problems. The more frames you have in your animation and the more colors you use, the more problems you're likely to run into.

  6. #6
    Best Ever Pool Runner Angry Birds Champion pikachu's Avatar
    Join Date
    Nov 2003
    Location
    Tallahassee, FL
    Age
    43
    Posts
    5,051

    Re: Graphics Tutorial (Step-By-Step How-To)

    Lesson Two: Animated Image, Chasing Lights/Blinkie Effect

    In this lesson, I’ll show you how to make an image that has a border of chasing lights. We’ll be using just 2 frames and 4 colors.

    1. Start by making an image template. This is the basic design that you’ll alter for all of the frames in this animation. I’ve made a rectangle with 5 circles across the top, 1 on each side, and 5 on the bottom, plus a rectangle in the center to frame the text. Then, I saved it as a GIF file type. This eliminates the step of having to convert the images to GIF later.

    Here’s the image template:



    2. Then, fill in every other circle with orange. Fill in the rest with purple. Save the image with the file name you want to use plus the frame number (Halloween anim 1).



    3. Next, reverse the coloring of the circles. Make all of the orange circles purple and all of the purple circles orange. It’s easiest to go back to the avatar template to redo the fill colors rather than changing each color on the first frame. Save the image with the same file name and the next frame number (Halloween anim 2).



    4. To animate the images, you’ll need a program called Unfreez. You can download it for free here: UnFREEz 2.1 - WhitSoft Development.

    When you run Unfreez, you’ll see this popup.



    Go to where you saved your files, then drag and drop them into the box labeled Frames. We do want to loop the animation so make sure that box is checked. We’ll leave the Frame delay at 0. When you’re done adding frames, click on Make Animated GIF, name the file and select the location where you want to save it, then click Save.



    And here’s the completed animation!



    And, just for fun, here's how the same image looks with the frame delay set to 20. The bigger the number you put for the delay, the longer it shows each frame.

    Last edited by pikachu; 10-16-2013 at 12:29 PM.

  7. #7
    Best Ever Pool Runner Angry Birds Champion pikachu's Avatar
    Join Date
    Nov 2003
    Location
    Tallahassee, FL
    Age
    43
    Posts
    5,051

    Re: Graphics Tutorial (Step-By-Step How-To)

    Lesson Three: Animated Image, Flash Effect

    This lesson will show you how to make a flashing image. By switching the background color of the image between frames, it can give the effect that the image is flashing.

    1. We’ll use the same image template from lesson two. Save it as a GIF file titled ”Halloween flash frame one”.



    2. Change the background color from black to orange and change the outlines around the circles from green to black. Save it as a GIF titled “Halloween flash frame two”.



    3. Open Unfreez. Drag and drop the GIF files to the Frames box. Set the frame delay to 30. Save the completed image.


  8. #8
    Best Ever Pool Runner Angry Birds Champion pikachu's Avatar
    Join Date
    Nov 2003
    Location
    Tallahassee, FL
    Age
    43
    Posts
    5,051

    Re: Graphics Tutorial (Step-By-Step How-To)

    Lesson Four: Animated Image, Slideshow Effect

    This lesson will show you how to loop two or more images together to show one image at a time. This is useful for making an avatar to display different images.

    1. We’ll use the same Halloween image template again. Save it as a GIF file titled ”Holiday slideshow frame one”.



    2. In this frame, we’ll change the background color of the text box from purple to red and add new text “Merry Christmas!”. Save it as a GIF titled “Holiday slideshow frame two”.



    3. Open Unfreez. Drag and drop the GIF files to the Frames box. Set the frame delay to 200. Save the completed image.


  9. #9
    Best Ever Pool Runner Angry Birds Champion pikachu's Avatar
    Join Date
    Nov 2003
    Location
    Tallahassee, FL
    Age
    43
    Posts
    5,051

    Re: Graphics Tutorial (Step-By-Step How-To)

    Lesson Five: Animated Image, Scrolling/Marquee Effect

    This is a more complex lesson but it makes a neat effect with text or images. This lesson will show you how to make an image that scrolls. You can have it move right, left, up, or down. This one will scroll to the right.

    1. Start with an image that is avatar-sized (125 by 125 pixels).



    2. Underneath the image, make a grid of 5 boxes that are 25 pixels wide each. It doesn’t matter how tall they are. They’ll be used as guidelines to move the image, ensuring that it moves at an even pace.



    3. Save the image as a GIF titled “Pumpkin anim frame 1”. As you get used to the process, you can shorten the file name to something like “Pumpkin 1” and you’ll know it means frame 1.

    4. Then use the Select tool, Rectangular selection, to select the first box and the image portion above it.




    5. Drag the selected area to the right side of the image, placing box 1 to the right of box 5. You may need to expand the workspace around the image to have room to move things. You can reduce it back when you’re done. After you’ve moved the first section, use Select all to move the whole image over so that there is no blank space to the left of the image.



    6. Save the image as a GIF titled “Pumpkin anim frame 2”. Don’t worry about the grid at the bottom of the image. We’ll go back in and clean that up later.

    7. Repeat this process for box 2, box 3, and box 4, saving each as a different frame number. You should have 5 frames when you’re done.


    8. The final step is to go back to each frame and put a black border around each image (one pixel), plus crop any frames that are over 125 by 125. That will get rid of the grid boxes. Save each frame before going on to the next.




    9. When you’re done adding the border and cropping the images, use Unfreez to loop your 5 frames. Set the frame delay at 100. Save the completed image.


  10. #10
    9/11/2001 NEVER FORGET. Eastcoastmom's Avatar
    Join Date
    Jun 2010
    Posts
    3,075

    Re: Graphics Tutorial (Step-By-Step How-To)

    Wow, you really are great at this, Pikachu. I know how to post photos and change my avatar but I think animated avatars are beyond my expertise. Maybe I will try it one day. Thank you so much!!!

    ETA: Do the animated avatars only work in a forum setting or can it be used with something like Facebook?

+ Reply to Thread
Page 1 of 3 123 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

SEO by vBSEO 3.6.0 ©2011, Crawlability, Inc.