How to apply noise to your design (Using NoiseGen by Kris Noble)

This is entry is for two types of people:

1. Those who have NO idea how to create nice looking noise.

2. Those who have trouble with photoshop, or just want a quick noise fix

I’m quite aware that there are many ways, and of course faster ways to do this, but this one works for me, it’s just another option. Works especially well for Illustrator.

First of all, I’d like to thank Kris Noble for making such an awesome online app, and solving many designers’ problems. You’ve just made making one great design tool that much easier to use!

I know this site has many features and settings, but I’m going to show you the settings I figured would be the best combo, and get you the maximum amount of sexiness in your art or design with the maximum amount of customizability. Feel free to apply your own twist.

Now, first thing you want to do is go to the NoiseGen Website. Looks like this:

In “Step 1″, adjust the setting like so:

It's just every-so-slightly grey. If I left it white, the contrast might be a bit too much, and it might look more like freckles than noise. Also, if you were to add any kind of color, it wouldn't make it as customizable.

Next, go to “Step 2″, and scoot the noise level up to 50%

Now go to “Step 3″ and make sure the noise type is set to “Dark”

If your composition or design were going to be a dark one, you'd set this setting to "Light", and choose a darker base color in "Step 1", to a value of about 80% black (#333333)

Once you’ve got all those correct, click “Generate Me a Background!”

It should drop it right up on your desktop, and I would suggest renaming it something that would be easy to remember, in a folder you use often for designs or textures. Next, we’re gunna’ drop this sucker into Adobe Illustrator, so open that up (You can do this in Photoshop, too, but I use Illustrator a lot more, so THAT’S HOW WE’RE DOIN’ IT, OKAY?!). Here we go:

Open up whatever file you’re going to be using this noise in. I’ll be using a file I just wanted to add a subtle touch to, my “Hot Lunch” ad.

Nice, right? Good composition, warm colors, gets the point across, I'd say. But let's take a closer look.

Despite the text, it could be hotter. Let's spice it up.

So I just dragged and dropped, but you could also place the noise file you created into the file. What I’m going to do is make it a pattern swatch, by dragging it into the swatches panel.

There it is there! The only problem here is that it's a png file, and if we were to scale it across the entire design, it'd be distorted, and even worse... pixelated!

So in order to make it a pattern, just literally drag it into the swatches panel!

This makes it so that the grain perfectly and seamlessly repeats. How convenient!

Now, you can make a rectangle any size. Make it a bit bigger than the design, and in the “Transparency” panel, switch it over to “multiply”. Knock down the transparency until it stops looking like freckles, and is more ambient and subtle. In this case, 39% worked well.

Not entirely sure, but I believe the blending setting of "multiply" makes all the white in whatever object you chose invisible, and the more white a certain hue in that object has, the less visible it is. Just what I think.

Awesome, looks great! Now if you wanted to add a gradient (I already have in this case), it makes it so that the grain follows the color scheme of whatever falls behind it. Just make sure the noise screen is on the highest layer above everything you want it to affect. Her’s how it came out!

Mmmm. Hot Lunch indeed.

And that’s the tut! Thanks for reading! Be sure to leave a comment if you liked it, hated it, or have any questions! – ジ

No Comments

Trackbacks/Pingbacks

  1. Tweets that mention How to apply noise to your design (Using NoiseGen by Kris Noble) | My Blog -- Topsy.com - [...] This post was mentioned on Twitter by Anthony DURAND, James Bruno. James Bruno said: How to use the #NoiseGen ...

Leave a Reply