Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo
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!
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.
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 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!
The Video Tutorial
The video portion of this tutorial will help smooth out any steps that you don't quite follow in the written version (below). Plus, sometimes it's also just nice to see how someone else works, so enjoy!
The Written Tutorial
Because some of these patterns are going to be difficult to see on a web-resolution screencast, I'm also providing a step by step written tutorial. You can watch the video or the written version (or both!), it's pretty much up to you which way you learn best. Let's dive in...
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:
- 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.
- 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 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.
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!