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 4x4 document:
Next, grab a 2x4 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 1x4 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 1x4 px layers together (above) and then, using the marque tool again, take a 2x2 selection off the top of the new layer:
Next, to create our pattern effect, swap the ordering of the two 2x2 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 4x4 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 4x4 rectangle:
Add another 4x4 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 4x4 layer, but this time it'll be a light gradient:
Duplicate both 4x4 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 8x8 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!
