Freedom's Blinkie Tutorial

 

Hey there guest, welcome to my Blinkie Maker! Today you will learn how to make... dun dun dun... Blinkies!!! *Big surprise*

Here's the blinkie you will learn to make today:

Please note that there are quite a few graphics on this page, so it may take a long time to load. Please be patient.

In order to make this blinkie, you will need: Microsoft Paint (or any other paint program) and any animation program that supports .bmp files. I recommend Jasc Animation Shop. A 30-day trial can be downloaded for free here. You will also need the font Redensek, available for free download here, and a place on the web to upload your blinkie to. Villagephotos.com or Boomspeed.com are two free places, if your guild won't let you upload to the photo gallery.

Making Your Blinkie

Ready to get started? All right, here goes:

  1. Create a new drawing in Paint. Resize the canvas to about150 x 80. To do this, hit Ctrl † E on your keyboard. Type in the new size.



  2. If you want to have an image by your blinkie, copy-and-paste it onto the canvas now. If your image is larger or much smaller than 80 by 80 pixels in size, you may have to resize the canvas by clicking and dragging the edge. If you want to use a neopet, the URL you should use is http://images.neopets.com/pets/80by80/SPECIES_COLOR_HAPPY OR SAD.gif ; for example, http://images.neopets.com/pets/80by80/aisha_blue_happy.gif or http://images.neopets.com/pets/80by80/usul_baby_sad.gif 



  3. Now create a text box, using the font Redensek, size 9. Type the text you want in your blinkie, putting a space between every letter, like this (you may have to resize the canvas to get it to fit):



    Now is a good time to save your image. Use the text on it for your filename - for example, if your blinkie blinks "Patriot", then save it as Patriot.bmp.

  4. Now you can magnify the canvas. Click on the magnifying glass icon on the left toolbar and then click anywhere on the canvas. Then select the rectangle drawing icon, and draw a square around each letter, leaving 2 pixels of space around each letter.

For reference, these will be called "blocks." Save again.



  • Now select a color out of your drawing to use for the background. Pick it up with the eyedropper and then use the paint tool to fill in the background of every block, like this:



  • Using the square selecting tool, carefully surround all of the letter-blocks and move them out of the way near the top. Then surround each block one at a time and drag it to where you want it to be on the blinkie. Position the blocks so that there is only a 1 pixel black line between each block, like so:



    Resize the canvas if you need to and save.

  • Now you can round the blocks off. In order to make them appear rounded, use the pencil icon to color each pixel on the corner of a block white (refer to the picture below). Remember to save!



  • Now for the hard part: making the blocks appear 3-D. The way to do this is to pick up the background color of the blinkie with the eyedropper. Then click on Options > Edit colors and a window will pop up. Click on "Define Custom Colors >> and the window will expand. Use the slider on the very right to lower the hue by a few shades. Use your judgment; you can always change the color later. When you have your color, click on "Add to Custom Colors" near the bottom of the window and exit out by hitting "OK".



  • With this new color, draw lines on the blinkie as shown below. Then repeat step #8, but make the color lighter than the original this time. Draw these as shown below as well.



  • Save again. Congratulations! You have just made the base image of your blinkie.

  • To animate your blinkie: switch the light and dark 3-D colors of the first block. Use the eyedropper to pick up the color, and use the pencil tool to color it in (it won't work if you use the fill tool). Using the fill tool, fill the letter in that block using a contrasting color, which is usually white or a very light pastel color; however, in this case I am using red because the background is so light that white does not show up very well, and I chose to use red because it is used in the picture I am using (the Aisha's collar). Then save your image as "_______1.bmp" (_______ meaning the text you saved your blinkie as before, i.e. my blinkie was "blinkie.bmp", so now it is "blinkie1.bmp").



  • Follow the step above so the second block now looks indented, then reverse the changes to the first block so it looks normal again. If this sounds confusing, refer to the image below. Save this image as "_______2.bmp".



  • Continue in this manner, until the last block is indented. Now indent all of the blocks, as shown below. Save this as "_______inv.bmp", or anything else that will make you know that this is the image with all of the blocks inverted.



  • Now it's time to really animate your blinkie! Open up Animation Shop (or whatever animation program you have; however, instructions and screenshots are for Jasc Animation Shop). Open a new animation using the Wizard (Shift † A). The settings don't really matter until you get to the question that asks, "Do you want the animation to be looped?" Make sure the settings are "Yes, repeat the animation indefinitely" and for the amount of time for each frame to be displayed, type "30" in the box. Lower this number slightly if you want it to blink faster and make it higher if you want it to blink slower. I've provided a screenshot for specifying the images to be loaded as frames. Click on "add image" to add your first frame. Select the original for the first frame, then all the numbered ones in order. Add the original again as the next frame, then the inverted picture, then the original, then the inverted. When you're done, click on "Next", and then "Finish". You can check your animation by selecting "Animation" from the "View" Menu, or "Alt † V † A". Save your blinkie as a .gif file.



  • And here's the finished blinkie:



  • Congratulations, you're done! Now upload your blinkie to the web and use this code to insert it into your shop, petpage, or other webpage:

    Or, use this code to insert into your userlookup where your name is (again, change the height and width to that of your blinkie):



    Then go to "Help", "user profile" and change your full name to:

    There are some sample blinkies here, on my sister's page! Feel free to use them, but please link back to my page (MY page, not HER page) ^^


    FreedomsBlinkies: Serving the public for 78310 hours!




    NEOPETS, characters, logos, names and all related indicia
    are trademarks of Neopets, Inc., © 1999-2012.
    ® denotes Reg. US Pat. & TM Office. All rights reserved.

    PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
    Use of this site signifies your acceptance of the Terms and Conditions