Download Source Files
The difficulty in designing web graphics is not so much in the actual execution of the design, but more in the planning of it. At the same time you want the graphic to be eye-catching, yet smooth and small enough so it doesn’t dominate your layout. This tutorial will teach you how to create a graphic that does just that.
Step 1
Let’s start our new document by setting the background color to #303030. Then create a circular shape using the Ellipse tool (U), keep holding Shift while dragging outwards to create a perfect circle. Start dragging from the center of the canvas while holding down Alt. This way the shape is centered around the initial position of your mouse. Fill this shape with #bcbcbc, and name the layer "ring 1."
Step 2
Duplicate the "ring 1" layer. Then use the Free Transform Tool (CMD+T) to re-size the circle slightly, so that it matches the one created previously. I’ve named this layer "ring 2."
CTRL + Click on the "ring 2" layer to create a selection around the smaller circle. Then navigate to select > modify > expand. Then use an expansion radius of 3 pixels. Go back to the "ring 1" layer and hit the Add Layer Mask button in the layer palette, as illustrated below. This cuts out the part that is covered by the "ring 2" shape.
Step 3
Next apply layers styles to both "ring 1" and "ring 2" layers. Follow the instructions in the image below. A gradient overlay is generally used on the ‘outer shell’ of a web graphic to give it depth. It can be used to inset an image when contrasting gradients are used. This is an old technique, which is not necessary for our image. Furthermore, inner glow, when used with dark colors will create a sort of ‘inflated’ look. It gives the illusion of a shadow being present all around the shape, thus causing the shape to rise up from the canvas.
Step 4
Select "ring 2" again, and on a new layer drag down a gradient. Set this layer to hard light.
Step 5
On a new layer, create another ring and apply the same layer style as was used on "ring 2" (see step 3). I called this layer "ring 3." It may seem unorthodox to stack the same elements over and over again, but the layered effect is a time saving technique used to create something complex looking.
Step 6
Duplicate the "ring 3" layer and call it "fill." Our icon is going to be blue, so fill it with #446fce. Then change the layer styles, as shown in the image below.
Step 7
Duplicate the "fill" layer. Then set the fill to 0% (Not the opacity). Then call it "highlight ring," and apply the layer styles shown below.
Step 8
Create a new layer, call it "highlight brush." Then set it to soft light. Next, using a soft white brush gently tap the top of the blue part until it starts to light up.
Step 9
Go to the custom shape tool. Then at the top, select the arrow that I marked in the image below. Drag this arrow out while holding shift for a nice even shape. Rotate it, so that it faces downwards, use free transform (ctrl/cmd + t) to do this. Then duplicate the layer, move it up a bit (you can use the arrow keys), and again use free transform to make it slightly smaller. Hold shift when making the element smaller so that it retains the correct proportions.
Step 10
I merged these two shapes and called the layer "arrows." Next, add the following layer styles to this layer.
Step 11
Time to add the gloss, I called this layer "glossy". First, I drew out a shape. Then I set the opacity of that layer to 30%. Next, I ctrl/cmd + click on the blue layer. Then I select the circle outline. Hit the mask button (like in step 2), and everything outside of the selection is masked away. Use a soft black brush on the mask, and go right along the edges to soften them up. This is a matter of taste though.
Step 12
Lastly, let’s add a shadow on a new layer below all of the other layers we just created. Use a soft black brush and tap in such a way that just the edges of each brush stroke are visible. Our final image is below.
Conclusion
What have we learned in this tutorial? We’ve learned to stack elements upon themselves to create depth. We’ve learned to use layer styles to create depth and 3d shapes. We’ve learned that simple objects can be turned into complex images easily. We’ve learned that simple glossy effects should be used properly. Don’t abuse them. Web 2.0 is much more than just gradients. Enjoy, and thanks for reading!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Arik
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Well this is an extremely sweet icon but I love how you are a horrible teacher.
Although people have fixed your mistakes, you don’t bother fixing them in your tutorial.
The 2nd layer was impossible to find out because you didn’t even MENTION inverting the layer mask which is obviously not common sense.
You talk in different persons (Ex: 1st person, 2nd person) so it gets confusing. You expect us to know what you did exactly. I followed everything you said and my picture is messed up. My circles are wider on the side than top. My arrows are blue instead of white.
“First, I drew out a shape.” – Um you’re supposed to tell US to draw a shape not tell us what you did.
“Next, I ctrl/cmd + click on the blue layer.” – Which freakin one is “the blue” layer. Be a BIT more specific PLEASE???
“Then I select the circle outline.” – The circle outline. Which layer. Which circle. The 1st one. Oh no I know the 2nd one. But wait there’s 3 circles. WHICH FREAKIN ONE
“Hit the mask button (like in step 2), and everything outside of the selection is masked away. Use a soft black brush on the mask, and go right along the edges to soften them up. This is a matter of taste though.” – Just read this part. Does it make any sense to you?
If you don’t know how to make a clear, easy-to-follow tut, don’t make one at all please.
Wow, you sure have a lot of time on your hands. Writing a comprehensive review of what the writer of this tutorial did wrong and say how his tutorial sucks so much. Giving people directions is hard. Try it some times and you would know. Try to be more sensitive next time. ““Hit the mask button (like in step 2), and everything outside of the selection is masked away. Use a soft black brush on the mask, and go right along the edges to soften them up. This is a matter of taste though.” – Just read this part. Does it make any sense to you?” This did make sense to me by the way. I think the problem isn’t this tutorial but with your way of thinking. Thinking like this “If you don’t know how to make a clear, easy-to-follow tut, don’t make one at all please.” is how Hitler thinks.
Um im not sure who design this first… but this icon is being used on the Citrix.com website main page to download Citrix Server app… Did citrix get permission? Or was this tutorial mimicking that button ? Just thought i should let you know….
@arick @all
when is someone
gonna write a tut that doesnt involve lots and lots of layer styles
all photoshop seems to be is layers styles how about some other techniques
cheers
thank you for learn
hey it looks awesome but i cant find the stupid shape in cs4 gimme link
oops i forgot to set to all
Can’t follow in step 1. The writer should follow his instruction once more after the wrinting is completed. Bogus !
There are so many things wrong with this tutorial I don’t even know where to start. You’ve missed out some vital steps and if they are followed it will look nothing like what you have created, which is ashame as it is a very nice looking icon put more thought into tutorials in the future. I wouldn’t recommend this tutorial to anyone, if you’re reading the comments 1st and come across this one, just don’t bother with this, I’m going to attempt to write a fix and will post the link here.
very very nice worked. thanks
really good…
lol @ Davion. If you don’t even know where to start you better learn english first. :) I followed this tut and figured out myself. I came up with exactly the same as the final image.
Thanks Arik for sharing this.
Wow, I just had to reply to this one. Lol @ you. These are comments, not english essays, hun.
And you just proved his point. You used it as a GUIDE not a tutorial. It was named wrong and so it doesn’t carry out the purpose that it says it does.
So, hypocritical as I may sound, don’t go picking on people.
Very Good.. Thanks
I really need some help on step 2. I use Photoshop CS2 and I am just starting out.
End product looks great and I’d like to make it.
Thanks
really nice work..
thanks..
Omigosh. I got stuck here and there and kept trying to figure out what the (gazillion) steps were to get to where you are. I finally gave up and I don’t blame my own laziness, but you’re inability to create a tutorial.
If it’s a tutorial, it should have missed so many steps. Call it a guide. Think a bit.
In step 1: “Fill this shape with #bcbcbc, and name the layer “ring 1.”
Do you rasterize here? That’s the only way I can complete the step. I’m pretty sure that’s wrong, but don’t know how to do it otherwise.
very very nice worked. thanks
Great tutorial, clean, easy to follow steps. Thanks
^.^
very very nice worked. thanks
ery nice worked. thanks
Really nice work..
hey it looks awesome but i cant find the stupid shape in cs4 gimme link
hey it looks awesome but i cant find the stupid shape in cs4 gimme link
thanks Great tutorial, clean, easy to follow steps
thank man
thanks Great tutorial, clean, easy to follow steps
Amazing!
Hi, Thank you for this tutorial. Unfortunately I am still not able to complete it since I am blocked at step 2 Where it asks me to expand the circle. WHen I do it, It covers the first circle and my layer mask is different than the one you show when I click on “add layer mask”. Anyone knows why this is happening? Can anyone please enlighten me!?
Thanks.
William.
very very nice worked. thanks
this is very nice tutorials……..
thanks.
Hi, Thank you for this tutorial. Unfortunately I am still not able to complete it since I am blocked at step 2 Where it asks me to expand the circle. WHen I do it, It covers the first circle and my layer mask is different than the one you show when I click on “add layer mask”. Anyone knows why this is happening? Can anyone please enlighten me!?
Thanks Arik for sharing this.Really good.
Thank you for this useful work..
Trust me. I’ve tried it more then 9 times, and it doesn’t realy “cuts out the part that is covered by the “ring 2″ shape.” Is there a way or tips youd like to mention in order to make it work? thank you.
Another great tutorials, now I can make a glossy button, Thanks!
this is good thanx admin
This is about as poor a tutorial as I’ve seen on this site so far. Where are the exact settings you used? How do you justify skipping steps like you do?
More important than anything the artist posted – how the hell did this get published?
Really PSD tut’s? This is what I can expect from you? I don’t know that I’ll be back after this.
I dont understand Step 4. Help me.
Great stuff. It took some time and learning and experimenting, but I got it in the end. Thanks.
Sencillamente brillante Gracias por compartir…
This is about as poor a tutorial as I’ve seen on this site so far. Where are the exact settings you used? How do you justify skipping steps like you do?
More important than anything the artist posted – how the hell did this get published?
Something, other than the undeniable beauty of this fish, kept bothering me about this photo.
“Select “ring 2″ again, and on a new layer drag down a gradient. Set this layer to hard light.”
What a moron.
please post something a little easier.. this is the first for me on photoshop, and i dont know how to do many of these instructions
On the step 2, before add a layer mask you must invert selection of smaller circle.
in step 2, before we add layer mask on ring1 layer, we need to press: Ctrl + Shift + I to invert the selection, then add layer mask
Just had to make a comment to stick up for all the people that find it difficult to follow this guide. I found it difficult too and I’m not that bad at Photoshop nor do I think anyone else who attempted this guide is a complete novice either. The steps weren’t thorough at all, it was just a run by of what he did in his own words. And to all the people bashing people who have trouble understanding this and touts ‘i understood it fine you just need to change your way of thinking’, well good on you, you out of how many people had no trouble reading this? lol
Great end result, but cannot be achieved using your steps. For those who were unsure about the layer mask you need to alt+click on the mask icon. I will attempt to achieve the same result via my own methods but this tute is definitely not very informative. Just a tip for the person who wrote it, give an exact image size at the very beginning, because using an inner glow of 5px on a 1000×1000 document will give a very different result to using it on a 300×300 document for example… Kudos for trying but try and be more thorough next time, you obviously have the skills and I’d love to see more of your ideas…
Unfortunately, since I’m not a pro, I got stuck on almost every step way too long, but still made it to step 4 alright. But now, my gradient looks completely different than in the screenshot, although I set it up exactly as shown, and dragged it every possible way, with every possible option checked or unchecked. Not sure if this is even important, since none of the later steps seem to have anything to do with this gradient. But then, step 5 completely throws me off with “make another ring”, and it probably doesn’t get better from there.