Sometimes our web designs can look a bit flat and in need of some texture to bring a new dimension to them. This awesome tutorial gives you three different techniques to explore. Why not give it a try?

Texture in web can be an absolute pain (I’ve certainly learnt my lessons the hard way) but it can also be a treat for the eyes and a fantastic way to add another dimension to your design, if handled correctly.

We must always consider how our designs will transfer responsively, especially when working with textures. Additionally, we must ensure the textures keep their integrity, without bulking up and slowing down a web page. And finally – use texture responsibly!

They may be great for a charity website, an organic bakery or new hipster bar in small doses, but we don’t want to go overboard and create a nightmare for developers and users alike.

And if your project is to create a banking app, for example, you would likely avoid texture here completely! It may not be suitable for something which is required to be highly functional.

Textures are fun, additional elements we can use to emphasise character and personality within our designs.

So without further ado, here’s how I create some of the textures I use in my designs and prepare them for handover.

Clipping To A Texture

Start with a new document in Photoshop. On a new layer, use the texture brush to create your desired clipping mask. I recommend using Creative Market or Spoon Graphics to bag yourself some sweet brush packs. Make sure your brush a good size, perhaps slightly larger than what you need, to ensure it retains quality!

2. At this stage, you can sharpen the brush element if you need to for extra crispness, by going ‘Filter – Sharpen’

3. Next, place the image you want to clip to into the document on a new layer. Position the image so it is on top of, and covers, the texture. You can always move it later if you need to.

4. To clip your image to the texture, you can either go to the layer menu in the menu bar, and select ‘Create Clipping Mask’ or use the keyboard shortcut Cmd + alt + G.


5. If you need to adjust the position of your image, do so now using the select to on the image. Otherwise, select the image and the texture, and merge the layers by selecting ‘Merge Layers’ from the layer menu in the menu bar or the keyboard shortcut Cmd + E

6. Use the crop tool (C) to resize your artboard to fit your newly clipped image.

7. Finally, save this image for web by using the ‘Save For Web’ command under ‘File – Export – Save For Web (legacy). Save as a PNG to ensure the background is transparent! And it’s good to go!

Example of how this technique could be used:

Repeat Speckle Background

1.Open a blank document in a square format. We want to keep the document size as small as possible to ensure it’s not too bulky as a repeat background later. For this background, I used 400x400px.

2. Download and select a speckle brush texture from your brushes panel. Find it under ‘Window – Brushes’. I recommend using Creative Market or Spoon Graphics to bag yourself some sweet brush packs. Alternatively, you can use a PNG or JPEG of a speckled texture image just make sure it is a good resolution. Using either, cover the area in speckles. Remember this is only a small part of the repeat background, so you want to make sure the speckles are not too small or too close together.

3. If you texture has any elements that stand out, this can make the end result look more repetitive than natural, so, you can rasterize this layer (right click the layer in the layers panel, then ‘rasterize’) and use the eraser to remove any unwanted specks.

a)

b)

6. When you finished, save your original pattern tile for web by choose ‘File – Save For Web’, make sure it is set to PNG if you have a transparent background, otherwise JPEG is file. And it’s good to go!

Example of how this technique could be used:

Textured Navigation Bar

  1. Create a new document, I’m using the preset for 15” MacBook Pro (retina)

2.Using the rectangle tool, draw your navigation bar.

3. Create a new layer in the layers panel.

4. Choose your texture brush from the brushes panel, you can find it under ‘Window – Brush.’ I recommend using Creative Market or Spoon Graphics to bag yourself some sweet brush packs. For this, I’m using a ‘dry brush’.

5. On the new layer, use the brush and make a few markings over the rectangle shape, leaving the edges for now.

a)

b)

6. Create a new layer. Apply your brush stroke and divide it into two by using the ‘Rectangle Marquee Tool’ (M) drawing over half, press copy Cmd + C, then press backspace to delete, and then paste in place Cmd + Shift + P. Now you should have the two halves on seperate layers.

a)

b)

c)

7. To make is easier to explain, I labelled each side 1 + 2. You want to click and drag section 2 into the top left of the navigation bar, and section 1 into the top right. It’s important you align the straight edges of the two halves perfectly with the edges of the artboard for it to join and look seamless.

a)

b)

c)

d)

8. Merge layers Cmd + E or ‘Layer – Merge Layers’ and finally, crop the artboard to size and remove and background layers so that you can save the artboard as a transparent PNG. Now, you can have a responsive textured navigation bar!

a)

b)

Example of how this technique could be used:

a)

b)

Why not try out some of these techniques and level up your design skills? Be sure to keep us up to date with your progress!

Jess Caddick is passionate designer and design director currently working for Rally in Salt Lake City, Utah. Jess has a broad and varied design style and when she isn't busy keeping her clients happy she also judges for the FWA.