Ball Of Yarn - Photoshop Tutorial - Digital Art and Design

Recently I had several clients that wanted to feature balls of yarn in their web site design. I tried several ways to draw balls of yarn in Photoshop CS5^R and this is my favorite. It is also very easy to do. It's a good method for small web graphics but might not be as useful in 300 dpi print.

As I've stated before, I like to create as large a graphic as I can for the original, so that I can reduce the image as needed for any project. Because I'm going to reduce this ball of yarn to about 65 x 65 pixels, I started with the project at 500 px x 500 px x 72 resolution.

Choose two shades of color for your yarn. In the example, I used these two shades of tan efe0ce and cebaaa. (Alternative colors: 9099a0 and 37444f)
Fill a layer with one color.
To create the light and dark areas for the yarn, click Filter - Sketch - Halftone Pattern. In the dialog box, set the Pattern Type to Line, the Size to 8 and the Contrast to 5.
Use the Elliptical Marquee tool to select a circle about the full size of the window. Hold down the Shift key to force the Elliptical Marquee tool select a circle.
Paste this selection onto a new layer and name this layer "Circle". We will save this layer as is and work on a duplicate. Right-click on the circle's layer in the Layers panel and choose Duplicate Layer. Name this layer "One". You may wish to turn off the visibility of the layers you are not working on.

Working with the duplicate layer, we will use the Shear filter to bend the vertical rows of yarn into a circular shape. Because this tool requires the rows to be vertical, first click Edit - Transform - Rotate 90 CW if necessary.
Click Filter - Distort - Shear to open the dialog box. Drag the center of the line all the way to the right edge. You will get two curved sections of the circle, one on each side of the dialog box. Click OK.
Now we remove everything that doesn't lay on top of the original circle. Turn on the visibility of the Circle layer and click outside the circle with the Magic Wand tool to select the empty space around the circle.
Go back to the layer One and click Edit - Cut to remove some of the image. The part of the image that's left will overlay the original circle.
Duplicate the Circle layer and name this new layer "Two". Repeat the Shear filter and this time pull a lower point on the line to the right for the distance of one box on the grid.
Add an Inner Shadow filter to the yarn sections on layer One and Two. Right click on each layer and choose Inner Shadow from the menu. Adjust the controls until the sections have a soft dark edge to give each section dimension.
Merge the Circle, One and Two layers. Add an Inner Shadow to the circle to give it dimension.
Save the image as a .psd Photoshop file. Then, as needed, you can start from this master file and reduce a copy to the size you need for your project.

Join us in the Flash forum.

Join us in the Digital Art and Design forum.