CerebralDebris

Welcome to the first in what will hopefully be a series of simple little web design tutorials. I’m going to try to keep things short, easy, and straightforward and not get bogged down in too much complexity. To aid people in further investigation, I’ll end the document with a list of relevant links that should help explain things (for example, this tutorial will link to an example HTML page, and a zip file that contains the final Photoshop PSD).

Today we’ll be making a website background image that’s similar to the one I use for Cerebral Debris. It has a photorealistic texture at the top, followed by a fading color. The final result will look like this:

Let’s get started!

Step 1 – Get Some Textures

I like to use photo source when I make my textures. I have a pretty nice digital camera, so I typically take my own, but if that doesn’t work for you, a great place to find free textures is to search Flickr for textures that are licensed under Creative Commons – a ton of awesome stuff will come up. For this tutorial I used two textures, both of which I posted to Flickr. Here they are:

Both of those pictures were taken in the subway system under Manhattan, by the way — I think I was at the 59th street station on the A-C line.

Step 2 – Getting Started in Photoshop

Now that we’ve chosen our textures, let’s get them into Photoshop. I tend to work with a lot of windows open until I’m finished, so that in case I screw something up, I can snag a previous version from one of the other open windows. Obviously, you can work in whatever way you’d like. Here we have 1600×1200 versions of both textures pasted into new documents in Photoshop, along with a third window that’s going to contain my final background image (it’s 600×800).

Step 3 – The Base Texture

What I’ve done here is pasted the first texture into my final background image window, resized it down, and clipped it to create a horizontal band o’ texture.

I did the same thing with the second texture, lining them up, and then switched the layer mode on the second texture to “multiply” — If you’re not familiar with layer modes, you should play around with this step … you can generate some amazing effects just by stacking a few textures with different layer modes. It’s the little drop-down box in the layers panel that says “Normal” to start with, right next to the Opacity drop-down.

Step 4 – Tiling the Texture

Here’s the important part: making sure the image tiles properly! What I did was copy the texture above (shift-ctrl-c to copy all layers) and paste it into a new document … makes editing easier. The new document is 600px wide, so I used Photoshop’s Offset Filter (located in filters:other) to offset it by 300pixels. So basically now the edges are in the center. It’s hard to see with this particular texture, but there’s a definite seam there … sometimes the seam is REALLY in your face, it just depends on the textures you choose. Here’s the offset filter at work:

Next I used the Clone Tool to edit the seam. I also took out the big, chunky grey thing on the right of the seam, as I didn’t like it. I’m not going to give a full tutorial on the Clone Tool here, because it’s fairly complex, but if you Google it, there’s a zillion of them on the web. It just takes some practice, but it’s pretty vital to making textures from photo source. Here’s the post-clone-tool texture, which should now tile seamlessly, horizontally:

Step 5 – Make It Pretty!

Ok, now the hard part’s done. I pasted the finished, seamless texture back into my original page background document. Below that, I added a nice, gradienting blue, and I stuck a little drop shadow under the texture to give it some 3D feel. You’ll be able to see these separate layers if you download the PSD (linked at the end of the document), but here’s what it looks like:

Step 6 – Tweaking for Aesthetics

I’m rarely satisfied with my first pass at something in Photoshop, and this project was no exception. This next screenshot shows how I made a few tweaks — I shortened the texture vertically, brightened the background, and added a tiny bevel to the lower edge of the texture. Fairly minor tweaks, but I think I ended up with a better background because of them.

After making those changes, I added some subtle scanlines (which fade to a solid color at the bottom – this is important!) and very slightly brightened the texture area. These are REALLY minor tweaks, but I took a screenshot anyway. See if you can spot the differences:

Step 7 – Save Your Background

This one’s easy. Using Photoshop’s “Save for Web and Devices” option (the longest name for “export” ever), you can save your background image as a JPG, GIF, or PNG … I chose JPG in this case. PNG and GIF are mostly good for images that have big, solid blocks of color, not textures and gradients … unless you’re using 24-bit PNG, which looks beautiful but often has huge filesizes. Anyway, I went with JPG at 80%, which is a little bulky from an image standpoint but, hey, we’re living in the era of broadband, right?

Step 8 – Get Your Background Color

Remember how I said it was important that the texture be a solid color at the bottom? That’s because we’re only going to tile this horizontally, not vertically (otherwise the band of texture would repeat and it’d look awful). So we’re going to set the page background color to the same color as the bottom pixels of the texture, and it’ll all blend together seamlessly. Just use Photoshop’s eye dropper tool to snag the color, and then you can get the necessary hex value (#67B3D7 in this case) from Photoshop’s color picker.

Step 9 – Build Your Web Page

All that’s left to do at this point is some basic html/css to get your background displaying in a web page. We’ve got a link at the bottom to the example web page, where you can view the source, or the html file is also included in the zip file with the PSD in it. Either way, the relevant lines of code are:

body {
	background:#67b3d7 url("bkg.jpg") repeat-x top center;
}

Pretty simple. What that line does is set the body background color to the hex string we picked in Step 8, and then says “use our background image, repeating horizontally only, and start it from the top-center of the page.”

When you view it in the browser, you get this:

And that’s it. You’ve got a tiling, textured background for your website. With a little experimentation, the techniques described in this tutorial can produce all kinds of cool effects. Never be afraid to play around with Photoshop — you’ll learn lots of new stuff.

Feel free to leave questions or comments on this tutorial.

Essential Links:

• Texture PSD and HTML Zip
• Example Web Page