It seems that a fair amount of people want to know how I create background images like the one on this site. Well, the lovely chaps at .net magazine have given me permission to re-publish the tutorials I write for the mag on elliotjaystocks.com, so, from issue #168, here’s the first (of many) web graphics tutorials – now completely free! You’ll want to download the source files, by the way, and here’s a preview of the end result. Click the thumbnail images to view the full-size screengrabs on Flickr.

Step 01

Open a document. Create a Photoshop document with a width of 1,400 pixels, a height of 900 pixels, and a white background. Press Ctrl/Cmd+I to invert the image to black. Use View > New Guide to create vertical guides at 250 and 1,150 and a horizontal guide at 600.

Step 02

Locate the textures. Open the six JPEG files in the ‘textures’ folder from the source files, then drag the images onto your new Photoshop document. Shift-select all of the layers and choose Layer > Group Layers. Now change the name of the group to “Textures”.

Step 03

Alter the scale. Use Free Transform (press Ctrl / Cmd+T) to shrink the first layer (called ‘1’), so that it ends up only slightly bigger than the entire canvas. Exact sizes aren’t important, but don’t reduce too much, because you don’t want to scale up from reduced pixels later.

Step 04

Lower the brightness. Later on, you’ll use the previous technique to scale down the other layers when necessary. For now, though, with the layer called ‘1’ selected, choose Image > Adjustments > Hue/Saturation and reduce the Lightness setting to -60.

Step 05

Lower the opacity. Drag the layer named ‘8’ up the layer stack so that it sits above ‘1’. Select Soft Light from the Blend modes drop-down and use the Opacity slider to take the image’s opacity level down to around 70%. This adds some more texture, but more importantly, it successfully brings out variation in colour.

Step 06

A smooth gradient. To fade out the sharp edge at the bottom, enter Quick Mask mode (press Q) and select the Gradient tool. Drag a gradient down vertically, with a starting point of 200 pixels above the bottom horizontal guide. Exit Quick Mask mode (press Q) and delete the selection.

Step 07

Move the mountains. Drag the mountains layer (‘10’) to the top of the stack and use the Free Transform method from step 3, but this time leave the image bigger. The trees should appear near the bottom of the document, and most of the clouds should be hidden off the top of the screen.

Step 08

More masking. Use the masking method from step 6 to fade the bottom of the layer. Change the layer’s Blend mode to Soft Light. Hit Ctrl/Cmd+Shift+U to desaturate. Set Opacity to 80% and then play around with the vertical position of the layer, dragging it down until you’re happy.

Step 09

Adjust the threshold. Drag the layer named ‘4’ to the top of the layer stack, and use Free Transform to resize it so that the whole layer is sitting inside the document. There must be no overlap. Select Image > Adjustments > Threshold and set the Threshold value to 80.

Step 10

Make a mess! Using a solid white brush, paint over the top of layer ‘4’ so that the blacks are evenly spaced and there are no clear edges to the layer. Don’t worry about being neat here – the black that’s left should look like a random messy pattern, as shown in the image above.

Step 11

New brushes. Ctrl/Cmd-click on the layer’s thumbnail to load it as a selection. Select Edit > Define Brush Preset, call it “Custom Brush 01”, delete layer ‘4’ and deselect. Create a new layer group above “Textures”, name it “Brushes”, and create a new layer in called “Brush 1”.

Step 12

Add texture. With your new layer selected, choose the Brush tool and select your custom brush. The diameter should be 500 pixels. Use white as the colour, and click anywhere once to paint. Set Opacity to 20% and move around the document until you’re happy with the placement.

Step 13

A second brush. Create a new brush using layer ‘6’. Move it to the top of the stack and apply the Threshold with a value of 150. Invert the layer. Erase the hard edges until there’s a random dispersion of marks. Define the brush by selecting Edit > Define Brush Preset. Name the brush “Custom Brush 02”.

Step 14

Effective erasing. Delete layer ‘6’ and deselect. Create a layer under the Brushes group called “Brush 2”. Paint a stroke with the new brush. Set Opacity to 20%. Drag layer ‘7’ to the top of the Textures layer group. Select the Eraser tool. Use a soft brush with a radius of 300 pixels to erase the edges.

Step 15

Check the results. After erasing, you should be left with the image’s shape. Flip the layer 180 degrees using Free Transform and change its Blend mode to Soft Light. Experiment with layer position and erase more if necessary. This layer should add colour without hard textural edges.

Step 16

Make preparations. Create a new layer group above the rest called “Preparations”. Within this, create a layer called “Edges”. With the new layer selected, make selections from the top, right and left edges of the document to each guide, filling each selection with a gradient coloured #333333.

Step 17

Save for web. Create a new layer beneath “Edges” and name it “Tone”. Fill this layer with the colour #333333 and reduce its Opacity setting to 30%. Choose File > Save For Web and save it as ‘background.jpg’ (high quality) in a new folder called “site”. Your file should resemble ‘step17.psd’ in the ‘steps’ folder from the source files.

Step 18

Background image. Open a new, 1×1 document with a transparent background. Fill the sole layer with black and set Opacity to 50%. Go to File > Save For Web and save as ‘repeater.png’. This will serve as a semi-transparent background to our website’s content, allowing for readable text.

Step 19

Set the styling. In a text editor, open ‘index.html’ from the ‘site’ folder. View it in a browser: it only has default browser styling, so open ‘css.txt’ in a text editor and paste everything from ‘index.html’ directly above the closing tag.

Step 20

And we’re done! Hurrah! Here’s the finished thing.

Tip: Using guides. The guides I’ve used indicate a “safe” area that caters for users with 1,024×768 screen resolutions. “Why do we have a width of 900×600 then?” you may be asking. Well, even if the browser window fills the full screen, we lose screen real estate to elements such as toolbars, scrollbars and window chrome, and these have to be considered. Window size can vary depending on a number of factors – including whether or not the user has their window maximised – but catering for the most common set-up is the best way to ensure usability across the majority of browsers.

Tip: DIY textures. You don’t have to stick to the layers and textures provided on the CD. Once you’ve grasped the methods I’ve outlined, you could just as easily use photographs of your own. You could make use of the photos as they are, or turn them into custom brushes in Photoshop. Next time you go outside, take a digital camera with you and shoot the cracks on the walls, the dirt on the floor, and the bark on the trees. You really don’t need stock imagery, because texture is everywhere! The more you use your own found objects or textures, the more original your site will look.

• * *

While I redesign elliotjaystocks.com, I’m working on the display and formatting of tutorial posts, but if you have any suggestions, I’d love to hear them – just leave a comment below.

• * *

UPDATE: I forgot to credit my wonderful girlfriend Samantha, who took most of the photos used as the source images (I took the rest). Also, the text in this tutorial was taken directly from the magazine (as opposed to my original version), so a credit should go to Shaun Weston, who made a few subtle improvements to the text I sent over.