And here comes the second part of my tutorial on the upload panel.
If you missed the first part you can see it here.
Let’s go back to work! Open your .psd or download the .psd from the first part and let’s shake that mouse of yours.

Download the source

Here is what you should have :

1. Now let’s put some more guide. Using View > New guide add these vertical guides : 179px, 325px, 425px and 570px.

Also add these horizontal guides : 330px, 350px, 409px and 430px. Now you should have this totally messing and unreadable work space as show below, hurray!

Let’s delete the guides we don’t need to avoid any headaches. Basically every guides not mentioned on point 1..

2. Now with your round rectangle tool (U) set on 2px draw a rectangle between the horizontal guides 179px and 570px and the vertical guides 350px and 409px as show on the screenshot below.

Apply the following color #3a3c3f. Double click on the layer and enter the layer styles. Apply a Bevel and emboss effect as show below.

Now apply a gradient overlay from black (#000000) to white (#ffffff) as shown below.

3. Now we gonna make a hole in this layer. First of all select the vector mask thumbnail on your layer then use the Ellipse tool (U) set on “Substract from Shape area (-)”. See the screeshot below.

Now notice the square formed by the guide in the middle of the workspace. Draw the Ellipse inside these limits as show on the screenshot.

If everything went fine, you should have a hole in the middle of the layer. If not, make sur you selected the vector mask on your layer. See the screenshot below.

4. Right click on the layer and select “Convert to Smart Object”. Add the following Drop shadow on it

Now add the following Stroke on it.

5. On the same layer, apply a noise effect (Filter > Noise > Add noise) set to 0.3px. Also name this layer “base”.

Now put this layer in a group named “buttons bg”. Create another group above it named “Loader”.

6. In the “Loader” group, use the ellipse tool (U) to draw an ellipse in the way it totally covers the hole we created. See the screenshot below.

Fill this layer with black (#000000) and set the “Fill” to 30%. Now apply a drop shadow as shown on the screenshot below.

Apply an Inner shadow as shown below.

Now you should see this.

7. Add the following vertical guides : 330px and 420px. Add the following horizontal guides : 335px and 425px.

Within those guides, create an ellipse with the (U) tool. you should see the result below.

Apply the #ffffff color to the layer and set the Fill to 8% and. Apply the a drop shadow as shown below.

8. Duplicate this layer and apply this color on the new layer : #23baf3. Also reset the Fill of the layer to 100%

You should have this.

9. Now we are going to cut 1/4 of the layer. To do so, first create a new horizontal guide at 380px then select the vector mask thumbnail of the blue layer. Use the rectangle tool (U) set on substract from shape area (-) and cut the top left corner of the ellipse. See result on the screenshot.

9. Apply the effects “Drop shadow”, “Bevel and Emboss” and “Gradient Overlay” as sown on the screenshots below.

9. Create the following vertical guides : 336px and 414px. Create the following horizontal guides : 341px and 419px.

Inside those guides, create a new ellipse with the color #3b3d40. you should see this.

10. On this newly created layer apply the following effects.

11. Now import an icon you’d like to display in the middle of the button. I used the refresh icon from the iconsweets 2 pack. Apply the following effects.

12. Time to add some text on this button. I also used an icon from the iconsweets pack 1 (yes I’m fond of their work). The font is Helvetica Neue medium with a #969696 of #ffffff color and a black drop shadow.

The cross effects are listed below.

Don’t forget to order your groups and layers as you go (I wrapped all these layers into a group named Loader button)

13. Now that the loader button part is over, let’s create the image thumbnail. Create a new group named “Image container” and create new vertical guides : 145px, 345px. Also create horizontal guides : 449px, 589px.

Within those guides, create a new black round rectangle with a 2ps radius as shown on the screenshot below.

14. Set the fill of this layer to 30% and apply the following effects : Drop shadow and Inner shadow as shown on the screenshots.

15. In a new layer, create a rectangle using the (U) tool inside the previous one. This new rectangle must be 5px smaller than the previous one on each side so you have this result.

This layer will only be use to crop the image layer.

16. Take an image and import it in photoshop (the image i used here comes from themooniacs.com). Import the image to your .psd and put it in place.

Hold Cmd/ctrl and click on the vector mask thumbnail from the layer previously created. you should see this.

Make sure you have the image’s layer selected. Use Ctrl/Cmd + Shift + I to inverse the selection and delete.

Now you should see this.

17. Apply the following effect on the image’s layer.

Now input the text and icons you want on the right and your set your upload panel is done!

Download the source

I do hope this tutorial was clear enough and that it helped you. As usual I’ll be glad to get feedbacks from you.