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.

1. Document / Settings

Firstly, start by making a new document, I used a size of 400 x 400 pixels for this tutorial. Now create a background that will suit the graphic we’re going to make.

Firstly, I added in a blue gradient of which the colors were #2084b1 and #193a4d, I then created a new layer and applied Filter > Render > Clouds, lastly I then changed the layer mode for the clouds layer to Soft Light.

Merge your two background layers together, then apply Filter > Noise > Add Noise with an amount of about 1.0-2.5, this gives it a nice, subtle effect.

Lastly, you can blend in a render / cutout from one of your favorite games.

I used a cutout from the game Rainbow 6. This render is by the lovely Serenity, and you can download it from here. For the blending it in part: I resized the render, changed the layer mode to Soft Light, lowered the opacity, and also erased a few corners with a large, soft brush.

This is what I came up with:

Your background is done!

2. Creating the Heading Shape

Find and get out the Rounded Rectangle Tool. If you’re unable to find it, you can see it in this image. Use similar settings as these shown here:

Create a new layer then draw a rounded rectangle on the document. This is how my shape came out:

Please take note that the color you use for your heading doesn’t matter at this time.

3. Applying Layer Styles

Right-click the layer you just created and go into the Blending Options. Click and apply the following settings/layer styles:

1. Inner Shadow
2. Outer Glow
3. Bevel and Emboss, Texture
4. Gradient Overlay
5. Pattern Overlay
   To create the pattern, first download this image, open it in Photoshop, (select all) then go to Edit > Define Pattern.

Now you should have an outcome similar (pretty much the same) to this:

Pretty sweet so far!

Next thing to do is create a new layer then make a selection around the bar (hold ctrl and click the layer thumbnail).

Now you’ve got the bar selected, on the new layer do a little bit of brushing in the corners, I only used brushes that come with Photoshop. The main color I used for this brushing was white (#ffffff), but also some orange from the bar.

That brushing makes it look like the texture (warning tape) has been eroded at the corners. Now, lastly, add in welcome text on the left.

The font I’ve used in the above screenshot is called kroeger 05_53, you can feel free to download it from here. I also used the following layer styles on my text layer:

1. Outer Glow
2. Gradient Overlay

4. Logo Area Shape

On a new layer, create another rounded rectangle about the same width, but about 4 times the height, you can use any color as before — see my shape below.

Into the blending options again – apply the following layer styles to your new rounded rectangle layer:

1. Outer Glow
2. Bevel and Emboss
3. Gradient Overlay

And now you should now have something like this:

The last thing you need to do is add in text inside of the larger box. Get the text tool out and write something.

The font I used above is called Impact, it should come with Windows. After you’ve written out your text, apply the following layer styles:

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

Mission Accomplished

And that’s pretty much it, a nice gaming-style header graphic! I hope you enjoyed this tutorial, and remember, get creative!

Thanks for reading this tutorial, I hope you enjoyed it! If you need the PSD for help or anything like that (but not stealing!), you can download it from here!

We’ll be learning how to design these glossy “Web 2.0″ badges in Photoshop. We’ll start off making the shape then styling it using layer styles and additional separate glossy layers.

1. Set up a New Document

Start by creating a new document in Photoshop; for this tutorial I’m going to be using a 400 x 400 document. After you’ve created a new document, design a nice background for your canvas; I used a light blue gradient and some simple white scan lines.

2. Making the Shape

Now let’s make the shape of the badge – in your Photoshop Tools Menu, find and get the Polygon Tool (U).

Be sure that your settings are set up correctly near the top of Photoshop:

Click the drop down arrow that is highlighted in the above image and use these settings:

Now you’re pretty much set to create the shape, although you might want to change some of the settings so that it will be more suited to your tastes. Create a new layer (layer > new > layer) then drag your shape onto the canvas. The color I’ve used for my shape is #4fb2ea.

You should have a badge something like this one:

Well, that’s how to make the basic shape, now move onto the next step to make it look a little nicer

3. Slight Effect (Layer Styles)

In your layers palette, you’ll want to right-click your badge layer and go into the Blending Options. Click and apply the following layer styles/settings:

1. Outer Glow
2. Inner Glow
3. Gradient Overlay

You should now have something like this:

Looking a fair bit better now. Next thing to do is add some gloss and highlights!

4. Highlights

Create a new layer then select the badge pixels by holding ctrl and clicking the layer thumbnail (in the layer’s palette).

Contract your newly-made selection by about 2 pixels by going to select > modify > contract and using an input that you think fits.

Again in a new layer, fill your selection with white (#ffffff), press the down and left arrow keys once each, finally press the delete key on your keyboard then you should be left with something like this:

Next, change the layer mode for this layer to Overlay and lower the opacity if you think necessary. I lowered mine to around 70%.

Make the selection around the badge layer again and contract the selection again by 2 pixels (or whatever amount you used before), on another new layer make a White to Transparent gradient from the top left to the middle area like so:

Find and get out the Polygonal Lasso Tool and use it to make a diagonal selection from the bottom left to the top right somewhere, then delete your selection like shown below:

Change the layer mode for this layer to either Soft Light or Overlay, and lower the opacity to around 30-70%. Now you should have a nice result like this:

5. Finalizing

Looking much nicer now! Finally, you may want to add some text onto your badge, such as ‘Beta’ as the joke goes

I simply added the word “Web 2.0″ onto my badge, using a simple font such as Arial. If you use white as your text color, you may want to add a blue drop shadow to your text layer.

Complete + PSD

Thanks very much for reading this tutorial! I hope you enjoyed it. If you need any help, you can of course download the PSD file from this tutorial from here: Designing Glossy “Web 2.0″ Badges PSD (93kb)

Or feel free to leave a comment.

1. Starting the Canvas

Start by creating a new document in Photoshop. I’ve used the banner size 468×60 pixels for this tutorial, but you might want to make it slightly larger than the banner itself, so that you can see what you’re doing better.

After creating a new document, fill the background with a dark (or light) gradient of your choice. It really depends on what you’re making this banner for, if it’s for your site or if it’s just for this tutorial. I filled the background with a dark gradient consisting of #1E1E1F and #000000.

2. Adding Background Details

Now to add a few nice details to the background. Start by filling a new layer with a color of your choice (in this case, I used a bright blue – #01C1E7) now create a path using the Pen Tool as shown in the below image:

After making your curvy path, turn it into a selection by right-clicking on the canvas and going to Make Selection…, after doing this, press delete, now your document should look like this:

Looking alright so far, but to give it a nicer look – change the layer mode for your blue layer to Color Dodge and lower the opacity if necessary.

To finish off with the background details, I added a border and also blended an image into the blue area.

You can create this style border by following these few simple steps:

1. Create a new layer – Select al.l (ctrl+a)
2. When you’re on your new layer, right-click your selection and go to Stroke.
3. In stroke options, use 2 pixels and white as your color.
4. Again, go to Stroke, this time use black as the color and 1 pixel.
5. Change layer mode to Soft Light and lower the opacity if necessary.

So you should be left with a pretty nice, well-blended border after that. Now, you can blend in a picture into the background (it’s best to blend a picture into that background that actually relates to your business/website)

3. Logo / Text

Now for the most important part, adding your websites name, description & URL. Start by getting the Horizontal Type Tool and writing out your website name on the canvas.

The font I’ve used in the above image is called Myriad, and should come with Windows (it did with mine at least)
The font size I’ve used with the first line of text is 24 pt and the bottom line 12 pt. After finishing up with writing your text, you can apply the following layer styles to your text to make it stand out more:

1. Drop Shadow
2. Gradient Overlay

And now your text should look something like this:

Well that’s pretty much it for this part, continue onto the next step.

4. URL Container

An essential to website banners is that the URL be in the banner somewhere, just in case people prefer writing the URL into their browser rather than clicking the banner. So I designed a little URL container in the bottom right of the banner.

To start off, find and get out the Rounded Rectangle Tool and make a rounded box on the canvas (in a new layer) After doing this, cut the bottom of the box off and move it into place (bottom right corner).

(you’ll have to adjust the size of the box according to the length of your website URL.)
After I made my rectangle box, I applied the following layer styles, just for the sake of nice little details:

1. Inner Shadow
2. Outer Glow
3. Gradient Overlay

Now you should be left with something like this:

You probably should have added your URL before finishing off, but anyway.

5. Finish Details

I finished off by adding a few minor details, such as a sort of shiny reflection at the top of the banner, and some thumbnails (to represent what the website is about)

If you need some inspiration for designing your advert banner, you can checkout either of these two websites:

1. BannersMall
2. 20 Dollar Banners

Well, that’s about all for this tutorial, sorry! I hope you enjoyed it, at least a little bit!
If you would like to download the PSD file for the advertisement banner made in this tutorial, then you can of course do so from here: Download Advertisement Banner PSD