Jennifer has a linky up at (in)courage today where we’re welcome to share what we’re creating in our homes or studios. I’ve intended to post a tutorial on how to create a simple textured background like the new one I’ve added for spring here on the blog, so this seems like the perfect time to do it.

Here’s an enlarged version, in case you can’t see it well on your monitor:


Background Tiled

I thought I’d walk you thorough a bit of the design process, in case you’re looking to spruce up your blog for spring. It doesn’t take a huge amount of change: I changed my background image, and updated the flower color in my blog header.

If you’re updating your color scheme, Kuler is a great place to find ideas and color swatches (find out how to download and import them into Photoshop here). I like to create sets of color swatch for my blog or any other design color scheme I want to keep (find out how here).

My current inspiration came from the Hello Bar website. You have to be logged in to see much of the blue, but I simplified things and just kept the blue that was already in my header.

Add Noise

Add Noise

First, I created a new 200px x 200px blank document in Photoshop—big enough to see, but not too big—and filled it with yellow. An exact duplicate of that layer was made by clicking Command J on my Mac (probably Control J on a PC). (I wanted to add texture to a new, separate layer that I could just delete if I messed up.)

Next chose Filter>Noise>Add Noise from the menu bar and select a fairly low number. Mine was 9.5% with the “Uniform” checked under the Distribution heading.

Just adding noise isn’t very exciting. We want to do something with that noise. Go back to the menu bar and choose Filter>Brush Strokes>Crosshatch. I like my settings subtle, so from the menu on the upper right I chose Stroke Length: 9, Sharpness: 1, Strength: 1.

I brought in the flower branch element of my blog header—ultimately deleting the branch layer and leaving just the flowers—and then cropped it closer at 100px x 100px.

Less is always more when it comes to sizing background images for tiling on a blog.

Final Background

Final Background

I like to preview how an image will look tiled before actually uploading it to my blog. Photoshop’s Offset Filter (Filter>Other>Offset) can be used to tile seamlessly, but I wasn’t worried about perfect this time and didn’t use it. I just wanted some texture, a parchment or fabric look.

From the menu, choose Edit>Define Pattern. You can either name it or not when the Pattern Name dialogue box appears. Now make a blank document that’s large enough to preview your background image tiled. I made one 500px x 500px.

Background LayerAt first you won’t be able to edit the Background layer. See the little lock symbol? Just double click the word Background and click “OK” in the New Layer dialogue box that appears. Now it will say “Layer 0” instead of Background.

Layer StyuleClick the “fx” button at the bottom (it will say “add a layer style” when you hover over it) and choose “Pattern Overlay” (this is why you defined the background image you created earlier as a pattern).

Click the Pattern dropdown menu and scroll to the bottom, where you’ll find the new pattern you created. Click it to fill your blank document with a tiled version of your new background, which you saved as a pattern earlier.

Pattern Overlay

Pattern Overlay in Photoshop

If you like the way it looks, you’re good to go! Tile the small image you created as your blog’s background (don’t save and tile this larger image you’ve just created—smaller is better for tiling). If you don’t like the way it looks, delete or hide this layer and try it again.

I hope this was clear enough to follow. It’s fun to freshen your look sometimes for holidays or seasons. Visit (in)courage to see other creative sneak peeks shared in the linky at the bottom of the post.

Pin It on Pinterest