How to Design a Sleek Downloader Interface Using Photoshop

I’m back once again with another cool web interface tutorial. Today we’ll be making this sexy file downloader with crisp and clean details. This can be used for web and mobile applications, perfectly cool for smartphones and tablets too!

As you will see there are quite a lot details in here, the whole point and also the hardest part of adding details is to make them noticeable, but not TOO obvious. Make them soft, clean and smooth. Pick colors with not too much contrast and especially play around with the opacity until it feels right.

You’ll also learn how to create a simple pattern in your design with the use of the pen tool.  Patterns can be a key to perfection in your designs. Use them wisely, too many patterns can destroy a design.

Now, let’s see what we are going to make:

As you can see, there’s a lot of detail in there. But the level of contrast and cleanliness is still perfectly balanced.

Alright, let’s start this off!

Step 1 – Building the main shape

First we have to make the base shape of this file downloader.

This shape exists on 4 separate layers.

Reference:

We start off with the “List bg” layer.

Create a (about) 308px by 130px big rectangle with the Rectangle Tool.

Once you have that you’ll need to add some style to that thing!

This is what it’s gonna look like:

Layer styles:

Gradient Overlay:

Stroke:

Inner shadow:

Drop Shadow:

Your shape should look similar to mine by now. You may have noticed the gradient I used in the stroke. This is because of the gradient I had in the background. To keep the contrast even on every spot I had to make that gradient.

Next we’ll make the background for the downloading file.

Reference image:

This shape is also 308 px width, but only 50 px high.

Layer styles:

Gradient Overlay:

Stroke:
 

Inner Shadow:

Drop Shadow:

I made the lines on there with the pen tool. Use the shift button to make perfect 45○ angle lines.

After you made the correct shape, use ctrl + click on the layer thumbnail to load up the selection. Then make a new layer and fill up your pen tool shape with a solid white.

These lines could move from the right to the left when the file is actually downloading to show some activity.

After this, duplicate a few times until the whole thing is filled.

Only thing left for the main shape is the bottom part. This shape makes the whole downloader way more dynamic. It gives it a sort of 3D effect.

Grab the Rectangle tool again and make a new layer called ‘Bottom’ see layer reference image on top for how to stack the layers.

The shape:

The layer styles:

Gradient overlay:

Stroke:

Drop Shadow:

That’s it.  The main shape is there.

Step 2 – Let’s get some content in there

Before we’re gonna add the text and icons, we have to create the yellow progress bar. This bar visualizes the progress of the download.
2 Layers here. The full width progress bar. And the yellow bar on top of it.

The full width bar first.  #343434, pick yourself a nice height.

Layer styles:

Inner shadow:

Drop Shadow:
 

Then, the yellow bar, of course, having the same height.

Some layer styles:

Gradient Overlay:

Inner Shadow:

You can play with some patterns on this or anything you want. Bring out your creativity ;)

That’s it for the progress bar.

2 Things left to do:

  • Fill in the active downloading file
  • Create the list of the files to be downloaded.
The top:

Font: Open Sans download here.

Size: 10 pt.

Light grey color.

Next is the active state of the download.

Layer styles:

Gradient Overlay:

Inner Shadow:

Drop Shadow:

Applaud yourself, you are almost done ;)

Last bits: (For the cancel icons, mine came from the iconsweets icon pack. you can pick your own though.)

That’s it guys. You’ve just made a sexy file downloader! The details look awesome, don’t they? Thanks for following this tutorial and if anything is unclear, feel free to leave a comment!

Final image:

Dillen Verschoor

Dillen Verschoor is one of the two designers from http://www.juicygraphics.net. He lives in The Netherlands in the great city The Hague. He puts the world of design to a whole new level with his great passion for Web & Graphic design. Follow us on twitter: @juicy_graphics

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. Relax. says

    Great tutorial, going to edit it a bit to use it as a loading screen.
    especially when you don’t tell all sizes of all boxes, you should upload a .psd file and put a download link on here ;)

    • says

      oh, will get that psd file in few days, writing to Dillen now to get it solved. Please use your real name in comment, otherwise I am afraid we won’t accept further comments, thank you!

  2. says

    Looks alright, but you can definitely conserve more space. Also, there are a lot of horizontal lines… kinda annoying.