Elliot Jay Stocks

Tutorial: create a textured background image

Written at 5pm on 28.06.08
Filed under Tutorials & Resources / ALL CATEGORIES
16 comments (closed)

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 </head> 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.

16 comments (closed)

Comments are currently closed on this entry, but you can still read those that have already been posted...

• Ethan

  28.06.08

  

  #

  Brilliant write-up. Thanks, Elliot. I especially like the bit about custom brushes, which I never explore enough in my own texture work; you’ve inspired me to try and incorporate them more. Thanks!

• prisca

  28.06.08

  

  #

  Elliot ;-)

  great tutorial - it’s always great to see exactly how those lovely visuals are created :)

  I’d have a suggestion on presenting your tutorials - thinking about this myself at the moment. Screenshots are vital - and yours are really good ;) But I think it would be nicer if I didn’t have to leave your site to view them.
  I’m playing around with different options on my blog at the moment - no ideal solution yet - but I had great feedback on this presentation here:
  http://graphiceyedea.co.uk/wp/2008/06/09/colour-madness/

  showing the screenshots as thumbnails - but allowing the large view using the lightbox. Also only capturing the essentials rather than the full screen seems to work better, seems to be clearer and to be less distracting.

  Thanks again ;-)

• Kyle Meyer

  28.06.08

  

  #

  That issue of .Net is laying around here somewhere…

  I like the layout for the tutorial, the thumbnails work brilliantly as bullets between steps and as a visual guide to process.

• Curtis Henson

  28.06.08

  

  #

  Good tutorial, I have a similar way of making background images.

  I have to agree with Kyle about the thumbnails working as bullets, breaks it up nicely. An option to zoom into a lightbox would be nice, but also having the thumbnail go to the file is a must sometimes.

• Jack Franklin

  29.06.08

  

  #

  Awesome Elliot, as is normal with you! I need more though ;)

  I will certainly try this out at some point soon, cheers.

  Jack

• Eddy

  30.06.08

  

  #

  I earned degrees in mathematics and electrical engineering. Today I work in marketing. You inspire me to learn to design. The readability of this site is fantastic considering all the eye candy present.

  It would cool to see more and more HowTo’s from you.

  Thanks,
  E

• Elliot Jay Stocks

  30.06.08

  

  #

  @ Ethan: Thanks man! Although, after my dealings with Photoshop today, I’m thinking more inline with your tweet this evening. :p

  @ Prisca: Cheers - that’s a good idea.

  @ Kyle & Curtis: Ah yes, I never really thought about the thumbs acting as bullet points. Good call.

  @ Jack: You’re welcome. Thanks for the interview the other day.

  @ Eddy: You’ll be pleased to know that there are plenty more on the way. :)

• Ricardo

  01.07.08

  

  #

  I really like when a great designer share his/her secrets.
  Thanks for sharing this.

• D. Carreira

  01.07.08

  

  #

  Elliot, two words:

  THANK YOU! from Portugal
  ;)

• Brian

  01.07.08

  

  #

  A great tutorial Elliot. I can’t wait to see what you come up with in the future!

• Erin

  02.07.08

  

  #

  Tip from a code monkey who’s trying to expand her design horizons:

  1)Rename css.txt to styles.css
  2)Remove the opening and closing style tags from what is now styles.css
  3)Add the following to index.html where the css code would have gone (in the header) <link rel=”stylesheet” type=”text/css” href=”styles.css” />

  This allows all your css to be outside the html pages so you only have to update it in one place to change the look of your entire site. I assume most people reading this were already aware of that shortcut, but just thought I’d mention it…

• Elliot Jay Stocks

  02.07.08

  

  #

  Thanks guys. Glad you’re enjoying it.

  @ Erin: The reason the CSS was supplied like this and not in the way you suggest (which obviously I use on every single site I build) was so that people could interact a little bit and be aware of what code they were dealing with, instead of having it all laid out for them. Otherwise they wouldn’t learn anything!

• roger  

  12.07.08

  

  #

  not really there yet but nearly how come your scroll is still smooth in ff3 but on mine its very jagged?

• shopping cart

  15.07.08

  

  #

  Very nice tutorial.

  Following your tutorial, through little changes thousands of backgrounds can be created

• Duncan Lee

  17.07.08

  

  #

  I just finished your tutorial. Thanks for putting it all together. It’s very well done. I usually check out design magazines from the library but by the time I get them the CD’s are always gone. It makes it kind of difficult to follow along without all of the source files.

  Who steals from the library? Honestly… But thanks again Elliot!

• Jelle Desramaults

  13.09.08

  

  #

  Nice one Elliot!
  Looking forward to seeing more handy tutorials.

  Subscribing to .net magazine on monday.

  Can’t believe I never used Quick-mask before, brilliant!