flow14 » how-to http://www.flow14.com reflections on design, creativity, web development and more! Wed, 14 Apr 2010 17:55:38 +0000 en hourly 1 http://wordpress.org/?v=3.0 7 steps to subtle suede http://www.flow14.com/blog/7-steps-to-subtle-suede/ http://www.flow14.com/blog/7-steps-to-subtle-suede/#comments Thu, 02 Aug 2007 04:40:41 +0000 Kyle http://www.flow14.com/blog/2007/08/01/7-steps-to-subtle-suede/ There’s a new soon-to-be-overused web design technique making its way across the internets. I don’t know if it has a name yet, so I’ll dub it… subtle suede. (Sandpaper would have worked too, but it doesn’t sound as sexy.) I first used it on a work project, then this blog, but I think the technique received its widest acclaim thanks to Blue Flavor’s tasty Leaflets site.

It super easy to create… all you need is Photoshop and a few minutes to kill. Here’s the how-to:

1. Create your canvas. This texture repeats fairly seamlessly, so size doesn’t matter. I’ve selected 100×100 to make things easy to see here.

subtle-suede-step01

2. Fill your background layer with your favorite color.

subtle-suede-step02

3. Add a new layer and fill that with any ol’ color.

subtle-suede-step03

4. With your new layer highlighted, make some noise. Go to Filter > Noise > Add Noise…

subtle-suede-step04

5. Leave Monochromatic checked, then tweak the Amount and Distribution values to your liking. My favorite values are picture here.

subtle-suede-step05

6. Time to make it subtle… set your blend mode to Soft Light and crank the opacity way down. I usually set mine to 8% — anything over 15% and the subtlety is lost.

subtle-suede-step06

7. Done. If you’re using this for a background, add it to your stylesheet and repeat appropriately. See the finished result here and here.

subtle-suede-step07

]]> http://www.flow14.com/blog/7-steps-to-subtle-suede/feed/ 1