In this post I’m going to show you the technique I used to add texture for the cards in my game, Mephisto. Using texture is a great way to spice up the background or borders of a card that otherwise looks a little drab. The great thing about this approach is that you can use it to add texture to any design project!

Here’s an example of a card with and without texture:

As you can see, texture layers lend toward a more “finished” look and add a physicality that might be missing otherwise. Lets go over the basics of how to find and use textures.

How do I get textures?

This might be surprising but you can really use any photo with a texture on it as your base. For instance, take this image of wooden planks.

If we overlay it on a basic color, we’ve created a textured background!

I will cover the basic technique shortly but if you wondering where to find high quality textures, here are a few places:

Google Image Search: This is a good way to find a specific texture you need but be aware of taking copyrighted material.

Design Cuts: You can get some great deals with bundled graphic and texture assets but it might be difficult to find something specific. It also costs money.

Spoon Graphics: This website is chock full of great design resources and has a generous “Freebie” section.

Public Domain Archive: Has plenty of free stock photos you can use.

Pond 5: More creative common photos with a great filtering system.

Transparency and Blending

Now that you’re locked and loaded, how do you use these textures?

In short, you make the texture transparent and apply a “blending mode” in Illustrator.

I should mention upfront that this involves a lot of experimentation. I remember being frustrated at first that my textures were always either too distracting or too invisible to be noticed. To achieve a texture that is both attractive and subtle is no easy task and requires finesse. Let’s go step by step to see how it’s done.

For this example, take a look at the text box of the Vampire card.

I chose to use a gritty, worn metal texture

The first step is to mask the texture image so that it only appears where we want it to. Then I usually set its opacity somewhere between 20–40% to start testing.

Illustrator gives you a variety of “blending modes” that change how your transparent texture will mix with the colors below it. You can think of these as different forms of lighting, akin to Instagram filters.

I apply each blending mode one by one and slide the opacity meter left and right to get a feel for how it looks at various levels of transparency. I typically shoot from the hip when it comes to evaluating a texture. As long as it doesn’t feel too distracting and adds some interest to the background, I call it good.

I ended up using an opacity of 20% and the Hard Light blending mode for the text box.

Side note: Keep in mind that your textures WILL look different once they’ve actually been printed. I use my home printer to run a few tests, and adjust the opacity as appropriate (increasing the opacity if the texture is too light and decreasing if it’s too distracting).

For another example, here are some different opacity and blending mode combinations used in the background of the Vampire card.