Create a Sleek Submit Button Using Photoshop

Today you are going to learn how to create a sleek submit button using Photoshop. Often times I see web buttons that are just plain and not very web friendly. You are going to learn how to easily and effectively create a Submit button for the web that looks great and is very web friendly.

So, let’s get started make a sleek submit button using Photoshop. You do need some basic knowledge to do this tutorial.

Step One. The first thing you need to do is to create a new document in Photoshop. It really doesn’t matter what size, as long as it is bigger than 250×150 because that is what size we are going to make our button.

Step Two. You need to start out using the Rounded Rectangular Tool. This is different from the regular rectangle tool because the edges are rounded and have a softer feel. You need to draw a rectangle that is 250×150 in the middle of your document. This is going to be the base of our design. You can choose what color you want it to be.

Step Three. Now you need to apply all kinds of effects to your shape. So, you need to double click your shape in the layers palette so that you get the Layer Style window. You are going to be applying all kinds of effects to this shape.

Step Four. To start off with you need to add a Drop Shadow. You need to set it so that the angle is 90 degrees, distance is 4px, the spread is 100%, and the size is 0. Next, you need to add a Gradient Overlay and set the Blend Mode to Overlay, Opacity is 45%, the gradient is White to Black with Reverse checked, the style needs to be Linear, angle need to be 90 degrees, and the scale needs to be 137%. Now you need to add an Inner Glow and set it so that the Opacity is 10%, the Noise is 0, the solid color box is selected, Technique is set to Softer, the source is set to Edge, Choke is 0%, Size is 18px, and the Range is 50%. Now you need to add an Inner Shadow and set it so that the Opacity is 11%, the angle is 90 degrees, Distance is 7px, Choke is 100%, Size is 0, and the Noise is 0%. The final thing that you need to add is a Stroke that is set so that the Size is 2px, Position is Outside, and the Opacity is 100%. Note that you need to choose the appropriate colors for your design on each of these effects.

Step Five. Now you need to add the text SUBMIT using the font Marvelous DGZ which can be found on about any of the font sites. You also need to add the following effects to your text layer. You need to add a Gradient Overlay set so that the Opacity is 23%, Gradient is set to Black to White, angle at 90 degrees, and a Scale of 84%. You also need to add an Inner Shadow set so that the Opacity is 24%, the angle is 90 degrees, distance is set to 3px, 0 choke, 0 Size, and 0% Noise. Now add a Stroke and set the setting so that the Size is 3px (I use Black here on all text), and the Opacity is 10%.

You are now done creating a great and great looking submit button for the web. It is really easy to do and can be duplicated over and over. I hope that you have found this useful for all of your web button needs.

SHARE