Ever wondered how to create perfect, seamless background patterns that work on Photoshop and on the web? Look no further because today we're going to break it down for you - step by step. You'll be creating your own background patterns in no time!
Introduction
Heya everyone! Today we're continuing our tutorial series on creating background patterns that can be used on the web (and during the design phase) with our fourth edition: Synthetic Fabric Textures. We'll be looking at how to create believable, tile-able fabric patterns by starting with a plain vanilla approach, and then taking the same principles to create advanced versions.
Our objective is simple: To teach anyone how to create background patterns that are intended for the web (but that can also be used easily during the design process). We're going to be "program agnostic", meaning that most of the tips will work in both Photoshop and Fireworks.
Be sure to check out the rest of the series, including Carbon Fiber, Noisy Backgrounds, and the Intro to Patterns post!
Today's Patterns
Today is day four in our series - but it's worth mentioning that all of these tutorials are "standalone" - meaning that you should be able to pick right up on Part 4, even if you missed the first couple parts.
The pattern we're going to be covering today is how to create an effective "synthetic fabric texture" that can be used as a pattern in Photoshop as well as a tiling background on your web pages. We're going to do this in 4 steps:
- Step 01: Basic Fiber Texture
- Step 02: Basic Canvas Texture
- Step 03: Intermediate Denim Texture
- Step 04: Advanced Denim Stripe Texture
For the past few months, subtle, noisy textures have been super popular with web designers (check out our tutorial on creating them here). In the last few weeks though, I've been noticing more and more "advanced" noise textures... which is to say that people are going beyond the simple 'add noise pattern' approach and trying out funkier effects. There are two main things that I'd like to point out:
1: The textures that we're going to cover today are all created 100% in Photoshop. We'll cover how to create photographic textures in our next tutorial.
2. These textures should be subtle and used sparingly. Nothing screams 1995 like a fugly background texture using heavy handed Photoshop filters.
Alright... you've been warned. Let's do this!
The Written Tutorial
Step 01: The Basic Fiber Texture
This introductory texture is incredibly simple to create, but can be used for some highly professional looking results when used properly.
For instance, check out the texture behind the footer of the 'qop' WordPress theme:
Not bad right? We'll start out with a blank canvas. Set the size to 400 x 400 for now. The size can be changed later on, but you don't want it to be too small because we'll need some room around the edges to work with.
Create a new layer and fill it in with Black color.
Go ahead and name it the Black Layer just for the sake of organization.
Now we want to apply a quick filter to establish the foundation of our rough line texture. While on the Black layer, apply the following filter: Filters > Sketch > Water Paper.
You can adjust the settings until you have your own custom desired effect, but the demo texture uses the following settings:
- Fiber Length: 15
- Brightness: 42
- Contrast: 43
Set the Black layer's blending mode to Screen so that only the white lines show through. At this point you can also add a background rectangle to establish a color for your texture. Note that you can change the color at any point in this process.
We can't really see anything but white now... so let's add a simple colored rectangle and name it our Background Color. I used the color #242d34, but feel free to use anything you'd like.
Ahh, much better! Now we can see our texture. It's a bit flat though. So, let's add a little depth to our texture - we'll do this by creating a new layer and filling it in with Black (again). Name this layer "White" (you'll see why in the next steps).
Now we're going add the Filters > Sketch > Water Paper effect again, but this time we want to add much more Brightness and Contrast to the settings:
- Fiber Length: 15
- Brightness: 63
- Contrast: 66
Now, just invert the colors for that same layer (Image > Adjustments > Invert), and set the blending mode to Multiply. Bring down the opacity of the layer to around 90% so that the effect isn't too abrasive.
Whallah! Not too shabby right?
The next step is to crop down the edges of this pattern because Photoshop tends to get a little heavy handed around the edges. Crop in about 50px from each edge using the Crop tool.
Why did we crop this in? Because Photoshop tends to get a little heavy handed around the edges of the Water Paper filter, which means that if we try to make it into a pattern, we'll get obvious "seams". Cropping in from the edge helps us to eliminate these visible seams when we go to use this as a pattern or on the web.
The final step is simple - just set the background color to your desired color, adjust the opacity of each filter layer until you get the desired level of texture, then make it into a pattern (Edit > Define Pattern). All done!
And, the final product should look like this when used as a pattern:
This might be a little too dramatic in terms of contrast to use (I usually dial the intensity up for tutorials to make the effects obvious), so feel free to play around with the opacity of the texture layers to get it "just right" for your own particular design.
To customize this effect: The main things you might be interested in tweaking are the "fiber lengths" of the Water Paper filter and the background color. Additionally, it can also be fun to mess around with the scale of the final pattern. Once you crop in, try resizing the entire image to tweak the density of the texture (and use the Sharpen tool to tweak how sharp it is).
Step 02: The Basic Canvas Texture
This next texture is probably the simplest of all four today. Three easy steps will complete the effect:
First, create a new document (400 x 400) and draw a colored rectangle on the document. We'll use this later on to adjust the color of the final pattern.
Next, create a new layer, fill it in with Black, and add the filter: Filter > Texture > Texturizer. Use the following settings:
- Texture: Canvas
- Scaling: 50%
- Relief: 3
- Light: Top Left
Set the blending mode on that layer to Screen.
Next, create a new layer, fill it in with White this time. Add the same exact filter: Filter > Texture > Texturizer. Use the following settings:
- Texture: Canvas
- Scaling: 50%
- Relief: 3
- Light: Top Left
Now just set that layer's blending mode to Color Burn so you can see through to the background color.
Finally, let's adjust the background color to something more subtle. Note that as you adjust the background color, you may also want to adjust the opacity and blending modes of the top two layers until the effect is as you desire it.
The final pattern as shown in the demo:
You can create the pattern from here (Edit > Define Pattern), or you can play around with the background color, filter layers' opacity, and the cropping until you have a pattern that is seamless and fits your design.
Step 03: Intermediate Denim Texture
This next texture is a bit more advanced, so pay special attention if you're looking to recreate this effect.
Begin with a new document (400 x 400) and begin by drawing a blue rectangle (#2b4891) as the background. You can actually choose any color, but we're used to seeing blue denim, so we'll stick with that for now.
Next, create a new layer and Fill it with 50% Gray (you can use the hot key Shift + Backspace/Delete). Give it the name of Horizontal Layer for now.
Next, set the Foreground and Background color to the default black and white by pressing D. We need to add the foundation for our denim pattern. On our gray layer, apply the filter: Filter > Sketch > Halftone Pattern.
Use the following settings:
- Size: 1
- Contrast: 0
- Pattern Type: Line
This should produce a basic line pattern... but denim is "fuzzy", so we'll want to mess this up a bit using another filter: Filter > Pixelate > Mezzotint. Set the type to Fine Dots.
Now create a duplicate copy of this layer (Cntrl + J) and name it "Vertical Layer".
Use the Free Transform Tool (Cntrl + T) to rotate it 45 degrees AND scale it out far enough so that it meets each corner of our document. I happened to scale it up 145% in case you're trying to match mine exactly.
Don't worry that scaling the pattern up so big will create some raster imperfections. We actually want those. In fact, go ahead and add additional blurring (Filter > Gaussian Blur set to 0.3) to both this layer and the first untransformed layer.
Finally, set the blending mode on the diagonal layer to Multiple with 70% Opacity -- and set the blending mode on the horizontal stripe layer to Soft Light with 60% Opacity.
That completes the denim effect! You can tinker with the background colors and then make it into a pattern (Edit > Define Pattern).
Note: If you notice any obvious seams in your pattern, you're going to need to play around a bit with the cropping. The trick here is to just make sure that there aren't any unnaturally bright or dark lines near any of the edges. Try a few different croppings until the pattern is seamless.
If you followed the demo to the letter, you can simply crop down the height of your document to 400px by 396px. This will remote the seams (below):
Whallah! How does this work? If you remember back in our first pattern tutorial, the general idea here is that the final few pixels at the right-side and the bottom of our pattern will always need to link to the left-side and top of the document. Cropping off those 4px in this case helps the bottom match to the top. Since the right and left already match up, we're good to go!
Step 04: Advanced Denim Stripe Texture
Alright! We've arrived at the final texture of the day. By now we've employed some pretty tricky techniques, so this final step is actually going to seem quite simple.
Create a 200 x 240 document. Go ahead and drag in the three raw layers that we used for our denim pattern (the two texture layers + the background color).
Group these layers together (Ctrl + G) and set a 50px wide mask over the entire group folder. If you haven't created a group mask like this before, it's easy: Just use the Rectangular Marquee selection tool to draw a 50px wide selection that fills the document from top to bottom (look at the Info panel to check your measurement). Then just hit the "Add Vector Mask" button at the bottom of the layer panel:
Why 50px? Because with a document of 200px wide, we are going to want to fit 4 stripes of 50px.
Next, duplicate this layer group, move it over to the right of the first group, then (optionally) flip it horizontally to create an opposing diagonal pattern.
To add some contrast in the stripes, simply change the background color (subtle changes are best here) to something a bit brighter or darker than the original color).
Finally, duplicate BOTH of our stripe groups and move them over into the blank space on our document.
We're note quite done yet - to add some visual interest, let's de-link the group masks for these last two stripes, then move the 3 denim layers inside over about 100px to create a slightly different striation. The end result isn't dramatically different, but people looking for seams in your pattern will be thrown off by this final step.
Congrats! Select Edit > Define Pattern, and start using this in your own projects. As a final thought, you can obviously do a lot more with this by adding your own customizations. The below example changes up the colors to a brown hue, and then also has scaled down the "knit" of the pattern by reducing the image size. Check out our final example:
Conclusion
Alright! So now you should have a good enough basic understanding to create your own custom variations of these Synthetic Fiber patterns - play around with the levels, colors, document sizes, and more to add your own personal twist on these. Heck, you can even invert the shading to create subtle, light colored patterns.
In the next parts of this series we'll be showing you how to create some advanced photo-based textural patterns, more shape based patterns, transparent patterns, and even more in the future.
Subscribe or check back on the site to see all of the updates to this series as they happen!
