Gradient Buttons - Part Two

Apr 21

Written by:
Saturday, April 21, 2012  RssIcon

Before we do anything in code, we should experiment with LiveCode's inspector palette to work out the properties that need to be applied to the button to give it the desired appearances in both normal and pressed states. These will then be applied in code and we'll set things up so all instances of the button behave and draw the same way.

So to start, create a new stack and then a new rounded rectangle graphic. You'll notice that the corners are way too rounded, so let's set them to 4. As we're going to be applying filled effects to the control, it's best to change its transparency to opaque.

At this stage, you should be looking at something like this:

The normal state has a fairly soft gray gradient applied to it, with the change from one shade to the next occurring mostly about two thirds of the way down.

Open up the Property Inspector and switch to the Gradient property set. We'll be editing the Fill gradient (Stroke is for the outline of the graphic) and applying a Linear gradient type.

The block of colour in the middle of the inspector is known as a gradient ramp. You can click on it to add colour points to it and their spacing helps to determine how quickly the gradient switches from one colour to the next. In building our ramp up, I reckon that a gray of 75% to the left looks good and 100% to the right is perfect (use the gray scale colour slider to choose these values, rather than RGB values).

You'll notice that the angle of the gradient goes from left to right but a button needs to go from top to bottom. We therefore need to rotate the gradient by 90°. Unfortunately, the gradient inspector doesn't allow for a rotation value to be entered, so you'll need to use the handles to drag the gradient control points into position.

If the handles prove fiddly to use, you can enlarge the graphic or zoom using the control key and the mousewheel (assuming you have zooming in this way turned on).

You should end up with this:

The next step is to add the slight halo and drop shadow that can be seen on the button. You won't be able to see these on a white background, so change the stack's background colour to something darker or more vibrant like bright magenta.

In the Property Inspector, select the Outer Glow set. As the halo is very subtle indeed, we don't want to go overboard on the settings. Therefore, change the colour to a dark gray (about 38%) and bring its opacity down to about 64. The Size needs to be just one pixel.

Note that the Blend Mode is set to Colour Dodge, so it blends in well with the background.

It's a similar affair with the drop shadow. Be sure to change the angle to 90°, so it sits directly beneath the rectangle. The colour is changed to a lighter gray and the opacity reduced, so the background can come through.

Note again that the Blend Mode is set to Colour Dodge.

Now we're ready to see what we've created. In this image, I've changed the height of the rectangle to 23 pixels, which is the actual height that the control will be. We can really get a good idea of how we're doing.

Super. I think we're finished with this button state. Tune in next week for the pressed version! 

Your name:
Your website:
Add Comment   Cancel 




Login Copyright ©2011-2013