Random Lighting in Adobe Photoshop

On the web, most things that aren't photographs, are two-dimensional, monotone areas, devoid of lighting.

The key to making websites that really stand out has to do with two factors - lighting and randomness.

This tutorial goes through the steps of making a very funky piece of wallpaper. The main focus of this tutorial is on the random lighting aspect, based on Adobe Photoshop's "Clouds" tool, but I'll also go into creating what I call a layer of "Canopy Lighting", by using a Noise Gradient. (Noise Gradient is only present in Photoshop 6.0 and later versions.)

1 – Creating some wavy patches

Make a new image, 6000 pixels wide and 4500 pixels high. With the default black and white selected, click Filter > Render > Clouds. Clouds are an excellent way to create randomness.

Turn the clouds into coloured patches, by clicking Image > Adjust > Brightness/Contrast. Set the Contrast to +100. You can also alter the size of the patches by changing the Brightness.

Zoom out (Press Ctrl -) and select about a quarter of the image (you can do it precisely if you like).

Click Image > Crop. (The image was made bigger to make the clouds smaller.)

Click Filter > Distort > Wave. Increase the wavelength to Minimum 200, Maximum 300, and increase the maximum amplitude to 50. Randomise the waves until you've got a nice effect, and click OK.

2 – Making a Noise Gradient

Create a new layer.

Choose the gradient tool. Click on the coloured representation of the gradient. Choose Noise Gradient. Apply the gradient across the image.

3 – Canopy Lighting

Desaturate the layer, by pressing Ctrl+Shift+U. The colours of a Noise Gradient aren't useful here, but it's a good source of randomised lighting when desaturated.

Change it from "Normal" to a Hard Light layer (Adobe Photoshop 6.0) or a Linear Light layer (Adobe Photoshop 7.0.)

This noise gradient layer creates what I call "Canopy Lighting" - visible, unidirectional lighting, with a myriad of different intensities - as if it had gone through the randomising effect of a forest canopy.

The problem with this lighting layer is that it doesn't show up over the black areas.

4 – Adjusting the light

To make the light visible everywhere, select the cloudy background layer and click Image > Adjustments > Brightness/Contrast. Reduce the contrast to -75%. (This makes the white a light grey, and the black a dark grey, so they'll both be affected more by the Canopy Lighting layer.)

If you do this tutorial again, instead of changing the contrast, just increase the layer's lightness by about 40.

5 – Adding some colour

Go to your background layer and alter its Hue/Saturation, by pressing Ctrl+U. Tick "Colorize". Play with the Lightness and Saturation, and select a Hue (colour).

I've used this canopy lighting effect for a number of sites I've made. It also makes a very nice wallpaper

Table Top Web Template

1 – A Stained Wood Surface

Create a new image in Photoshop. I recommend making it 500 pixels wide, by 400 tall. Much bigger than that, and it will take too long to load.

Create a new layer.

Fill the area with a dark orange colour.

Click Filter > Noise > Add Noise. Choose Gaussian, and set the Amount to about 6.

Click Filter > Blur > Motion Blur. Set the Angle to 0°, and the Distance to 10.

If the colour isn't quite right, press Ctrl+U to bring up the Hue/Saturation Properties.

Right-click this layer in the Layers window, and choose Blending Options. Click on Gradient Overlay. Change the Blend Mode to Overlay, and set the Opacity to around 65%. Choose the black-white gradient from the drop-down box, if it isn't already selected.

Create a new layer.

Change this layer's Mode from Normal to Overlay.

Make sure your foreground and background colours are black and white. Click Filter > Render > Clouds.

Click Image > Adjustments > Brightness/Contrast. Set the Contrast to maximum.

2 – A piece of note paper

Create a new layer.

Select a rectangular area.

Fill the area with a very slightly off-white colour.

Click Filter > Noise > Add Noise. Set the Amount to about 3.

Press Ctrl+D to deselect.

Select a light blue colour. Use the Text Tool to put in a row of equal signs (=), followed by rows of dashes. On the Character Palette, reduce your Tracking to a negative number if there are spaces between your dashes. (Click Window > Character if you can't see the Character Palette.)

Right-click your layer in the Layers Palette, and choose Blending Options. Click on Drop Shadow, and change its Distance to 3 pixels.

3 – Adding text and more paper

Download a handwriting font from somewhere, or use the one that I've used. (Copy it to your WINDOWS\Fonts folder. Go to that folder with Windows Explorer, and click File > Install New Font.)

At the bottom of the Layers Window, click the Create a New Set icon. Drag your white paper layer, your blue lines layer, and your text layer into the Set folder you've just created. Right-click this layer set, and Duplicate it a few times.

Click on each layer set, and rotate it a bit, by pressing Ctrl+T.

Change the text of the lower pieces of paper, to make them look realistic.

4 – Making a Pencil

Create a new layer.

Select a long, rectangular area.

Fill the area with a colour. I've used blue here.

Right-click your layer in the Layers Palette, and choose Blending Options. Change the Blend Mode to Overlay, and set the Opacity to 35%. Change the Style to Reflected (this makes your gradient a mirror image). Tick Reverse, and click on the gradient to edit it. Drag the tabs around until they look like the diagram above. This will cause the dark-light-dark bands that give it the appearance of a normal hexagonal pencil.

5 – Adding an eraser

For each of the eraser and metal band, repeat the same process that you used to make the pencil shaft. With these two pieces, give them a Gradient Overlay in the Blending Options. Change the Blend Mode to Overlay, and the Style to Reflected, but don't edit the gradient. These pieces should appear cylindrical, and not hexagonal like the pencil shaft.

Remember, you can use the Hue/Saturation Window to change the colour of your pencil parts at any time. Press Ctrl+U to do so.

6 – Adding the pencil tip

Right-click the layer of your pencil shaft, and click Duplicate Layer. Press Ctrl+T to transform it. Make this new section much shorter, and place it at the end of the pencil shaft, as shown. Use the Hue/Saturation window (Ctrl+U) to change it to a light woody colour.

Create a new layer, and drag it down the Layers window, so it's underneath your wooden pencil tip layer.

Click on your wooden pencil tip layer, and press Ctrl+E. This will merge it into the layer below it. The gradient is now part of the layer, not an added effect, so it will change when you reshape the pencil tip.

7 – Sharpening the pencil

Click Edit > Transform > Perspective.

Hold Alt and Ctrl, and drag the bottom right corner upwards. The other corner will come in to meet it, forming a point.

Select the very tip of the pencil, and press Ctrl+U to edit its Hue/Saturation properties. Reduce the Brightness and Saturation until the pencil tip is dark grey.

Click the empty boxes next to each of the layers that make up the pencil. Then click Layer > Merge Linked, or just press Ctrl+E.

Right-click your layer in the Layers Palette, and choose Blending Options. Give it a Drop Shadow, but Change the Size and Distance to 2, so your pencil doesn't look like it's flying.

8 – Another pencil, and some menu text

Duplicate your pencil, and use Ctrl+U to change your new pencil's colour. (Select the colour of your pencil from the menu first, so you're only changing the pencil shaft colour.)

Press Ctrl+T to rotate and position your pencils.

Type in some menu text wherever you have room. Make your text colour black, but reduce the layer's Opacity.

Finally, click File > Save For Web, and save your image as a jpeg, at Quality 60.

Design an Elegant Abstract Site Header Image in Photoshop

Step 1

Create a document sized 1200 x 600 px (Please note that you may specify any size that you think suitable for your site design, this size can only be used for practice purpose only). Fill the background layer with Black.

Create a new layer called “Radial Gradient Fill” and grab the Gradient Tool (G), select the Radial Fill option and fill the newly created layer as shown below: (you can specifiy any colour you like)

Then Create a new layer call “Angle Gradient Fill” on top of the “Radial Gradient Fill” layer, set its blending option to “overlay”

use the Rectangular Marquee Tool to select the centre portion of the layer, again use the Gradient Tool (Set the foreground colour to white, with transparent background), this time we select the Angle Gradient option, fill the selection as shown below:

Step 2

Duplicate the “Angle Gradient Fill” layer once and keep the blending option of the duplicated layer as “overlay”, go to Edit > Transform > Flip Horizontal and flip the layer horizontally. Merge the twol layer together. Keep the blending mode as “overlay” after the merge.

Apply the “Drop Shadow” blending option to the merge layer as shown below:

Then reduce the previous “Radial Gradient Fill” layer opacity to 60% and you will have the following effect:

Then create a new layer in between the previous two layers, name it as “centre light”. Grab a big soft round brush (600px in my case), set the foreground colour to white, and paint a single dot in the centre of the layer:

Set the layer blending mode to “overlay” and you will have the following effect:

Step 3

I decided to give this image a bit more depth and a bit 3D feeling. So on the “Angle gradient fill” layer, hit Ctrl + T and bring up the free transformation tool, choose the “perspective” option and transform this layer as shown below: (reduce the top width)

Here is the result after perspective the layer:

Step 4

Create a new layer called “shineline”, use the Pen Tool to create the a work path as shown below: (For those who are yet to be familiar with pen tool, I have a post here with some useful links to pen tool tutorials)

Then right-click and choose “stroke path” and select “brush” (make sure you select a small soft round brush). Make sure you have “simulate pressure” option enabled as well.

Here is effect so far:

Step 5

Duplicate the “Shineline” layer a few times, use the Free Transformation Tool to rotate, distort, resize the duplicated layer and mixing those lines together:

Merge those dupcliated layers together and duplicate the merged layer a few more times, again use the free transformation tool to add a few more lines on the image:

Duplicate the merged layer, apply Gaussian Blur with the following setting on the duplicated layer:

You should have the following effect so far:

Step 6

Create a new layer called “shining dots”, load the selection of the “shineline” layer, then right-click and select “Make Work Path”:

Select 0.5 pixel tolerance for the work path. Now let’s grab a 3px soft round brush with the following dynamic brush settings:

Also make sure you tick the “Smoothing” option.

On the “shining dots” layer, stroke the path with this brush and you will see the following effect:

Step 7

Now we can add a bit of cloud/smoke at the bottom of those lines. To do this, we simply create a new layer and use the Lasso Tool with 40px feather to select the bottom portion of those shining lines, and go to Filter > Render > Cloud and render some cloud: (set foreground colour as white, background layer as black)

You may notice I also use the Len Flare with following settings to highlight the centre portion of the cloud:

Change the layer blending option to “overlay” and you will have the following effect:

Lastly we place the site name and the navigation on the image:

Ok that’s it for this tutorial! Of course you can further enhance it by adding some other filter effects, change the colour scheme, etc.

Here are my final image for this tutorial: (click to enlarge)