iOS Fabric Texture Tutorial

Swimming through the UI of the iPhone and iPad, you’ll discover that a fabric texture is repeatedly used for backgrounds. Any time you open a module that exposes detail, or peeks behind the main view, there will be the fabric. It’s a nice touch, a skeuomorphic visual cue. If you were to tear down the facade of the iOS user interface, behind it would be this fabric insulation.

You can see the fabric employed here both behind the map and in the recent apps panel.

Naturally, I wanted to use this same fabric texture as a background in an iPhone App we’re currently developing. Alas, I couldn’t find this texture anywhere on the interwebs, so I had to make my own.

Tutorial

Create a new file. It should be bigger than the final size of your image. So if your final canvas is 320 x 480, add about 50 pixels to either side and the image size is 400 x 600.

To start off, pick a base color. Fill Layer › Solid Color.

Let’s add the dark grain. Create two new layers. Fill them both in with white and set their blend mode to Multiply.

Add noise to both of these layers. Filter › Noise › Add Noise… Set it around 100, but not exactly the same for both layers, like 99 and 101 for the other. This is because we want a variety of noises (meta-noise?) and no two noise layers to be the same, which could produce clumps.

Select the first noise layer. In order to make these pixels look like a grain, add a motion blur. Filter > Blur > Motion Blur…. Blur Distance should be about 25 pixels. This layer will be horizontal, so set the Angle to 0 degrees.

Add a motion blur to the second layer, except this time, set the angle to 90 degrees for the vertical grain.

At this point you’re half-way done. You can see why you made the canvas larger than need be — you’ll have to crop the edges which don’t have a proper grain due to the blur.

The remaining steps will be performing the same actions on dark layers.

Create two new layers. Fill them both in with black and their blend mode to Screen.

Add noise to both of these layers. Remember not to use a percentage that’s already been used. 100 and 102 works.

As you did with the darkening layers, add a horizontal motion blur to one layer and a vertical motion blur to the other.

Crop the canvas down the appropriate size, in this case 320 x 480.

Now you can adjust the opacity of the layers to get the right amount of texture. I’ve adjusted the lightening layers to 50% opacity and the darkening layers to 40%.

That’s it! Your fabric is ready to be laid under the foundation of your next magnificent iPhone or iPad design.

Now that the grain is in, you can always go back and tweak the color and grain opacity as you see fit.

These directions were made with PhotoShop, but I was able to produce the same results with Pixelmator.

Take a gander at our latest nclud wallpaper for a good example of this fabric in action.

Of course, it ain’t perfect. The true iOS fabric has a bit more variation in the length and weight of its “threads.” If you have a better way to make this fabric, we’d love to hear about in the comments.