Step 1: Download your favorite pattern.
Download and unzip any pattern to your desktop.

Step 2: Login to your twitter account and click “Settings”
The settings link is located in the upper-right toolbar of your home page.

Step 3: Select the design tab and click “Change background image”
The design tab is the the far right tab. Below that to the left, you’ll see a link to “Change background image”

Step 4: Browse to and upload your pattern.
Browse your computer to where you saved and unzipped your pattern and upload. Your pattern will always be a .gif file with the pattern name. I.e. “humidor.gif”

Step 5: Click “tile background” and Save Changes.
Make sure the “tile background” checkbox is selected under your pattern preview and click “Save Changes.” That’s all there is too it. Give twitter a few seconds to refresh and you should start seeing your new background. Enjoy!

Step one: sketch out half of the pattern
I use grid paper to sketch out one side of the pattern. In this case, I started with the left side.

The first rough sketch

When sketching the pattern, I always envision the design sitting in a half circle. That way when we offset the final pattern, the pattern will flow and blend easier around.

An example of the half circle method

Step 2: tracing and coloring
For this pattern, I went straight into photoshop and started coloring. After choosing a few gold colors (brights, darks and midtones), I make a path around the parts I wanted to color first with the pen tool.

After creating a path, click on the “paths” tab on the layers palette, find your path and right click on it. Click “make selection” and you’ll get the selection box prompt.

For a hard edge, keep the feather radius set to zero. Now you’ll have an area selected that you can fill.

I try to keep each element in a separate layer. That way, I can add depth and shadows to each individually.

One quick method to add depth and shadows is by using the burn and dodge tools. Look at your pattern and try to select natural edges. In this case, I wanted half of the leaf to be lighter than the other, so I drew a path splitting the leaf in two.

After making the selection, I used the dodge tool to brighten up the right side of the leaf. I continue to select areas and color until I have the pattern almost fully colored in.

You’ll notice there’s a lot of refining that happens in this step. I keep close to the original sketch, but my drawing skills just aren’t as clean as using the pen selection tool. This pattern took around 20 layers, each dodged and burned in different ways.

Step 3: copy and flip horizontally

The next step is pretty quick and easy. Simply select the design, copy (ctrl+p) and paste (ctrl+v). In photoshop, go to Edit>Transform>Flip Horizontal.

Move the new copy to the right to line up with the left.

Now you can drop out the sketch and choose a new color to create the pattern over.

Step 4: copy and paste vertically
To create the first repeating stripe, we duplicate the pattern and begin tiling vertically. Make sure to space the patterns evenly. I usually hold shift and press up or down and count the spaces. Holding shift forces photoshop to move the element in 10 pixel increments (if pixels is set as the measuring unit).

I usually just eyeball the pattern and find a natural place to start and stop the pattern. With this pattern, the top slips into the bottom rather nicely. Keep duplicating and moving ten or so times so you have plenty of pattern to work with.

Step 4: copy and paste horizontally
Now let’s create a copy of the stripe and offset a bit to create the rest of the pattern. Again, move the pattern in increments of 10 or 1 and keep track of how far you move. If the patterns aren’t spaced evenly, then we won’t be able to create the seamless tile later on.

You should now have two stripes of pattern. Find a good place to offset the stripe that fits with the other.

You’ll notice the pattern fits a bit snugger moved vertically just a bit. You may run into some overlap here and there, so keep moving the pattern around until you have a good balance of the pattern and negative space.

Now duplicate both stripes and move horizontally. Move the copy twice as far as you did before. If you moved the first copy right 100 pixels, move the second copy with both stripes over 200 pixels to get an even spacing.

You should now have a pattern with a good amount of coverage.

Step 5: find the seamless tile
If you have moved the copies evenly, you can now zoom in and find the seamless tile to crop out. Find some good focal points and drag guides onto them. It helps to zoom way in and see each pixel to make sure you line them up evenly.

In this case, I used the smaller flowers to use as reference points.

A zoomed in view:

Now if you select within those guides, you should have your seamless tile:

To test the pattern, open a new document and copy and paste multiple copies. Line them up and make sure the edges are clean. If they aren’t, your guides may have been off a pixel here or there. Go back to your master file and make sure you’ve selected the correct area.

Hope this helps!

Note: this is an older tutorial which I plan on updating.

I’ve been asked many times, “how do you make all those patterns?” So, here we go. All of my patterns are constructed in Adobe Illustrator. I’ve used Illustrator for years, and feel much more comfortable with it rather than any other vector package. So first off, boot up illustrator, open a new document and get ready.

Step 01: Turn on the grid and draw a box. I usually use some vibrant color for the box shape; something I can trace against that I know is there just for reference. So grab the box tool, hold down shift, and draw a perfect box somewhere on the screen. Next, grab the line tool, go to the bottom right hand corner, and while holding shift, draw a line at a 45-degree angle from corner to top left corner, splitting the box. It should look something like figure A. We just split this box in two, and given ourselves a confined space to work in that will line up when replicated.

Step 02: within that bottom half begin drawing your shapes and designs. Now, we want to keep in mind that our design will rotate and replicate on the bottom right hand corner, which is almost like our 0 xy point. Use a darker color of your choice to draw your shapes, using the underlying box as a guide. It’s easier to draw your design with the pen tool in a layer above your box shape. See figure B for an example. It’s also very important to line the elements up perfectly, or you’ll get little gaps in your design (unless that’s intended of course).

Step 03: When you like your design, select the entire element, copy (control+c) and paste (control+v) it, and go to Object>Transform>Reflect and reflect on the vertical axis at a 90 degree angle. Next, rotate the object another 90 degrees, and line the two objects up to each other. You should have a mirror image of your original design lined up. See figure C.

If you haven’t already noticed, what we’ve done so far is design an 8th of the whole element, and copying and reflecting this element is a quarter of the finished element.

Step 04: Now, copy the entire element, and paste it. Rotate it 90 degrees and line the elements up again. You now have half of your pattern element. Copy the entire thing again, paste it, rotate it 180 degrees, and line those back up. See figure D.There you go, you have your tile able pattern element. Now let’s color the thing, and make a pattern out of it.

Step 05: Now copy the entire element, and boot up Photoshop. I still do all of my coloring in Photoshop, but I make sure to keep the original file at 300 dpi resolution, in case I ever need to print it. Now paste the entire element and play around with the colors. Once you get a look you like, start copying and pasting it like mad, and line each one up with one another. You should have one, big pattern. Now look for edges that line up, and crop the image for your tile-able background. Kind of like figure E.

That’s really all there is to it. Once you see examples of the process, it gets rather easy. The pattern you just created can tile vertical and horizontal, so next time we’ll focus on one axis.