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.
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:
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.
This shape is also 308 px width, but only 50 px high.
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 layer styles:
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.
Then, the yellow bar, of course, having the same height.
Some layer styles:
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.
Font: Open Sans download here.
Size: 10 pt.
Light grey color.
Next is the active state of the download.
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!
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