Richard Stelmach's Web Design Portfolio

Adding texture and realism to web designs is a very popular current trend. You don’t have to look far for examples:

• http://alifelski.com/
• http://meaganfisher.com/
• http://www.wallswaps.com/

Photoshop is the obvious tool for texture, as well as the 1000s of Photoshop brushes and textured stock images that can be handy, Photoshop’s array of filters and blending options make it an incredible tool!

Creating light and contrast in online designs can be tricky and here I will show you a useful technique for creating a glittery effect, just in time for Christmas!

Step 1

Create a layer, select a goldy looking colour (try #A79058) and fill the layer (ctrl+D). Add a mask to the layer. Select the mask and go to ‘filters>noise>add noise’. I would go for about 150% for the ‘amount’, uniform or Gaussian doesn’t really matter, press ok.

You should have something looking like this:

Now, repeat step 1 about 5 times, using different colours for each layer. You need a contrast between light and dark shades of gold (I used #755F2B,#C58014, #DDD49F,# 9A8146 . Sometimes adding a colour overlay to the layer to tweak the colour is handy. Try and vary the level of noise between 100% to 200%.

Step 2:

What the texture is lacking now is the variety of colours and lighting that glitter has. So what I did was find a nice abstract lighting image to place over the top: http://www.sxc.hu/photo/1102636.

Copy the image and paste onto a new layer. Depending on the size of your document you may need to duplicate the image (ctrl+J), flip horizontal to join up with the other image repeat so that it covers your canvas. Then (if duplicated), merge the layers down so that the lighting image is on one layer (ctrl+E).

Now, blur the image a bit by going to filters>blur>Gaussian blur.

In your layers panel, select the blending options and choose ‘multiply’ and maybe bring the opacity down a bit to 95% or so. Some of the other blending options work quite nicely too so pick which one you like best.

Now its starting to look better.

Step 3

I wanted more contrast so I created a new layer, filled it with any colour then take the layer ‘Fill’ down to 0%, found in the layers panel.

Double click the layer to bring up the layer style and select ‘inner shadow’ with settings of opacity 100% and size 161px.

Step 4

Now I felt it had lost some contrast in the glitter so to improve this I created a new layer below the lighting image.

Fill the layer with a lightish yellow (#F7EFD7), add a mask and add noise.

Now repeat the following about 8 times –
- right click on the layer and select ‘apply mask’.
- Create a new mask and add noise.

This way you create a less uniform a sparser array of speckles.

Its now looking quite sparkly.

This can be a useful texture as it is but I find that a spray or dusting effect of glitter is even better.

For the next part you need a custom brush set: http://www.brusheezy.com/brush/850-Wisps. Download the brushes and unzip. Copy the brush file into C:\Program Files\Adobe\Photoshop CS\Presets\Brushes or your equivalent folder.

Load the brushes by selecting the brush tool, opening the brush panel, click on the side arrow to bring up the options and click on Load Brushes.

Step 5

Create a layer folder and place all your layers other than your background layer and inner shadow layer (which should be at the top) inside it.

Take off your inner shadow layer.

Add a mask to the folder

Select one of your new splatter brushes.

Use the colour black and click once to add a new splay to the mask.

It should look like this:

Now invert the folder mask by click on it in the layer panel and pressing CTRL+I.

Voila! You have a beautiful glitter spray as if someone had dusted glitter on a table.

Now you have your glitter other tricks can be used such as:
- Add a glitter texture to text (merge the glitter down, place above text and use the text as a mask – ctrl+click the text layer to get its selection and then add mask on the glitter).
- Or change the colour of the glitter. Merge the glitter down and change its hue/saturation (image>adjustments>hue/saturation)

Hope you find it useful, especially with the abundance of sparkly heaven that Christmas brings!