Creating Aim 6.0 Skins: Gradients Lesson

Posted 1 year, 7 months ago at 6:48 pm. 3 comments
Posted in AOL, Design, Life Tutorials, Skinning Aim, Techies Only.

One thing I noticed during skinning Aim 6.0 is that most of the buttons you see are not pictures. Infact "Boxely" the engine that renders the program has the capability to create gradients on the fly. If you had experience with making web 2.0 style buttons on the web, you’ll know already that the secret effect that gives a button its shine or glossiness comes from where colors are placed along a gradient. If your new to this or don’t understand what I’m talking about, I’ll show you a little demo of how colors are handled in Aim 6.0.

Solid Brushes
Aim 6.0 has a Solid Brush function. solidBrush tells the program that the particular ID of what your editing will have ONE color. The solid brush markup goes like this…

    <solidBrush id="textColor.defaultButton" fill="#000000" />

Note fill="#000000", this is where you place the HTML Color Code. #000000 is the color code for black text. If you want to change it to another color you would change the letters and numbers after the # sign. Also there must be 6 Letter/Number combination in order to work.

Linear Gradient Brush 
Aim 6.0 also has a Linear Gradient Brush. linearGradientBrush tells the program that the particular ID of what your editing will have multiple colors. The linear gradient brush markup goes like this…

    <linearGradientBrush id="gradient.aimWindow.windowContent">
        <rotateTransform center="50% 50%" angle="-90"/>
        <gradientStops>
            <gradientStop offset="0%" color="#121212"/>
            <gradientStop offset="100%" color="#363636"/>
        </gradientStops>
    </linearGradientBrush>

Ok woah what happened here!? This got way more complicated than the solid brush. Well a gradient needs more than 1 color to become an actual gradient. Most of the entries in your skins will use linear gradients. In theory all solid brushes should be able to convert to linear gradient and vice versa. Now there are a few rules with linear gradients though. It needs to have a gradientStops tag and that tag must be closed after your gradientStop offsets. You also must close the linearGradientBrush tag at the end of the particular ID. Another rule is that you should begin the gradientStop offset at "0%" and end at "100%". Your free to place whatever values you want between those two colors. Aim 6.0’s boxely engine will render the blending it will take to those positions.

GradientStop Offset.
This is particularly hard to visualize if your new to creating gradients in photoshop or paint shop pro. What you need to do here is start off with one color at "0%" and end at "100%". The percentage tells you where that particular color will start and continue to. At the same time that particular color will also blend with the next gradientstop offset unless you specify otherwise.

Now your not limited to just 2 colors, in my skin, I use 4 to 5 different gradient offsets. By positioning the colors in a certain way you can create an effect where the colors smoothly create a bump like effect, or abrupt colors that creates a sheen glass like effect. Lets take a look at one of the mistakes I used in my skin.

            <gradientStop offset="0%" color="#f3f8e7"/>
            <gradientStop offset="25%" color="#8cc110"/>
            <gradientStop offset="51%" color="#abd747"/>
            <gradientStop offset="100%" color="#abd747"/>

Now you may not see anything wrong here, but if your as picky as I am, you’ll notice that the send IM button’s colors does not match the bar beside it. Take a look at the markup. According to my percentages, these colors will blend smoothly. The farther apart the percentages are, the more smoother bump-like the colors are… [however this isn't always true since you can just use 2 similar colors at the top and 2 similar colors at the bottom to make use of the abrupt glass like effect.] Lets fix this up to create a similar style.

            <gradientStop offset="0%" color="#abd747"/>
            <gradientStop offset="40%" color="#8cc110"/>
            <gradientStop offset="41%" color="#D9FF82"/>
            <gradientStop offset="44%" color="#8cc110"/>
            <gradientStop offset="100%" color="#abd747"/>

Ok now you’ll see a major difference. Take a look at the markup, I’m using 5 gradient offsets to achieve this effect. Note that at  41%-44% the brightest color is used. Then it continues back to the regular gradient. This can be cleaned up better since its kind of redundant to have 5 colors doing that style when I could just fake it with 4 colors.

            <gradientStop offset="0%" color="#abd747"/>
            <gradientStop offset="41%" color="#abd747"/>
            <gradientStop offset="44%" color="#8cc110"/>
            <gradientStop offset="100%" color="#abd747"/>

There, nobody will notice the difference unless they have really keen eyes. Thats all for this lesson.

Learn More About creating Aim 6.0 skins
- Download Aim Skins -