How to Design a Sleek Downloader Interface Using Photoshop

Posted in Quick Tips, Tutorials, Web Interface2 years ago • Written by 6 Comments

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:

3 Written ArticlesWebsite

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

6 Comments Best Comments First
  • Adnan

    Thursday, April 26th, 2012 11:36

    1

    It’s amazing tutorial
    Thanks …

    0
  • daniel

    Thursday, April 26th, 2012 14:16

    2

    It looks very elegant on black, I might try it for my website ! Thank u

    0
    • Rean John Uehara

      Friday, April 27th, 2012 04:30

      3

      Indeed it does, and you can play around with the colors too to make it fit on other backgrounds!

      0
  • Joe Zim

    Tuesday, May 1st, 2012 01:39

    4

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

    0
  • Relax.

    Saturday, May 12th, 2012 13:48

    5

    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 ;)

    0
    • Dainis Graveris

      Saturday, May 12th, 2012 16:57

      6

      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!

      0
  • Relax.

    Saturday, May 12th, 2012 13:48

    5

    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 ;)

    0
    • Dainis Graveris

      Saturday, May 12th, 2012 16:57

      6

      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!

      0
  • Joe Zim

    Tuesday, May 1st, 2012 01:39

    4

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

    0
  • daniel

    Thursday, April 26th, 2012 14:16

    2

    It looks very elegant on black, I might try it for my website ! Thank u

    0
    • Rean John Uehara

      Friday, April 27th, 2012 04:30

      3

      Indeed it does, and you can play around with the colors too to make it fit on other backgrounds!

      0
  • Adnan

    Thursday, April 26th, 2012 11:36

    1

    It’s amazing tutorial
    Thanks …

    0

Comments are closed.

54.211.44.195 - unknown - unknown - US