Author:Tudor-Ionel Cucu (nickname:Crimz)

Freelance graphic designer Cucu Tudor-Ionel is a student located in Bacau, Romania and currently writing tutorials based on personal projects. At the age of 13 he started working in Photoshop doing virtual-tuning, and then creating different tutorials and websites in his non-existent free time.

See my GraphicRiver portfolio

These are free to download and you can use them in any application whether it’s personal or commercial. Please just be sure to let people know where you got the icons from. We’re offering them at 256px (PNGs) and 500px (PSDs). Download, and be sure to tell your friends to come visit the site to download their icons as well, and as a courtesy, we hope you’ll link to our site. We have a lot more great things coming!

Freebie Details

• Program: Adobe Photoshop CS4
• Version: CS4
• 15 Social Media Icons
• Sizes:256px / 128px
• Zipfile includes: PSD, PNG

DOWNLOAD THE ZIP FILE

Related posts:

1. Free Icon Pack Plus Bonus Set of Social Media Icons
2. Awesome Christmas Icon Pack Freebie!
3. Free Graphic Design Tutorials in Photoshop, Illustrator and More

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.

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

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.

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.

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

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.

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

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

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.

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.

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.

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

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.

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

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

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

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)

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

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.

Download the PSD HERE!

Related posts:

1. How to Create an Icon in Illustrator
2. Create a Print Ready Business Card in Photoshop
3. Magnifying Glass with Photo Zoom Effect in Adobe Photoshop