Professional Glossy “Download” Button

In this easy, step-by-step tutorial I’m going to show you how to design a simple, professional & glossy “Download” button. I’m just using download as an example here, it’s really a multi-purpose button These kind of buttons are also being used a lot on “Web 2.0″ sites lately, so get with the times! (not seriously)

1. Creating your Button

Start by creating a new document to make your button in, otherwise open up a website design you’ve been working on. I created a small document sized 400 x 110, just to make my button(s) in.

Now you need to make the shape of your button, you can do this by either using the Rounded Rectangle Tool (which is the most common) or you could use the channels to create a nice, uniform rounded box. It’ll be best if you just use the Rounded Rectangle Tool though.

For the settings, use a radius of about 10-15px, you can see the other settings I’ve used below:

Now, draw out your button onto the canvas in whatever color you want. (it doesn’t matter what color you use)

2. Apply Layer Styles

Right-click your button layer in your layer’s palette then go into the Blending Options, click and apply the following settings:

1. Inner Shadow
2. Gradient Overlay

You can use whatever colors you want in the above layer styles, but your button should now look something like this anyway:

3. Highlight / Shine Effect

Now it’s time to add a nice, glossy shine to the button. Start by making a selection around your button (Select > Load Selection) then contract your selection by about 5 pixels (Select > Modify > Contract) now you should be left with a selection like this:

Create a new layer then drag a white to transparent gradient from the top of the selection to the bottom, as shown in the below image:

Now you need to make a curvy path using the Pen Tool, turn your path into a selection then delete the bottom half of the gradient, something like this:

I also used a large, soft brush to erase away the bottom edges, this gives it a very nice, smooth feel.

4. Text & Details

Now it’s time to add your text to the button! Start by getting out the Horizontal Type Tool (T) then write out your text.

The font I’ve used above is called Myriad Pro, for the top line of text I used: Black Italic, 24 pt, Sharp, #fff.

For the bottom line of text I used: Semibold Italic, 12 pt, Sharp, #fff. I finished off by adding this Drop Shadow to the text layer.

Lastly, for a nice touch, I added in a reflection to the button and a faded cog in the bottom left corner. Add the shadow/reflection by duplicating your main button later, moving it below your button layer then erase all but the top.

You can download the cog shape that I used from: Cog Shape File.

*Bling Bling* Simple Gold Text Effect

Ok, ok, I know I’ve already written a tutorial or two on how to make a nice, golden text effect. But again, I’m going to write for you a tutorial on how to make a simple gold text effect by using some layer styles, namely the Gradient Overlay layer style!

I was inspired to do this tutorial after I saw an awesome bit of text on the David Letterman’s website, which you can view here. Props to the awesome David Letterman!

1. Setting the Stage

Ok, let’s start by making a new document in Photoshop. I created a new document sized 500 x 500 pixels with all the default settings, RGB, 72 DPI, etc.

After creating your document, fill the background with a color/gradient of your choice. In this case I used a radial gradient, colors were #393943 and #100e19.

I then added in a texture/pattern of some “Diamond Metal Plate,” I made this texture using the Free Filter Forge Metal Plugin, which you can download for free from their website.

If you don’t want to download their application and have to install it, you can simply download the pattern that I created from here: Diamond Plate Metal Texture/Pattern.

After adding your texture, mess with the layer mode and opacities settings to get an interesting look. I used the layer mode Overlay, with an opacity of 15%. Other good layer modes to use in this case are Soft Light, Vivid Light, and Color Dodge.

Looking alright so far? One or two more things to do for the background before we get onto the text though.

Create a new layer then get out the Rectangular Marquee Tool. Set the ’style’ for the selection tool to ‘Fixed Size, then put 50% into each of the boxes, width and height.

Drag your selection onto the canvas then into the bottom right corner of your canvas, do the same but in the top left corner. Next, fill your selections with one of the purple colors that you used for your background gradient.

Lower the opacity for this layer if you think it needs it, then, using a large, soft brush, erase away the inside (middle area) of your cubes, so you get something like this:

Repeat this part, but using the other corners and the other color that you used for the background. After a little bit of tweaking, this is what I ended up with for my background:

If you were unable to complete the background, then don’t worry about it, you’ll be able to download the PSD file at the end of this tutorial anyway, so you’ll be able to take a look at all of the layers later.

To finish off with the background I added in a bit of grunge at the bottom of the document, using the lighter purple as my brush color, I then changed the layer mode to Multiply and lowered the layer opacity to around 40%.

Alright, we’re finally done for the background! I hope you enjoyed this part

2. Setting Up your Text

This is the easy part, all you have to do is write out your desired text on the canvas. Get out your Horizontal Type Tool (just the usual one) and write out your text in whatever color you want.

In the above image I’ve used Impact as my font of choice, and it’s sized at a meager 60 pt.

Impact should come with your Windows installation (assuming you’re using Windows, anyway) but if you don’t have it, you can easily find a good alternative on a free font website such as Dafont or UrbanFonts. It’s preferred to use a fat font, with a large font size.

I find Impact does a great job in this case, but if you’re not pleased with it, I’ve listed a few good, free alternative below.

Bebas:

Accidental Presidency:

Boris Black Boxx:

3. Style Your Text

Pretty much the final thing we need to do is apply layer styles to our text to make it actually look good. Some of these layer style settings will depend on the size of your text, so be sure to mess with the settings a little bit if you’ve selected your own font size!

1. Drop Shadow
2. Inner Shadow
3. Inner Glow
4. Gradient Overlay

And now our text should look like this:

Looks pretty good to me!

4. Completion

Well, we’re pretty much finished for this tutorial, thanks for taking the time to read it! If you want, you can download the PSD file from this tutorial below, learning purposes only though!

As you can see in the above image, I’ve added some of those bling star things, I’ve included them in the PSD file.

(1.1mb)

Creating Stylish Logo in Disco Style

Would you like to create stylish logo in disco style? Then this tutorial special for you.

So, lets start! First of all create a new document sized 50×300 pixels. Select some appropriate colors, for example colors of #6a0037, #3f000c and drag a linear gradient.

Ok, now create a new layer, after that use the Polygonal Lasso Tool to make selection as on picture below and fill it with white color:

Remove the selection with Ctrl+D and apply Filter > Blur > Gaussian Blur with next presets:

See the result:

Ok, now apply another one Filter > Blur > Motion Blur with similar settings to these:

And now change layer mode to Overlay:

Get out the Horizontal Type Tool and write out something like ‘Disc.’ Don’t add letter ‘o’, we’ll add it later.

In the above image I’ve used AG_Futura (150 pt, Crisp) as my font of choice. Actually, it is commercial, but if you don’t have it, you can easily find a good alternative. Ok, after that apply Drop Shadow and Gradient Overlay layer styles to this layer:

Now we have something like this:

The next step what we need to do is to add some glare to our word. Select the Elliptical Marquee Tool and create selection as shown on the picture below. Then activate the Gradient Tool and a white to transparent gradient, create a new layer and fill in the work area as below.

Ok, now select the text (Ctrl + left click the Layer Thumbnail in the Layers Palette) and press Ctrl+Shift+I to invert selection, after that press Delete to clear inverted selected area.

Remove the selection with Ctrl+D and change layer opacyty to 60%.

Ok, it is time to add letter ‘o.’ I think it will be better way to add disco sphere instead of this letter. First of all we should find some disc shpere clipart. Go to Google images and find some proper picture of it or feel free to use mine. Then bring this picture to our canvas an resize it. Now our logo should look like as below:

After that add the Drop Shadow layer style to our layer:

See the result below:

Ok, it is time to add glares from the disco sphere on the floor. First of all create a new layer, then select the Elliptical Marquee Tool to make selection as on picture below, then fill it with white color:

Remove the selection with Ctrl+D and then press Ctrl+T to transform this white circle:

Duplicate this circle with Ctrl+J and press Ctrl+T to transform it again. Move it a little bit right:

Do the same things a couple of times to get the big circle from little circles as on picture below:

Merge all circles in one layer and press Ctrl+J to duplicate layer. Then move it as shown on my picture below and resize it a little bit with Ctrl+T.

Make the same things three more times.

Ok, now merge all circles in one layer again and change layer mode for this layer to Overlay. After tha move this layer under the layer with disco sphere.

Using the Polygonal Lasso Tool (Feather: 3 px) create selection as below and duplicate selecred area with Ctrl+J:

Apply Color Overlay layer style to the new layer:

See the difference now:

Ok, to finish off the logo I think we should add a little bit more text. Get out the Horizontal Type Tool and write out something like ‘Style’ using color of #fe7390:

Duplicate this layer with Ctrl+J and move it above the text. Change color of the second word to the #e71866:

Duplicate this layer one more time and move the new layer above current text again. Change color of the word to #87023d:

We are almost done with this tutorial. Time to add a couple of small stars on the logo. Create a new layer, then select the Polygonal Lasso Tool and create selection as on picture below, after that fill it with white color:

Remove the selection with Ctrl+D, after that duplicate layer with Ctrl+J and miniaturize star with Ctrl+T:

Merge two of these layers in one, miniaturize it again and duplicate a couple of times:

Ok, we are done with this tutorial. I am happy with the result, hope you to!