Create A Buy It Now Button
by admin on 05/03/09 at 1:56 pm
Recently I created a 'Buy It Now' button for a website and it had to blend in with that site's colour scheme. I couldn't just use my favourite colours, I had to choose colours that complemented those already used on the site.
Blending In With An Existing Colour Scheme
What I did was take an existing image from a web page that represented the colour scheme used. That image was this:
When applying a colour to a shape you are drawing in Firworks, it's an easy job to hover over the sample image with the eye dropper and select the colour you want. If you zoom in on the image, say to 800%, you get more control over the pixels you sample.
First of all I drew a rectangle (mine was around 140px wide and 60px high). I'm not keen on sharp edges so I changed the rectangle roundedness to 30. Then I changed the fill of the rectangle to be a linear gradient.
How to choose the colours? Well, we go back to what I was saying earlier about sampling the colours of an image already used on the website. Click on the colour swatch and then click on one of the colour ramps. While the cursor shows as an eye dropper, move it over the sample image and you will get a preview of the colour in the swatch panel. Click when you find a colour you like and it will apply it to the colour ramp. Do the same for the other colour ramp and you've created your ever-so-desirable gradient. Here's mine:
We're going to apply a glossy reflection but I think that needs to go on top of the button text. For that reason, let's create the text now. No points for originality when we simply write the text "Buy Now!" in a white Arial font. Mine used a font size of 20.
Creating A Glossy Reflection
Now for the gloss. Copy and paste the rectangle. Drag out an ellipse over the rectangle so that it is large enough for the curve to be quite shallow. Select both the ellipse and the copied rectangle. We need the intersection of the two and you can get that by clicking Modify > Combine Paths > Intersect. Ensure that the path you just created has a linear Black, White fill, change the blend mode to screen and reduce the opcaity to around 30 - 40%. That bit's important as it will give that shiny reflection effect those web 2.0 go mad about. However, it won't look right until you position the gradient handle like so:
One last thing. Let's add a drop shadow to give it some depth. I won't baby sit you with settings for it here, but the end result of mine was this:
Makes you wanna click it and buy something, don't it!
