David Asch - March 4th 2015
In this tutorial, you'll learn how to create a texture image in Photoshop that can be applied as a CSS mask to blend in text and other web page elements and can be used with our Texturizer widget, too. Our example demonstrates how to add a texture to heading text, matching the theme of the site.
Start by opening the image you want to base the texture on. In the example it's a seamless tiling image of some grass from the DollarPhoto.com stock image site,
We need to store a copy of the image for later use. Go to Select > All (Cmd+A/Ctrl+A). Now Go to Edit > Copy (Cmd+C/Ctrl+C) to make a copy to the clipboard.
We'll need to have a plain background to test the texture. Go to Layer > New > Layer or click the new layer icon in the Layers panel.
Go to Edit > Fill. Choose Colour for the Contents. Select a suitable colour for the background using the Colour Picker.
Select the Type tool. Add some sample text; a single character is sufficient, as long as it will display the texture properly. We've used Lato Black here.
The key part of the technique is using a layer mask, Create a Mask on the text layer by clicking the New Layer Mask icon in the Layers panel, or by selecting Layer > Layer Mask > Reveal All.
Too really see how the effect will appear on the page, we'll apply the texture to the text's layer mask. Hold Opt/Alt and click the layer mask's thumbnail in the Layers panel. We're now viewing the mask as an editable layer, allowing us to work directly on the mask's pixels. Select Edit > Paste or Cmd+V/Ctrl+V to paste in the stored image.
Click back to the text thumbnail to exit the mask view mode. Parts of the background are now visible through the text. This is roughly how it will appear when it's applied to the page element; the non-solid areas of the image mask will hide the area of the text it's applied to.
We can fine-tune the appearance the texture mask if required. Click the layer mask to make it active. Now open the go to Image > Adjustment > Levels to open the Levels dialog. We can adjust the Shadows, Mid-tones and Highlights to change the opacity and strength of the texture effect. Click OK when you're done.
To use the texture as a CSS mask, we need to create a separate document. We'll start by creating a selection of the texture. Hold Cmd/Ctrl. Click the mask's thumbnail. This loads the texture's highlights as a selection. Copy the selection to the clipboard (Cmd+C/Ctrl+C).
Go to File > New. The dimensions of the stored selection will automatically be applied, Change the Background Contents to Transparent. We can also give the new document the name of the texture. Click OK to create the document.
Go to Edit > Paste or press Cmd+V/Ctrl+V to paste the copied texture image into the new document. Don't worry that it's hardly visible, this is expected.
The final stage to creating the texture mask is to save it as a PNG file. Go to File > Save for Web. The only setting we need to change is the image type. Drop down the Preset menu in the top-right corner. Select PNG-24. This will save the image with its transparency preserved.
It's worth noting that PNG files with transparency can be large, much more so than JPEG images. This can end up slowing your site down, especially if you have several different texture images loaded. Keep an eye on the size in the Save for web dialog; you can always reduce the width and height to make them less weighty.
That's the texture and the tutorial completed. This is what the texture looks like when it's applied to text.
I hope you find this tutorial useful in your own projects. If you have any questions or comments, please feel free to do so below and if you like it, I'd really appreciate if you would share it.
Until the next time, take care!