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

  • 2
    I recently had to do this too. I scanned in some stitches, adjusted color, and then turned it into a pattern.
    – DA01
    Nov 14 '11 at 17:19
  • That is what I did myself. I scanned in some stitches.
    – DA01
    Apr 17 '12 at 13:48

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.


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 :)



Look at it to create a texture.

  • 2
    Welcome to the community! Whilst your answer may theoretically answer the question, it would be preferable to include the essential parts of the article in an answer below, and provide the link for reference. Oct 15 '11 at 12:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.