Make Some Noise in Your HTML

I like dirt on stuff. The patina of use. A bit of character. And in a world rapidly hailing our flat design overlords, I still think there’s room for a little texture.

Here’s a trick to add some texture to a background or button or header and easily change the element color without having to re-export a new graphic. This is also really nice when you want to tweak a shade of a color really fast. First you need to make some noise. The Photoshop kind.

Start the Noise

Open a new doc: 80px x 80px, transparent background. (You can make it bigger if you like, but this is usually just fine for a light, even noise.)

Create new Photoshop file

We’re going to add a solid color background so we can see how the noise will look. First go to Layer > New Fill Layer > Solid Color. The color chooser will pop up. Pick a color to which you’re planning to add the noise. I went with red.

Now for the noise layer. Go to Layer > New Fill Layer > Solid Color and we’ll choose 50% gray in the color picker (#808080). We could add a rasterized layer of gray, but what’s nice about this way is you can easily change the color of the noise. Non-destructive editing saves lives.

Choose 50% gray

With the fill layer selected, go to Filter > Convert to Smart Filter. Converting to a smart filter makes it easier to adjust the noise should you want more or less. Once converted, go to Filter > Noise > Add Noise. Set it pretty high—I set mine to 5—because we’re going to lower the opacity a lot.

Now, on the noise layer, set the opacity low, starting somewhere between 10-20%. Your layers should look like this.

Your Photoshop layers

Once the opacity is set where you want it, turn off the colored fill layer and export as a png to your site’s image directory.

Onto code

We’re ready to use the noise in HTML.

In whatever element you’re adding to the noise to, this is what you’re code will look like.

.my-element {
  background-image: url(noise.png) repeat 0 0;
  background-color: #fff //or whatever color you like;
}

Finish line

Below are four examples of the same noise.png over different colored backgrounds. Pretty, pretty, easy. If you’re not happy with the noise, go back to Photoshop and decrease or increase the noise amount or opacity or BOTH. You can easily tweak to get it just the way want it.


Download the PSD: Noise.zip

comments powered by Disqus