Oct 06

Making fabric textures in Illustrator

Posted by Benedikte Vanderweeën on 06/10/2010 at 09:25 PM   (9) Comments -

Since I’ve got an iPad and using it daily, i’ve looked deeper into the available wallpapers and the overall design of the software and other applications like Reeder (for iPhone and iPad).

I like the textured backgrounds and wondered how i would make these. Till now, I used to search for textured backgrounds and scan them in. Because this is very time-consuming, I experimented a bit with Photoshop and Illustrator to look for some similar results. First I did an attempt in Photoshop but then i switched doing it in Illustrator to see how i could accomplish a similar texture effect but more scalable. I show you the result here and the steps that took me to come to the result. You could use it as backgrounds (tile) or as wallpapers.

Final illustration fabric textrue

I made 2 versions for the background wallpaper. The light blue version is the one that I describe here step by step:

Light blue version

Dark version

download the iPad wallpaper

Step 1 : make a new file

Open Illustrator (i use CS5 but this should work for CS4 as well) and make a new document. Select "Web" from the select list "New document file", give the document a height of 1024 pixels and a width of 1024 pixels (portrait and landscape orientation) all the other settings are ok so click OK.

Step 2 : setting the background color

Next select the Rectangular Tool (M) and click in the canvas, the Rectangle pop-up will appear, type 1024 for width and 1024 for height and click OK. Open the Swatches palette (Window > Swatches). Click the "new swatch" in the palette and select a light blue color (R:155, G:198, B:211). Make sure the rectangle is filled with the blue and give it no stroke. Double click the only layer in the Layers Palette and give it the name "Light blue"

Step 3 : adding 2 new layers

Next add 2 layers on top of the "Light blue" layer and name them "Vertical white" and "Horizontal white". Select the rectangle by clicking on it and paste this layer (Ctrl + F) on the "Vertical white" layer. Give this layer a white foreground color with no stroke. Select this rectangle and paste it on the "Horizontal" layer. Select the first white rectangle by clicking on it. In the menu bar, select Window > Transparency and choose "Overlay" from the blending modes and type 24% for opacity. Do the same for the other white rectangle.

Step 4 : applying the Grain effect

Select the rectangle in the "Vertical" layer and choose Effect > Texture > Grain. The "Grain" window will pop-up and you will see a preview of the effect you are about to apply. On the left, type 36 for Intensity and 0 for Contrast and Vertical for Grain Type and click OK. Do this again for the "Horizontal" layer but select "Horizontal" for the Grain Type.

Step 5 : adding more effect

To add some more noise and grain effect, select both the "Horizontal" and "Vertical white" layer and drag them to the "New Layer" icon to duplicate them. Once duplicated, name them "Vertical dark" and "Horizontal dark". Next, select the "Vertical dark" rectangle and change the foreground color to a dark brown, I used the R: 103, G: 95, B: 83. Change the color for the "Horizontal dark" rectangle. Open the Appearance Panel (Windows > Appearance) and click the "Grain" effect to adjust the settings. Adjust the sliders to your liking and click Ok to apply the changes.

Step 6 : finalizing the pattern

Once you made a pattern with the effect tool, you can apply this as a tiled background for a website. Or you adjust the dimensions for a wallpaper. The flexibility of the Illustrator file is that you can apply different dimensions (iPad, iPhone, Mac, other devices, etc...) all in 1 document with the new "Artboards" panel.

If you have suggestions or want to submit your texture result, please do in this Flickr group I recently found: iPad Wallpaper, thanks!

Readers Comments

1. Binod Chourasia

on 03 November, 2010
at 02:02 PM

avatar Bene

great design,and great ideas too


2. rishi

on 25 November, 2010
at 03:31 AM

avatar Bene

awesome—thanks!


3. zen cart development

on 04 January, 2011
at 02:12 PM

avatar Bene

really very nice information sharing and i am looking for such type of informative news and i get through this blog so i am very much thankful to you.


4. Cholo

on 12 January, 2011
at 09:41 PM

avatar Bene

Very Nice.  Thank you.  Which texture did you use for the dark pattern?


5. Aldis

on 04 February, 2011
at 07:59 PM

avatar Bene

Thank’s for your time and energy. This was very informative for me


6. Vako Pirsta

on 06 February, 2011
at 03:26 AM

avatar Bene

Tjo,  Sachverhalte können manchmal wirklich einfach sein. Danke smile


7. Bradley Kenyon

on 24 May, 2011
at 11:29 PM

avatar Bene

Nicely done. I would recommend familiarizing yourself with the appearance palette a bit more, though. You can do all of this on the appearance palette to avoid the cluttering layers on the artboard and allowing you to save the style to apply anywhere else quickly.


8. Jimmy

on 01 July, 2011
at 05:11 AM

avatar Bene

Hi, love your tutorial.  Can you also share the dark version as well?  I’d appreciate it very much.  Or if you can, send the simple steps to my email account?


9. Jennifer M.

on 04 April, 2012
at 03:59 AM

avatar Bene

Ooh!! I’ve always wondered how people made textured “fabric” like this. Thank you for the easy instructions!!! smile


Leave a comment

  • * = Required fields
  • These tags are allowed in the comments:
    • <strong>bold text</strong>
    • <em>italic text</em>
    • <code>code text</code>
    • <blockquote>blockquote text</blockquote>
    • <a href="">link</a>






Remember my personal information

Notify me of follow-up comments?

Connect with me elsewhere