Animated Blog Button

from a header

I own the intellectual copyright for the written tutorial.  What you make is yours, but please do not take my tutorial.  Share only my link.

This tutorial is intended for beginners to learn how to create an animated button for your blog or website.  If you have any questions, please feel free to Email  me.

To do this tutorial you will also need Paint Shop Pro.  I wrote this with  Paint Shop Pro X3, but the steps may also be done in any version.  You may download a free trial at Corel.

Remember to save as a psp file often!

Download and install JASC Animation Shop

1.  We will be creating a button from an already-made header from a blog or website.  If you don't have one, you're welcome to use my header off of my web page., or some JPEG image/photo that you have.

Go to the website.  Right-click on the header that you want to use, and choose copy.  (or open a photo in psp)

2.  This step is optional, but I like to remove as much of the graphic as I can, knowing I won't be using the text.  So with the selection marquee, draw a rectangle around the part of the image that you want to use.

3.  Image > crop to selection; Edit > Copy

4.  File > New >  width = 150, height = 50 pixels, transparent background, 200 dpi

*I chose those sizes because these seem to be the standard button size for a blog.

5.  Edit > Paste as new layer

Now you can see that my copied image is too big for the size of the button, so I'm going to resize it just a bit.

6.  Image > Resize, change the width & height to 50%, Be sure  Resize all Layers is UNCHECKED.

7.  Now I can see a little more of my image.  With the mover tool, move the layer around, until you're happy with the part of the graphic that you are seeing.

8.  Now go back to your cropped header image.  There is another way of fitting that cropped header image to our button size. 

Image > Resize, resize the header so that the width = 155 pixels.  (make sure the height doesn't shrink smaller than 50!)  I don't want to make it exactly 150 pixels, because I want to have a little room to move the layer if necessary.

Edit > Copy

9.  Click back on the button.  Edit > paste as new layer

Notice how the image in Step 9 is smaller than the image in Step 7.  Either method is acceptable.  Just pick which size you like better.  Then Right-Click on the layer you do not want and choose Delete.

10.  Now,  it's always a good idea to sharpen the image after shrinking it.  Adjust > Sharpness > Sharpen

11.  Right-click on top layer and choose Merge > Merge Down

12.  Ok, now's the time to decorate your button with whatever you want to show on ALL frames.

Maybe you want to add a border:  Select > All, Select > Modify > Contract by 3 pixels.  Select > Invert   and flood-fill the selection with the color of your choice.

We're going to had some main text.  This text will ALWAYS show on the button and not move.  Choose the text tool, choose a font.  Tip:  The font should not be fancy, because it will have to be small type.  So straight and clean font.  Size about 10 -12 pixels.  Type in the name of your blog or site.  In PSP X3, click on the green check.

13.  Effects > 3D Effects > Drop Shadow.  Apply:  Vertical & Horizontal = 1, Opacity = 100, Blur = 1, color = black

14.  Check your layers palette.  If you have more than one layer now, right-click and choose Merge > Merge Down

15.  Ok.  now we're going to add some more text -- some descriptive words -- that will flash on and off.  The animation is simple.  On text on one frame, off text on the other.  So we will need 2 frames.

Right-click on the layer and choose Duplicate.  The background of the animation is going to be the same in each frame, just the text will be different.

16.  Ok on one layer type one descriptive word.  Apply the same drop shadow.  (Repeat Step 14 if the text is created on its own layer)

17.  on the other layer type another descriptive word.  Apply the same drop shadow.  (Repeat Step 14 if the text is created on its own layer)

18.  You should now have only 2 layers -- basically the same, except for the descriptive words.

19.  Now save this as a pspimage.  File > Save As.  CLICK ON OPTIONs, and be sure that psp 7 compatible is selected.  Then set the Save as type: to pspimage.

20.  Open up your saved image in Animation Shop.

21.  Edit > Select All  This will select all frames.

22.  Right-click on one of the frames and choose Frame Properties.  Set the display time = 50

23.  Now you can view your animation.  Right-click on one of the frames and choose View.  If you don't like the speed, you can change the number in frame properties (Step 22).  A bigger number will make it slower (more time between changing frames)

24.  Ok, we're ready to save!

File > Save As   Give the file a name, be sure the type is CompuServe Graphics Interchange (gif)

Click on Save.  Then click Customize

Match these settings

Then click on the Optimizations tab and match these settings

Click OK

Click NEXT.  You can view the image on the right

Click Next, then Finish

And there you have it!

You can use the same method to create a site banner, size 468 x 65

 

Click here for instructions on html coding for placing your button on any site that uses html

Click here if you use a WordPress blog, and want to post the graphic in your blog.

Click here if you use a WordPress blog, and want to post it as a graphic link in the menu of your blog.

 

 


Ask questions at

Dragon's Breath Graphics Forums

Tutorial Index

Home

 Please do not remove this tutorial from my site.  Share my url.