Step 1.

Make a new canvas of your desired size, and fill it with any dark solid color. We used a semi-dark grey shade #383838. Draw a button using the default square with rounded edges (comes in all versions of Photoshop).

Step 2.

Add pattern to your background, while the background canvas is still selected, apply the same pattern texure as we did here. If you don’t have these patterns in your computer, you can copy the enlarged, pixelated version we have, or download the psd of this tutorial free.

Add a little spot of light at the very heart of your canvas, you can do it by using a soft-edged brush of 300 pixels, and set it to “Overlay” – 70%.

Step 3.

Add layer styles to your button. Select the button square layer, and open Layer Styles panel. Start off with applying Drop Shadow as you see on the image below…

Continue with adding Inner Shadow, we used the orange shade #ffa800.

Next to the Inner Glow, gradient fade from white to transparent.

For Bevel and Emboss use two colors; Highlight Mode: Linear Dodge blending – white

Shadow Mode: Linear Dodge blending – #fecc0b.

We mapped a custom contour shape for Gloss, which you can copy here.

Don’t forget to also set contour using tone of the default options – “Cone Inverted” shape.

Next, and one of the most important pasts is the gradient, please copy our colors in the sequence from left to right:

#cb9932 –> #fecc37 –>#cb9902

To wrap it all up, we also used a Stroke bright yellow line in #ffe507. Don’t be afraid to use a bright color, it will only be one pixel wide and will nicely seal the button.

And here is what you got so far…

Step 4.

Here comes and important part that you definitely must not miss otherwise you will wonder why your result is going in a totally wrong direction.

Select the button shape, Ctrl + mouse click on the layer in Layers panel.

Click Ctrl + C to make a copy of the selection.

Create a New Layer on top of the existing button, and while the selection is still loaded (i.e. the dashed line is still blinking) — fill the selection with white color.

Set the opacity of the Layer to 50%.

Step 5.

Now, we have a semi-transparent layer on top of the existing yellow button. Let’s dress it up by adding more Layer Styles to it. Even though it is see-through — adding a clever combination of styles will add a very professional touch to the button.

Begin with Drop Shadow in plain black.

Inner Glow is using solid white color in Color Dodge blending mode.

Our gradient here is a lot more sophisticated, again, try to copy our colors just as you here or download the psd file to get a precise color combination.

Fade from #fff600 –> #ff8a00 (no colors in the middle).

Here we are once again using a custom pattern, which is significantly zoomed in the Photoshop preview, so if you want to copy it pixel by pixel you can draw it or just crop our box and de-size. Since we are offering the psd file free, we decided not to offer the gradients and patterns used in this tutorial separately.

Here is what you got so far, a nicely blended gradients and patterns on the background and front-botton, making the design look professional and sleek.

Step 6.

Now we can proceed to adding text.

Using the standard Typing Tool, and Trajan Pro font, we typed the desired keywords..

We used white, but you can use any color because once again we are going to apply massive Layer Styles so the original color will be completely dismissed.

Go to Layer Styles options while your words are still selected (double check otherwise you may reset the styles you applied to the buttons..

Since our button is yellow, we want to use a very mild variation of the front color, to make the text look embossed when we add it as a Shadow. Here we used a pastel shade #fff7b6.

Proceed to Inner Shadow in black.

Here we used a mild dark gradient, nearly invisible yet it does make a difference compared to a solid color, so we suggest not to skip this step and set the gradient to fade from #4f4f4f —> #2a2729.

And that is it! You can add more text or a few lines  of text as long as you keep a separate layer style for each line, to make sure each line of text gets its own gradient.

Click to view full-size

If you liked our tutorial, please subscribe to our blog updates and follow us on Twitter, because we are planning to treat or readers with freebies and goodies very often!

Frequently Asked Questions – Referral Program

• How much do I earn?

Affiliates receive 50% off the first payment made by the referred person, that is $9.50 per personal license and $29,50 per developer license.

• When will I get paid?

Affiliates are paid on the first day of the month, every month, assuming you reached the minimum payout.

• Is there a minimum payout?

In order to be eligible for a cashout, you need to earn at least $50,00. If you have less on your balance, your earnings will roll over to the next month and you will be paid as soon as you pass the $50 benchmark.

• Can I get a custom coupon?

Yes! If you have a popular website and would like to offer further benefits to your readers, please contact us for hand-tailored discount coupon.

Fixes

Improvements