How to Create Apple’s Famous Linen Texture

If you’ve used iOS in the past year and you have an eye for design then you’ve probably noticed a linen texture that seems to be present throughout the whole of iOS and is making its way over to the Mac. Many think it looks great, many think it doesn’t look so great – regardless of its controversy, it can be nice to include this texture within your own applications and websites.

This texture is present throughout the whole of iOS and OS X, for example, in notification center, in the multi-tasking bar, the background of folders, in the background of Safari and even within iBooks. The purpose of this tutorial is to help you create that texture – for this tutorial I will be using Photoshop, however this tutorial can easily be recreated for Fireworks.

Examples

1. Open up Photoshop and create a new document, for this tutorial I have my canvas 500×700px and called it Linen Texture.

2. Now, once your new canvas has loaded, select the Rectangle tool from the left sidebar (or by pressing ‘U’) and press CMD+- to zoom out. Press it until you’ve zoomed out to be about 33.3%.

3. You need to zoom out as there needs to be a lot of area surrounding the outside of the canvas because the contents of the rectangle will be blurred and we don’t want the edge of the blur to show within the canvas. So, with that in mind, drag a rectangle to fill the space.

4. Once you’ve drawn your rectangle, it’s time to choose a colour – Apple’s convention is to choose a darker shade of gray, and I have changed the fill to #514f4f.

Photoshop

5. Now it’s time to actually add the texture to the shape – go to Filters – Noise – Add Noise. You’ll be asked whether or not you’d like to rasterize the shape, so press OK and proceed. When the dialogue appears to configure the amount of noise, I have selected the amount to be 40%, the distribution to be Uniform and I have checked Monochromatic. With these settings, press OK and you’ll see this horrendously ugly noise pattern added to the your document.

Screen Shot 2012-05-28 at 06.06.31

6. Go back to filters and choose a motion blur (Filter – Blur – Motion Blur) and when the dialogue has appeared, I have chosen the angle to be 0 and the distance to be 120 pixels – with these press OK.

Screen Shot 2012-05-28 at 06.08.30

7. As you can see, our texture is beginning to take shape, now select the layer that contains our texture, right click and press Duplicate Layer and rename the new layer to Rectangle 2.

8. Now, zoom back out to 33.3% and, with the new layer selected, press CMD+T and the transformation tool should open. With this open, move your mouse to any one of the corners until the mouse pointer changes to a bent arrow. Press shift, click and drag the shape to 90º and press enter.

9. We now have our two different patterns, both in different directions but the top layer is completely blocking the back layer and we’re currently not getting that desired effect. Zoom back in and go to the layers palette from within the right sidebar (Window – Layers).

10. Select the Rectangle 2 layer and then at the top of the palette where it says ‘Opacity’, change this value to around 50%, you can experiment to see what you think looks best.

Screen Shot 2012-05-28 at 06.13.54

11. There we have it, you’ve successfully created Apple’s linen texture in under 10 minutes!

Now, you can go on to use this texture in a variety of different places. You can use it within an inner shadow to create an effect similar to Apple’s iOS folder system and the beauty of this texture is also that it tiles itself perfectly so you can also use it as the background for a website and you don’t need to have a large file. Go and play around with the different angles, colors and opacities.

Linen Texture

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote