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:

Slick file uploader GUI

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:

Draw rectangle

Step 3

Add the following Layer Styles to the layer:

Rectangle inner glow gui tutorial
Rectangle stroke gui tutorial
rectangle gradient gui tutorial

Step 4

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

Duplicated rectangle

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:

Duplicated multiple

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.

Making guides

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.

Text styles

Repeat this for the other rectangles.

Fill texts

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:

Make green rectangle

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

Grey rectangle

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%

Preloader styles
Preloader text

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 header

Add the following Layer Styles:

Header drop shadow
Header gradient
Header stroke
Header finished

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:

Header font style

And add this Layer Style:

Header font shadow
Header font

Step 11

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

Subheader font style

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.

Subheader font

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.

Preloader outline

Add these Layer Styles:

Preloader shadow
Preloader gradient
Preloader stroke

Result:

Preloader bg

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.

Preloader slider outline

Add these styles:

Preloader inner shadow
Preloader inner glow
Preloader slider gradient
Preloader slider stroke
Preloader slider finished

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

Multiple preloader preview

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)

small circle

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

small circle glow
small circle gradient
small circle stroke

Result:

small circle preview

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

small circle tick

Step 16

Take the Custom Shape Tool and pick a hollow square.

draw 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.

hollow square preview

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!

minimize close

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.

minimizer outline

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:

minimizer shadow
minimizer glow
minimizer gradient
minimizer stroke

Result:

minimizer 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 ^

minimizer with arrow

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

minimizer preview

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 %!)

canvas size

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.

interface details minimized

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.

loading orb outline

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

Add the following styles:

loading orb bevel
loading orb color overlay
loading orb stroke

Result:

loading orb preview

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

loading orb shine setting

Result:

loading orb shine

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.

924 Downloads