Textured backgrounds in Photoshop

24 Feb 2011

After writing the articles about the creation of an inset effect on text in Photoshop, followed by how to create this same effect in Illustrator , I received the request from Josephine if I wouldn't mind explaining how I created the textured background of the graphic used in that article. Here is how I did this…

The textured background

Below is the background I'm talking about. It uses different elements combined, stacked in different layers on top of each other, using different opacity values and layer modes. There is no exact method on how you create such a background. It comes down to trying different things out and see where you end up. The only reoccurring fact, at least for me, is that I mostly end up using a combination of different elements stacked on top of each other.

The Power of Inset - Use subtly and with caution

It's a matter of using your creativity in combination with some experimentation really. When doing so you sometimes create surprising results. That's the beauty of experimenting. However there are always a few tricks that can help you along the way. While building up your experience in Photoshop you'll get better at estimating what the outcome could be if you apply certain effects, layer modes etc.

The different layered elements

The different layered elements of a textured background

Each element sits in its own layer using a certain opacity value and layer mode. Below I show you an image of the different elements this texture is made of:

The different layered elements of a textured background
  1. The background layer using a color that influences the layers on top.
  2. An image of the texture of old paper, whose colors have been tweaked a bit to achieve the required result using Hue & Saturation and Levels. The layer of this image is set to 80% opacity and in Multiply mode.
  3. Random color effect using a big soft transparent Brush. I've used a very flashy pink and orange and added a layer mask to erase and soften the effect a bit. Then I reduced the opacity of the layer to 60% and used Overlay as layer mode. I added a Hue & Saturation adjustment layer on top to reduce the saturation a bit (of all layers below).
  4. An image of the texture of jute, whose hue has been set to -100. Could be that I tweaked the levels of the image as well (I don't remember) to achieve an extra textured effect. The layer of this image is set to 35% opacity and in Overlay mode.
  5. Just to finish things off, I added 2 different layers with some transparent grunge brush effects. For one layer I used a very light color, and for the other a slightly darker color. Only the darker one uses an opacity of 75%. Both layers use Normal as layer mode.

Experimenting is key

The above explains only how the creation of this particular texture. As mentioned before, every texture is created differently, and built on pure experimentation. Trying out different settings, different effects, different colors, all kinds of texture imagery, in combination with different combination of layer modes and opacity etc. There is no rule of thumb. Experimenting is key, and by doing so you might end up surprising yourself. If you are looking for a free stock photo site you could use Stock.XCHNG to find a picture of old paper for example. I hope that this example gives you ideas and inspiration to try some stuff out yourself.

Comments

  1. 1 Andrew 24 Feb 2011

    Simply beautiful! Any chance of getting this in a PSD for the textures alone?

  2. 2 PimVV 24 Feb 2011

    I like the way the typography is embedded in the texture and how its smoothness makes a great contrast with the subtile noise in the background!
    Amazing colors

  3. 3 Widi Mawardi 26 Feb 2011

    Great combination of color and texture.. is there a chance to get the .PSD :)

  4. 4 musc 27 Feb 2011

    yes indeed it’s a very nice tut,
    i love the colors and the embedded style too

  5. 5 Veerle Pieters 27 Feb 2011

    @Andrew and @Widi Mawardi

    Any chance of getting this in a PSD for the textures alone?

    Nope :) I’m a strong believer in not making it too easy. The best way to learn is to do it on your own without the actual PSD. Giving the PSD file is a lazy way of learning imho. I like readers to experiment instead of just copying.

     

  6. 6 Jackie 01 Mar 2011

    Hi Veerle,

    You must have read my mind or something, because I was just thinking of emailing you to ask you about how to create such a background effect. I ended up experimenting with some brushes recently myself in Photoshop, and using an artistic effect - the watercolor effect on a beige background color layer. I also tried using opacity and different layers with various brushes, but of course getting just the right brush and colors and effects is as you say, a matter of experimentation. If you want to see the one I did, it is located as a background image on this contact form page I did for a friend: . (It is the beige background inside of the form space on that page.)

    I wanted it to look like parchment paper, or something similar. I was also thinking about how to make fonts that look like they have such effects, too. I have seen this everywhere - fonts that look like the letters have a sponged or blotchy or have the grunge look to them, with white or background showing through the letters.  I have seen it used in a Chevron ad, most recently but the effect is used a lot everywhere on ads and posters.  I don’t know exactly how it is done with the fonts - I assume using Illustrator, but probably you can do it in Photoshop too, then add some effects, or brushes or something - but maybe that could be your next tutorial?  I haven’t had much luck with trying to do this myself.

      Thanks for doing another inspiring tutorial!

  7. 7 Chew 03 Mar 2011

    Great ideas here and definately worth a try.  Photoshop is such a valuable tool and you have just proved it!  It would be interesting to experiment with colour and transparency on such a background project.  The number of different exciting variations possible would be fun to discover.

  8. 8 James Morrish 10 Mar 2011

    Love your work. Your site looks amazing!

  9. 9 Jackie 25 Mar 2011

    I have been experimenting with background effects and trying to create them to use as background images on a website.  I created some things using the charcoal artbrushes in illustrator, as borders on basic rectangular and square shapes, then also used another texture overtop of that shape, with opacity applied so the one underneath would show through with its color. The texture I used was either the water paper, or another one that is similar under textures, but I found that it only creates the texture in white, so you have to use it as a separate layer overlay with opacity to create the effect - like you did above with your jute layer. 
    I have seen a lot of websites that use these kinds of background effects, like this one.

    It would be really helpful if you felt like it, to do a tutorial on how to construct these kinds of background images, and position them in a web layout effectively. I also noticed the font on the site above has the same type of textured imprint effect on it, too. That is an example of what I was trying to describe before in my post above (on March 1st). I would love to learn more about how to create these kinds of backgrounds and fonts - if you have some time to do another tutorial on it! Thanks as always for all of your helpful tutorials though! They are all great.

The Deck

Ads via The Deck