No announcement yet.

Blinkie Tutorials

This is a sticky topic.
  • Filter
  • Time
  • Show
Clear All
new posts

  • Blinkie Tutorials

    Righto, so I've been asked for some tutorials...But since I don't use PSP, I'm going to be next to useless. ( )

    Thus, here are a few links that I have. I'll happily answer questions if you get stuck.

    Blinkie Tutorials

    Added: 03-10-2005 - A tutorial that doesn't involve PSP.

    Glitter Name Tutorials Something different...

    If you have any more, feel free to post. :D
    Last edited by Flaire-FireStar; July 5th, 2005, 11:47 PM.

  • #3
    Glitter Fills

    Premade Fills

    How to Make Your Own Fill
    Last edited by Flaire-FireStar; July 5th, 2005, 11:45 PM.


    • #4
      Using GIF Animator to make a blinkie

      Right-o, I'm finally getting around to writing some tutorials on how I make blinkies. Mainly, I stick it to the man and all those people who say you can't make blinkies without PSP.

      For starters, I'm using MSPaint and MS GIF Animator, in which a download can be found here:
      At the end, I'm going to post a few templates, just to avoid hassle of dealing with this every time. (Templates are your friends. )

      Secondly, I'm going to be altering this tutorial:

      Starting Off

      Getting a Base
      Open Paint. You'll need a base, which is generally 150x20 pixels. If you want to resize your canvas to the appropriate size, that's fine. Otherwise, you can copy this image in and change it to whatever colour you'd like it to be.

      This is just whatever your imagination can come up with. For this, I'm using Arial, bold, size 11. Keep in mind that you need space on the edges for the animated part. It doesn't matter if you get it centered or not - you can always fix that after by using the Select tool.

      For this, you can either use blue as a background colour, or choose the invisible background option (handier).

      The Moving Parts
      Now, this is the part that I hate doing with Paint. What you'll have to do is take a copy of your base and paste it in a second Paint window for later.

      The First Cell

      Choose one of your bases to work with, and a colour for blinking and choose the pencil tool. Keep in mind that dark on dark or light on light is very hard to see, unless you want to have a different colour in between.

      Zoom in 8x, and colour in the first two pixels. Count off three more pixels, then colour in two more. Continue this all the way around the base.

      This is what the first cell would look like. (It's actually at 2x normal size, mind you. )

      Now copy your first cell and open GIF Animator and paste it in there.

      Click on the Animation tab. Check the Looping and Repeat Forever boxes.

      Click on the Image tab. Click in the Duration (1/100 s) box and choose a number. I generally use between 12-17 for these type of blinkies. For this one, I'll be using 15. You can experiment with your preferences.

      For this blinkie, this is pretty much all you need.

      The Second Cell

      Time to go back to Paint, and take a copy of your base without the blinks and paste it into a new window.

      Zoom 8x again, get the colour you were using in the first cell again with the pencil tool and count in 2 uncoloured pixels, colour 2, then leave 3. Continue as you did with the first cell.

      Copy and paste it into the Animator. Insert whatever number your Duration is, and continue onto the third cell. (You could also check what your blinkie looks like if you click on the Play button, which is right next to the question mark button.)

      The Third Cell

      Going back to your base, Zoom in, get your colours and the pencil, then count in 4 uncoloured pixels, colour 2, leave 3 uncoloured. And continue on as you have for the other 2 cells.

      C&P into the Animator, insert your Duration number.

      Now you should have a finished blinkie.


      • #5
        If you've been playing around with your animator, you may have already figured this one out, but I'll do it none-the-less. This is if you want to add still smileys, dollz, etc to your blinkies.

        I'll be adding a doll to mine from this site:
        If you don't know how to get your doll from the maker to your computer:
        When you're finished your doll, press Ctrl+PrintScrn. (The PrintScreen button is above my Insert key, next to the F12.) Bring up MSPaint, or whatever graphics program you are using, paste it there. Using your Select tool, crop the area around the doll, copy that, and get a fresh canvas to paste the doll on.

        If you're doing this in order - don't save & close that program window, you'll need it later on.

        I'm also feeling particularily lazy today and using one of my templates, which come in very handy for this type.

        Tutorial 2: Adding Other Graphics to Blinkies

        Step 1

        Create the frame of the blinkie. It's beneficial to put the text into the blinkie before adding graphics. You can always move it later. [see previous post for reference if need be]

        I'll post templates at the end of this tutorial. It's immensely easier to deal with one frame and keep changing the colours for this type.

        You'll have to make the canvas bigger to add in your graphic. If you are using MSPaint, hover your cursor over the little blue box at the bottom right of the canvas until it becomes an arrow, then drag the canvas to a size large enough for your blinkie and extra graphic.

        You'll also want to change the background colour to something that isn't in the blinkie or other graphic. A lot of people use lime green since it's not used often.

        In the window with your doll in it, change the background colour to the same as the one with your blinkie. Copy it, then paste in the blinkie window. It'll have the doll with the background text colour over the blinkie.

        Below the toolchoices, there are two boxes, click on the lower one to get the background transparent. Drag the doll to where you would like it positioned.

        My canvas is a bit big, so I'm going to move the blinkie back to the upper left corner and resize my canvas so it fits with one pixel around the blinkie.


        Now, copy that frame and paste it into GIF Animator. Adjust the settings to your preference, or as stated in the first tutorial. The only difference in this is that we are going to be using the Transparency feature.

        Check the box next to the Transparency text. You should now be able to click on the colour box beneath it. Another box filled with colours will pop up. Click on the colour that you are using for transparency. This might take a while if you're not using the same as I am.

        I marked the two that I use most often: bright pink and bright green.

        I now go back to Paint and change the colours on the blinkie for the parts that I want to move. IF you want to use the previous tutorial as a base for this one, I suggest you take a lot of time to practice placing graphics in the same spot on each frame, otherwise your blinkie will be jumping all over the canvas. I don't recommend it.

        Once you're done changing the colours, do the same as with the first cell in the animator.
        And voila!


        • #6
          Now for something fun. (this is the one you're all waiting for, ain't it? )

          Simple Block Blinkies

          Today I'm using this site:

          While I don't really like the colours of the blocks, I like the pixels that it has.

          Please note: I haven't found any blinkie sites that allow you to create with FireFox. (I can't remember if they work with Mozilla or not.)

          Creating the base

          As in most dollz maker sites, you can move the pieces around in these makers. If you want to use the little space they provide for the actual fabrication of your blinkie, use it. I don't. I go for the most convenient area near the pixels that I'm looking for.

          It might take a while for you to get the blocks aligned. Some sites have bars for your convenience so you can get them aligned correctly, others you have to go by your own eye. If you are unsure of it, you can leave your blocks seperate and move them into place in Paint.

          Practice makes perfect!

          Once you've got your blinkie the way you'd like, take a screen cap and paste it into Paint on a new canvas.

          As per my usual, I'm getting a close up look at my blinkie base. I find that 2x is usually big enough to see the pixels but not have to scroll everywhere. I also get this close to see if there are any spaces that I have missed in filling in the background with the colour I'll be using for my transparency. In this case, there was one between the head and the first box.

          Today I'm using hot pink because my blinkie is a shade of green. In a better program, I wouldn't care, but GIF Animator picks up on it.

          Once you've got your background filled in, cut around the blinkie to an appropriate size of canvas to work with. Paste that on a new canvas. This will be your base. Re-size the canvas if need be. You want none of the white of the blank canvas showing.

          Making it Blink

          If you've had to re-size your canvas, take a copy of the re-sized and paste it into GIF Animator - your first cell. Set it up as you would with the banner-blinkies to your preferences. (I still use 15.)

          Back in Paint, choose the colour you want your flashing letters to be. If the blinkie is dark, try to choose a lighter colour - or if the blinkie is light, choose a dark colour. I use white, mainly because it shows up....and it goes with everything.

          The way GIF Animator is set up, you will have to create your blinkie backwards. This takes some time to get used to and, really, these are the only places that matter, because if you try to animate it forwards, it will play backwards.

          Using the Fill tool, fill in the last letter in your blinkie.

          Copy and paste it to GIF Animator.

          I know I forgot to mention it in my last tutorial, but you'll have to check the transparency each time. But I'm sure you've figured that out by now.

          Go back to Paint, fill in the next to last letter with your chosen blinking colour, then fill in the last letter with it's original colour. (Use your Eyedropper if you have to get it.)
          Copy and paste in the animator and continue on until you've reached the beginning of the blinkie.

          And now, you should have a fully animated blinkie:


          • #7

            I've moved away from using GIF Animator, so this will be done with PSP7/AS3. Hopefully you can translate for what program you have.

            Step 1: Open your graphics program, create a new image. I'm using the generic banner size - 300x105 pixels.

            Create the text you want, using no fill - only the stroke. This will create a border for your glitter. Make sure that your antalias is off.

            Step 2: Open your glitterfill (which can be found at any of the sites I have posted previously, or by googling "glitter fills" or something similar). Copy all three frames and paste as new images in your graphics program.

            Step 3: Using your MAGIC WAND, select the transparent area in the blocks. To get multiple sections, hold down the shift key while click in the regions.

            Change your foreground to PATTERN. Click on it to bring up the Pattern Cache, and select your first glitter frame. Using the FLOOD FILL tool, fill the letters.

            Step 4: Select the whole image (ctrl+A), copy and paste into your animation program.

            Back in your graphics program, undo the fill, choose the next frame, then repeat the last part of Step 3 for however many frames are in your glitterfill.

            Step 5: Change the frame display time in your animation program to match that of your glitterfill. And voila!