How to Create a Leather/String Lace texture or stitching effect
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?
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.
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.
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 :)