iOS Fabric Texture Tutorial
Published July 29th, 2010 at 10:48 am February 6th, 2012 by (JavaScript must be enabled to view this email address)
Sketchbook Archives2012
- January
2011
- January
- February
- April
- May
- June
- November
2010
- January
- February
- March
- April
- June
- July
- August
- September
- October
- November
- December
2009
- January
- February
- March
- April
- June
- August
- September
- October
- November
- December
2008
- January
- February
- March
- April
- May
- June
- July
- August
- September
- October
- November
- December
2007
- February
- March
- April
- May
- June
- July
- August
- September
- October
- November
- December
Categories
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.
Have Your Say
November 2012Previous monthNext month |
||||||
---|---|---|---|---|---|---|
S | M | T | W | T | F | S |
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 |
Jeff Batterton
July 29th 2010
That’s really nice, dudes!
Auré
July 29th 2010
Interresting technique ! Thanks for sharing :)
Zander Martineau
July 29th 2010
Dave, this is amazing, I have been needing something like this for my new portfolio. Cheers dude
Keith Muth
July 29th 2010
nice dave
Brian Talbot
July 29th 2010
Pretty sweet - thanks for the walkthrough!
Dave DeSandro
July 30th 2010
Dudes, Thanks for all the kind words!
Jon Victorino
August 2nd 2010
Nice! This will come in handy.
Daryn
August 2nd 2010
I love this so much. Much thanks for sharing this!!!!
Simon Robertson
August 2nd 2010
totally awesome. thanks!!!
Raj
August 2nd 2010
Wow, you nailed it! I had tried a few methods: motion blurring noise, and using fibers. This one is spot on!
Domenico
August 3rd 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.)
Dave DeSandro
August 3rd 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.
Patrick Leon
August 5th 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.
Eric E. Anderson
August 17th 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.
Isaac
August 18th 2010
Great article & thank you for the simple walk-through!
Werbeagentur
September 5th 2010
Very good tutorial! You can also easily get the look of “brushed aluminium” by playing with the motion blur effect!
Martin Ringlein
September 5th 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.
AngelSphere
September 25th 2010
Nice and smooth, simple design! Like it! Good Job!
Rutger
December 24th 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 :)
Lui
March 21st 2011
Amazing thank you so easy and looks great!!!
Jenny
March 26th 2011
very cool :D this will be good for my website background!
shah riaz sunny
May 12th 2011
Hi,
it`s really fantastic tutorial. i want more tutorial like this.i want psd to html tutorial.Can u male for us?
Sebastian Nilsson
May 14th 2011
That is Awesome! Thanks a lot!
Simon
July 30th 2011
Tried another similar tutorial before but this one is the most advanced I saw. Great results, thanks!