iOS Fabric Texture Tutorial

Categories

• Design Inspiration
• Tips & Tricks
• Events & Parties
• Happy Clients
• In the Community
• Inside the Studio

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.

1. 

   Jeff Batterton

   July 29^th 2010

   That’s really nice, dudes!

2. 

   Auré

   July 29^th 2010

   Interresting technique ! Thanks for sharing :)

3. 

   Zander Martineau

   July 29^th 2010

   Dave, this is amazing, I have been needing something like this for my new portfolio. Cheers dude

4. 

   Keith Muth

   July 29^th 2010

   nice dave

5. 

   Brian Talbot

   July 29^th 2010

   Pretty sweet - thanks for the walkthrough!

6. 

   Dave DeSandro

   July 30^th 2010

   Dudes, Thanks for all the kind words!

7. 

   Jon Victorino

   August 2^nd 2010

   Nice! This will come in handy.

8. 

   Daryn

   August 2^nd 2010

   I love this so much. Much thanks for sharing this!!!!

9. 

   Simon Robertson

   August 2^nd 2010

   totally awesome. thanks!!!

10. 

    Raj

    August 2^nd 2010

    Wow, you nailed it! I had tried a few methods: motion blurring noise, and using fibers. This one is spot on!

11. 

    Domenico

    August 3^rd 2010

    Did you notice that the article you linked puts forth a very strong argument as to why touches like these are not at all “very nice” and are actually a huge insult to the user? (For what it’s worth I agree witht he article’s author.)

12. 

    Dave DeSandro

    August 3^rd 2010

    @Domenico Valid point. I realize that Adam Greenfield’s position would be opposed to adding more ‘real-life’ visual cues when the interface exists in a digital, networked medium. Its a shame that Notes is designed to appear like an Notepad.

    That said, I advocate that Apple has already established a visual convention for ‘underneath’ or the background until we can usurp it with a more appropriate alternative.

13. 

    Patrick Leon

    August 5^th 2010

    Great Tutorial, Dave. I really enjoy techniques that solely require Photoshop, no external imagery. You can also use a similar technique to create a brushed steel look.

14. 

    Eric E. Anderson

    August 17^th 2010

    Very helpful tutorial - FYI, works exactly the same using Fireworks. I made one for iPhone 4 at 960x640 at 326dpi and it’s awesome. Thanks for the insight and such a simple take on a complicated pattern.

15. 

    Isaac

    August 18^th 2010

    Great article & thank you for the simple walk-through!

16. 

    Werbeagentur

    September 5^th 2010

    Very good tutorial! You can also easily get the look of “brushed aluminium” by playing with the motion blur effect!

17. 

    Martin Ringlein

    September 5^th 2010

    @WERBEAGENTUR,

    The motion blue effect is the technique Dave is explaining within the tutorial. He just describes the more specific details on how to more closely mimic that fabric texture background effect that we see in iOS4.

18. 

    AngelSphere

    September 25^th 2010

    Nice and smooth, simple design! Like it! Good Job!

19. 

    Rutger

    December 24^th 2010

    Thanks a lot! Just created the background for the current verion of incult.nl. It might change in the future, but for now i’m exited :)

20. 

    Lui

    March 21^st 2011

    Amazing thank you so easy and looks great!!!

21. 

    Jenny

    March 26^th 2011

    very cool :D this will be good for my website background!

22. 

    shah riaz sunny

    May 12^th 2011

    Hi,

    it`s really fantastic tutorial. i want more tutorial like this.i want psd to html tutorial.Can u male for us?

23. 

    Sebastian Nilsson

    May 14^th 2011

    That is Awesome! Thanks a lot!

24. 

    Simon

    July 30^th 2011

    Tried another similar tutorial before but this one is the most advanced I saw. Great results, thanks!

25. Commenting is not available.