In this Photoshop tutorial I would like to show you creative way how to displace the text and get an interesting effect on it.

To start create a new document sized 1000×500 pixels and fill it with color of #f4f4f4.

After that add some dark line to divide the floor from the wall. Get out the Elliptical Marquee Tool and create selection as shown on the picture which you can see below. Then fill this selected area with black to transparent gradient.

Remove selection with Ctrl+D and apply Filter > Blur > Gaussian Blur with similar settings to these:

The result should look like this:

Move to the next step. Select Horizontal Type Tool to write out the text on the middle of canvas on whish we will demonstrate displaced effect.

In the above image I’ve used Arial Black (250 pt, Crisp) as my font of choice. Then apply Bevel and Emboss and Gradient Overlay layer styles to this layer.

The result should be next:

Create a new one layer above and merge it with text layer to get all the styles in one layer. After that we need to add some shadow under the letters. Create a new one layer under the current and make elliptical selection with Elliptical Marquee Tool. Fill selected area with black color.

Remove selection with Ctrl+D and press Ctrl+F to apply the previous filter effect to this layer.

Then apply Filter > Blur > Motion Blur with next presets:

The result should be next:

Duplicate this layer three of times with Ctrl+J to add the shadow under each letter.

Ok, after that go to the text layer and start creating displace effect. Use the Polygonal Lasso Tool to create selection as you can see on the picture below.

Press Ctrl+Shift+J to cut selected area on the new layer. Use Move Tool to move a new layer a little bit.

Make the same things a few times more.

Looks interesting, isn’t it? To finish off the effect I would like to add a robot that moves the text. The picture of robot you can download from here. Also feel free to use your own pictures. So, open up the picture and copy it to our main canvas with text. Then reduce the picture a little bit.

To finish off the tutorial we should add the shadow under robots’ leg. Create a new one layer under the current. Then use the Polygonal Lasso Tool to create selection which you can see on the picture below. After that fill this selection with black color.

Deselect chosen area with Ctrl+D and blur the shadow with Blur Tool.

Then use the Smudge Tool (Brush: 10px, Mode: Normal: Strength: 33%) to bring the shadow realistic view.

Add the shadow under second leg in the same way.

Ok, we are done for now! We get creative displaced text effect. I am happy with the result, hope you to!

Here I’m going to show you a few ways how to create interesting patterns for backgrounds.

Ok, starting by creating a new document, sized 300×300 pixels and fill it with any color, for example black.

After that start with creating your pattern. Select the Custom Shape Tool and select one of standard shapes on Photoshop gallery.

Use white color for creating shape.

Rasterize this shape with Layer > Rasterize > Shape. After that get out the Rectangular Marquee Tool to create selection as on my picture below. You have to select ¼ part of flower, this proportion is important for our future pattern.

Then invert selection with Select > Inverse and press Delete to clear selected area.

Ok, now remove selection with Select > Deselect and select Custom Shape Tool to add one more custom shape, which you can see below:

Add shape to the canvas.

Press Ctrl+T and rotate this shape about 45 degrees and move it a little bit below. Hold the Shift button when rotating the shape to get the exact angle of rotating object.

Merge two of these layers together with Ctrl+E and duplicate new received layer with Ctrl+J. Use Edit > Transform > Flip Horizontal to flip new layer horizontal and move it right.

Ok, merge current layer with previous again and duplicate new layer again. Use Edit > Transform > Flip Vertical to flip duplicated layer vertical and move it below. Merge two of these layers together.

Press Ctrl+T to reduce the size of double.

Ok, now we have ready fragment for pattern. After that I will show you two ways of creating pattern, using this fragment.
The first one way. Press Ctrl+A to select all on our canvas and press Ctrl+C to copy selected area. Ok, now use Ctrl+N to create a new document, but before you press Enter, you should add two pixels more to width and height.

Fill created document with color of #003e16 and after that press Ctrl+V to paste copied fragment to this document.

Then mess with the layer mode & opacity/fill. I tried Overlay with opacity of 40%. Then apply Outer Glow layer style to this layer.

You can see the result below:

Apply Edit > Define Pattern to save this picture as pattern and close current document without saving. After that you can create a document of any size and fill it with our pattern using the Paint Bucket Tool.

The second one way. Go back to our main canvas and copy current fragment three more times and arrange it as shown below:

Merge all the layers with fragments in one layer. Then use the Rectangular Marquee Tool to create selection as on my picture below. Pay your attention that the boundaries of your selection must be located directly between the centers of flowers.

Press Ctrl+C to copy selected area. Then create a new document and fill it with color of #003e16 again. Press Ctrl+V to paste copied fragment here.

Set up opacity to 40% again and change layer mode to Overlay. After that apply Outer Glow layer style for this layer.

See the result below:

Ok, apply Edit > Define Pattern again to save this picture as pattern and close current document without saving. After that you can create a document of any size and fill it with our pattern using the Paint Bucket Tool. The result should look as mine:

Ok, we are done for this tutorial. Now we have interesting pattern. Feel free to experiment and you will have more and more creative patterns for backgrounds! Good luck in experiments!

Here I’m going to show you how to make the website original design where you can put your portfolio.

Firstly, you’ll have to create a new document in which you can make this web site. For this tutorial I’m going to be using a size of 1000×700 pixels with the default resolution (DPI) of 72. Then you need to find the pattern to add on the background. I found this one. Also feel free to use your own patterns. Open up the file and apply Edit > Define Pattern to save this picture as pattern, after that go back to our main document and use Paint Bucket Tool (just use Pattern mode instead of Foreground).

Then press Ctrl+Shift+E to desaturate pattern.

Apply Color Overlay layer style to the background layer.

See the result below:

Ok, we are done with background. Move to the next step. I would like to create the window for content. Create a new layer, then select the Rectangular Marquee Tool to make selection as on my picture below and fill it with color of #f4f4f4.

Remove selection with Ctrl+D. Then I would bring it paper view. Use the Elliptical Marquee Tool make round selection as on my picture below and press Delete to clear selected area.

Hold Shift button and press Right Arrow button two times to move selected area 20 pixels right and press Delete again. Do the same things until u finish white paper area.

Remove selection with Ctrl+D and move to the next step. Time to divide worksheet area on three main parts: Web Sites, Logotypes and Icons. Select the Line Tool and line weight about 4 pixels, then draw out the line with black color. After that set up opacity about 15% for this layer.

Add two lines more.

Time to add labels. How we can do this? Let me show you. Create a new layer and create the selection using Rectangular Marquee Tool. Fill selected area with color of #e04e21.

Then select the Polygonal Lasso Tool to create another one selection as was shown on my picture bellow.

Then use the Burn Tool (Brush: 45 px, Range: Midtones, Exposure: 30%) to add a dark spots to the selected label area.

Then use the Dodge Tool (Brush: 45 px, Range: Midtones, Exposure: 30%) to bring this label volume form.

After that invert the selection with Ctrl+Shift+I and make dodge work a little bit more.

Remove selection with Ctrl+D and press Ctrl+T to rotate the label and then apply Edit > Transform > Warp to transform it a little bit.

Ok, now time to add the shadow to the label. Apply Drop Shadow layer style to current layer style:

Then right-click on the layer thumbnails panel and select Create Layer.

Go to the layer under and apply Edit > Transform > Distort to transform it a little:

Then I would like to add a title. Select the Horizontal Type Tool and write out the name of the label.

I used Bernhard Modern font as my font choice. Now rotate the text a little using Ctrl+T.

First label is ready. Add two more labels in the same way.

Ok, move to the next step. We need to add the content. I went to Google Images and found some picture as website example there. Feel free to download it from here . Open up the picture and crop it with Crop Tool:

Then bring it to our main canvas and reduce a little bit after.

Apply Inner Glow layer style to this layer.

The result should be next:

Now I need to add the name of project with a short description. Select the Horizontal Type Tool again and write out some text in few lines using color of #45454 and Tahoma font.

Add more content in the same way. Logo picture you can download from here and icon picture you can download from here.

Ok, after that move to the next step. I would bring the logo to our portfolio. Select the Horizontal Type Tool gain and write out the text using the color of #b2d763 and Bernhard Modern font again.

After that apply Drop Shadow and Gradient Overlay layer styles to the text layer.

You can see the result on the picture below:

And the last one th9ng that we need to add is contact text on the bottom of website.

I used Tahoma font again and selected text colors as #f4f4f4 and #d5ea9f. Ok, we are dome with creating website for our portfolio. Hope you have the same good result as me!

Hungry for the new design elements for your website? I have a new one for you. Hope it will be useful in your new design.

Let’s begin! Make a new document with the resolution 500×300 for this tutorial and fill this canvas with white color. Then select the Rounded Rectangle Tool (Radius: 30 px) and draw the next shape using the color of #d61d23.

After that apply following layer styles to this layer:
• Inner Shadow
• Gradient Overlay

Your button should look as mine:

Now, time to bring reflection to the button. Duplicate current layer using Ctrl+J, then create a new one and flip it with copied layer to get all layer styles in one layer. After that flip it vertical with Edit > Transform > Flip Vertical as on my picture below:

To make reflection more transparent at the bottom of the picture apply Quick Mask Mode with gradient as below:

Then go back to Standard Mode. Now we have some selected area. Press Delete to clear image into the selected area.

Remove selection with Ctrl+D. Go to the next step. I would like to add some glare to the button. To do this select the Rounded Rectangle Tool (Radius: 80 px) and create a new one form using white color.

Rasterize this layer with Layer > Rasterize > Shape. After that apply Quick Mask Mode one more time and fill the next gradient:

Go back to Standard Mode and we received selected area again. Press Delete to clear selected part of image.

Deselect chosen area with Ctrl+D and change layer mode to Overlay for current layer.

We are done with the button. Now, move to the next step. I think it will looks better when we will put some design elements on it. To do this get out the Ellipse Tool and create rounded shape as on my picture below using white color:

After that apply such Blending Options to this layer:
• Inner Shadow
• Inner Glow
• Gradient Overlay
• Stroke

See the result below:

Time to bring some picture to our rounded design element. Find some picture of the Earth on the Google Images or use mine or find it somewhere. Open it and reduce a little bit, then place the picture as shown below.

Good, then make it black and white using Image > Adjustments > Desaturate (Ctrl+Shift+U) and change layer mode to Overlay for this layer:

Select the Sharpen Tool (Brush: 100 px, Mode: Normal, Strength: 40%) to make this fragment more sharpen.

And the last one thing that we need to do. To finish off the tutorial let’s add some text. Get out the Horizontal Type Tool and write out something with white color like on my picture below.

In the above image I’ve used Segoe UI as my font of choice, and I’ve used white color. Actually, it is commercial font, but if you don’t have it, you can easily find a good alternative, for example, Arial Black. After that apply the following layer style to this layer:
• Drop Shadow

Now, we have something like this.

Great! Our work is done! Enjoy your own cool globe button. Also you can change it color.

Now I will show you how to create a stylish and effective banner which you may use on your website.

First of all we need to create a new document with the size of canvas 500×300 pixels and fill it with color of #2d164d.

Then use the Rounded Rectangle Tool and draw the form bellow with any color.

Then we use following layer styles for this layer: Gradient Overlay and Stroke:

And we get this:

Then create a new layer over and merge it with the previous one to get all effects in one layer. Now we apply the Drop Shadow layer style to received layer:

Get the effect which you may see at the picture bellow:

Let’s add some volume to our banner. In order to do this we use the Dodge Tool (130 px, Range: Midtones, Exposure: 25%.) and make darkening on left and right side.

After that we load selection with Select > Load Selection, then create a new layer and use the Gradient Tool to fill selected part of the layer with the gradient from white to transparent at the top and the bottom of layer.

Then remove selection with Ctrl+D and then change layer mode to Overlay.

And the last step for design of entire banner. We need to add some glare. In order for this we create a selection across the banner’s form (Ctrl+left click the first button Layer Thumbnail in the Layers Palette). The use the Elliptical Marque Tool, hold down Alt and cut the piece of the selected area. You have to get the same result as on picture bellow.

After that we use the Gradient Tool and fill the gradient from white to transparent on the new layer.

Remove the selection by using Ctrl+D and change the layer mode to Overlay. Then apply Drop Shadow layer style for current layer:

Get this one effect:

Now we may add some information to our banner. In the beginning we may bring the tracery to our banner. For these purposes we may use these brushes. Load selection of banner again (Ctrl+left click the first button Layer Thumbnail in the Layers Palette), create a new one layer and put the print of brush into the selected area.

Remove this selection with Ctrl+D and change the layer mode to Overlay, then set up opacity to 30%.

Now we adjust the sharpness by using Sharpen Tool (Brush: 200px, Mode: Normal, Strength:50%).

Now, I would like to add a picture. Let’s use Google Pictures or sites of stock clip-arts. I found this one. Open image, separate it from background by using Polygonal Lasso Tool and copy it to our main canvas, make it a little bit smaller and rotate by using Ctrl+T.

After that we’re going to highlight the flower. For this effect apply the Outer Glow layer style for current layer:

Get this effect now:

Let’s create a new layer and merge it with the previous one to get all effects in one layer. Now select the banner’s form (Ctrl+left click the first button Layer Thumbnail in the Layers Palette). After that invert the selection using keys Ctrl+Shift+I and press Delete to delete everything abroad the banner.

Now, remove selection with Ctrl+D. It’s time to add the text information. Use the Horizontal Type Tool and type the string ‘New Spa Saloon’ with white color.

Font we’ve used above is Avant Garde Gothic – commercial font. In this way you may use any other font if you don’t have this one. Now apply to this text layer Drop Shadow layer style:

Now we get something like this one:

After that, type one more string like ‘Click here to enter’ underneath with the color of #80bb00 using the same style of layer.

And the last thing what we need to do is add the name. Type the word ‘AQUA’ using white color.

Apply the following Blending Options for this text layer: Drop Shadow and Outer Glow:

We should get the result of applying layer styles at the picture bellow.

At this point our lesson is finished. I hope it was useful and interesting for you, do not feel shy to make experiments and you shall get great results. Good luck!

In this easy, step-by-step tutorial I’m going to show you how to design an interesting professional menu button by using some simple filters, for example Gaussian Blur & Motion Blur.

So, the first step what you need to do is create a new document sized 500×300 pixels and fill the background with a gradient. For this select some appropriate colors, for example colors of #000000 and #1b2c3e.

Now, select the Rounded Rectangle Tool (Radius: 10 px) and draw out your button onto the canvas in whatever color you want (it doesn’t matter what color you use).

Then rasterize this layer with Layer > Rasterize > Shape and apply the following layer styles:

• Drop Shadow
• Gradient Overlay

Your button should look like this:

Now, start by making a selection around your button (Select > Load Selection) then contract your selection by about 1 px (Select > Modify > Contract) now you should be left with a selection like this one below. After that create a new layer and fill it with color of #1b1b1d. Then remove selection with Ctrl+D.

Time to add shining inside the button. Create a new one layer, then select the Elliptical Marquee Tool and create selection as on picture below. Fill it with blue color (#479ea5):

Deselect chosen area with Ctrl+D and then apply Filter > Blur > Gaussian Blur with next presets:

Now we have a blurred spot like on picture below:

After that apply Filter > Blur > Motion Blur with similar settings to these:

Look at your picture now:

Now, use the Polygonal Lasso Tool to create a new one selection similar to this and fill it with white color.

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

See the difference now:

Ok, the next step: apply another one Filter > Blur > Motion Blur with next settings:

Then create a new one selection with Rectangular Marquee Tool:

After that invert selection with Ctrl+Shift+I and press Delete to clear selected area. Remove selection with Ctrl+D.

Now, I would like to add texture to the button. Create a new document sized 3×3 px, then select the Pencil Tool and draw a black grid like mine below:

After that use Edit > Define Pattern to save this picture as pattern. Then close this document without savings and go back to your main document. Make a new selection with Rectangular Marquee Tool and fill it with white color.

Remove the selection with Ctrl+D and apply the following blending options:

• Pattern Overlay 

Set fill opacity to 7% up and you will see the result.

Good designed button, but not finished yet. Now you need to create a new layer, then use the Polygonal Lasso Tool to create selection like on picture below and fill it with white color.

Remove the selection with Ctrl+D and apply again Filter > Blur > Motion Blur with similar settings to these:

See the result:

Ok, we are almost done with button design. Now, I think we should add some design elements to our button. Ok, create a new layer, after that use the Pencil Tool to make a couple of dots using color of #e2dedf like on picture below:

Duplicate layer with Ctrl+J and apply Filter > Blur > Motion Blur to the copied layer:

Now we have something like this:

Now create a new one layer again and draw three lines by Pencil Tool using color of #479ea5:

Create one more layers and make a selection with Rectangular Marquee Tool and fill it with the same color.

Remove the selection with Ctrl+D, then set opacity up to 30% and merge this layer with previous. After that apply Filter > Blur > Motion Blur with similar settings to these:

Now we have something like on picture below:

Ok, select the button (Ctrl+left click the first button Layer Thumbnail in the Layers Palette), then create a new layer and fill it with black color.

Deselect chosen area with Ctrl+D and apply Filter > Noise > Add Noise:

Now, time to mess with some layer modes. For this layer I used Screen with 60% opacity.

Now it’s time to add your text to the button! Start by getting out the Horizontal Type Tool, then write out your text using color of #70ffff:

The font I’ve used above is called Electrofied (14 pt, Crisp). And that’s pretty much it. I also created a little menu from the buttons. You also can use your own styles and presets. Good luck!

In this Photoshop tutorial we’ll be making those cool supermarket-style badges, then we’ll be turning them into subscribe buttons for your website, a must-have for any blog!

1. Background

Well, the background obviously isn’t very important, but we’ll make something nice and simple for our badges anyway. Otherwise you could open up a blog template you have been working on, so you can implement the badge there.

I’ll be using a document size of 800 x 600 pixels for this, pretty small easy to work with size. After you’ve made a new document, fill the background with a dark color. In this case I used a dark brown (#2e1f13).

OK, after you’ve got the background color set, you might be happy with that, or you can find a nice wood texture and put it on the background as well.

OK, so if you want some nice wooden board textures, you should check out CG Textures. Now, if you’ve got a texture, copy it onto the canvas and resize it. After this, lower the opacity and mess with the layer modes to blend it in with the color a little more.

You may need to repeat this step a few times using different layer modes and opacities.

2. Badge Base

Let’s create the base of our badge now. Firstly, find and get out the elliptical marquee tool, then make a selection in the middle-area of your canvas. Create a new layer, then fill your selection with an appropriate color.

Alright, now you have the shape, we need to cut away a small corner and rotate it. To do this, first get out the polygonal lasso tool, then select a corner of your shape like so:

Right-click your selection and go to layer via cut, this will cut the selected pixels and place them in a new layer. Rotate your peel effect layer (edit > transform > rotate 180) then you may need to move it slightly so it’s exactly on the corner.

Lastly, fill your little shape with white or another very light color, so it contrasts well against the base layer.

Now we’ve got a cool peeling effect. I’m hoping I’ve been explaining thoroughly enough so far!

3. Effects (Layer Styles)

Now, how about we give the badge a little more depth? What we want to do is apply a Gradient Overlay layer style for each of our layers, so right-click your layer and go into the Blending Options.

• Gradient Overlay (base badge)
• Gradient Overlay (white peeling)

Note: You may have to move the gradient around a little bit, do this by dragging your mouse around below the blending options box.

Much nicer.

4. Add Text

Now let’s add some text. Get out the horizontal type tool (just the regular one) and write out something like ‘Subscribe Today!’ on two lines.

Note: The font used above is called Delicious, and it’s a free font that you can download from here.

Alright, now you’ve got some nice text done, you’ll want to rotate and situate it on top of your badge. While rotating (ctrl+t) you may want to size it down so it’s more of a snug fit.

Alright, looking nice! Lastly to make the text stand out a little more, you should add a slight Drop Shadow layer style.

Additional

To finish off, you should merge all of your badge layers together then size the whole thing down to about 25% of it’s original size (depending on what size you made the original).

You should also try different things with the badges, such as adding a grungy layer mask, or going with the traditional style of the RSS icon.

Thanks for reading everyone, if you have a question, a suggestion or a comment, please leave a comment below using the form, or send me an email.

PSD file

As usual you can of course download the PSD file from this tutorial, it includes all of the layers that you might need. And as usual, you should only use this PSD file for learning purposes, you’d probably be best off making your own badge by using the tutorial!

Download PSD (4.9mb) Right-click the link and click “save target as…” or “save link as…”

Subscribe

If you enjoyed this tutorial, then you may be interested in subscribing to PhotoshopStar to get updates via email or feed reader!

1. Grungy Background Creation

I know this navigation set will most likely be going on a clan website design or something like that, but I really love designing really cool, grungy backgrounds for my tutorials anyway, so if you would like to learn how to design the background I’ve shown in the image below, continue with this step, if not you can just skip to the next step.

Start by creating a new document in Photoshop – I used a small document size of 400 x 400 pixels (as usual), but you may want to use something a bit bigger, as it’s always a good thing having plenty of space to work with. After creating your new document, find and get out the Gradient Tool, set the gradient type to Radial and drag a gradient in the background.

If you want your background to come out the same as mine shown above, then you’ll want to change your foreground and background colors to the ones I’ve shown above!

After making your gradient apply Filter > Noise > Add Noise with a fairly low amount.

Try some other Filter effects to give the background a nice look. The filters under the Artistic and Brush Strokes categories are usually pretty cool. Well, we’re done with the main background, now it’s time to add some more details – textures and grunge brushing!

So, are you more interesting in adding texture to your background, or just grunge brushing hanging off of the corners? The quickest is probably just putting a texture over the top and changing the layer modes/opacities, so let’s give that a go. Start by downloading this texture of moss on rocks, then copying it into your document.

After pasting the texture on your canvas, change the layer mode to something like Multiply, Overlay or Soft Light, I personally used Multiply. After changing the layer mode, lower the opacity to whatever looks suitable to you. (I used 20%)

Personally, I prefer the random brushing, so I simply hid the texture layer and did a little bit of brushing. I’ve got a small page dedicated to free Photoshop brush resources, or you can use one of the following:

1. Brusheezy
2. MisprintedType
3. DeviantART
4. PS Brushes

Download some free brushes and install them, then do a little bit of brushing in the corners, remember to mess around with different layer modes and opacities.

The main brushes that were used there were:

1. Large Retro Brushes (background)
2. Random Grunge Brushes (from Misprinted Type)

To get a good outcome, you’ll want to use different colors for your brushing (the colors used in the background gradient as well as black and white) and also play around with the layer modes, this is very important for a good outcome. And remember, the download link for the PSD file is available at the bottom of this tutorial, so don’t get distressed because I’m not giving specific details!

After finishing with your brushing, there are some other things you can add to the background, for example, a cutout render from the game that this design is for, in this case I used a cutout render of the MasterChief from Halo After pasting the render on your background, change the layer mode to something like Color Dodge and lower the opacity if you feel it needs it.

Looks pretty nice now, don’t you think?

You can finish the background off by flattening the image, duplicating the remaining layer, applying some layer styles then messing with the layer modes, this gives the whole background a bit of a nicer contrast, I think

Looks to me like the background creation was the highlight of this tutorial! Anyway, continue on with the tutorial, if you want anyway!

2. Creating the Buttons

As I’ve said once before, there’s two ways of making rounded buttons… well, three. The first way (and the worst, but easiest) is making a square selection then using the smooth feature to smooth out the selection (Select > Modify > Smooth) this will make the corners of your button very sharp though…

The second and most common way of making rounded buttons is using the Rounded Rectangle Tool, where you just set up the settings then drag a button onto the canvas, which is what you should do, but make sure you get it the size you want, as you’ll have to chop it up and move it around if you want to resize it later on.

The third way (and the way I usually use) is using Photoshop channels and Gaussian Blur to make rounded edges. You can view a few tutorials on how to use this method below:

1. Interface Basics Tutorial from ethicsdesign
2. Smooth out Jaggies from Heatherowe

So, basically, just make a rounded button on your canvas (in a new layer) using any method you know. This is what I came up with:

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

1. Inner Shadow
2. Gradient Overlay
3. Pattern Overlay (for the pattern overlay, you need to create a simple carbon fiber texture, you can find two good tutorials on how to make carbon fiber here, and here, or download my pattern from here.)

And now I’ve got this after applying the layer styles:

Looks pretty nice, if you can’t see it very well though, up the opacity for the Pattern Overlay.

Now it’s time to duplicate the buttons. Right-click the layer and click ‘Duplicate Layer…’ then move the button downwards until there’s about 2 pixels spacing between them, repeat this as many times as you want until you have enough buttons. I ended up with 5 buttons:

Pretty much done for this part, except I added in a container area for the buttons, using the color #3f5c7a and layer mode Multiply and opacity 50%.

3. Button Details – Glossy Shine

Start by selecting all of your buttons, do this by holding ctrl then clicking the first button layer, then you’ll have to hold ctrl and shift and click all of the other button layers.

After selecting your buttons, contract the selection by about 2 pixels, you can do this by going to Select > Modify > Contract in the Photoshop menus. Good, now, create a new layer and draw a white to transparent gradient from the left of the selection to the middle area, like the one shown below:

Going good so far, now, make a nice, curbed path using the Pen Tool on top of the gradient area, like mine shown below:

After completing your path, turn it into a selection by right-clicking the path and going to Make Selection, now press delete so that it deletes the gradient in the area of your selection.

To finish this side off, add a layer mask and drag a black gradient from the top of the buttons down to the bottom, so you get a result like this one:

Looking good. Now you need to do the other side of the buttons, again, select all of the buttons and contract the selection, then make a white gradient from the right to the left on a new layer.

Again, create a path over the white gradient on the right using the Pen Tool, just copy the shape of mine if you want:

Again, make your path into a selection and press delete to remove the selected area. Finish off by erasing the bottom part of the shine.

Finish off by adding text. Since this is for a clan website, you’ll probably want to use either an eroded, grungy-style font, or a pixel/bitmap font, I ended up using the pixel/bitmap font called ‘PF Ronda Seven,’ which you can download for free from DaFont. Write out your text in white, 8 px.

I also applied this (Drop Shadow) to my each of my navigation text layers.

4. We’re Finished! Download the PSD?

Well, I think we’re just about done! Thanks for reading, and I hope you enjoyed the tutorial! Also, if you needed help with one or more parts of this tutorial, you can feel free to download the end result PSD file below.

(3.7mb)

1. New Document & Settings

Let’s start by creating a new document (as usual), or you can of course open one of your previous documents to work in! I used a small document size of 400 x 150 pixels for this job. After creating your document, you might want to add in a background texture to make it look a bit more interesting. I’ve used this texture of wooden boards for the background, I then changed the color by creating a new layer, filling the layer with dark brown then changing the layer mode to Hard Light (easy, huh?)

2. Create the Badge Shape

Now it’s time to create the shape. Do this by first finding and selecting the Polygon Shape Tool, which you can see in the screenshot below.

After you’ve gotten your tool out you’ll need to edit your settings so that you get a nice badge out of it. I used the following settings:

Now after you’ve got all the settings to your liking, start drawing some badges on your canvas to get one of your liking. Note that the color you use for your shape doesn’t matter at the moment! I ended up with a badge like this:

The next part is detailing the badge!

3. Adding Gold Effect to Badge

To add texture and detail to your badge, you’ll need to apply blending options/layer styles to it. Do this by first right-clicking the layer in the layer’s palette then going into the Blending Options. When you’re in the Blending Options, click and apply the following layer styles/settings:

1. Drop Shadow
2. Bevel and Emboss
3. Bevel and Emboss – Contour
4. Bevel and Emboss – Texture
5. Gradient Overlay
   Please note that the gradient does not need to be perfect or exact, just mess with the settings, colors & positions!

Now your badge should have this gold effect on it:

Looking great now! Onto the next step.

4. Inner Shapes/Details

Now it’s time to add some extra details and text. Start by creating a circle shape in the middle of your badge. I did this by first creating a new layer, then using the Elliptical Marquee Tool I made a selection inside of the badge then filled it with white.

Now, to give this circle some more character, apply a Stroke layer style. For the gradient colors part, simple use a very dark gray color to black. I have this outcome:

This is where you need to get creative and add your own touches – anything you can think of. Now it’s time to add some text.

5. Adding Text

Now we need to finish this tutorial off by adding text to the seal – what’s a guarantee seal/badge without text?!
Start by getting out the Horizontal Type Tool and writing out “100%” in the middle of your badge. I used the font Arial Black with the following advanced type settings:

Now I’ve got this:

Lastly add text such as “Satisfaction” at the top and “Guaranteed” down the bottom. I successfully added the text to the top, but it’s around the wrong way on the bottom.

Now, there’s two ways you can do this, you can either use the Warped Text Feature, or you can write your text out on a path using Photoshop CS+, I wrote my text on a path. Do this by creating a circle path around the same size as your inner circle, then clicking on the path with the type tool selected.
Please note that the font I’ve used here is also Arial Black, but white and a much smaller font size.

I hope that wasn’t explained too crudely for any of you readers! If you desperately need help, please feel free to leave a comment below and I’ll get back to you!

Thanks for reading this tutorial everyone, I hope you enjoyed it! If you need to, you can of course download the PSD file from this tutorial from here: 100% Satisfaction Guaranteed Seal/Badge PSD (1.42mb)

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.

5. Finished

And that’s pretty much it. I also created a red version of the button though.

Thanks for reading, I hope you enjoyed the tutorial. If you want, you can download the PSD file from this tutorial from here: Pro Glossy Button Download.

6. HTML & CSS Markup

I’ve also made the coded version of this rollover button, for those that might be interested.

CSS Code:

#button { margin: 0; padding: 0; }
#button a { display: block; background: url(./button_off.gif) no-repeat; width: 200px; height: 0px !important; height /**/:72px; padding: 72px 0 0 0; overflow: hidden; }
#button a:hover { background: url(./button_on.gif) no-repeat; width: 200px; height: 0px !important; height /**/:72px; padding: 72px 0 0 0; overflow: hidden; }

HTML Code:

<h1 id=”button”><a href=”#” title=”">Button</a></h1>

View the output.