Download Source Files
- Source files for this tutorial are available to Premium members.
Get a Premium Membership
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
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
just feel it - More
Photoshop Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+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.
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