Make transparent, seamless backgrounds in Photoshop!

If you design websites, you surely would be making textures for them in Photoshop. The most tiring thing is to change the background color each time you wish to use it somewhere else. The solution to this annoyance is simple – make transparent, seamless backgrounds.

After a lot of experimenting, I found an easy way to do just that. This post, which is the first part of many to come, will show how easily you can make a transparent, seamless noise background using photoshop.

Here’s what the end result will look like, note that it’s the same texture on all three color swatches (The first one is transparent, so you might not be able to see it)

Transparent, Seamless Background

Let’s start making a transparent, seamless background!

  •  Open up a 200 by 200 canvas in Photoshop.
  • Make the background layer editable (double click). Make sure the background color is white.
  • Click on Filter > Noise > Add noise. Set it around 2-4%.
  • Double click on the layer to open blending options.
  • Under ‘Blend if [Grey]’, drag the first slider from right to left, making the value 254 from (255).
    This step removes all white from the layer.Transparent Seamless BG Photoshop Step 2
  • Make one more layer, merge the previous layer with it.
    This step makes the blending permanent.
  • Set opacity to around 10-15%, blend mode overlay.
  • Finished!

Wasn’t that tough, was it?

You got an amazing looking background, which you can use anywhere!

Here’s the PNG for people who wish to use it (Just right click on the empty area below, and use it)

Final Seamless, Transparent Background.

(PS. I’ve been using this trick on my blog. The background for the ‘continue reading’ button, and the menu bar are the same 😉 )

Discuss on Twitter