Elliot Jay Stocks is a designer, speaker, and author. He is the Creative Director of Adobe Typekit, the founder of typography magazine 8 Faces, one half of Viewport Industries, and an electronic musician.

Tutorial: create a textured background image

Posted on 28 June 2008 18 comments

Article illustration for Tutorial: create a richly textured background image

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

Thumbnail of screenshot for step 1

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

Thumbnail of screenshot for step 1

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

Thumbnail of screenshot for step 1

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

Thumbnail of screenshot for step 1

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

Thumbnail of screenshot for step 1

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

Thumbnail of screenshot for step 1

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

Thumbnail of screenshot for step 1

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

Thumbnail of screenshot for step 1

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

Thumbnail of screenshot for step 1

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

Thumbnail of screenshot for step 1

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

Thumbnail of screenshot for step 1

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

Thumbnail of screenshot for step 1

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

Thumbnail of screenshot for step 1

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

Thumbnail of screenshot for step 1

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

Thumbnail of screenshot for step 1

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

Thumbnail of screenshot for step 1

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

Thumbnail of screenshot for step 1

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

Thumbnail of screenshot for step 1

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

Thumbnail of screenshot for step 1

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

Thumbnail of screenshot for step 1

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.

18 comments

  1. Ethan

    Ethan

    28 June 2008 @ 10:47PM #

    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!

  2. prisca

    prisca

    28 June 2008 @ 10:50PM #

    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 ;-)

  3. Kyle Meyer

    Kyle Meyer

    28 June 2008 @ 11:50PM #

    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.

  4. Curtis Henson

    Curtis Henson

    29 June 2008 @ 12:34AM #

    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.

  5. Jack Franklin

    Jack Franklin

    29 June 2008 @ 02:35PM #

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

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

    Jack

  6. Eddy

    Eddy

    30 June 2008 @ 04:37PM #

    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

  7. Elliot Jay Stocks

    Elliot Jay Stocks

    01 July 2008 @ 02:45AM #

    @ 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. :)

  8. Ricardo

    Ricardo

    01 July 2008 @ 02:15PM #

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

  9. D. Carreira

    D. Carreira

    01 July 2008 @ 03:24PM #

    Elliot, two words:

    THANK YOU! from Portugal
    ;)

  10. Brian

    Brian

    01 July 2008 @ 07:59PM #

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

  11. Erin

    Erin

    02 July 2008 @ 06:10AM #

    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…

  12. Elliot Jay Stocks

    Elliot Jay Stocks

    02 July 2008 @ 01:32PM #

    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!

  13. roger  

    roger  

    12 July 2008 @ 02:37PM #

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

  14. shopping cart

    shopping cart

    15 July 2008 @ 05:09PM #

    Very nice tutorial.

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

  15. Duncan Lee

    Duncan Lee

    17 July 2008 @ 07:08AM #

    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!
  16. Jelle Desramaults

    Jelle Desramaults

    14 September 2008 @ 02:46AM #

    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!

  17. Textures and Patterns Design Showcase - Smashing Magazine

    Textures and Patterns Design Showcase - Smashing Magazine

    19 November 2009 @ 12:29AM #

    […] scrolling.Elliot Jay Stocks uses stones as well and has even a tutorial which explains how to Create a textured background imageNolgraphic makes it differently: a photo of a wall is used.Corner Stone Americus is a church […]

© 2005 – 2014 Elliot Jay Stocks. All rights reserved. Powered by Harmony and tracked by Gaug.es. To keep updated with new content, you might like to subscribe to my RSS feed.