Create a Custom Steel Button Graphic

If you need a custom icon, it's time to start reading.

I created a set of steel icons for this blog. Check out how it's done.



Click File>New on the menu bar or key in ctrl+n.
The canvas needs to have an equal width and height, between 500 and 1000 pixels. Set the resolution to 72 pixels.

Use the rounded rectangle tool to draw the rectangle. Experiment with a different radius until it looks right.

Then key in ctrl+t to scale the square to the extents of the document. Ensure the view>snap to>document boards is checked.

Click the gradient overlay layer style.

Then click on the gradient image. Set the control points by clicking. Opacity is the top box, color is the bottom. Set the colors as needed. Then click ok.

Next check bevel and emboss, and set the bevel size. Also check the contour option, the default settings are fine.

The gradient and bevel should be complete.

 

 Now copy the facebook symbol into your drawing and resize it to fit. Key in ctrl+t to resize. Delete everything but the 'f' by using the wand tool to select the 'f', then key in ctrl+i to invert the selection.

Click layer styles and add a stroke and inner glow to the 'f'. Set the stroke to black and set the inner glow to black with a 60% opacity.  This will give the cut out depth.

Click on the steel gradient layer, then ctrl click the 'f' layer. Key in delete to remove the 'f' from the gradient layer. The process is the same regardless of the shape.

 Save the icon and it's ready for upload.

Alternatively, you could have used the pen tool to trace the 'f', then right click and select fill path. This would produce a cleaner outline, but since the icon will be a reduced size, it won't be noticeable.

The icons height and width can be set in the code- 32 or 48 pixels is a good starting point.