Download Source Files
- Source files for this tutorial are available to Premium members.
Get a Premium Membership
Learn how to create a simple three-dimensional icon of a paint bucket, complete with paint splotches, with this colorful tutorial. Harnessing the power of paths, layer effects and consistent lighting we’ll obtain an effective, shiny icon.
Final Image Preview
Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.
Tutorial Details
- Program: Adobe Photoshop CS4
- Difficulty: Intermediate
- Estimated Completion Time: 30 minutes
Step 1
Open a new blank document and choose 512px for both width and height. This is the maximum size required for icons (Mac OS X Leopard). Create an ellipse above the center and to the left and name it “outer rim” (1a). Make two copies and scale them down (1b). Name the first “inside.” Move the other copy down, naming it “bottom” (1c).
Step 2
Create a new copy of the smaller ellipse and make it yellow, which will make the paint’s surface (2a). Position it inside the bucket, erasing the unnecessary pixels (2b). Name this layer “paint.” Now make a rectangular selection with the Marquee Tool (M) on the “bottom” layer and fill it to complete the bucket (2c). With the “bottom” layer selected hit Command + T to invoke the Free Transform Tool. Right-click and choose Perspective. Now drag the bottom corners towards the center to apply the correct perspective deformation (2d).
Step 3
Let’s shade the bucket. Light will come from the right side. Apply a Gradient Overlay (3a) and an Inner Glow (3b) layer effect to the “bottom.” The base color is a medium gray with lighter bands that simulate reflections, as shown below.
Step 4
Double-click the “outer rim” layer to open the Layer Style window and apply Inner Glow (4a). On a new layer below, paint a shadow for the rim using a big, soft brush. Choose black and paint lightly with one single stroke, following the rim’s curve. Shadow layers are always set in Multiply mode with their opacity turned down (4b). Name this layer “rim shadow.”
Step 5
Select the “inside” layer. Apply Gradient Overlay (5a) to make it look metallic and apply Inner Shadow (5b). The shadow is projected by the rim onto the inside, from the right side.
Step 6
We need to add a highlight to the top part of the rim since that spot is directly exposed to the light. To do that duplicate the “inside” layer (6a). With the Direct Selection Tool (A) select and erase the bottom point (6b). We will paint this path with a white stroke. Hit D to select the default black and white colors then X to swap them so white is in the foreground. Now activate the Brush Tool with B then hit F5 to bring up the Brushes palette and set up the brush according to image 6c.
Now in the Paths palette right-click the active path and choose Stroke Path. A dialog will appear: choose Brush and check the option Simulate Pressure (6d). You will see that the path is now a brush stroke that is tapered at the endpoints. Since it’s too faint let’s duplicate it, moving the copy a few pixels up, just enough to thicken the stroke (6e). Merge these two layers into one and name it “rim reflection.” The final touch is to blur the highlight with the Gaussian Blur filter, set to 1 pixel (6f).
Step 7
Select the “paint” layer and add an Inner Shadow style (7a). Duplicate this layer, name the copy “paint reflection,” and move it down (7b). With this layer still selected, Command-click the “paint” layer, thus loading its pixels as a selection, then go to Layer > Layer Mask > Reveal Selection to mask out the unnecessary pixels.
We need to move the paint’s shadow above the “paint reflection.” Right-click the “paint” layer and choose Create Layer. This turns the Inner Shadow layer style into a separate layer (7c). Command-click the “paint” layer and apply this mask to the shadow (7d). On the “paint” layer add an Inner Glow layer style to simulate thickness at the seams (7e).
Create a new layer and select the same soft brush we used to paint the rim’s shadow. Press down Alt and hold it: the cursor will change from brush to eyedropper. Click on the “paint” layer to sample its tint, release Alt and paint a color bleed across the left hand side of the bucket (7f). Name this layer “bleed,” move it below the “paint” layer and reduce its Opacity to 50% (7g). Nice color variation!
Step 8
Let’s draw the paint splashes now. Grab the Pen Tool (P) and be creative (8a). Give the paint some shadow (8b). Paint is reflective so we need to draw some highlights with the Pen Tool (8c, 8d). These paths will be of course lighter. Name them “refl 1″ and “refl 2.”
Let’s add the final highlight. With the Lasso Tool (L) select the right half of the “refl 2″ layer (8e), then go to Layer > New > Layer Via Copy or simply hit Command + J. Add a nice Gradient Overlay to this highlight (8f). Now the paint splash reflects the environment (8g).
Step 9
Create a background (simple gradient) and a shadow (blurred black ellipse) for the icon. Pick the colors you like (9a). The last element to draw is the handle. On a new layer draw a dark gray ellipse on the left side of the bucket (9b). Add three layer styles: Satin (9c), Drop Shadow (9d), and Gradient Overlay (9e).
Step 10
Make a tiny copy of this ellipse and give it an Inner Shadow style: it’s the hole for the handle (10a). Now draw the handle with the Pen Tool (10b) and name it “handle.”
Stroke it with a dark gray brush like we did before for the rim reflection, but this time uncheck the Simulate Pressure option. Erase the unnecessary pixels so it looks like the handle is coming out of the hole (10c). Add a Satin style to the handle (10d).
Step 11
Finally let’s create the shadow from the handle. Add a Drop Shadow style (11a), create a layer from it, see Step 7 for information on this technique (11b). Move the shadow layer down a bit, then scale it vertically so it touches the base of the handle (11c). Erase the unnecessary pixels (11d) and you’re done!
Conclusion
You know what? These icons are easier done than said! Anyway I hope you learned a few new tricks from this tutorial and I hope you were creative enough to choose your favorite color for the paint 
Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Andrea Austoni
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Photoshop to HTML
Take your Photoshop skills to the next level by learning how to slice up a PSD into a working standards driven HTML website.
The king of tomorrow - More
Follow Psdtuts+ and Tuts+ on Twitter
- Get to know the Psdtuts community and share a link to your portfolio on our Facebook page! http://enva.to/9pGzWM
- Create a Dark and Rainy Crime Scene in Photoshop http://enva.to/bcQAb4
- @JustinLynes Is it worth a try? Why? ;)
- @Colortrails Also trying to get in the habit of using @AlfredApp for searches, much easier, then independent of any browser used...
Join the Psdtuts+ Flickr Group
Photoshop Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+ mobiletuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
not bad for an icon…
but it could have more refs to look more realistic.Looks a bit toony.
ohh !! really very nice!!
Thx
Being new to CS4 I found this very helpful….thanks
Very nice outcome, nice icon tutorial
Very good tutorial, thanks a lot.
Very nice lovely icon. Great tut Thanks
I once made a similar bucket…
Estimated Completion Time: 5 days :-d
i dono thats weak bro use this tutorial
http://vector.tutsplus.com/tutorials/effects/creating-a-toaster-popping-illustration/
agreed could be way better but then again photoshop and illustrator are not the same
People have no appreciation for clean artwork anymore.
clean artwork can be created in photoshop…..but this tutorial clearly isnt high quality. could use the same techniques from that illustrator tut, and make it photoshop, that is if u know what ur doing.
How is this artwork not “high-quality?” The goal was create a clean paint bucket icon, not a paint bucket portrait or art piece; an icon.
The difference between your linked tutorial and this piece, is that the former is basically demonstrating 3D functionality in Illustrator, and although the 3D Map is nice, the end result isn’t impressive. This on the other hand, uses pseudo-3D techniques to create a very clean appearance, suitable for an icon.
Although this isn’t a complete accurate representation of a 3D paint bucket, that wasn’t the goal for the project. We can’t keep comparing apples to oranges.
i could create a better paint bucket with my eyes closed those gradients r so shit. at least create something not half assed.
Dan,
I think you should contribute to this website by creating tutorials instead of insulting those who do.
I for one could definitely benefit from talented illustrators who could show me how to improve my designs.
Could you post a link to your portfolio?
take it easy, he’s just saying that he thinks that the other one looks more realistic. no need to take offense to that… yours probably wasn’t intended to be photo-realistic, so calm down.
your work is very nice
I too would like to see Dan’s portfolio; he’s all over this site bashing designers. I’m a programmer starting my own company, and if I didn’t have sufficient respect for graphic designers before, I do after reading and playing around with these tutorials. When the end result is so clean and polished looking, you do not realize the amount of work it takes to make it so. Kudos to all designers: this is both an art form and a science. And thanks for this tutorial; the icon is fantastic.
Awesome work
beatiful!!
Nice Tutorial..
Some neat little tips and tricks in here. Not sure I’m a huge fan of the final result but as always you’ve made another well written tut.
thanks
Very nice. I must say a well defined icon
Awesome tut! I’m a big fan of your work Andrea. Keep up the good work dude =D
Great Tutorial!
It’s incredibly hard to catch the right perspective with these kind of things, but it worked out fantastic here!
I always admire your tutorial..this one again well explained
Great tips in this tutorial. Well-written. Thanks for sharing!
maybe i’m crazy, but is the perspective off?
very nice andrea
thanks
Nice blog you got right here. Will bookmark it. I have a knack in gathering wonderful websites online. Most are about comedians, mentalist and a lot more.
fucking spammer
take it easy, he’s just saying that he thinks that he has a knack for gathering good sites. no need to take offence to that… yours probably wasn’t intended to be insulting… oh no you have such a poor hold on the English language that you have to use big swear words… lol
your site:http://photoshoptutorials.ws/ has so many adds on it I feel like thats spam!
very nice
Very nice.
Thanks for this tutorial.
Sua mensagem …
POSSO post no meu TUTORIAIS SEU SITE?
(O curso será dado devido a partir de agora agradecer).
Simple and to the point. I love it!!!!
so where is dans superb tutorial with all that shit talking?
yo im working on it right now, ur ganna shit ur pants when u see it!
I highly doubt that.
I step 2 you say, “Now make a rectangular selection with the Marquee Tool (M) on the “bottom” layer and fill it to complete the bucket (2c).”
How do you fill the rectangular marquee ?
ctrl+backspace…….
or apple+backspace
woo….
Nice Tutorial man…..
VERY NICE PAINT BUCKET SIMPLE TRICKS….NICE
Rough crowd in the free section. Good work, Andrea. Thanks.
very difficult. but so nice
Gefällt mir
Nice!
My result: http://img195.imageshack.us/i/paintbucketa.jpg/
It’s a bit sloppy as i did it on my laptop with the touchpad.
This is a very nice tutorial, however, wish step 11 was explained separately no t combined with step 11 and was more clear. Anyway thanks a lot
very nice, thanks
great tutorial thanks a lot for taking from you spare or work time to create this helpful material, don’t pay attention to those who just get in to criticize and to be lame, I still don’t understand why there is people complaining because you are doing this kind of work in PS instead of Illustrator…. this is “PSD-TUTS” how come you spec to read a tutorial that makes reference to Illustrator here?? if you want to learn how to do it in IL well just go to the right website but please stop making reference to that, this is not the right place. i`ve seen those comments in almost all the tutorials here… common!!
This is a very nice tutorial, thanks
Very realistic
very nice tutorial thank you
Thank you for tutorial. Great work!
Kooool i liked the paint out of the bucket
pretty icon thanks
The bit about simulating brush pressure was really good, an extra insight to illustrator, Ta. M.
very nice, thanks too!
Stop making icon tuts…
That grate.
I am very be interested in this design
thats really nice thanks
thank you for this wonderful tutorial
I made till the end
i enjoy the tuts .too many layer styles
Hi, I am stuck on #6 . I followed the instructions and the brush tip does not come faded on the sides and also when I use the direction select tool there is no path so I dont know what Im doing wrong.
Can someone try to explain what I might be doing wrong?
Thank you
FYI http://www.buildtutorial.com/create-a-shiny-paint-bucket-icon-photoshop-tutorial.html is directly copying your tutorial!