Design a slick file uploader GUI in photoshop

Photoshop is a fantastic tool to create Graphic User Interfaces with. The developers made it easy for us to use various Layer Styles in order to get endless effects. It’s up to us to show we don’t need to stick with the main goal they made it for.

For example, a Drop Shadow can also be used to add shine to edges.

Most of the times, we’re going to use those styles for totally different effects than you expected. This tutorial is a good introduction to see what we mostly use the styles for.

Result Preview:

Step 1

Create a new document of 800 by 600 px.

Step 2

Fill the background layer with #e0f5f8

Step 3

Pick the Rectangle Tool and draw a rectangle that is close to half the width of the entire document. Like so:

Step 3

Add the following Layer Styles to the layer:

Step 4

Make sure the Rulers are visible and drag a guide in the center of your rectangle like so:

Step 5

Duplicate the rectangle and drag it so it snaps right below the first one.
Remove all effects but only leave the stroke on.

Repeat this step a few times until you get something like this:

Step 6

Drag some guides in the center of the new rectangles also and 1 vertical one that will be the margin of our text.

Use these settings and place the text so it snaps on the guides. Note the color isn’t pitch black, but a very dark grey.

Repeat this for the other rectangles.

Step 7

Now duplicate the first grey rectangle again and move it below the 4 white ones.

Optionally, duplicate it even once again and make the gradient more green, this is how it looks when the process would be done:

But for now we’re going to continue with the grey bar:

Step 8

Also add a guide in the center of the rectangle in both ways, horizontally and vertically.
Now type a percentage with the following settings: (color = #374249)

Reduce the opacity of the layer to something close to 65%

Step 9

Create a new layer on top and pick the Rounded Rectangle Tool. Set it’s radius to 5px.
Now draw a bar over one of the rectangles, it should snap and have the same size and position. It doesn’t matter which rectangle.

Now, while holding Alt, drag the shape outwards a little bit from the left or right side.

Add the following Layer Styles:

Step 10

Add a guide in the center again and place White text (Uploading) at the same margin as the other text we made so far.
Use these settings:

And add this Layer Style:

Step 11

The top grey bar needs some text too, add “File Name” with the same guides again with these settings:

Step 12

Drag a guide so it snaps exactly to the left side of the “52%” we typed earlier.
Now on the top grey bar we can put “Progress” on the guide with the same settings as in step 11.

Step 13

Pick the Rounded Rectangle Tool again and set the Radius to 10px.
Now we’re going to drag some loading bars inside the white bars.

Use the snapping Photoshop does for you, in order to make the rectangle as high as the text. Make it start from the margin the “52%” and “Progress” use and don’t make it run all the way to the end of the white bar.

Add these Layer Styles:

Result:

Duplicate this bar and place them on the other 3 white rectangles.

Step 14

Duplicate the bar again and remove the styles, eventually modify the color to red so you can clearly see what you’re doing.
Now, when holding the Alt key, drag the shape inwards again.

Make sure the width is something like what represents 50 %, don’t make it a full bar (to avoid malforming later on).
Notice how the shape isn’t perfectly shrinking compared to the bigger bar.

Just modify some parts by hand to make everything fit again.

Add these styles:

Duplicate this and place them on top of the other loading bars.
Resize the width so they’re a bit random.

Step 15

Pick the Ellipse Tool and drag a small circle next one of the loading bars. Possition it so it’s in the center of the remaining white-space. (make the color be #a5cb3d)

Place a guide on top of this so you can easily place the other circles.
Add the following styles:

Result:

Make sure this one is placed on a loading bar that is totally filled, aka a finished upload.

Pick the Pen Tool and draw a white check mark on top of it.
(Remember to Alt+click on a point you created in order to reset it’s curve. Use this to make the sharp corners.)

Step 16

Take the Custom Shape Tool and pick a hollow square.

Use #464f54 as color.
Draw a tiny square on top of the Blue bar we made, like an exit button.
Duplicate it and place it next to the other.

Create a new layer on top and pick the Line Tool.
Make it be 1px and give it a white color.
While holding Shift, draw an underscore line in the left box.
For the right box, create a new layer and draw an X.
Zoom in for more precision!

Step 17

Take the Rounded Rectangle Tool and set the radius to 5px.
Draw a small rectangle and place it under the “52%”, use the guides to make sure it’s centered.

The part that covers the blue background needs to be deleted.
Ctrl+click the layer thumbnail and press Ctrl+Shift+I to invert the selection, now erase or Delete the remainings.

Add the following Styles:

Result:

Step 18

Pick the Line Tool again and create a new layer.
As color, use #dfdfdf
Now draw a tiny line of 45°, make sure it’s much smaller than the button we just made.
Duplicate the layer and rotate it 180° so it makes a ^
Merge the 2 by holding Shift and clicking both layers and then pressing Ctrl+E.
Now duplicate the arrow and move it down a little so you get a double ^

Your uncollapsed GUI is finished now, it should look like this:

Step 19

Now for the optional collapsed GUI, we’re going to re-use everything we made obviously, just to save time.

First, go to Image>Canvas Size and set the height to 200% (make sure it’s %!)

Now select all the layers we made so far except the background and move everything to the top of your document.
Refill the background with the same light blue color.

Select all the layers again (if they aren’t already) and drag them on the “create new layer” button at the bottom of the screen.

Delete everything except the bottom grey bar and everything that was on it (“52%”, the button and the arrows) and the blue bar with the “uploading” text and minimize+close button.

Drag the grey bar that remains and all the content on top of it, so it hits the dark blue bar.

Step 20

As finishing touch we’re going to add a loading orb to indicate files are still getting uploaded.

Select the Custom Shape Tool and pick the Circle Frame.

Draw this shape while holding Shift, right next to the “Uploading” text.

Add the following styles:

Result:

It doesn’t really match the whole style so far, we’re going to add a small flare on top of it to indicate it’s shinyness.

Take a soft white brush and draw 1 dot on top of the upper right side of the circle.
Then add a Color overlay of #dbf1ff

Result:

That’s it!
We now made both types of GUI, don’t just stick with this tutorial.
Keep inventing new styles with the methods you just learned.
Experimenting is the key.

116 Downloads