Creating an iOS linen texture in PhotoShop

Monday October 11, 2010 | Tutorials

Within Apple's iOS there's a linen texture that lurks behind everything.

Double-click the home button on your iPhone to bring up the multi-tasking bar, or create a folder on your home screen and you'll see a soft, elegant, dark linen texture. It is one of the many things in the iOS that helps to give the environment a warm, human feel.

This texture can be found elsewhere in the iOS and has popped up all over the web, as tends to happen with things Apple designs (see: aqua buttons).

This fabric look is pretty easy to achieve in PhotoShop.

First order of business is to create a fresh PhotoShop document. I'm going to start at 600 x 600 px in size. We'll be trimming some of this down in the end to get what we need, so make your document bigger than what your final size needs to be. Here's my new document window:

With our blank canvas created let's get to making our linen. You'll need to pick a base color for your iOS style fabric. Your final result will vary a little from what you start with. So you may have to play around with it a bit.

After you've picked out a color, create a new layer and name it 'Base.' Fill this 'Base' layer with your selected color. I used #767676 as my base, which is a medium shade of gray.

The next step in the process is creating the grain which we'll blur out eventually to create a nice thread-like look.

Create two new layers and name them: 'Horizontal - Multiply' and 'Vertical - Multiply.' Fill both new layers with white.

On both of these two layers we're going to add noise. We'll start with the 'Horizontal - Multiply' layer. Go to the Filter menu and choose Add Noise from the Noise sub-menu (I'll represent menu choices like this from now on: Filter>Noise>Add Noise...).

You'll get a window that looks much like this. Your default values may look different but we'll change them soon.

For this layer we'll use the above settings (Amount: 65%, Uniform and Monochromatic). After you've adjusted these settings click the OK button to apply them to your layer.

We'll do the same thing for our 'Vertical - Multiply' layer. The only difference will be the Amount of noise we add. You'll want to choose something different from your first percentage, which was 65%. Vary it a little, but not too much. Try something like 70% or 60%.

Set both of these layers' blending modes to Multiply from the layer palette drop-down, like so:

Now it's time to get our grain on. We'll be using motion blur on these two layers to get our thread-like look. Select the 'Horizontal - Multiply' layer and then go to the Filter>Blur>Motion Blur... menu and you'll get a window like this:

Make sure the Angle is set to 0° and use a Distance of something like 50 or 60 px and then select OK.

We'll do the same thing to the 'Vertical - Multiply' layer now, the only difference is we'll us 90° as the Angle to create the cross-hatching look of fabric.

At this point you should have something that looks like this:

You can stop here if you like. It is a perfectly good linen texture. This version is a bit more muted and soft than what you see around the web. If you fancy this softer look, simply go to the Image>Canvas Size menu and make the canvas 500 px wide and 500 px high. This will trim off the rough parts around the edges created by the motion blur.

We'll keep going though and show you how to make some highlights on this linen to really make it pop.

We're now going to add two more layers to our document. We'll name them 'Horizontal - Screen' and 'Vertical - Screen.' Fill each of them with black.

Add noise to both of these layers. Mix it up as before. Try using Amounts such as 62% and 68%. The point is you want a different noise pattern for each of the layers to create a unique 'thread' pattern.

Set both layers' blending modes to Screen from the layer palette, like so:

Now use motion blur (Filter>Blur>Motion Blur...) to create our threads again. These threads will act as highlights for the underlaying darker layers. Use 0° for the horizontal motion blur and 90° for the vertical.

You should have something like this at this point:

You can play around with the blending modes for this top two layers. Try using different modes like Lighten or Color Dodge to achieve different looks.

We'll now crop our document a little to get rid of the unnecessary roughness around the edges.

Go to the Image>Canvas Size menu and you'll be presented with a window like this. Use these settings and choose OK:

You can now save this as a JPG or PNG and use it as you like. Apply these techniques to try different colors and try different angles with your motion blurs to create different looks. Make it your own.

Want to make it nice and moody looking?

Select all your layers (click on the top most layer and then hold shift while then clicking on the bottom most layer). After you've selected them all press Command-Alt-E (Control-Alt-E on the PC). This will create a merged copy of all of your layers and place it on top.

Double-click this new merged layer to access the Layer Style palette. Select Inner Glow on the left-hand side of the window. Use these settings to add a nice darkened border around your image:

The color I used above for the Inner Glow is #585858, though you can use whatever you like. You can also use other blending modes to get different effects.

End of Article

Fill in the form below to leave a comment.

Important: Please refrain from asking support questions or filing bug reports in comments. Please use our support desk to do that so that we can better answer and keep track of them.









  






Comments

avatar

deviant said...

Excellent tutorial.

Could you tell me what the font is you’ve used in the top example image? It goes great with the background

Thursday October 28, 2010  
Adam Shiver's avatar

Adam Shiver said...

The font I used on the example is called Kewl Script.

Thursday October 28, 2010  
avatar

deviant said...

Thanks smile

Thursday October 28, 2010  
avatar

mmz said...

Thanks! Nice simple tutorial.

Tuesday June 14, 2011  
avatar

Robert said...

Thank you a thousand times, it’s the most beautiful iOS-folder-texture I’ve ever seen! Maybe even more perfect than the original one grin

Wednesday June 15, 2011  
avatar

yarin sasson said...

thx! great tutorial

Sunday September 04, 2011  
avatar

Jessica Mertz said...

Thank you so much for the tutorial.  The results are wonderful. Might have to change the tiled background on my website to this linen.

Friday September 16, 2011  
avatar

sam said...

Bravo.
Excellent tutorial.

Friday September 16, 2011  
avatar

RJ said...

This is great, thank you so much. I used it as my twitter background.

Sunday October 16, 2011  
avatar

sharma said...

Nice tut! Thanks man I’ve been wanting to make this texture for a while.

Incidentally did you reduce the opacity on the screen layers? It left the image practically white before i did.

Wednesday October 19, 2011  
avatar

Martijn Oud said...

I really love this effect, thanks for the tutorial. I’ve found that adding a filter > render > cloud on a new layer with 15/25% opacity gives it a nice touch.

Thursday December 01, 2011  
avatar

April Wong said...

Great tutorial ! Thanks!

Thursday December 08, 2011  
avatar

kropped said...

Excellent!!

Tuesday December 13, 2011  
avatar

Amber said...

Great tutorial! Thanks for putting it together. It’s exactly what I needed for the background of a blog we are working on.

Wednesday February 15, 2012  
avatar

Alicia said...

This has been the best tutorial I have ever used!  Thank you so much!  I really appreciate it!  I am using Pixelmator which is similar to Photoshop & the tutorial was still just as easy to use.

Thursday May 03, 2012  
avatar

Alicia said...

I have a question… I have some background patterns that I would like to have behind the linen overlay.  Instead of using the Base as a solid color, I open the patterened jpeg “paper” & then apply all the other layers as you have described in the tutorial.  My only problem is that the layers make the background pattern paper really dark.  I’ve tried using the different blending options like Lighten, Soft Light, etc, but when I use them it makes the linen almost disappear.  Is there a way to make the linen have more of a transparent “background” so that the patterned paper shows through more vibrant?  Hope that makes sense.  Thank you!

Thursday May 03, 2012  
Adam Shiver's avatar

Adam Shiver said...

@Alicia - Instead of putting your texture or pattern under the linen, try placing it above the linen. Put it on top and use different blending modes to achieve the look you’re going for. You may also need / want to play with the opacity and levels of your pattern layer.

Friday May 04, 2012  
avatar

Alicia said...

That did give a nice effect!  Thank you!

Saturday May 05, 2012  
avatar

Tom Creasey said...

An awesome tutorial, so easy to create and an excellent result at the end. Thank you so much for posting this!

Thursday June 14, 2012  
avatar

Emi said...

Dude! excellent tuto. Love the final outcome. Thanks!

Thursday June 28, 2012  
avatar

Robert Dall said...

WOW this is a great tutorial!

I usually get lost in the Photoshop tutorials on the web. But this one was really straight forward simple and not overly wordy… 

Thanks!

Robert Dall
http://robertdall.com

Monday July 16, 2012  
avatar

Ben Seaver said...

Thanks so much for this tutorial! adding the effects to the four layers on top of the base color layer makes it SOOOOOO much easier to get the right color compared with other methods I’ve seen online.

Friday March 15, 2013  
avatar

arianne said...

fantastic tutorial! thank you so much!

Tuesday April 09, 2013  

Take me back to the blog