Create A Simple Canvas Effect in Photoshop

So I thought I would share this great little technique, a really simple and effective way of creating your own canvas effect in Photoshop.

There are many sites around at the moment with this effect being used as a background or as part of the design. It is a really great alternative to simple noise effects or gradients and adds an extra dimension to your designs, really quickly and easily, and the best thing about it, it is repeatable, scalable and very easy to tweak.

So jumping straight in, I find even if I am working with an open document, it is much easier to create this effect in a separate document and then copy it across rather than creating it straight in to my layout, simply because it is quicker, and you have to finally use a step and repeat so it is easier to get a nice square crop on the texture.

Step 1 – Create your workspace

In this example I am creating the texture at 500px x 500px and aiming to crop around 400px square for a good amount of variation on the texture. You could go smaller to keep the file size down, but I find this adds more variation to the texture itself.

Step 2 – Create a layer and add some noise

So now we simply create a new layer and fill it with a white. We then want to add some noise, so we go to Filter > Noise > Add Noise. We want to use 100% noise to make the texture really grainy, and make sure you have Monochromatic checked. Choosing either Uniform or Gaussian distribution makes very little difference for our desired effect.

Step 3 – Duplicate and blur

Next step we need to duplicate the layer we have just added noise to, do this by right clicking on the layer and selecting ‘Duplicate Layer‘.

Now with your top layer selected, we want to add a motion blur. Do this by selecting Filter > Blur > Motion Blur. For this effect we are going to blur at right angles, 90 degrees vertically and horizontally, but the effect works just as well at 45 degrees. So we want to set our first motion blur to ‘Angle 0‘ and distance of 35.

Next we hide the current layer we are working on and select the layer we first created. We now want to repeat the process but this time set the motion blur to ‘Angle 90‘ or ‘Angle -90‘

Step 4 – Add layer effects and cropping

Now the final step we want to combine the effects to make the canvas. To do this we simply make our top layer visible again, and set the display settings of both layers to ‘Color Burn‘. This should leave you with a white screen.

We now need to tweak the color settings to create our desired final effect. We are going for quite a subtle, oldish feel to this canvas, so we are going to set the background of the canvas to be the color #bdb79b.

Finally before cropping we want to play around with the opacity of our layers, in this example I have set both layers to be 20% opacity but you can of course make this is strong or faint as you like.

Step 5 – Cropping

We now need to combine our layers and crop the canvas. There are two ways to do this, and it depends on how strong your canvas effect is to how you tackle it. If your canvas is very very subtle, you can get away with simply taking a swatch of around 200px x 200px from the center of your canvas and cropping this way. But I like to make a pure seamless background.

So to do this, we first of all flatten our layers by selecting all the active layers and pressing ‘Ctrl E‘ for Windows or ‘Cmd E‘ for Mac. We then using our Marquee tool, draw out a 200px x 200px segment of our canvas.

Then instead of cropping, we copy this and paste it over the top of our other layers. We then set our background layer to invisible so you are only left with your 200px x 200px swatch on the screen.

Next we duplicate the layer, select our transform tool ‘Ctrl T‘ for Windows or ‘Cmd T‘ for Mac, and we want to flip the duplicate swatch horizontally. There are many ways of doing this but we are simply going to set our horizontal scale to -100%. This then flips the swatch. All we do now is simply align this swatch to the right or left of the original. And that gives us a seamless repeating pattern left to right.

Now we combine these to layers to make one rectangular shape swatch.

Repeat the above steps but this time we want to set the vertical scale to -100%. So after completing these steps you should be left with a 400px x 400px repeating canvas texture.

We can then crop it and save it for web. As mentioned earlier, this is quite a large texture, but you should still be able to save this image at quite a low file size due to the minimal amount of colors used.

So that is it! Creating your very own canvas effect in Photoshop. You can also try messing around with the settings, creating different colors, depths of texture and angles to make the effect more diverse.