Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

share|improve this question
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
add comment

3 Answers 3

up vote 3 down vote accepted

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

http://www.hongkiat.com/blog/creating-custom-pattern-in-photoshop/

Look at it to create a texture.

share|improve this answer
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. –  Philip Regan Oct 15 '11 at 12:27
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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