Sunday, June 28, 2009

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)

Glossy Download Button Result Image

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.

Rounded Rectangle Tool in Toolbar

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

Rounded Rectangle Tool Settings

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

Glossy Download Button Result Image

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:

Layer Styles Applied

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:

Contracted Button Selection

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:

White Transparent Gradient

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.

Text Added - Myriad Pro

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.

Drop Shadow on Text

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.

Reflection Added

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

Cog Shape Added

*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! :)

*Bling Bling* Simple Gold Text Effect Photoshop Tutorial

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! :D

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.

Metal Texture Added

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.

Layer Mode and Opacity Edited

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.

Corner Squares Added

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:

Square Inside Erased

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:

Corners Erased Background Cubes

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%.

Grunge Brush Added to Background

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.

Horizontal Type Tool used to add Text

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:

Bebas Font

Accidental Presidency:

Accidental Presidency Font

Boris Black Boxx:

Boris Black Bloxx Font

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:

Layer Styles Applied to Text Layer

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!

*Bling Bling* Simple Gold Text Effect Photoshop Tutorial

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.

*Bling Bling* Simple Gold Text Effect PSD Download
(1.1mb)

Creating Stylish Logo in Disco Style

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.

Stylish Logo in Disco Style 01

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:

Stylish Logo in Disco Style 02

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

Stylish Logo in Disco Style 03

See the result:

Stylish Logo in Disco Style 04

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

Stylish Logo in Disco Style 05

And now change layer mode to Overlay:

Stylish Logo in Disco Style 06

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

Stylish Logo in Disco Style 07

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:

Stylish Logo in Disco Style 08

Stylish Logo in Disco Style 09

Now we have something like this:

Stylish Logo in Disco Style 10

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.

Stylish Logo in Disco Style 11

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.

Stylish Logo in Disco Style 12

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

Stylish Logo in Disco Style 13

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:

Stylish Logo in Disco Style 14

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

Stylish Logo in Disco Style 15

See the result below:

Stylish Logo in Disco Style 16

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:

Stylish Logo in Disco Style 17

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

Stylish Logo in Disco Style 18

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

Stylish Logo in Disco Style 19

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

Stylish Logo in Disco Style 20

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.

Stylish Logo in Disco Style 21

Make the same things three more times.

Stylish Logo in Disco Style 22

Stylish Logo in Disco Style 23

Stylish Logo in Disco Style 24

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.

Stylish Logo in Disco Style 25

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

Stylish Logo in Disco Style 26

Apply Color Overlay layer style to the new layer:

Stylish Logo in Disco Style 27

See the difference now:

Stylish Logo in Disco Style 28

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:

Stylish Logo in Disco Style 29

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

Stylish Logo in Disco Style 30

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

Stylish Logo in Disco Style 31

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:

Stylish Logo in Disco Style 32

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

Stylish Logo in Disco Style 33

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

Stylish Logo in Disco Style 34

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

Stylish Logo in Disco Style 35