How to Create an Animated Start Button

Thursday, August 13, 2009 by Mirsguy | Discussion: WindowBlinds Tutorials

When I was brand new to skinning WindowBlinds, I wanted to have an animated start button, but did not know how to do it.

I have heard many say that the best way to figure out how to skin is to figure out someone else's skin. I did that in this case, but I figured I'd share what I've learned.

The tools I have used are Photoshop CS4 and SkinStudio 6.

 

1. Create your "Normal" start button image.

Do this as a single frame. WindowBlinds reads skin parts in either strips or stacks, but for starters, just do 1 frame. This image is 64x28 pixels.

I will not at this time go into creating the graphics. Suffice it to say, if you will observe my layers panel, you may notice that there are elements that have been turned off. These are glows for the mouseover and pressed states. I have found it easiest to create my image (comprised of several layers in a layer group) in its entirety, including variations, then copy the image for each instance, modifying layers as I go.

2. Keep your position correct with a background template.

This will make more sense in the next step.

3. Create your image strip for all the standard states of the start button.

These are the states, in this order--normal, pressed, disabled, mouseover, focus.

Notice the background template. Each box is the exact size of the whole graphic section for each button state--64x28 pixels. This can make it easy, as you build your image strips, to know for sure that each button is in the exact same position for each state. This is very important so as to not have a "jumpy button."

4. Build the rest of the frames.

In my case, I had a total of 14 frames. Since the first 5 frames are the standard states of the button, frames 6-14 are all for animation.

Mine was a very simple animation--a simple glowing flash that began with no glow, peaked with light, then returned to no glow. For this effect, I made sure that the basic button image in each frame was the same (one of the benefits of copying your layers over for each frame), and I simply adjusted the strength of the glow for each frame.

For instance, frame 6 is the button only with no glow; Frame 7 has the glow set to 25% opacity; Frame 8 has the glow set to 50% opacity; Frame 9-75% opacity; Frame 10-100% opacity; Frame 11-75%; Frame 12-50%; Frame 13-25%; Frame 14-no glow.

5. Save in Photoshop & Import in SkinStudio.

Be sure to save your .psd with all layers! I cannot stress this enough. If you ever have to go back and redo something about the graphic (and you will!) it is much easier to make minor changes in a .psd than to recreate your image from scratch.

After you have saved your .psd, then merge all visible layers, delete any layers that are not used, then save your file as a .png.

Once you have done this, it's time to go over to SkinStudio and import your image. Navigate to the "Start Menu & Taskbar/Taskbar/Start Button" section, then import your image. Make sure your frame count is set correctly. The default number of states is 5. In my case, I have 14, so I had to change the Image count to 14.

6.Animation Settings

Navigate to the "Animation" tab and adjust your settings.

In my case, I had to indicate that the animation should begin on frame 6 and end on frame 14. This is found on the right-hand side of the window. I also wanted my animation to loop, or repeat itself, so I had to indicate that once the the animation finishes the sequence from 6--14, it should loop back to frame 6 and finish the loop on frame 14. In other words, the animation with these settings is configured to play continuously.

You may prefer for your animation to play once then stop. Simply do not loop your animation.

I have mine set for "no delay" between loops. You can play with this also, if you wish, to make it so that your animation loops, but pauses before each cycle.

You can also configure the speed at which the animation is played by adjusting the "Animation Rate" settings.

Once you're done, go ahead and try it! Don't be discouraged if you mess it up: just keep trying until you get it right.

Now, of course, this is a tutorial on how to create a basic animation. For a more advanced technique, see this tutorial by Voidcore. https://forums.wincustomize.com/361485/#2336920

I hope this helps.

voidcore
Reply #1 Thursday, August 13, 2009 9:03 AM

Nice tutorial Mirsguy.

Mirsguy
Reply #2 Thursday, August 13, 2009 9:11 AM

Thanks, voidcore!

voidcore
Reply #3 Thursday, August 13, 2009 10:17 AM

Sometimes I actually make the animation from mouseover as animationframe nr1:D

Also i might do a tutorial about another way of doing animation from PS and using sks's framebuilder.

Mirsguy
Reply #4 Thursday, August 13, 2009 11:15 AM

Also i might do a tutorial about another way of doing animation from PS and using sks's framebuilder.

I like the concept of frame builder, but its functionality seems to be a bit hit & miss with me. Either way, I prefer working with the strips. One reason is that I end up with a .png and a .psd, as opposed to several .png's to use with framebuilder.

voidcore
Reply #5 Thursday, August 13, 2009 4:53 PM

Yeah i understand, but its easier to manage the animation in PS and then export imo... but i do hate that the framebuilder cant batch load .png's

k10w3
Reply #6 Friday, August 14, 2009 1:02 PM

I'm a little confused about this, and perhaps it's because I'm self-taught in Photoshop.  After your first layer, do you increase the canvas size to make the strip?  How do you go from layer 1 to putting layer 2 to the right of layer 1.  I only know how to stack layers.

DjiRate
Reply #7 Friday, August 14, 2009 1:18 PM

awesome tut mirs guy///will help alot of people ...including myself...thanks alot man

voidcore
Reply #8 Friday, August 14, 2009 1:32 PM

I'm a little confused about this, and perhaps it's because I'm self-taught in Photoshop. After your first layer, do you increase the canvas size to make the strip? How do you go from layer 1 to putting layer 2 to the right of layer 1. I only know how to stack layers.

Yeah increase the canvas to the right as many pixels as the rectangle (original size of button), duplicate the rectangle and button select both those layers and move to the right use the arrows to nudge it into pixel perfection.

 

You can open your calculator and put in:


[ "button pixels" x 5 ] for the original states and add ["button pixels" x "animation frames"]


Now you have the complete size of the animation. Resize canvas accordingly.

2of3
Reply #9 Friday, August 14, 2009 3:50 PM

Great tut here, Brian!

 

@Karen:

I always have my calculator open when doing any kind of strip/stack..........especially for those 70 frame animations!

 

 

k10w3
Reply #10 Friday, August 14, 2009 4:20 PM

OK - thanks.  I don't have my calculator open all the time, but I have a keyboard shortcut to bring it up.

Mirsguy
Reply #11 Friday, August 14, 2009 4:25 PM

OK - thanks. I don't have my calculator open all the time, but I have a keyboard shortcut to bring it up.

Glad you got your answer Karen! Sorry I'm late to the party, but at least VC and Tim were able to help.

I've been kicking around the idea of doing a tutorial on creating graphics for image strips...

k10w3
Reply #12 Friday, August 14, 2009 4:53 PM

Mirsguy

I've been kicking around the idea of doing a tutorial on creating graphics for image strips...


Do it, DO IT!!!

bk13GarbageMan
Reply #13 Friday, August 14, 2009 9:22 PM

 

MallyMcGinnis
Reply #14 Friday, April 29, 2011 2:40 AM

Wow, what a clearly written, easy to follow, easy to read tut!  Thank you very much for taking the time to write it.  I can't believe it's not received any comments in so long.  I do have a question, though. 

Both you and voidcore are using a technique in PS that confuses me a bit.  From the beginning illustration 'original 1920 x 1200' on, there is a slightly larger-than-the-button-patch of color behind the button, and this patch is offset when compared to the center of the button. 

When you illustrate multiple states, this colored patch alternates from lighter to darker.  Additionally, there's another colored bar below the button states that sometimes describes the button states themselves.  Are the patches and this bar part of the button I'll be making, or are they used here simply for illustrative purposes?

Off the subject a tad is in making border bitmaps where the 4 sides are not precisely straight lines.  An example might be the borders in Mike Bryant's Colony.psf skin.  I notice in examining the .bmp that the void area is colored hot pink, a color not used elsewhere in his skin, and not visible in the final skin.  Can you or someone who's in the know explain that pink to me please?  Specifically, I guess, why pink and not transparent?

 

Thanks for taking the time to read,

Mally

 

Disturbedcomputer
Reply #15 Friday, April 29, 2011 4:23 AM

Book mark

Xiandi
Reply #16 Friday, April 29, 2011 7:02 PM

MallyMcGinnis
I notice in examining the .bmp that the void area is colored hot pink, a color not used elsewhere in his skin, and not visible in the final skin. Can you or someone who's in the know explain that pink to me please? Specifically, I guess, why pink and not transparent?
That is 'magic pink'. It is used for the transparent parts on a .bmp image, since .bmp images cannot have real transparency in the image. It has to be perfectly pink, meaning red=255 green=0 blue=255. It only works on .bmp images.

You can also make the start button .png, and just leave the transparent parts empty.

MallyMcGinnis
Reply #17 Friday, April 29, 2011 9:02 PM

I was thinking along those lines, Xiandi, but your specifics about blending 'magic pink' will be of great help.  Thanks so much for having taken the time to reply.  Your answer couldn't have been more thorough. 

VistArtXPosed
Reply #18 Friday, April 29, 2011 9:31 PM

Thanks.  I saved this page to my Favorites for future viewing.  I first learned animating elements by learning from other peoples' skins, then playing with the settings myself.  I mostly use the freebie Paint.NET for image strips because it's so much easier to use, although it's not nearly as comprehensive as PS.

Uvah
Reply #19 Friday, April 29, 2011 10:01 PM

PS7 doesn't do animations but PSP does. I've been playing with animations and trying them out on smx's. Not as easy as I thought. I managed two but this third one has got me goin' bonkers. I'm trying to use a spectrum image for window animations. Tried stacking them. Doesn't work. Tried changing the image to multistate. Doesn't work. Slightly OT but as long as we're talking animations I thought I'd just throw it out there. Maybe get a hint or two or three. Okay. Back OT.

Please login to comment and/or vote for this skin.

Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:

  • Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
  • Access to a great community, with a massive database of many, many areas of interest.
  • Access to contests & subscription offers like exclusive emails.
  • It's simple, and FREE!



web-wc01