Last post I talked about how easy it really is to create professional-looking graphics when you’ve got a decent editor. Now I’m going to prove it to you! We’re going to try to recreate this snazzy button from Mint.com:
We might not be able to do it exactly, but it’ll be something with the same general effect.
Step 1: Open up Paint.NET (or any other similar graphics editor) and set your canvas size to 140×40. Set your primary color to (25, 108, 200). This will be the outside border of the button. Set your secondary color to (41, 129, 229). This will be the main interior color of the button.
Step 2: Choose the rounded rectangle button and set it to “Filled Shape with Outline” mode. Create a shape that fills up most of the canvas.
Step 3: Next we need to do the “shine” on the top half of the button. Select the first layer (the one with the blue rectangle) and choose the Magic Wand tool. Set the tolerance to about 75% and click anywhere in the shape to select it. Create a new layer on top of the other two. Choose the Ellipse tool and set it to “Draw Filled Shape,” and make sure your primary color is still white. Draw the ellipse starting above the top of the canvas and go down about a third of the way into the button.
Step 4: Go to the “Layer” menu and choose “Layer Properties.” Set the opacity of the layer to about 85.
Step 5: Go to the “Effects” menu and choose “Gaussian Blur.” Set the radius to 2 and click “OK.”
Step 6: If you’ll notice, there’s a kind of “glow” around the edge of the button. To duplicate this, first go to the “Layers” menu and choose “Merge Layer Down.” Then, pick the Magic Wand tool and set the tolerance to 25%. Click anywhere in the darker blue section to select it. Create a new layer. Choose the Rounded Rectangle tool and set it to “Draw Shape Outline.” Draw an rectangle just on the inside of the button in white.
Step 7: Do another Gaussian blur with a 3px radius.
Step 8: Now let’s do the drop shadow. Flatten your layers again and choose the Magic Wand tool. Set the tolerance to 75% and click anywhere on the button. Create a new layer. Choose the paint bucket and pick a light gray color. Click inside the selected region to fill it. Make sure your Layers window is open (F7), and click the down arrow to move the gray rectangle below the blue one. Choose the Move Selected Pixels tool and hit the down arrow on your keyboard about 3 times.
Step 9: Do another Gaussian Blur with a 3px radius.
Step 10: Set the opacity of the layer to 135.
Step 11: Now put your text on top. I couldn’t find something that looked like the font Mint is using, so I just used Lucida Sans.
Well, it’s not perfect, but I’m starting to get the hang of it, I think. Play around with it a bit and see what you can come up with. If you have any suggestions about the way I’ve done this button, I’m all ears!