Creating an iOS linen texture in PhotoShop
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:
Creating a base
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:
Blurring the lines
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:
Jumping off point?
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.
Cropping our image
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:
Save your work
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.
Setting the mood
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.
Here’s my final version: