People often ask me if the patterns on subtlepatterns.com are available in different colors and styles. On the site, they are not. They are provided “as is”, but nothing should stop you from editing them in Photoshop to suit your needs. I’ll show you how.

For this tutorial I’m going to use «Rice paper 2». You can use any pattern you want, the technique is the same for all of them.

1. Making a white pattern black, or vice verca.

This one is super easy. Start by opening the downloaded PNG file in Photoshop.

While you have the file open, just invert the image by going to Image > Adjustments > Invert (or use ⌘ – I, keyboard shortcut)

Now, right off the bat it might be a bit too dark, we can fix that by using the Hue/Saturation tool. Go to Image > Adjustments > Hue/Saturation. (or use ⌘ – U). I’m going to increase the Lightness level by +10.

Now you can see the subtle grain in the texture a lot better. That’s it. Done.

2. Changing colors

Let’s say you need the pattern to be a green tone. Easy. Again, open the PNG, and this time make a new blank layer on top.

Then fill that layer with the new color you want to use, and set the blending mode for that layer to “Color”. If you can’t find that option, you can go to Layer > Layer Style > Blending Options, and find “Color” there.

Usually I find the default setting to be a bit intense, so you can tone it down if you feel like it. One way to do this is by setting the Layer Opacity to 50%.
Done.

3. Give the pattern some transparency

Let’s say you want to change the appearance of you background pattern just by editig the CSS. This might not be a perfect solution, but It’ll help you on your way.

Start by making the pattern layer grayscale. A quick way to do it using Shift – ⌘ – U on your keyboard. (replace ⌘ with CTRL if you are on PC). Now the layer is in grayscale.
Next you should duplicate that layer (⌘ – J). Now fill the bottom layer with a test color, so you can see a preview of the effect.

I set the opacity of my pattern layer to 80%. You can pick what ever fits your needs.
When you are happy with the preview, just delete the green layer, and go to File > Save for Web  & Devices

Make sure it’s set to “Preset: PNG-24″ and Transparency is selected.
That’s it, go ahead and put your new file as a background pattern and enjoy the freedom!

I hope you found this helpful. If you have any further questions, please use the comment field and I’ll try my best to reply you.