Ever wondered how to create perfect, seamless background patterns that work on Photoshop and on the web? Look no further because today we're going to break it down for you - step by step. You'll be creating your own background patterns in no time!
Introduction
Heya everyone! Today we're continuing our tutorial series on creating background patterns that can be used on the web (and during the design phase) with our second edition. We'll be looking at how to create the ever-popular "noise" patterns that so many websites have been using lately. Be sure to check out the first post in the series if you missed it!
Our objective is simple: To teach anyone how to create background patterns that are intended for the web (but that can also be used easily during the design process). We're going to be "program agnostic", meaning that most of the tips will work in both Photoshop and Fireworks.
Today's Patterns
Today is day two in our series - but it's worth mentioning that all of these tutorials are "standalone" - meaning that you should be able to pick right up on Part 4, even if you missed the first couple parts.
The pattern we're going to be covering today is how to create an effective "noise texture" that can be used as a pattern in Photoshop as well as a tiling background on your web pages. We're going to do this in 4 steps:
- Step 01: Creating the foundational noise pattern (Basic Grey)
- Step 02: Inverting the noise pattern (Black)
- Step 03: Adding color (Blue)
- Step 04: Adjusting the shading and hue (Green)
- Step 05: Adding additional vibrancy (Orange)
Ready? Let's do this!
Step 01: Creating The Foundational Noise Pattern
The first step in today's tutorial is probably the most crucial, because we're setting up the foundational elements. There are a lot of different ways to create these noise patterns... but I'm going to show you one of the best (and most flexible!) methods to save you frustration and headaches down the line.
Start by opening up a new document. The size doesn't matter much (we're using 200px by 200px in the demo), but it's best to keep it above 75px to ensure that your noise pattern is believably random. Smaller documents are liable to start looking like "repeating tiles" - documents that are significantly larger will increase your file size without much added value.
Let's add a basic rectangle shape and name it "Base Color" (organization will make life easier later on!). You can use whatever color that you'd like (we used #EBEBEB), but make sure the rectangle occupies the entire space.
Now let's open up a new layer and name it the "Noise Layer". It's just a blank layer right now...
Using the "Rectangular Marquee" tool (M), draw a selection across your entire document while selected on the Noise Layer. Then select "Fill..." from the context menu (Right Click when over the selection - or it's also under the Edit panel) and let's fill it with the color White.
Tip: Next we want to convert the "Noise Layer" to a Smart Object. You can do this by right clicking on the layer and selecting "Convert to Smart Object" or selecting "Convert for Smart Filters" from the Filters menu.
Why make it a smart object? Because this will allow us to retain the ability to edit the intensity of the noise texture later on! There may be steps in the future where we end up needing to flatten the texture, but it's always best to keep things editable for as long as we possibly can.
Alright, Smart Object in hand, we want to add the noise texture.
- Filter > Noise > Add Noise
- Use 4.8% for the amount (you can adjust this later on if you want something more subtle or more intense)
- Select Gaussian for the Distribution.
- Select the Monochromatic checkbox (to remove those annoying colored pixels).
Finally, set the Blending Mode on the Noise Layer to "Multiply" so that only the darker noise pixels are visible. Now you can change the color on the base layer for different noisy color.
Whallah! We now have established the foundational elements for our basic noise pattern...
...and that would be the end of this humble tutorial if we were lazy...
In the next steps though, we're going to show you how to invert, alter and add believable depth and vibrancy to your noise pattern to make it truly stand out from the pack!
Before you move on: Go ahead and group your layers together (the Base Layer and the Noise Layer) using Ctrl+G to create a layer folder. Duplicate it once and hide the original so we always have a copy of it. For each new step, we're going to create a new duplicate group. This is just a good basic habit to have because it ensures that you always have a backup of our foundational pattern.
Step 02: Inverting the Noise Pattern (Black Noise)
Alright, let's twist this noise pattern into something dark and delicious now. I'm going to show you how to create an inverted noise pattern that appears to have a subtle sparkle to it.
Start with a copy of the original noise group (see the end of Step 01). The first thing we want to do is make the background color Black, so go ahead and do that on your Base Layer.
Next, because our Noise Pattern is composed of only "dark" pixels, we need to essentially invert it. Unfortunately, we can't do this as a "Smart" effect, so we need to flatten out the noise pattern. Make sure you have the intensity level set to what you'd like, then "Rasterize" the layer. You can do this by Right Clicking on the layer and selecting Rasterize from the context menu, or from the Layer > Rasterize > Rasterize Layer menu.
Now that we've essentially flattened out our noise pattern, we want to invert it. Do this from the "Image > Adjustments > Invert" panel.
What's wrong? You can't see the Noise Pattern anymore?
We'll need to make some slight modifications to see our inverted noise pattern. First, set the Blending Mode on the noise layer to "Screen".
Next, adjust the "levels" of your noise pattern (Ctrl + Alt + L ... or Image > Adjustments > Levels).
Alternate Method: You can also simply add an adjustment layer for the levels (Layer > New Adjustment Layer > Levels). You might prefer this way if you want to make changes to the intensity later on.
Presto! Now we have a sparkly, inverted noise pattern. Obviously, you can adjust this to your heart's content - make it darker and more subdued - or brighter and more intense. You can even change the base layer color to a dark blue or red to get other effects. Go nuts!
Remember - you save save these as "Patterns" in Photoshop by selecting "Edit > Define Pattern". Do this and later on you'll be able to use these patterns over and over again. You can even save your patterns as libraries and share them with friends and colleagues.
Next we're going to show you how to add depth and vibrancy to your noise patterns...
Step 03: Adding Color, Vibrancy and Depth (Blue)
Let's add some color and vibrancy to our noise pattern now. It's worth mentioning that in the following steps we'll be using some general techniques... you don't need to follow them to the letter - just keep each one in mind for when you go to create your own custom patterns.
Start by adding some color to your Base Layer.
Now create a copy of your Noise Layer and set both blending modes to Color Burn. The duplicate layer will help us get the bottom layer darker. It'll also give us the ability to shift the opacity on a finer scale later on.
Create yet another copy, but this time we're going to Rasterize it and Invert it (see Step 2, Black Noise, for details if you missed it).
Set the blending mode on our new layer to Screen. We also want to add a new Adjustment Layer (Layers > New Adjustment Layer > Levels) so that we can control the intensity of the light noise.
Now let's create a subtle offset by nudging the light layer away from the dark layer (1px up and 1px left) using the Move Tool (V) and your keyboard.
Next, add a layer mask over your Light Noise layer so we can play with it.
Using a roughly textured brush (set to about 130px and the color Black) we want to essentially mask off a bit of our light noise by painting away from the Layer Mask. One brush stroke should do the trick, but use your own judgment. The idea here is to create a rough, random pattern.
Set the Opacity of the layer down to around 45%. You can do less or more according to your own preferences... we're just trying to drop the intensity of the contrast back a little bit though.
Now we have a nice pattern with a bit of depth to it. If you're not digging the depth though, you can easily tinker with this by flipping the light noise layer horizontally to remove the offset and create a simple "sparkle" effect.
Alacadabra! Not bad huh? Here's what the final texture would be:
Bonus Tip: If you notice any subtle "seams" when you go to use your new pattern, try cropping your original pattern down by 5 or 10px all around the edges. You'll often get seams if Photoshop decides to clump up darker noise pixels around the edges of your Noise Layer, so simply cropping off the edges will result in a clean, seamless pattern.
Step 04: Adjusting The Shading and Hue (Green)
The next two steps are going to go quickly. By now we've set the main principles that we need to create just about any noise pattern that you can imagine - so we're just going to show you what this texture can look like when you start playing with the Color and Intensity of the contrast. Let's peek at the Green version...
Start with a copy of the Blue Noise layer group. Go ahead and change your Base Layer color to green.
You'll notice a funny thing when shifting colors around... the contrast coming from the noise tends to shift from subtle to dramatic with different colors. This essentially means that we'll want to adjust the opacity of the noise layers to account for the shifting intensity. There isn't a hard-set rule for this - just play around with the opacity settings until you have the look you're going for.
Finally, here's the finished noise pattern:
I'll mention it once again to be safe - if you notice any seams on your pattern when you go to use in on a larger shape or on your website, what you'll need to do is crop in about 10px all around your shape to remove the "edge" pixels which can be darker when Photoshop adds them in during the very first "Filter > Add Noise" step.
Step 05: Adding Additional Vibrancy (Dual Hued Orange)
Alright - so I've got just one last trick up my sleeve for this tutorial. Up until now, we've only been adjusting the Base Layer when we wanted a new color. This is all fine and well when we want a basic noise pattern... but what if we want something with a little extra life to it?
Well, this last step if for you guys who want just that - a dual hued noise layer that has a bit of a "spark" to it.
Go ahead and start it up by changing our background color. Adjust your noise level opacity as you please (I didn't mess with it at all for this particular demo).
Here's where we throw the curve ball in - add a new Adjustment Layer (Layers > New Adjustment Layer > Hue/Saturation) and make it a clipping mask over the "light noise" layer. Now just tinker with the settings until you get a nice golden color coming from the light noise layer.
The final effect is here:
It's subtle, but the light "glow" coming from that top noise layer is going to add some great life to any projects that you use it in. Enjoy it and create your own variations!
Conclusion
Alright! So I hope you've gotten a little something out of this second session. By now you should have a good understanding of noise patterns and how to use them in your own projects. You can save all of the files that we created here as .GIF, .PNG or .JPG files and use them instantly on the web too... but we've really only just begun.
In the next level of this series we'll be showing you how to create some advanced textural patterns, shape based patterns, transparent patterns, and even more in the future.
Subscribe or check back on the site to see all of the updates to this series as they happen!
