Hi everyone!

A little change this week, instead of a resource, here comes my first online tutorial. I really hope you’ll enjoy it and that it will be useful for you.
I chose my previous resource, the upload panel, as a base for this tutorial. This freebie is simple and has a lot of interesting stuff in it.

Since it’s my first tutorial please feel free to comment, give me feedbacks or advices. I worked a lot to make it simple and detailed.
Also this tutorial will be in two parts because of its length.

Somes notes before we begin:

• Don’t forget to create and name groups of layers while you work.
• Regarding the tool (U), don’t forget to check the « snap to pixels box » (see screenshot).
• This tutorial displays my own way to do things in photoshop. It’s not the only way to do them and probably not the more simple. I you have a better/alternate way to do it, please share with others.
• Last thing, this tutorial is made for people who actually opened photoshop more than once.

Download the source

1. Begin to create a new document with these sizes : 750*700px with the color #3b3d40 in a new layer.

2. Add some noise to this layer by clicking Filters > Noise > Add noise. Set it on 1% in uniform.

3. Now let’s create a pattern. Create a new document with the sizes 3*3px. In this new document, hide the background and create a new layer. On this layer, and with the selection tool (M), create black squares as shown on the screenshot below. To fill your selection use the shortcut Cmd/Ctrl + Backspace.

4. Now go to the « Edit » menu and « Define pattern ». Named this newly created pattern as you want.

5. Go back on your main .psd create a new layer and select the « Paint bucket tool » (G). In the upper menu, select « Pattern » and then your brand new pattern.

6. Apply this pattern with the Paint bucket tool on your new layer.

7. Apply this pattern with the Paint bucket tool on your new layer.

8. Add these horizontal guides : 110px, 150px and vertical : 125px, 303px, 584px and 625px.

9. With the rectangle tool (U) Draw a rectangle between the vertical guides 125px and 625px et the horizontal guides 110px and 150px. Apply the color #3b3d40 on this rectangle and name it « base ».

10. Apply a stroke and an inner shadow as shown on the screenshot

11. Now create a separator on the 303px ruler.
To do so, selection the rectangle tool (U) and draw a rectangle with the same height as the header and with the color #2b2d2f and a 1px width. See the screenshot. Place this first vertical rectangle on the left of the 303px ruler. Repeat the operation but now with the color #484a4e. Place this second rectangle on the right of the 303px ruler.

Repeat this operation (ou simply duplicate this layer) but with the color #484a4e this time. Place this rectangle on the right of the 30″px guide. See the result on the screenshot.

12. Let’s add the icon and the text. For this, I use an icon from the awesome iconsweet2 pack in 16*16px. Align the icon vertically and fill it with white. Add the drop shadow effect as shown on the screenshot.

13. Add a text on the right of the icon. I use the helvetica Neue font in Medium. Set the size to 14pt and color to #ffffff. Use the same rop shadow as on the icon.

14. Space and center both of them as you wish between the left border and the separator. Now let’s create the hover effect for this button. Using the rectangle tool (U) create a white rectangle on a new layer. The size of this rectangle must be reduced by 1px on every side so the stroke is not hidden. See the screenshot.

15. Let’s create the second button named « upload a video » with a different icon also from the iconsweet2 pack. The only difference here is that the white color is replaced by the #969696 color in order to mark the difference between active and normal state. Feel free to play with the drop shadow to make these texts pop. See the second screenshot to order your groups and layers.

16. Now we’re going to create the close button. Begin by duplicating the previously created separator and place it on the 584px guide. See the screenshot.

The way way as we did the hover state before, create a square with the (U) tool with the color #232323 and set the opacity on 30%.

17. Using the (U) tool, create a circle with the color #000000 a center it in the previously created square. Apply a drop shadow and inner shadow effect as showed on the screenshots and set the « fill » to 20%.

18. Because I’m lazy, I used the existing cross in the iconsweet1 pack. Place this #cbcbcb colored cross in the center of the circle and apply a drop shadow effect as shown on the following screenshot.

Also add a gradient overlay with the following setting as shown on the screenshot. Regarding the gradient, place a black marker at 47% and a white one at 53%.

19. Now that we are done with the header of this upload panel, let’s add the final effect. Select the « base » layer and transform it in a smart object (see the screenshot). Then go to the Filter menu and add some noise. Set it to 0.5% and apply.

20. Let’s create the background of the upload panel. Set an horizontal guide at 610px. With the rectangle tool (U) create a new layer colored in #3b3d40 under the group forming the header. Convert this layer to a smart object and apply a 0.3% noise.

21. On this new layer, add an inside 1px stroke with the color #2b2d2f. Also add an inner shadow as shown on the screenshot.

22. To create the shadow under the upload panel, use the rectangle tool (U) and create a rectangle with the same size as the whole upload panel. Apply a drop shadow as shown on the screenshot below.

23. Create new horizontal guides : 168px and 211px. Create new verticla guides : 145px and 454px. With the rounded rectangle tool (U) with a 2px radius create a rectangle within these guides (see the screenshot) and set the fill to 30%.

24. On this same rectangle, apply a white drop shadow as shown on this screenshot.

Also apply an inner shadow as shown on this screenshot

25. With the rounded rectangle tool with a 2px radius, draw a white rectangle inside a new layer in the previously created black rectangle. Keep a 5px margin on every side of this rectangle and apply the settings shown on these screenshots.

26. Using the Text tool (T) enter you text on the created field. Here I used helvetica Neue Medium 14pt #a0a0a0.

27. Create two vertical guides : 464px and 605px. With the rounded rectangle tool (U) set on a 2px radius, draw a rectangle inside those guides.

28. Apply on this new layer a gradient overlay from the color #80bb09 to #aed54d and an inner shadow as shown on the screenshot.

29. Right click on this same layer and select « convert to smart object ». Then apply on this layer a noise effect at 1% and a drop shadow as shown on the screenshot.

30. Choose an icon (mine is still from the iconsweet2 icon pack), apply the color #3c590b with a drop shadow as shown on the screeshot.

With the text tool (T) insert a text with the same color as the icon and add a drop shadow as shown on this screenshot.

31. Add an horizontal guide at 233px. Then with the rectangle tool, create a rectangle of 1px height and with the same width as the upload panel. Fill it with #47494d. Place this layer above the 233px horizontal guide. Finally, apply a drop shadow as shown on the screenshot.

32. For this step, just duplicate all the layers from the first field (group « field 1″ in my .psd). Move this new group down 17px. Rename this group « Field 2″ and delete the text inside the field.

33. Select your new button background, right lcick on it and select « new smart object via copy ». Delete the old one.

34. Double click in this layer to enter the smart object and modify the green gradient to a blue one with the color #21b7f3 to #6dd9f8. Save, close the window and get back to your main .psd.

35. As for the previous button, take an icon, apply the color #0e5e7d on it and do the same for the text.

To be continued… Here what your uploader should look like now.

Download the source

That’s all for this first part. Again, feel free to comment and give me some feedbacks on this tutorial if it’s not clear enough.