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.

Possible Duplicate:
How do so many app menus get that finished textured look?

I'm still a beginner, but I really like this texture and have been trying for hours to recreate it.

Question: How can one make this kind of texture in photoshop? (the black background behind the navigation menu)

image

It doesn't seem to be a standard color+noise combination. At least not one that I was able to come up with.

For use in a mobile app, I assume it would be best to just 10x10px png and repeat it x/y?

share|improve this question

marked as duplicate by Scott, Yisela, plainclothes, Farray Jan 28 '13 at 16:34

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

    
    
Thanks for that, didn't mean to duplicate. My only defense is that I don't believe it's made with noise like the other link. –  Emin Israfil Dec 10 '12 at 7:47
    
No problem. :) It's monochromatic noise though... a transparent noise image over CSS colors. Either that or a small noise image repeated. –  Scott Dec 10 '12 at 7:48
    
Hmmm...there seems to be some disagreement :) See Marius's answer below. –  Emin Israfil Dec 10 '12 at 7:51
    
Same answer.. it's a noise pattern.. so it's just semantics. It's still noise, but probably a seamless pattern as well. –  Scott Dec 10 '12 at 7:52

2 Answers 2

up vote 4 down vote accepted

It looks like some noise with lines to me. While I didn't match it perfectly, this seems pretty close. Left = original, right = my version.

Step 1: Fill and noise.

Fill with a dark grey, chosen from the original, then add some noise (Filter > Noise > Add Noise). You only need a few percent of noise, and monochrome noise is probably best for something like this.

enter image description here

Step 2: Lines.

On another layer, add some white lines.

enter image description here

Step 3: Line opacity.

Reduce the white line layer opacity to about 5%.

enter image description here

Not identical, but kind of close. If this is for an iOS app, the big question might be how to build for Retina and non-Retina sizes, while still maintaining quality and scalability. In that situation, I'd keep create the noise, save is as a pattern, use it via a pattern layer, then add the lines as a shape layer. Then, I'd use David Jensen's Scale Patterns to 100% script to ensure the noise stays crisp at all sizes (let me know if you'd like a link for the script).

share|improve this answer
    
This probably breaks some kind of rule, but the post involves your work so I thought I'd ask: Can you take a look at this question [link][stackoverflow.com/questions/15280871/… when you get a chance? Thank you :) –  Emin Israfil Mar 13 '13 at 5:42

No, that's a pattern, applied in Blending Options.

You can try to find that texture already made, or recreate it yourself (in Edit -> Define pattern).

Few sites: http://www.brusheezy.com/patterns, http://myphotoshopbrushes.com/patterns/, http://psd.fanextra.com/articles/photoshop-patterns/ or simply Google

share|improve this answer

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