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!

Webdesigntuts+

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 third edition: Carbon Fiber Textures. We’ll be looking at how to create sleek, professional carbon fiber 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 first post in the series if you missed it!

Today’s Patterns

Today is day three 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 “carbon fiber 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 Carbon Fiber Texture
• Step 02: Modifying the Basic Carbon Fiber
• Step 03: Getting Funky: Diagonal Carbon Fiber
• Step 04: Taking it to the Next Level: Advanced Carbon Fiber

Ready? Let’s do this!

The Video Tutorial

The Written Tutorial

Step 01: Basic Carbon Fiber Texture

The basic carbon fiber texture is actually pretty darned simple to create. There’s tons of tutorials for this basic pattern out there on the web, so we won’t breaking any new ground here. What’s important in this first step is that you pick up the basic principles that we’ll be using in the more advanced stages. The main tricks are:

• Keep your document as small as possible.
• Use dark gradients to create a convincing and subtle light source.
• Don’t get too fancy – a little goes a long ways with carbon fiber.

Let’s start our basic version by creating a 4×4 document:

Next, grab a 2×4 px selection of the background (shown) and create a new layer from it (Ctrl+J):

On the new 2x4px layer, let’s add a basic gradient from the Layer Styles panel (double click the layer, or right-click it and select Layer Styles). The gradient we’ll be adding will run from the bottom to top and use the colors Black (#000000) on the bottom to Dark Grey (#4f4f4f) on the top:

This gradient is going to be the foundation of our carbon fiber… so you can always return to this step to change the the outcome of the final product.

Next, let’s take a 1×4 pixel selection of the gradient layer using the Rectangular Marquee tool and create a new layer by cutting it off (Right click > Layer via Cut).

Now set the opacity on this second layer to 92%.

Why? We’re trying to create very subtle variations in the grey-tones so that the carbon fiber appears to have a believable light source. Obviously, there isn’t a true light source and we can’t create one without having a massive image (which defeats the point of a web pattern), but small changes in shading will deceive the eye into thinking that there is depth.

Merge the two 1×4 px layers together (above) and then, using the marque tool again, take a 2×2 selection off the top of the new layer:

Next, to create our pattern effect, swap the ordering of the two 2×2 px tiles from top to bottom, and vice versa:

Our pattern is now complete! Simple save it to your library of patterns by using the Edit > Define Pattern tool. Give it a name of your choosing, and it will now appear whenever you use the Layer Styles > Pattern Overlay library.

Alright! So we have one very basic carbon fiber complete… let’s move on to the next step, where we’ll create some modifications on this idea.

Step 02: Modifying the Basic Carbon Fiber

The basic carbon fiber can be manipulated quite easily. In this next short example, we’ll use the exact same process and principles to create a slightly larger fiber texture.

Note: I’m purposefully going to skip over some of the repetitive screenshots that we reviewed in the last step, so I’ll only be highlighting new techniques.

Start this time with an 8px by 8px document.

In the first carbon fiber pattern that we created, we took a shortcut by creating a single gradient for the entire left side of the document. This worked becuase the document was only 4×4 and really couldn’t handle any more detail than we went over.

In this second version we’re going to get a little more meticulous with our shape. Begin on your document by adding a 4×4 rectangle:

Add another 4×4 rectangle for the bottom space (I’ve colored it in so you can see it better):

Now we need to add a subtle gradient to the bottom square. Remember, the bottom left region is dark… nearly black, so use a very dark gradient:

Repeat the gradient step for the top 4×4 layer, but this time it’ll be a light gradient:

Duplicate both 4×4 layers and perform the “fliperoo” trick where we swap the position of each square to opposite corners of the document.

Now we have our basic carbon fiber pattern, but let’s add one level of customization by adding a Levels Adjustment layer. Do this from the Layers menu at the top; You’re looking for the “Layer > New Adjustment Layer > Levels” button.

The Levels Adjustment layer will allow us to tinker with the brightness and contrast of our fiber pattern. When you’re done, Define the Pattern (Edit > Define Pattern) and you’ll be set to go. Here’s what your pattern will look like:

Note: When trying to use the Define Pattern tool, make sure you’re not selected on the Adjustment Layer… for some reason Photoshop won’t let you use “Define Pattern” when you are on layers like this one (it’ll be grayed out until you select another layer).

Now we have a second carbon fiber pattern complete! You can use this same basic process over and over to create your own variations. Try different document sizes, adding color, adjusting the contrast of your gradients, and anything else you can think up to create unique effects.

Step 03: Getting Funky: Diagonal Carbon Fiber

Ok, so you’ve got the basics down… that’s great! In this next step, we’re going to create a diagonal carbon fiber pattern using the same basic principles that we used in the first two steps – but we’ll use a radical little twist on the grid-layout of our pattern to create a unique effect.

Start with a 30px by 30px document. Once you finish this step you can repeat the process using a different document size, but this should be a good starting point.

We’re going to be working in cells of “5px” as a general rule of thumb… so let’s start our pattern by creating a rectangle that’s 5px tall by 15px long.

Next, add a gradient across our first shape:

Now add a 5px by 5px square shape with the color of #191919 directly next to our rectangle shape.

Tip: Use the “Convert Point Tool” (under the Pen Tool panel) in you need to adjust or sharpen up any edges. Your shapes should end exactly on defined pixels, not show any blurry “half pixels”.

What we have here is our basic pattern that we’re going to repeat quite a few times… so let’s convert these two shapes into a single “Smart Object” so we can always return back to them to edit the gradient.

Right click on one of the layers (when you have selected both using the Shift Key) to open up the context menu and find the Convert to Smart Object button.

Note: You can always go back and edit your smart objects by right clicking on the layer and selecting “Edit Contents”. This will edit each instance of the smart object… which makes edits quick and easy when you have 10 or more duplicates floating around.

Next, we need to duplicate the smart object and nudge it down by 5px and to the left by 5px.

Repeat the same “Duplicate, then Nudge” process over and over until you’ve covered your document. Refer to the screenshot if you get lost, but there should always be a 5px unit of measurement between all major parts.

Now let’s add a background color layer. I used a simple rectangle for this – set the color to #1e1e1e:

Finally, just to be safe, lets add another of those trusty Level Adjustment layers so we can tinker around with the darkness and contrast on the fly.

Whallah! You can now use the Define Pattern tool again and use the pattern wherever you want, like this:

Step 04: Taking it to the Next Level: Advanced Carbon Fiber

For this last step, we’re going to use the same basic principles again… but this time we’ll flip things by 45 degrees to create another unique diagonal carbon fiber effect.

This final pattern is actually the easiest of all to master, so this should be a cakewalk if you’ve made it this far!

Start with an 8×8 document and add a background color. I used Black (#000000), you can use whatever you’d like… just keep the exact color in mind for the next step:

Now add a rectangle, measured at 4px wide by 8px tall:

Everything should be familiar now – add a subtle gradient – the ending color should match our background color (my gradient here is #555555 to #000000). Note the angle – we’re setting it to be 135 (or -45 depending on how you want it) so that it will match up nicely when we rotate the layer:

Bingo! We have our final pattern… adjust the document size and gradient colors to get your own custom variations:

… and here it is:

Conclusion

Alright! So now you should have a good enough basic understanding to create your own custom variations of these Carbon Fiber patterns – play around with the shapes, 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 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!

Webdesigntuts+

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 third edition: Carbon Fiber Textures. We’ll be looking at how to create sleek, professional carbon fiber 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 first post in the series if you missed it!

Today’s Patterns

Today is day three 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 “carbon fiber 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 Carbon Fiber Texture
• Step 02: Modifying the Basic Carbon Fiber
• Step 03: Getting Funky: Diagonal Carbon Fiber
• Step 04: Taking it to the Next Level: Advanced Carbon Fiber

Ready? Let’s do this!

The Video Tutorial

The Written Tutorial

Step 01: Basic Carbon Fiber Texture

The basic carbon fiber texture is actually pretty darned simple to create. There’s tons of tutorials for this basic pattern out there on the web, so we won’t breaking any new ground here. What’s important in this first step is that you pick up the basic principles that we’ll be using in the more advanced stages. The main tricks are:

• Keep your document as small as possible.
• Use dark gradients to create a convincing and subtle light source.
• Don’t get too fancy – a little goes a long ways with carbon fiber.

Let’s start our basic version by creating a 4×4 document:

Next, grab a 2×4 px selection of the background (shown) and create a new layer from it (Ctrl+J):

On the new 2x4px layer, let’s add a basic gradient from the Layer Styles panel (double click the layer, or right-click it and select Layer Styles). The gradient we’ll be adding will run from the bottom to top and use the colors Black (#000000) on the bottom to Dark Grey (#4f4f4f) on the top:

This gradient is going to be the foundation of our carbon fiber… so you can always return to this step to change the the outcome of the final product.

Next, let’s take a 1×4 pixel selection of the gradient layer using the Rectangular Marquee tool and create a new layer by cutting it off (Right click > Layer via Cut).

Now set the opacity on this second layer to 92%.

Why? We’re trying to create very subtle variations in the grey-tones so that the carbon fiber appears to have a believable light source. Obviously, there isn’t a true light source and we can’t create one without having a massive image (which defeats the point of a web pattern), but small changes in shading will deceive the eye into thinking that there is depth.

Merge the two 1×4 px layers together (above) and then, using the marque tool again, take a 2×2 selection off the top of the new layer:

Next, to create our pattern effect, swap the ordering of the two 2×2 px tiles from top to bottom, and vice versa:

Our pattern is now complete! Simple save it to your library of patterns by using the Edit > Define Pattern tool. Give it a name of your choosing, and it will now appear whenever you use the Layer Styles > Pattern Overlay library.

Alright! So we have one very basic carbon fiber complete… let’s move on to the next step, where we’ll create some modifications on this idea.

Step 02: Modifying the Basic Carbon Fiber

The basic carbon fiber can be manipulated quite easily. In this next short example, we’ll use the exact same process and principles to create a slightly larger fiber texture.

Note: I’m purposefully going to skip over some of the repetitive screenshots that we reviewed in the last step, so I’ll only be highlighting new techniques.

Start this time with an 8px by 8px document.

In the first carbon fiber pattern that we created, we took a shortcut by creating a single gradient for the entire left side of the document. This worked becuase the document was only 4×4 and really couldn’t handle any more detail than we went over.

In this second version we’re going to get a little more meticulous with our shape. Begin on your document by adding a 4×4 rectangle:

Add another 4×4 rectangle for the bottom space (I’ve colored it in so you can see it better):

Now we need to add a subtle gradient to the bottom square. Remember, the bottom left region is dark… nearly black, so use a very dark gradient:

Repeat the gradient step for the top 4×4 layer, but this time it’ll be a light gradient:

Duplicate both 4×4 layers and perform the “fliperoo” trick where we swap the position of each square to opposite corners of the document.

Now we have our basic carbon fiber pattern, but let’s add one level of customization by adding a Levels Adjustment layer. Do this from the Layers menu at the top; You’re looking for the “Layer > New Adjustment Layer > Levels” button.

The Levels Adjustment layer will allow us to tinker with the brightness and contrast of our fiber pattern. When you’re done, Define the Pattern (Edit > Define Pattern) and you’ll be set to go. Here’s what your pattern will look like:

Note: When trying to use the Define Pattern tool, make sure you’re not selected on the Adjustment Layer… for some reason Photoshop won’t let you use “Define Pattern” when you are on layers like this one (it’ll be grayed out until you select another layer).

Now we have a second carbon fiber pattern complete! You can use this same basic process over and over to create your own variations. Try different document sizes, adding color, adjusting the contrast of your gradients, and anything else you can think up to create unique effects.

Step 03: Getting Funky: Diagonal Carbon Fiber

Ok, so you’ve got the basics down… that’s great! In this next step, we’re going to create a diagonal carbon fiber pattern using the same basic principles that we used in the first two steps – but we’ll use a radical little twist on the grid-layout of our pattern to create a unique effect.

Start with a 30px by 30px document. Once you finish this step you can repeat the process using a different document size, but this should be a good starting point.

We’re going to be working in cells of “5px” as a general rule of thumb… so let’s start our pattern by creating a rectangle that’s 5px tall by 15px long.

Next, add a gradient across our first shape:

Now add a 5px by 5px square shape with the color of #191919 directly next to our rectangle shape.

Tip: Use the “Convert Point Tool” (under the Pen Tool panel) in you need to adjust or sharpen up any edges. Your shapes should end exactly on defined pixels, not show any blurry “half pixels”.

What we have here is our basic pattern that we’re going to repeat quite a few times… so let’s convert these two shapes into a single “Smart Object” so we can always return back to them to edit the gradient.

Right click on one of the layers (when you have selected both using the Shift Key) to open up the context menu and find the Convert to Smart Object button.

Note: You can always go back and edit your smart objects by right clicking on the layer and selecting “Edit Contents”. This will edit each instance of the smart object… which makes edits quick and easy when you have 10 or more duplicates floating around.

Next, we need to duplicate the smart object and nudge it down by 5px and to the left by 5px.

Repeat the same “Duplicate, then Nudge” process over and over until you’ve covered your document. Refer to the screenshot if you get lost, but there should always be a 5px unit of measurement between all major parts.

Now let’s add a background color layer. I used a simple rectangle for this – set the color to #1e1e1e:

Finally, just to be safe, lets add another of those trusty Level Adjustment layers so we can tinker around with the darkness and contrast on the fly.

Whallah! You can now use the Define Pattern tool again and use the pattern wherever you want, like this:

Step 04: Taking it to the Next Level: Advanced Carbon Fiber

For this last step, we’re going to use the same basic principles again… but this time we’ll flip things by 45 degrees to create another unique diagonal carbon fiber effect.

This final pattern is actually the easiest of all to master, so this should be a cakewalk if you’ve made it this far!

Start with an 8×8 document and add a background color. I used Black (#000000), you can use whatever you’d like… just keep the exact color in mind for the next step:

Now add a rectangle, measured at 4px wide by 8px tall:

Everything should be familiar now – add a subtle gradient – the ending color should match our background color (my gradient here is #555555 to #000000). Note the angle – we’re setting it to be 135 (or -45 depending on how you want it) so that it will match up nicely when we rotate the layer:

Bingo! We have our final pattern… adjust the document size and gradient colors to get your own custom variations:

… and here it is:

Conclusion

Alright! So now you should have a good enough basic understanding to create your own custom variations of these Carbon Fiber patterns – play around with the shapes, 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 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!

Webdesigntuts+

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 second edition. We’ll be looking at how to create the ever-popular “noise” patterns that so many websites have been using lately. Be sure to check out the first post in the series if you missed it!

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.

Today’s Patterns

Today is day two 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 “noise 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: Creating the foundational noise pattern (Basic Grey)
• Step 02: Inverting the noise pattern (Black)
• Step 03: Adding color (Blue)
• Step 04: Adjusting the shading and hue (Green)
• Step 05: Adding additional vibrancy (Orange)

Ready? Let’s do this!

Step 01: Creating The Foundational Noise Pattern

The first step in today’s tutorial is probably the most crucial, because we’re setting up the foundational elements. There are a lot of different ways to create these noise patterns… but I’m going to show you one of the best (and most flexible!) methods to save you frustration and headaches down the line.

Start by opening up a new document. The size doesn’t matter much (we’re using 200px by 200px in the demo), but it’s best to keep it above 75px to ensure that your noise pattern is believably random. Smaller documents are liable to start looking like “repeating tiles” – documents that are significantly larger will increase your file size without much added value.

Let’s add a basic rectangle shape and name it “Base Color” (organization will make life easier later on!). You can use whatever color that you’d like (we used #EBEBEB), but make sure the rectangle occupies the entire space.

Now let’s open up a new layer and name it the “Noise Layer”. It’s just a blank layer right now…

Using the “Rectangular Marquee” tool (M), draw a selection across your entire document while selected on the Noise Layer. Then select “Fill…” from the context menu (Right Click when over the selection – or it’s also under the Edit panel) and let’s fill it with the color White.

Tip: Next we want to convert the “Noise Layer” to a Smart Object. You can do this by right clicking on the layer and selecting “Convert to Smart Object” or selecting “Convert for Smart Filters” from the Filters menu.

Why make it a smart object? Because this will allow us to retain the ability to edit the intensity of the noise texture later on! There may be steps in the future where we end up needing to flatten the texture, but it’s always best to keep things editable for as long as we possibly can.

Alright, Smart Object in hand, we want to add the noise texture.

• Filter > Noise > Add Noise
• Use 4.8% for the amount (you can adjust this later on if you want something more subtle or more intense)
• Select Gaussian for the Distribution.
• Select the Monochromatic checkbox (to remove those annoying colored pixels).

Finally, set the Blending Mode on the Noise Layer to “Multiply” so that only the darker noise pixels are visible. Now you can change the color on the base layer for different noisy color.

Whallah! We now have established the foundational elements for our basic noise pattern…

…and that would be the end of this humble tutorial if we were lazy…

In the next steps though, we’re going to show you how to invert, alter and add believable depth and vibrancy to your noise pattern to make it truly stand out from the pack!

Before you move on: Go ahead and group your layers together (the Base Layer and the Noise Layer) using Ctrl+G to create a layer folder. Duplicate it once and hide the original so we always have a copy of it. For each new step, we’re going to create a new duplicate group. This is just a good basic habit to have because it ensures that you always have a backup of our foundational pattern.

Step 02: Inverting the Noise Pattern (Black Noise)

Alright, let’s twist this noise pattern into something dark and delicious now. I’m going to show you how to create an inverted noise pattern that appears to have a subtle sparkle to it.

Start with a copy of the original noise group (see the end of Step 01). The first thing we want to do is make the background color Black, so go ahead and do that on your Base Layer.

Next, because our Noise Pattern is composed of only “dark” pixels, we need to essentially invert it. Unfortunately, we can’t do this as a “Smart” effect, so we need to flatten out the noise pattern. Make sure you have the intensity level set to what you’d like, then “Rasterize” the layer. You can do this by Right Clicking on the layer and selecting Rasterize from the context menu, or from the Layer > Rasterize > Rasterize Layer menu.

Now that we’ve essentially flattened out our noise pattern, we want to invert it. Do this from the “Image > Adjustments > Invert” panel.

What’s wrong? You can’t see the Noise Pattern anymore?

We’ll need to make some slight modifications to see our inverted noise pattern. First, set the Blending Mode on the noise layer to “Screen“.

Next, adjust the “levels” of your noise pattern (Ctrl + Alt + L … or Image > Adjustments > Levels).

Alternate Method: You can also simply add an adjustment layer for the levels (Layer > New Adjustment Layer > Levels). You might prefer this way if you want to make changes to the intensity later on.

Presto! Now we have a sparkly, inverted noise pattern. Obviously, you can adjust this to your heart’s content – make it darker and more subdued – or brighter and more intense. You can even change the base layer color to a dark blue or red to get other effects. Go nuts!

Remember – you save save these as “Patterns” in Photoshop by selecting “Edit > Define Pattern“. Do this and later on you’ll be able to use these patterns over and over again. You can even save your patterns as libraries and share them with friends and colleagues.

Next we’re going to show you how to add depth and vibrancy to your noise patterns…

Step 03: Adding Color, Vibrancy and Depth (Blue)

Let’s add some color and vibrancy to our noise pattern now. It’s worth mentioning that in the following steps we’ll be using some general techniques… you don’t need to follow them to the letter – just keep each one in mind for when you go to create your own custom patterns.

Start by adding some color to your Base Layer.

Now create a copy of your Noise Layer and set both blending modes to Color Burn. The duplicate layer will help us get the bottom layer darker. It’ll also give us the ability to shift the opacity on a finer scale later on.

Create yet another copy, but this time we’re going to Rasterize it and Invert it (see Step 2, Black Noise, for details if you missed it).

Set the blending mode on our new layer to Screen. We also want to add a new Adjustment Layer (Layers > New Adjustment Layer > Levels) so that we can control the intensity of the light noise.

Now let’s create a subtle offset by nudging the light layer away from the dark layer (1px up and 1px left) using the Move Tool (V) and your keyboard.

Next, add a layer mask over your Light Noise layer so we can play with it.

Using a roughly textured brush (set to about 130px and the color Black) we want to essentially mask off a bit of our light noise by painting away from the Layer Mask. One brush stroke should do the trick, but use your own judgment. The idea here is to create a rough, random pattern.

Set the Opacity of the layer down to around 45%. You can do less or more according to your own preferences… we’re just trying to drop the intensity of the contrast back a little bit though.

Now we have a nice pattern with a bit of depth to it. If you’re not digging the depth though, you can easily tinker with this by flipping the light noise layer horizontally to remove the offset and create a simple “sparkle” effect.

Alacadabra! Not bad huh? Here’s what the final texture would be:

Bonus Tip: If you notice any subtle “seams” when you go to use your new pattern, try cropping your original pattern down by 5 or 10px all around the edges. You’ll often get seams if Photoshop decides to clump up darker noise pixels around the edges of your Noise Layer, so simply cropping off the edges will result in a clean, seamless pattern.

Step 04: Adjusting The Shading and Hue (Green)

The next two steps are going to go quickly. By now we’ve set the main principles that we need to create just about any noise pattern that you can imagine – so we’re just going to show you what this texture can look like when you start playing with the Color and Intensity of the contrast. Let’s peek at the Green version…

Start with a copy of the Blue Noise layer group. Go ahead and change your Base Layer color to green.

You’ll notice a funny thing when shifting colors around… the contrast coming from the noise tends to shift from subtle to dramatic with different colors. This essentially means that we’ll want to adjust the opacity of the noise layers to account for the shifting intensity. There isn’t a hard-set rule for this – just play around with the opacity settings until you have the look you’re going for.

Finally, here’s the finished noise pattern:

I’ll mention it once again to be safe – if you notice any seams on your pattern when you go to use in on a larger shape or on your website, what you’ll need to do is crop in about 10px all around your shape to remove the “edge” pixels which can be darker when Photoshop adds them in during the very first “Filter > Add Noise” step.

Step 05: Adding Additional Vibrancy (Dual Hued Orange)

Alright – so I’ve got just one last trick up my sleeve for this tutorial. Up until now, we’ve only been adjusting the Base Layer when we wanted a new color. This is all fine and well when we want a basic noise pattern… but what if we want something with a little extra life to it?

Well, this last step if for you guys who want just that – a dual hued noise layer that has a bit of a “spark” to it.

Go ahead and start it up by changing our background color. Adjust your noise level opacity as you please (I didn’t mess with it at all for this particular demo).

Here’s where we throw the curve ball in – add a new Adjustment Layer (Layers > New Adjustment Layer > Hue/Saturation) and make it a clipping mask over the “light noise” layer. Now just tinker with the settings until you get a nice golden color coming from the light noise layer.

The final effect is here:

It’s subtle, but the light “glow” coming from that top noise layer is going to add some great life to any projects that you use it in. Enjoy it and create your own variations!

Conclusion

Alright! So I hope you’ve gotten a little something out of this second session. By now you should have a good understanding of noise patterns and how to use them in your own projects. You can save all of the files that we created here as .GIF, .PNG or .JPG files and use them instantly on the web too… but we’ve really only just begun.

In the next level of this series we’ll be showing you how to create some advanced textural patterns, 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!

Webdesigntuts+

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 I have the pleasure of starting a screencast series I’ve been wanting to do for a while now: How to create web patterns that work in both Photoshop and on the web. We’re going to do this as a series, starting with the most basic patterns and moving up to some of the most advanced background patterns that we can find, including complex textures.

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.

Web Patterns

Let’s be clear: The ideas behind creating background patterns are all pretty simple – most patterns take just a couple steps and can result in remarkably effective textures. In fact, the worst patterns for the web are usually those that “try too hard” by attempting to fit too much inside of each tile.

Why is that bad? Because background patterns (in most cases) should be subtle and nonabrasive. Harsh textures distract a user’s attention away from the real star on any web design: the content.

So why use textures at all? Because, user properly, background patterns give a site a sense of character and personality that can blow away flat colors. Patterns and textures give content depth and separation, help develop hierarchy, and can give websites (which are flat by their nature) a sense of tactile feeling. They can make a site feel polished, refined, and professional – which helps to emphasize the content and make it memorable.

While the ideas behind creating patterns are simple… getting them to actually work perfectly can often be tricky. Rest assured though, this tutorial series is going to show you all the tricks you’ll ever need to create your own custom variations to use in your own projects. We’ll even hand out some freebies along the way!

Today’s Patterns

Today is just day one in our series – so we’re going to be starting with some uber-simple patterns just to get our brains moving. We’ll start with a simple grid, move to a crosshatch pattern, show how to create a scaling diagonal pattern, and then we’ll get a little bit funky by showing you how to add some subtle color and texture.

Ready? Let’s do this!

Step 01: Create a Basic Grid Pattern

The basic grid pattern is about as simple as it gets, so it’s a fantastic starting point. Let’s begin by opening up a document that’s 7px by 7px.

Why this size? Because we’re going to create a grid pattern with a 1px line running down the center… and we will want to have an equal amount of space on each side of the grid. This isn’t mandatory for this particular pattern (so long as the grid is a perfect square, it’ll still repeat seamlessly), but it’s a habit that we’ll want to have when we move onto the more advanced patterns later on.

The steps are simple:

• Open up the document (7px by 7px).
• Draw a 1px line down the center vertically (hold Shift for it to be straight).
• Apply your preferred color (we used #F3F3F3 for the demo).
• Draw another 1px line down the center – horizontally this time.
• At 800% zoom, grab the Convert Point tool and fix the points so that the line only occupies one pixel of space. This last step is the most important as it will get us the crisp, sharp grid lines that we’re looking for.

Here are the screenshots:

Once you have your pattern exactly where you want it, we want to save it as a pattern. To do that, select from the top menu in Photoshop “Edit > Define Pattern“. This will automatically save your document as a pattern that can be used inside of the “Layer Styles > Pattern Overlay” library.

Now that we have the basics done, you can tinker with this a lot. We used a 7px document, but if you wanted a tighter grid, you could go down to 5px or 3px. Alternatively, if you wanted a more wide open grid, you could use a larger document size. The line width, spacing, and colors are all up to you.

Tip: Color that might look subtle (low contrast) on the pattern document may look way too intense when you use them as an actual pattern in another larger document. The trick here is to:

1. Use a lot of trial and error – Save your pattern (Define Pattern) and then try it out immediately in a larger document to test for it’s overall appearance.
2. When in doubt, use the most subtle color combinations that you possibly can. Less is definitely more in this case, as you don’t want your pattern to distract from the content. Remember, even very subtle patterns can have dramatic effects.

Step 02: The Classic Crosshatch

For this second pattern, we’re essentially just going to be rotating our lines by 45 degrees. Remember that spacing is crucial though – so we’re going to have to use a little critical thinking to get the pattern to repeat:

Open a new document at 8px by 8px this time. Why 8px and not 7px like we did before? Because we want our lines to exactly meet each corner and if we use and if we use 7px, the lines won’t quite work.

• Open a new document at 8px by 8px.
• Zoom in using the Navigator panel to 800% or greater.
• Draw two diagonal lines, each matching the opposing corners. Tip: Hold the Shift Key and drawn diagonally for a perfect 45 degree angle.

Here’s the screenshots:

Pay special attention on that last screenshot, as it illustrates how you can really change the entire feel of the grid by spacing it out or cropping down on it. A tight crosshatch pattern can make a great texture just as well as a big juicy pattern. Play with the spacing and line width until you’re happy with the results.

Step 03: Diagonal Lines… Scaled

This next pattern is pretty easy as it essentially just uses the crosshatch pattern ideas (using just one line instead of two of course!). Simple diagonal line patterns are a great way to add subtle texture behind text (such as headlines) because it adds character without making the text unreadable.

For the diagonal line, go ahead and start with out crosshatch document – but this time, remove one of the lines before you save your pattern (Edit > Define Pattern). The document size in this case is going to be crucial, as it directly correlates to how tightly knit the lines will be.

The screenshots:

The second image shows how, by adjusting the spacing of the document and the line weight and direction, you can get a really wide range of patterns. Not too tricky huh?

Tip: For the purists out there, you can get a much cleaner, sharper line by going through your line – pixel by pixel – and removing any of the “feathering” that we saw from Photoshop’s rendering. This happens essentially because Photoshop is drawing an anti-aliased line where we ideally want a pixelated line. The pixels are so small though that, in most cases, it doesn’t matter either way. Here’s just a screenshot of the super-sharp version just in case you want to see it.

Step 04: Adding Color and Texture

Alright, so we’ve got the basics down! Now let’s add just a bit more personality using two more quick techniques: Adding color and texture.

The color part is probably pretty easy if you haven’t figured it out yet. Just add color to your background and lines until you have the desired effect. My tips: Keep the contrast low – there’s nothing more obnoxious than an overly vibrant pattern.

The texture part is a wee-bit trickier. Texture has always been a notoriously difficult thing to master on the web. Why? Because in most cases, the texture repeats… and most people can spot it a mile away. Even high resolution textures will repeat and show off the tile separations unless you use images that are huge (such as 1920 x 1080)… which isn’t always a practical solution.

The trick with textural patterns?

• Keep your tile big enough that people won’t be able to easily see the repetition. (Use your own judgement here – obviously a tile size that’s 1200 x 1200 isn’t really a “tile”)
• Keep your textures subtle and low-contrast so that the textural spots don’t jump out at people.

In later parts of this tutorial series we’re going to examine how to create some advanced textures… but to round up today, let’s look at a very simple pattern with a bit of grunge to it. The steps:

• Open up a new document (99 x 99px is about what we used… but play around with it based on your own grid sizing).
• Draw a rectangle over the entire document.
• Apply your basic Crosshatch pattern (using any color combo you wish).
• Using a lightly textured brush on a blank layer (set to the same color as your pattern’s background), very lightly (click once) paint a small brush stroke over the crosshatch.
• Adjust the position and opacity until you get the desired effect.

And the screenshots:

And last but not least, let’s take one last look at the four textures we just created:

Additional Tips (and Using These on the Web)

Bonus Tip 01: When saving your pattern (Edit > Define Pattern), remember to hide the background layer if you want to create a transparent pattern. Sometimes you’ll actually want to save the background color, but other times it can be really handy to be able to overlay a pattern onto another color without needing to go back to the original file and make changes. Obviously, using White or Black as the pattern color is your best bet in terms of extending the usability of these transparent patterns.

Bonus Tip 02: We’ve gone over how to turn these patterns into “Patterns” that can be used by Photoshop (or Fireworks), but how do we use them on the web? Easy actually – just same them as .GIF, .PNG, or .JPG files (I recommend PNG for transparent patterns). Then just add them to your web folder and use them as the background images via CSS! Remember to set the “repeat” value if you want them to tile themselves across the entire page.

Conclusion

Alright! So I hope you’ve gotten a little something out of this first session. By now you should have a good understanding of the theoretical concepts behind how patterns work – and a technical understanding of how to create and use them in Photoshop. You can save all of the files that we created here as .GIF, .PNG or .JPG files and use them instantly on the web too… but we’ve really only just begun.

In the next level of this series we’ll be showing you how to create some “noisy” background patterns that make you swear that you could touch ‘em. We’ll also be touching on how to create advanced textural patterns, spae based patterns, transparent patterns, and more in the future.

Subscribe or check back on the site to see all of the updates to this series as they happen!

Webdesigntuts+

http://www.sum-tech.co.jp/audio/

http://www.neonora.com

http://www.luminsolar.com

http://www.lechti.com

http://bundlehunt.com

http://afedorenko.com

http://www.codegeister.com

http://www.designisblack.com

http://www.facilerent.it/

www.madeinhaus.com

www.4muladesign.com

www.designeus.hr

www.xhtmlkitchen.com