Hey, you're viewing my old website! Check out my new one here

Welcome to Branded07

Hiding Puffin
20 Create a Simple Canvas Effect in Photoshop

Create A Simple Canvas Effect in Photoshop

Posted Friday, June 3rd, 2011

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.

Tutorial Image - Creating a Canvas Effect in Photoshop

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.

Tutorial Image - Creating a Canvas Effect in Photoshop

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‘.

Tutorial Image - Creating a Canvas Effect in Photoshop

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.

Tutorial Image - Creating a Canvas Effect in Photoshop

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

Tutorial Image - Creating a Canvas Effect in Photoshop

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.

Tutorial Image - Creating a Canvas Effect in Photoshop

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.

Tutorial Image - Creating a Canvas Effect in Photoshop

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.

Tutorial Image - Creating a Canvas Effect in Photoshop

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.

Tutorial Image - Creating a Canvas Effect in Photoshop

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.

Tutorial Image - Creating a Canvas Effect in Photoshop

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.

Tutorial Image - Creating a Canvas Effect in Photoshop

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.

Tutorial Image - Creating a Canvas Effect in Photoshop

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.

Tutorial Image - Creating a Canvas Effect in Photoshop

Tutorial Image - Creating a Canvas Effect in Photoshop

Tutorial Image - Creating a Canvas Effect in Photoshop

Comments

  1. Graham Says:

    Hey Rob,

    Thanks for sharing this tutorial.
    I never thought of creating my own canvas texture like that before – I can’t wait to give it a try.

    Thanks again :)

  2. rasika Says:

    very nice guide and tips nice effect really .thanks a lot for sharing .

  3. Los Angeles Web Design & SEO Says:

    Good one Rob. It has now become a trend to create web templates with such backgrounds especially portfolio kind of designs. Good one.

    All the best.

  4. Simon Vincent Says:

    Excellent tutorial, very easy to follow. I, personally, use Corel Paint Shop Pro and the way you have written it translates just fine for cross-program use. Wheres the plus1 button lol

  5. Raymonds Says:

    Great tutorial and very nice effect, thanks. :)

  6. Logo Designing Says:

    Woooow…I just bookmarked the page and will use it.

  7. Hannah Rolston Says:

    Thanks for this! will be trying to shortly!

  8. tinagleisner Says:

    Fascinating to see behind the scenes how web design elements gets created. Thanks for sharing.

  9. sanup Says:

    cooool man u rock. a very simple n nice tutorial i really liked it.

  10. Jerad Says:

    Thanks for this! You have a great way of explaining things.

  11. George Hammerton Says:

    Oooh, I like that, very nice!

  12. Thomas Says:

    Nice Rob, Great tutorial! the final result is really awesome considering the number of steps.

    Best,

  13. Create A Simple Canvas Effect in… | BlogPings Says:

    [...] View th&#1077 original here: M&#1072k&#1077 A Simple Canvas Effect &#1110n… [...]

  14. kbren001 Says:

    it can leave you with a bit of a butterfly effect though after mirroring vert and horiz… so take an extra minute or two and use your clone tool to clean up any noticeably mirrored/repeated areas/dark spots… staying away from the edge so it will still repeat seamlessly..
    thanks nice texture

  15. Fred Says:

    Fantastic tutorial, just what I was looking for. Thanks!

  16. Jason Hillman Says:

    I really want to thank you for sharing this tutorial. I had been looking for ways of setting different areas of webpages apart from one another and felt a little archaic using gradients. A Smashing Magazine article on the use of textures gave me the idea of using textures to do so. Your article saved me from looking through zillions of pre-made textures and empowered me to create my own. Just a couple of flips and I’m seamless! Awesome. Simply awesome.

  17. Create A Simple Canvas Effect in Photoshop · Branded07 » Web Design Says:

    [...] Create A Simple Canvas Effect in Photoshop · Branded07 [...]

  18. Ty Martin Says:

    Awesome! I have been trying to improve my photoshop skills so that I can design my own graphics for my websites, and this really helps!

  19. Ricky Says:

    Great tutorial! Thanks for taking the time to put it together!

  20. Mambo Says:

    its very gud to see the website.Thankz Dude

(required)

(will not be published) (required)