Skeumorphic design has become a popular — and controversial — trend in recent times. People are designing content that looks more and more like a real-life metaphor — take Apple for example. Among many others, there’s their Notes app — the purpose of the interface of this application is to resemble real life as much as possible whilst also being functional and practical. One texture in particular that seems to be hugely popular is the texture of wood. The wooden texture can be used almost anywhere in any project and still look elegant.
This tutorial aims to teach you how to create a wood texture using Photoshop CS6 so you can use the texture in both your web and interface designs.
Creating the Foundation
1. Firstly, crank open Photoshop (as mentioned, in this tutorial I’ll be using Photoshop CS6 but I believe that you can also follow along with CS4+).
2. With Photoshop open, create a new document. In our instance we’ll make the canvas 600 x 900px and then save the document in your desired location.
3. Now, with your new document, select the rectangle tool and draw a rather large rectangle that spans the whole canvas and a considerable amount over the edge — the reason we do this is because we’ll be applying a motion blur which will dramatically reduce the size of the actual rectangle and change the fill of the rectangle to a nice shade of dark brown (or whatever color you want your wood to be). I’ve used #631700.
4. Now we need to add the actual foundation of what we’ll make into wood. For this, we need to add a large amount of noise to the rectangle. Go to Filter – Noise – Add Noise.. and press OK when you’re told that the shape will be rasterized. I have added 20% noise, checked monochromatic and set the distribution to be Gaussian.
5. Once you’ve added the noise, we now need to blur it to give the effect of wood so go to Filters – Blur – Motion Blur. With the motion blur dialogue open, I have set the angle to 90 degrees and set the distance to 58 pixels. Now press OK.
Making It More Wood-ey
Currently it looks good and all — but it could look a lot better with some minor adjustments! For example, wood generally has random patterns in it, so we’ll add some little touches that’ll make more realistic.
6. First, we’ll add the swirls that you usually find on wood. To do this go to Filters – Liquify and you’ll be presented with a new window. This window allows you to distort your wood to make the swirls and ripples.
7. To liquify the wood, I’ve changed the values in the right of the dialogue to the brush size at 150 and the brush pressure to be 100. Now you can use the brush and make adjustments.
8. Once you’ve added the desired adjustments, press OK and the changes should be applied to your texture.
9. It’s beginning to take shape but it doesn’t quite look like wood yet. Another subtle yet effective adjustment to make is to add a slight gradient — this doesn’t just apply to creating textures; a small gradient can make a world of difference in many situations.
10. To add a gradient, double click the layer that contains the rasterized rectangle we originally created and a dialogue should appear called Layer Styles.
11. With this dialogue open, select Gradient Overlay from within the sidebar and click the checkbox next to it.
12. So we’ve now added a gradient but we obviously need to modify it. Below is a screenshot showing the gradient I have used along with the options configured to make the gradient more appropriate. Be aware that you will have to modify the values slightly so that they work well with your own document.
13. Now that’s what I’m talking about! A nice gradient has been added and it complements the wooden texture perfectly. Now, you can save your file and export a tile for whatever use you had in mind.
You’ve successfully created a wooden texture using Photoshop, and in so doing learned about various different filters and included a nice gradient overlay to your work to add more depth.