How to Create a Sexy Small Download Icon

Hi there folks, I’m back with another tutorial on how to create a sexy small download graphic. It doesn’t even have to end up as a download graphic, it can be anything. Think of a loading bar, a upload thing or even a cool button.
In this tutorial you will learn simple but elegant techniques that you can apply on your designs!

Resources for this tutorial

The only thing you need for this tutorial is the Open Sans font. Download here. Original shot on dribbble.
Download PSD Here.

Step 1: Setting up the Document

• Start by creating a document in Photoshop, something like 600 x 400 px.
• Fill the background with the bucket tool (G). My colour was: #f0e9dd. 

Step 2: Working on the base shape

Here we go. When I first started this graphic, it had a basic circle shape. Not really original, that’s why decided to use the anchor points to modify the shape.
First, grab the Ellipse tool. Pull out a nice circle with the size you like. Next, grab the pen tool (P). Ctrl + click on the circle you just made. This should make the anchor points of the object show. Again ctrl + click, but now only on the lower anchor point. You should see this now:

With that anchor point selected, hold shift and press your down arrow twice. This should drop the point 20px down. There it is, the sort of upside down egg shape.
Let’s style that thing up!
All there is on there is:

• Gradient Overlay
• Inner shadow
• Stroke

Settings below:



Next is the little lip at the bottom of the main shape.
I made this with the pen tool. I created one side first, duplicated this layer, flipped it horizontally and moved it to the right position. With these 2 layers merged you can go ahead and give it some styling.

• Drop Shadow
• Inner Shadow
• Color overlay

If you look at my finished image, you see there’s another highlight at the bottom. We’ll get to that in the end.

Step 3: Let’s bring in some colour

For the workflow it’s easiest to first create the inside of the coloured circle. Like this:

This is also made with the Ellipse tool (U). Layer styles below:

• Drop Shadow
• Inner Shadow
• Inner Glow
• Gradient Overlay

We’ll be adding text to this later.
Now it’s time for the orange loading bar. I guess there are more ways to make this. But I took the easiest approach. First, create an Ellipse again. about 10px larger than the one above. Make sure the layer is set beneath the dark ellipse and above the main shape.
Now we’re gonna modify this shape a bit with the pen tool by adding some anchor points and curving some lines. Try to make it like this:

This shape has 5 added layer styles, and next to that some lighting layers above which we will get to after this.
Layer styles:

• Drop Shadow
• Inner Shadow
• Inner Glow
• Color Overlay
• Stroke (with gradient)

Now, make a new layer, (ctrl-shift+N) and ctrl click on the orange shape layer thumbnail. This should bring up a selection.
Put the new layer selected on Blending mode Soft light, grab the brush tool with about a 40px radius and white colour and start playing around to make some highlights on the orange circle.
Than, again a new layer. Still with the selection of the orange circle. Again on soft light, pull down the opacity to about 60-70% and pull a standard black-white gradient from top to bottom.
Now you should have something like this:

Starting to look pretty sexy ha!
Let’s make the shape in which the orange is sitting. Above the orange layer, and beneath the inner circle layer create a new layer and grab the Ellipse tool again. Create a new circle the same size as the orange circle.
To make things clear, we’re making this now:

Load the selection of the orange layer again (ctrl+click on the layer thumbnail). Rasterize the new shape we made and hit delete. This should delete all of the overlapping on the orange. Doe the same thing again, but now load the selection of the inner dark circle. So you only have the visible of the circle left. (The one-quarter piece). Let’s give it some styling.

• Drop Shadow
• Inner Shadow
• Gradient Overlay

What a bummer guys, we’re almost done already!
Few things left to do.

• Add the numbers in the middle.
• Highlights on all the shapes.
• Simple background shadow

Grab the text tool, with the Open Sans font, typ 75% in the middle on everything (16px, bold #ddd3c3). Give the text a drop shadow, deselect the Global lighting option and set the direction to -90 degrees. distance: 1, spread: 0, size: 0. Colour: #000.
Another text layer beneath the percentage. This will show the file size, or download speed. Whatever you like. Same styling same options, only not bold and 10px big now.
All set, now we have this:

Now we have to add some highlights to make this thing shine.
This is after my added highlights:

Try to do something similar, most of it is done the pen tool, or just by loading the layers selection and stroking it with white on a new layer, a little erasing some parts an blending options should do the trick. Just play around ;). If u have questions feel free to ask.
My shadow is a gaussian blurred triangular shape on 5% opacity. Transform it a bit to get the right shape of the shadow. It also depends on when your light is coming from.
You can spice up the background a bit more with patterns/textures/lights/shadows, etc.
Here’s my final outcome once more:

I hope you likes this tutorial. If you still have any questions, feel free to ask!

1stwebdesigner.com