Big Blinkie Templates - Part II
Using "Other" Shapes

big blinkie with hearts

Created March 2, 2003 Copyright SuzShook
Made "Version-Independent" March 2009
Property of SuzShook

This tutorial is my own creation;
however, most of the techniques used in this tutorial, I have learned from others!
Therefore, if you recognize any contribution you have made, I thank you!
And I thank you as well for respecting this as my work by not posting it,
in whole or in part,
in any other location without written permission from me!

Individuals and PSP graphics groups are invited to share my tutorials with others with TEXT LINKS ONLY.
You can e-mail me to let me know you are adding one or more of my tutorials to your list if you like -
it's always fun to know who is doing them!

The Simple Big Blinkie has hit the world by storm, and the requests continue to pour in! This tutorial is a response to the countless requests I have received asking for help in creating Big Blinkies with "other" shapes for the blinkies - like hearts or diamonds or spheres! It's a mathematical thing! You'll need paper and pencil, maybe a calculator, and your imagination! Here's an attempt to make this type of blinkie available to everyone!



I make my tutorials as brief as possible, without the customary paths, details, and how-to's. For those veterans among you, this will be welcome! But for those less familiar with PSP, I included a "Glossary" that contains all the details omitted in the tutorial. If you need a little extra help, check the Glossary section. Just click on the button below - the Glossary will open in a new window.

PSP glossary button


This tutorial assumes you have a working knowledge of Paint Shop Pro at the intermediate level (or advanced beginner level with the Glossary). It was originally written in and for PSP Version 7, and now made "version-independent". Screen shots for this tutorial can come from any version of PSP - where there are significant differences from version to version, a green "Version Note" will be included, along with multiple screen shots if necessary.

Where a note/tip refers to a version of PSP and all higher versions, a + sign will be used to indicate this. For example, if a note/tip applies to PSP X and higher versions, I will use the convention "PSP X+".

If you try this tutorial, and find something is inaccurate for your version of PSP, please EMAIL ME to let me know so I can fix it!

Screen shots in this tutorial are resized - your work will be larger than this!



Supplies - For this tutorial, you will need the following:
  • Paint Shop Pro - any version. The latest version of PSP can be found at the Corel site HERE.

  • (Optional) The "working" templates generated in this tutorial (for comparison and troubleshooting purposes) - you can get them HERE. ~ ~ Unzip into the folder where you keep your current PSP work.


~     ~     ~     ~     ~     ~     ~     ~     ~     ~

OK, now we're ready to begin! Grab your mouse and let's get started!

Remember to save often!

~     ~     ~     ~     ~     ~     ~     ~     ~     ~


STEP 1

If you haven't done the first part of this tutorial, Using Alpha Channels to Create Big Blinkie Templates, then scoot on over there and give it a go! This tutorial assumes you know how to use the alpha channels, and to build the template, and will only show you how to make the calculations for creating blinkies using other shapes! Come on back when you've got that information digested, and we'll make some more templates!

The easiest type of big blinkie to make is one with a "regular" shape, that is, one that has equal width and height. For this tutorial, I used a heart, 12 pixels by 12 pixels, made using the Preset Shapes tool set to the Heart 1 shape. If you don't have a small shape to practice with, make one now, watching the status bar to get a heart which is exactly 12 by 12.

Note: You want your heart (and all your "other" shapes used for blinkies) to have the smooth edges created by antialiasing. However, antialiasing, especially on these tiny shapes, often adds pixels around the edges making the shape larger than what the status bar tells you!!! Precision is extremely important when making blinkie templates, so once you "think" you have a 12x12 pixel heart, copy it and paste as a new image (CTRL + C, CTRL + V). Then check the image information to be sure it's exactly 12x12!!

You actually need just 3 pieces of information to create a big blinkie template with a special shape:

  • The approximate desired size of the blinkie image - this is the target size;
  • The exact width of the shape being used as the blinkie - this is the shape width; and
  • The exact height of the shape being used as the blinkie - this is the shape height.

The last 2 pieces of information allow us to generate 2 additional numbers needed to make this type of blinkie: the group width, which is exactly 3 times the width of the shape being used for the blinkie, and the group height, 3 times the height of the shape! The reason we multiply by 3 is because we're using 3 layers for these blinkies - the pattern starts over after 3 iterations!

Note: In blinkies using "square" shapes, or shapes having the same width and height, the group width and group height values are identical!

Say you want a square blinkie, about 200 x 200 pixels, using the 12x12 pixel heart. For this blinkie, group width = group height = 36, or 3 times 12! Figure out how many "groups" will give a blinkie near the desired size, which is 200 by 200:

36 x 5 = 180

36 x 6 = 216

Decide which one you want to go with, then add the width of the blinkie shape to the total. That gives you the starting width of the blinkie canvas! In our example, if we go with the 5 groups, our starting width would be 192 pixels (180 + 12); if we go with the 6 groups, or 216, our starting width would be 228 pixels (216 + 12)!

Of course, we'll probably want a margin around the blinkies, but we'll calculate that later. For this tutorial, since I want my blinkie at least 200 x 200 pixels, I'll choose 6 groups, plus 12, or 228 pixels for both width and height.

With that decided, open a new transparent image, 228 x 228 pixels! Flood fill with white.

Don't worry too much about the calculations for now - I'll give you a sort of formula or chart at the end of the tutorial!

Save your image.


STEP 2

Add a new layer, naming it "blinkie1". Enable the grid, and using the Grid and Guide Properties dialog, set both Horizontal spacing and Vertical spacing to 12 - be sure to do this in the Current image settings panel of the Grid,Guide & Snap Properties dialog (red arrow below):

grid and guide dialog box-left

Copy your heart image. Returning to the blinkie image, zoom in so you can see exactly where you're pasting your image, and paste as a new selection right in that first grid box:

heart blinkie in first grid box

Be really careful to get the heart EXACTLY within the grid box! If you're off even by a single pixel, the side may appear to be cut off, or the hearts won't be evenly spaced! I'm a math major - precision is important to me!

Note: Enabling Snap to grid, with a Snap influence in pixels of about 15 (see green arrow in Grid, Guide & Snap Properties image above) can help tremendously.

Continue pasting the heart shape, each time as a new selection, every 3rd box around the perimeter. If we did our calculations correctly, it will come out even!

Deselect and save your work!


STEP 3

Add a new raster layer, naming it "blinkie2". Build the "blinkie2" layer the same way as you did the "blinkie1" layer! Place the first blinkie on this layer in the second grid box, continuing around the perimeter every third box until complete. Remember, there should be 2 grid boxes between every 2 blinkies on each layer!

Repeat for the 3rd layer, filling in the remaining blinkie locations around the perimeter.

Deselect and save your work!


STEP 4

Turn off the grid. Let's widen our canvas now, inserting a slight margin around the blinkies. I wanted to leave 4 pixels outside the hearts, so I enlarged my canvas by 8 pixels on both length and width. Use Image...Canvas Size to do this, entering the new Width and Height in the appropriate boxes in the New Dimensions panel, and ensuring the center button (red arrow below) is clicked in the Placement panel to ensure the placement of the image is in the center of the resized canvas:

canvas resize dialog
Width (236), Height (236),
Center placement button clicked

Activate the bottom layer (Raster 1) and flood fill with white (or whatever color you used for your background layer) - this will fill in that extra area you just added! With everything now in place, we're ready to build the template, so we can use it over and over again to make "big Blinkies" just like this one!

First of all, let's set the center of the blinkie. Select all, and contract the selection by 20 pixels - that's the width of the heart (12), plus 4 pixels on each side of it:

center selected

Save to an alpha channel, naming the selection "center".

Deselect and save your work!


STEP 5

Activate the "blinkie1" layer. Select all, float, and save this selection to an alpha channel, naming the selection "blinkie1".

Deselect and save your work.


STEP 6

Repeat Step 5 for the "blinkie2" layer, naming the saved selection "blinkie2".

Deselect and save your work.


STEP 7

Repeat Step 5 for the "blinkie3" layer, naming the saved selection "blinkie3".

Deselect and save your work.

To complete the basic heart template, delete the 3 blinkie layers, and press the Delete key on the Raster 1 layer. Save your image as a psp file - as you know, the alpha channels are saved with the image! When you want to build a blinkie using this template, just follow the Simple Big Blinkie tutorial!

The opening image in this tutorial was made from this template. I've included my "working" template in the "ss-tb2goodies.zip" file available in the downloads section at the beginning of the tutorial. It's called ss-step7pretemplate.psp. If you have problems building your template, you can compare your image with mine - perhaps it will help you get straightened out!

Note: The file provided is intentionally called a "pre-template", or "working" template! It was saved with the 3 blinkie layers intact, to help you troubleshoot if you're having problems! I want to make absolutely clear that the template itself needs NO LAYERS (except, of course, Raster 1, which could be either white or transparent)! In a saved big blinkie template file, the "working" blinkie layers would be deleted, as everything is stored in the alpha channels!

STEP 8

I promised you charts, so let's get to 'em! There are several choices which require just a bit of variation in the planning! You can make blinkies using shapes which are either SQUARE (meaning the same in width and height), NON-SQUARE (width and height are NOT the same), or ROVING (the shapes change direction as they move around the blinkie)! Let's look at each of these!

To make a blinkie template with a SQUARE blinkie shape:

  1. Determine the approximate size you want your completed blinkie - this is the target size.
  2. Determine the exact width of the shape - this is the shape width.
  3. Multiply the shape width by 3 - this is the group width.
  4. Find a multiple of the group width that is close to the size you want for your blinkie width - this is the closest width.
  5. Add the shape width to the closest width - this is the canvas width.
  6. Determine the exact height of the shape - this is the shape height.
  7. Multiply the shape height by 3 - this is the group height.
  8. Find a multiple of the group height that is close to the size you want for your blinkie height - this is the closest height - note that if the desired width and height are identical, closest height = closest width.
  9. Add the shape height to the closest height - this is the canvas height.
  10. Open an image that has the dimensions you calculated, (canvas width) x (canvas height), and create your template!

Let's try an example! Say I want a blinkie approximately 200 by 100 pixels, and I have a tiny yellow star, 13 by 13 pixels, that I'd like to use for the blinkie! The values have been filled into the table below:

Item #
Name
Value
Calculations
1
Target Size
200 by 100
---
2
Shape Width
13
---
3
Group Width
(shape width x 3)
39
3 x 13
4
Closest Width
(nearest multiple of group width)
195
5 x 39
5
Canvas Width
(closest width + shape width)
208
195 + 13
6
Shape Height
13
---
7
Group Height
(shape height x 3)
39
3 x 13
8
Closest Height
(nearest multiple of group height)
78
2 x 39
9
Canvas Height
(closest height + shape height)
91
78 + 13
10
Canvas Size
(canvas width by canvas height)
208 x 91
---
Note: In this table, I've shaded the really important rows a light gray - this is the data we're looking for, the width and height we need to make our canvas to get the blinkie we're looking for! The darker gray last row in the table is a summary line, containing the important data from the 2 light gray rows!

Repeat Steps 2 through 7 to build your blinkie template from these specifications, saving it in PSP format! Then follow the Simple Big Blinkie tutorial to create a big blinkie from your new template!

Here's the one I created using these specs! Note that the finished size of this blinkie is 216 x 99 pixels, due to the 4-pixel margin added in Step 4!

step 9 blinkie

The "working" template built in this step, before the deletion of the layers, is included in the zip, if you need help! It's called ss-step8pretemplate.psp!


STEP 9

Are you still with me????? I surely hope so! Let's talk about making a blinkie with a shape that's NOT square, for instance a diamond that's taller than it is wide! Can we still do it! You betcha! We just need to do the calculations!

To make a blinkie template with a NON-SQUARE blinkie shape, use the same procedure listed in Step 8 above! Let's try an example! Say I want a blinkie at least 200 by 100, created with a gradient-filled diamond that's 10 pixels wide and 12 pixels in height!

Now, don't cheat! Think about the values before checking those filled into the table below:

Item #
Name
Value
Calculations
1
Target Size
200 by 100
---
2
Shape Width
10
---
3
Group Width
(shape width x 3)
30
3 x 10
4
Closest Width
(nearest multiple of group width)
210
7 x 30
5
Canvas Width
(closest width + shape width)
220
210 + 10
6
Shape Height
12
---
7
Group Height
(shape height x 3)
36
3 x 12
8
Closest Height
(nearest multiple of group height)
108
3 x 36
9
Canvas Height
(closest height + shape height)
120
108 + 12
10
Canvas Size
(canvas width by canvas height)
220 x 120
---

Repeat Steps 2 through 7 to build your blinkie template from these specifications! Be careful when you enable the grid - the Horizontal spacing needs to be set to the width of the blinkie shape (10), and the Vertical spacing, to the height (12)!

When you get ready to save your selections to the alpha channels, be careful how you set the center selection! In this instance, you can't just select and contract, because you need to contract 18 pixels on the sides and 20 pixels on the top and bottom! And the Selections...Modify...Contract dialog doesn't allow the entry of 2 values! Instead, we'll use the Custom Selection dialog, which you can access by choosing the Selection tool and clicking on the Custom Selection button. This dialog allows you to enter the exact positions of the selection, as follows:

custom selection dialog

It's worth taking a few minutes to look at the parameters in this dialog, and to understand them, so you can do this again on your own for any size blinkie (if you know all this stuff, just skip this bulleted list)!

  • The Left parameter indicates how far from the left edge of the image we want our selection to start. That's an easy one to understand - we know our blinkie shape is 10 pixels wide, and we added a 4-pixel border, so we probably want to leave 4 pixels inside it too. With that in mind, 4 + 10 + 4 = 18! So, we want to start our selection 18 pixels from the left edge of the image!
  • The Right parameter indicates where we want the selection to end in relation to the right edge of the image. Well, we know we want it to end 18 pixels from that edge! Right?! If you look at the top line in the panel, you'll see the Image Size is 228 pixels wide and 128 pixels in height. So if we want to stop the selection 18 pixels BEFORE we get to the edge, then subtract 18 from 228, and you get 210!
  • We're on a roll now! The Top parameter indicates how far from the top edge of the image we want the seletion to start. We know our blinkie shape is 12 pixels in height, and we added the 4-pixel border, so we need to leave 4 pixels inside for symmetry. That's 4 + 12 + 4 = 20!
  • Don't give up yet - only one value to go! The last parameter, Bottom, indicates how far down from the top we want the selection to go before stopping, or where we want it to end, in relation to the bottom edge. Well, it's 128 pixels in height, and we want to leave a 20-pixel edge on the bottom just like we did on the top, so 128 - 20 = 108!

Now that wasn't so difficult, was it! And now that you understand that dialog, think of how handy it will be!!!!

Here's a blinkie built from the template we just created!

step 9 blinkie

The "working" template built in this step - before the deletion of the layers - is included in the zip, if you need help! It's called ss-step9pretemplate.psp!


STEP 10

How about a blinkie with a shape that changes as it goes from the horizontal to the vertical! I call this one the ROVING blinkie shape! Let's try it with an arrow that's 15 by 10 pixels, and a blinkie image that will be about 200 by 100 pixels! Before you look, now, think about the values you want - then check those filled into the table below:

Item #
Name
Value
Calculations
1
Target Size
200 by 100
---
2
Shape Width
15
---
3
Group Width
(shape width x 3)
45
3 x 15
4
Closest Width
(nearest multiple of group width)
180
4 x 45
5
Canvas Width
(closest width + shape width)
195
180 + 15
6
Shape Height*
15
---
7
Group Height
(shape height x 3)
45
3 x 15
8
Closest Height
(nearest multiple of group height)
90
2 x 45
9
Canvas Height
(closest height + shape height)
105
90 + 15
10
Canvas Size
(canvas width by canvas height)
195 x 105
---
*Note: The Shape Height in the table is 15 (not 10, which is the actual height of the arrow shape)! No, I didn't make a mistake! The height has to be recorded as 15 because when we turn the arrow (rotate 90° right) to go down the right side of the image, the height actually changes to 15! Making both height and width 15 encompasses all possible scenarios for this blinkie! I know, it's a bit confusing, but bear with me - once we get started, I think you'll catch on!
Another Note: Because this blinkie shape has to be rotated several times, it's a good idea to make your original as a vector object. This will prevent distortion from all the rotations! For the purposes of this tutorial, I called my original arrow image arrow-a. Be sure it's exactly 15x10 - if not, then change your parameters in the table to match your image! I made 3 copies of arrow-a, rotating the first copy 90° right (arrow-b), the second copy 180° right (arrow-c), and the third copy 270° right (arrow-d).

Repeat Steps 2 through 7 to build the blinkie template from these specifications, with the following special adjustments!

  • In Step 2, make the following changes:

    • Enable the grid, and choose 15 for both Horizontal grids and Vertical grids.

    • Make sure the Snap influence is set to 15.
    • Paste arrow-a into the image, moving it toward the first grid box! Line it along the top, on the grid line between grid boxes 1 and 2:

      arrow blinkies

    • Because the arrows line up on the grid lines in this one, you'll be placing an arrow every third grid line (rather than in every third grid box)!! This makes for really nice corners, as you'll see in a bit! Honest!

    • When you get to the first corner (last grid box along top), change to arrow-b. As illustrated below, the first vertical arrow lines up on the grid line between the top and second grid boxes on the far right edge:

      arrow blinkies

    • When you get to the second corner, (last grid box along right side), change to arrow-c.

    • At the 3rd corner, change to arrow-d.

    • Here's the template at the end of Step 3, with the first blinkie layer:

      arrow blinkies - layer 1

  • In Step 3, make the following changes:

    • When you begin inserting the arrows on the "blinkie2" layer, don't forget to start again with arrow-a! Insert an arrow every third grid line, until you get to a corner, where you change the arrow! Repeat around the grid! Here's an image showing the first few arrows on layer "blinkie2":

      arrow blinkies - layer 2

    • When you begin working on the "blinkie3" layer, same thing - start again with arrow-a, inserting arrows every third grid line! It's not really that difficult, is it! And think of the wonderful results you'll be getting!

  • In Step 4, make the following changes:

    • Here's what the template looks like after you add the 4-pixel margin:

      arrow blinkies - all layers


    • Notice how evenly those arrows line up! And because of the way we set them, they just seem to round those corners so neatly! Had we not used placed the arrows on the grid lines the way we did, our corners would have looked terrible! Here's an image of one of our corners, and a corner made centering the arrows in the grid boxes - major YUCK!

      corner - our way   corner - centered arrows

    • In that same step, to get the center of the blinkie to save to the alpha channel, after you select all, contract by 18 pixels - that's 10 for the arrows, and 4 on either side of the arrows for a margin! Why 10 for the arrow rather than 15, you ask? The arrows have been shifted to the outside edges of those grid boxes, and since they were really only 10 pixels in height, that's all we need to calculate the center! Try it! It works!

Here's my blinkie from the specs - finished size is 203 x 113 pixels, due to the 4-pixel border:

step 10 blinkie

The "working" template - before the deletion of the layers - is also included in the zip, if you need help! It's called ss-step10pretemplate.psp!


So what do you think? If you have a table like this, you should be able to calculate the size of any template canvas, right? I hope so! I created a table for you, which you can get by clicking HERE. This will open a new window with a blank template table! Print it, and use it whenever you want to create a new blinkie template using "other shapes" for the blinkies!

With a little calculation, you can create all kinds of blinkie templates now! Here are a couple more blinkies, made with different blinkie shapes, all of which come with PSP 7!

Here's a Happy Birthday musical notes blinkie, made from the Music 1 shape:

happy birthday blinkie


Here's a "country buds" blinkie, made from the Apple 1 shape:

country buds blinkie


And finally, here's another ROVING blinkie, made from the Arrow 27 shape:

Irish mouse blinkie


Have a blinkie ball!


If you have any problems, comments, or questions, please do not hesitate to Email me.


Email


Version Independent Tutorials ~ About Me ~ Home ~ Email

All graphics and content 2002-present by SuzShook