Tutorials by DJ Mike

DJ Mike's Tutorials: Making 3D Buttons

Making with ImageMagick. This tutorial will teach you how to make 3D buttons with rounded edges.

I Sizing
If you just want a blank button, you can skip these steps. If you know what text you are going to put on it, you get better results if you size the button to fit the text so you need to know how much space the text will take..

Go to Input and scroll down to the bottom. For Format select xc, for Meta enter gray and pick a size that you know for sure is bigger than what you need
Go to Annotate. Pick your font and try different sizes till you like what you have. Color is not important at this point.
When you are happy with the font and size, go to Transform and select Trim. Make sure to check the box to reset geometry. Not very pretty is it? That's OK because all you need to do is make a note of the size. For this example, it is 104x32.
You want a margin of 10px for the letters to fit and another 10px for the 3D effect to take place so you add 40 do the width and height: 144x72

II 3D Effect

Use Paint to reset it to black and resize it to the size you need or, if you are just starting here to make a blank button, make a black image 10px wider and 10px higher than you want.
Go to Draw, and for Primitive select Line. You want the line to go across diagonally from 10px down the left side to 10px up the right side: 0,10 (w),(h-10)
For this example it is 0,10 144,62
Use Paint to flood the top half white.
Go to Draw, and for Primitive select RoundRectangle. You want the coordinates to be in 10px by 10px from the corners and rounded 10 by 10:
10,10 (w-10),(h-10) 10,10
For this example: 10,10 144,62 10,10
For Fill color, enter your button color. Leave Stroke color and Stroke width empty
Go to Effects. Blur at 10x10. You can go lower for less roundness.
Go to Draw and select RoundRectangle. Change the corner coordinates that are entered from when you drew the last roundrectangle to the upper right and lower left corners of the image and the corner radii to 20,20:
0,0 144,72 20,20
For Stroke color enter the background color of the page it will be on and for Stroke width, start with 10. The lower the stroke width, the more it will stand out. For the image to the right, I used 4. Here are two buttons showing the difference in 3D effect and emboss depth:
Draw doughnuts to get rid of the corners
If you wanted a blank button, you are done now. If you want to do a simple annotation, go here. If you want 3D embossed annotation, keep reading...

Created by DJ Mike from Santa Barbara