banner banner





How to create an iPad/iPhone Fabric Texture

Create you own texture for your iPhone/iPad applications in less than five minutes

Made with myManuals


Table of contents

Unfortunately the iPhone SDK does not ship with these nice textured backgrounds you know from Safari, Pages etc.
But with Photoshop (or Pixelmator) it is very easy to create own fabric textured backgrounds and it only takes five minutes…

Please keep in mind that every time you're working with the 'Motion Blur' filter you have to increase the canvas size at least with 100 pixels at each side!

1. Step - Create canvas



« back to top


image
1. Create new canvas (add at least 100 pixels at each side)
- select 'Transparent' as background

image
2. Create new layer (cmd+shift+N)
3. Fill layer with solid color (G)
- use Tungsten (you are free to later adjust this)
4. Create copy of this layer (cmd+J)

Hint: you should name one layer to Horizontal and one to Vertical - you will add some more layers, please do so with them too - this ensures that you later don't mix up the horizontal and vertical added motion blur filter…

image
5. Add a new layer, filled with solid white and set 'Blend-mode' to 'Overlay'
6. Duplicate layer (cmd+J)

image
7. Open the 'Add Noise' filter
- set filter to: 98%, Uniform, Monochromatic
8. Apply filter to both white filled overlay layers

Once again - better name them Horizontal and Vertical…

image
9. Select the white filled noised overlay layer named Horizontal
10. Open 'Motion Blur' filter
-set filter to: Angle 0, Distance 23 and apply filter

11. Select the white filled noised overlay layer named Vertical
12. Open 'Motion Blur' filter
-set filter to: Angle -90, Distance 23 and apply filter

image
13. Add two more layers filled with solid color, set 'Blend-mode' to overlay and this time use pure black as color.
- if you would like to see what is going on, set 'Fill' to 40% - you will later change this anyway…

14. Simply repeat the tasks you already did for the white layers from last steps with the same settings for the 'Add Noise' and Motion Blur' filter.

Please do not mix up horizontal and vertical!

image
16. Add two more layers filled with solid color, set 'Blend-mode' to overlay and this time use white as color again.
- if you would like to see what is going on, set 'Fill' to 40% - you will later change this anyway…

17. Simply repeat the tasks you already did for the white layers from last steps with the same settings for the 'Add Noise' and Motion Blur' filter.

Please do not mix up horizontal and vertical!

image
18. When done - set 'Fill' for all noised and blurred overlay layers (4 white, 2 black) to 24%.

image
If you like, you can now adjust the levels of the first gray solid color layer you've created, so that your new textured background fits your needs…

image
If you like, you can also colorize you background.
There are several ways to do so:

- You can simply colorize the first gray layer
- You can add a new layer filled with a color and set its 'Blend-mode' to overlay
- You can work with the 'Layer Properties' to add a color overlay or even a gradient one
- and so on…

image
When your'e happy with your result - reduce all layers to on (Merge Visible | cmd+shift+E) and crop your new background to the desired size - for example to 1024X768 for the iPad…

The best way to do so is to use the 'Marque-tool' (M) with a fixed size and to copy the selection into a new canvas…

You are of course free to change the settings for the 'Add Noise' and the 'Motion Blur' filters, to change the 'Fill' amount and to add more layers with different shades of black, gray (and white) - until your absolutely happy with the result :-)