Friday, May 9, 2008

Making Buttons (my way)

I realize there are a number button tutorials out there on the internet but I thought I'd share how I make mine. I am not saying other tutorials aren't good but after playing around with them, I just wasn't pleased with how my buttons turned out. So I played a bit and came up with this.
1. Open a 400 x 400 transparent image. Set background color to color you want the button. Turn off foreground color. Using the Shapes tool, set at vector and ellipse, draw out a circle (hold down shift key to make it round).
2. Go to Objects, Align and center your circle. Convert your vector layer to a raster layer.
3. Set your background color to black, pick up the Shapes tool again and draw out a tiny black circle. Move your circle to the place on the button you want. Convert the black circle layer to a raster layer.

btntut1
4. Go to Edit, Copy, then Paste as a New Selection (or ctrl-E). Place the black circle at the end of your mouse where it looks right (up to you and your eyes! lol).

butntut2
5. Select All, Float, Defloat. Your two black holes are selected. Expand the selection by 1 pixel. Move down to the button layer, hit delete, then back to your black hole layer, hit delete. Keep selected! Now invert your selection and promote the selection to a raster layer.
6. Apply a drop shadow, vertical and horizontal set at 0, Opacity at 86 and Blur at 14.85.


butntut3
7. Move your Promoted Selection Layer to below the button layer. This makes it look like there is some height to the button. Turn off layer 1 and the promoted selection layer and merge visible.
butntut4

8. I added an inner bevel using Eye Candy 5 Impact. You could use Eye Candy 4 Bevel Boss or Eye Candy 3 Inner Bevel or, finally, the Inner Bevel that comes with PSP. Play around with the settings with whatever you use until you are happy with your button. Below at the settings I used in Eye Candy 5.

butntut5
9. Unhide the promoted selection layer, merge visible. Copy and paste as a new image, save as a png file.

butntut6
10. If you want to add a thread layer, use the Pen Tool set at vector, with the foreground color white (or any color you wish actually). Set the Pen Tool to straight line. Click in the center of one buttonhole, hold the shift key down and click in the other buttonhole. This will give you a straight line. As far as the width of the "thread", it depends upon how big your buttonhole is. You may have to experiment to find out what looks right. Thank goodness for the "undo" button, right? I applied a bit of inner bevel to the thread as well. Again, I had to play with the settings to get it to look right to me. You may have a different setting you like. Below is a screen shot of my settings. Please note: I had already applied the bevel when I took the screen shot.

butntut7
11. Merge visible layers, copy and paste as a new image. Save as a png file. I hope this tut has been useful to you!

2 comments:

Anonymous said...

love your tutorials. Have you thought of adding a newsletter subscription plugin to your blog so your readers can receive email notifications when you post a new tutorial?

thescrappytimes said...

Thank you so much! I've been struggling to make a realistic button that wasn't made with commercial use products and this did it for me. I'm able to customize my button however I want, making it look different every time. Thanks so much!