Create a Recycle Bin Replacement Icon (Bathtub) in Photoshop

January 29, 2010 in Featured, Icon Design in Photoshop, Photoshop by admin

Create a Recyle Bin Replacement Icon in Photoshop

Aren’t you tired of the same old Windows recycle bin icon? Let’s create a fun replacement: a nice vintage bathtub complete with foam and plastic duck!

Author: Andrea Austoni

Freelance icon designer and illustrator from Milan, Italy, currently living in Krakow, Poland.
He runs Cute Little Factory, his portfolio and blog dedicated to Photoshop and Illustrator tutorials and icon, vector and wallpaper freebies.

Bathtub Icon

Tutorial Details

  • Program: Adobe Photoshop
  • Version: CS2 or later
  • Difficulty: Intermediate
  • Download: Photoshop PSD HERE!

Step 1

Create a new RGB document, setting the canvas size to 256×256 pixels (the maximum resolution for Windows icons). Put a guide right down the middle. We’ll use it to ensure our artwork is symmetrical (1a). Set the foreground color to white and create a rounded rectangle at the center of the canvas (1b) having previously set the Radius to 60px (1c). Name this shape “inner rim”. Make a copy of it, enlarge it and darken it a bit. Move it below the inner rim, naming it “outer rim” (1d). Now make another copy, shrink it and move it down. It will be the outside of the tub so name it accordingly (1e).

Bathtub Tutorial - 1

Step 2

Move the “outside” shape below everything else (2a). Duplicate it and rename this copy “bottom”. Move it above all shapes. Cmd-click the “inner rim” then apply this selection to the “bottom” shape as a mask (2b). This will crop it.

Bathtub Tutorial - 2

Step 3

Let’s start with the shading. Double-click the “outside” layer to bring up the layer effects. Add an inner glow (3a) and a horizontal gradient overlay (3b). Use the screenshots for the settings. You can see in the result (3c) that the tub now looks rounded.

Bathtub Tutorial - 3

Step 4

Copy the styles from the “outside” shape to the “bottom”. Modify the glow (4a) and the gradient overlay (4b, 4c) to obtain a subtle shading (4d).

Bathtub Tutorial - 4

Step 5

Copy the styles from the “bottom” and paste them into the “outer rim” layer. Reverse the gradient (5a), increase the size of the glow (5b) then add a drop shadow (5c) and a bevel and emboss (5d). Let’s check out the result (5e): the rim casts a shadow onto the outside of the tub and it’s frontly lit.

Bathtub Tutorial - 5

Step 6

Right-click on the “outer rim” and choose Create Layer. A layer will be created from each layer style. Group them all together (6a). The drop shadow bleeds outside the tub, which is of course incorrect. Cmd-click the “outside” layer and mask the shadow with this selection (6b). Also reduce the shadow’s fill to approximately 25% to make it lighter (6c).

Bathtub Tutorial - 6

Step 7

Let’s work on the “inner rim” now which is actually the inner sides of the bathtub. Add some layer styles: a gradient overlay (7a, 7b) and an inner glow (7c). Again we have darkened the curved sides to enhance the roundness of the shape (7d).

Bathtub Tutorial - 7

Step 8

Time for a little correction: delete the inner glow from the “bottom” and darken the gradient overlay to increase the strength of the shadow cast by the inner rim. It’s quite common to modify the settings and the colors along the way. That’s why it’s best to keep the layer effects intact as long as possible and only rasterize them at the very end.

Bathtub Tutorial - 8

Step 9

Go back to the inner rim. Add an inner shadow to it (9a) then create layers from all effects (9b). Move the inner shadow layer above the “bottom” (9c). Cmd-click the “inner rim” (9d) and with this selection mask the inner shadow (9e). Adjust the shadow’s fill to about 10% (9f). It’s essential to have all these shadows and color variations in place but they need to be at the just the right strength, color and opacity to obtain realism. So move those sliders around until you find the correct settings.

Bathtub Tutorial - 9

Step 10

Draw a black ellipse on the side of the tub: it’s the drain hole (10a). Add a medium gray inner shadow (10b) to simulate thickness (10c). Viewed at 100% it looks really good (10d). It’s a bit out of scale but keep in mind that icons are symbolic illustrations and it’s more important to get the message across than to be 100% physically accurate.

Bathtub Tutorial - 10

Step 11

The tub blatantly lacks some legs! Zoom in on the bottom left corner and draw an ornate leg using a path set to a golden color (11a). Rasterize the layer when you’re satisfied with the shape. Lock the layer’s transparency by clicking on the small square with the checkered pattern at the top of the Layers palette. This way you won’t risk painting outside the existing pixels. Grab a light yellow color, hit B to select the Brush Tool and using a small soft brush paint the highlights on the leg (11b). Now select a dark golden color and enhance the shadow areas between the highlights and along the bottom of the leg (11c). Take a look at the finished leg: it looks all right (11d). Mirror it to the right side and reverse the lighting, that means repaint the highlights so they face left and the shadows face right (11e). The bathtub is not floating anymore (11f).

Bathtub Tutorial - 11

Step 12

Let’s add a drop shadow below the bathtub to secure it to the ground (12a). The final touch is reflections. Using a harsh white brush paint some dashes of light to simulate reflections. If you do this on a separate layer you can adjust the transparency to your taste (12b). The bathtub is finished and it can function as the empty recycle bin.

Bathtub Tutorial - 12

Step 13

Let’s fill the bathtub!
Draw the water with a blue rounded rectangle. You can just duplicate one the existing ones and change its color and position (13a). Add to the “water” the same mask applied to the “bottom” (13b). Turn down the opacity to 60% because, you know, water is transparent (13c).

Bathtub Tutorial - 13

Step 14

Add a gradient overlay to the water, making sure the white spot is on top and the effect is set in Screen mode (14a). Now the water gets lighter towards the top (14b).

Bathtub Tutorial - 14

Step 15

It’s time to create the foam!
Open the Brushes palette (F5) and pick the preset marked in image 15a. Reduce the diameter to 10px (15b). Now on a separate layer have fun painting the foam on top of the water, making sure it looks irregular (15c).

Bathtub Tutorial - 15

Step 16

We want the foam to be almost white so hit Cmd+L to bring up the Levels window. Where you see Output Levels move the left slider (the black point) to the right. This reduces the amount of black present in the layer (16a). Take a look at the result: much better (16b). You might want to add some shadows back in using swift strokes of the Burn tool (16c). You also might want to tinge the foam blue. Do that with the Hue/Saturation control, moving the top slider (Hue) until the foam turns blue. Remember to be subtle! (16d)

Bathtub Tutorial - 16

Step 17

Something is missing…a plastic duck! Paint it in very quickly using simple brush strokes and solid colors: yellow for the body, orange for the beak and black for the eye (17a). The full bathtub is now finished (17b). Let’s see the two states next to each other (17c).

Bathtub Tutorial - 17 - InstaTuts

Conclusion

Hey this was fun, wasn’t it? Now all you need to do is make all the remaining sizes (64, 48, 32, 24 and 16 pixels) and create the finished icons. When you see the bathtub overflowing with foam and the little duck floating around you’ll know it’s time to empty the recycle bin.

Bathtub Tutorial - Photoshop

Download the PSD HERE!