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 :)
http://www.hongkiat.com/blog/creating-custom-pattern-in-photoshop/
Look at it to create a texture.
