Matt Gemmell recently wrote about how to create a Subtle UI texture in Photoshop, and I thought it would be worth showing how to do the same thing in Acorn.

First, I'm going refer you to the Making a Custom Web Button tutorial we put up a while ago. You can skip the step about making the text, and you'll end up with an image that looks like this:

If you're lazy and don't want to go through the steps, you can download that file here: ButtonWithoutTexture.acorn. The button shape is made out of vectors which is nice and handy if you want to resize it for later on.

If you zoom in on the button, you'll notice that there's we've got no texture on the button:

So your goal is to add texture to this button, but without impacting the border or highlight shapes.

1) Select the middle shape that you are going to add texture to (using the move tool) and choose the "Layer ▸ New Layer with Selection" menu item. This will make a copy of that single shape, but on a new layer. Make sure your new layer is selected, and then choose the "Layer ▸ Add Layer Mask" menu item. The layers will now look something like this:

2) With your new shape layer selected, choose the "Select ▸ Make Selection from Layer" menu item, then the "Select ▸ Inverse" menu item. Then click on our layer mask icon in the layers list, and press the delete button. Your layers list should look like this now:

Go ahead and clear the selection by pressing Command-D, and deselect the layer mask by clicking on the layer icon in the layers list. Now you're going to add some texture.

4) Choose the "Filter ▸ Generator ▸ Random Generator" menu item. You'll be asked if you want to rasterize the layer or not. Yes, you want to rasterize it. Next you'll see a preview of the filter in the canvas, and since you have added a layer mask that's a basic outline of your button, you'll only see those areas filled in with the noise generator. Click the Apply button.

Now you have a button that looks like this:

Believe it or not, you are actually pretty close to being done.

5) Click the little fx button on the layer palette to bring up the Layer Styles window. Choose the Color Monochrome style pick a color that's close to the blue you have been using in the button:

Click OK. And then adjust the layer opacity the the layers list to taste. Here it is at about 15%:

And you are done!

This same technique is pretty useful for other parts like backgrounds.