Advertisement


How to Create a Leather/String Lace texture or stitching effect


Question

So I've been going through some iOS designs and love the features you see in bar gradients. More specifically the textures are to die for - but I'm still fairly new to mobile design stuff. I'm wondering if anybody can help out with a method for creating textures or the repeating string/lace pattern found in this example?

enter image description here

You can see another small example with the bottom tab bar. This still uses the pink outer lace but has provided space for 2 button icons.

enter image description here

2011/11/14
1
4
11/14/2011 1:14:00 PM

Accepted Answer

If I were to do this in the context of a user interface, and I had access to OS-level compositing, I would probably try to do this with a colored gradient, a repeatable grayscale leather/fabric texture which is "evenly lit" (no lighting effects) which I would overlay on top of the color with multiply. Finally, I would apply a stitching texture.

This has the benefit of being scalable to any size, customizable to any color, small data size for disk storage.

TLDNR; small repeatable grey textures laid on top of a calculated gradient.

enter image description here

Last frame is a swap out of the color gradient.

And if I didn't, I would compose it in such a way that I made a small slice which was at least scalable in one direction.

2011/11/15
3
11/15/2011 7:19:00 PM

Once you have the elements with their textures, the stitching is not too difficult to make with, say, photoshop. Example: http://www.zenelements.com/blog/digital-sewing-thread/

1) Draw the stitch/es with a circular brush

2) Use a subtle Bevel and Emboss for highlights and shadows.

You can also add a Drop Shadow to the final effect. Try different options with these tools and see what happens. The best way to learn is experimenting :)

2011/11/14