By Chris McVeigh, Macworld.com
Article Source: PC World
Twitter opens up a huge opportunity for self-expression, and part of that is undoubtedly visual. While the Twitter interface gives you some basic backgrounds, let’s face it: they’re mostly pretty dull and it’s hard to make a unique splash when hundreds of thousands of other people are using the same elements. To get noticed not just for your tweets, but also for your style, try creating your own custom background. In this second of a two-part part series, I’ll discuss how to create a tiled (or patterned) background. In Part 1 yesterday, I talked about how to create top-left graphics that used image masks to blend seamlessly into the background. This time, I’ll explore tiled (or patterned) backgrounds. And although this tutorial is crafted for Twitter, you can use the pattern you create here just about anywhere, including your personal blog or your company Website.
Designing For Twitter
A simple, stylish pattern can add polish to your page, and people tend to associate you with the imagery you choose. Tiling a grainy picture of your cat across your page will probably not earn you many followers. A cute pattern of cartoony cats carries the same message–that you’re keen on kitties–without suggesting that you’re a hopeless novice.
Coming up with a killer pattern is your goal. Make your pattern moderately large (300-by-300 pixels or more) to help curb the obviousness of the repetition. Avoid gradients because they will not blend from tile to tile. And you’ll want to keep the color and contrast of your pattern in check; after all, people are there to read your tweets, not go blind.
Open Adobe Photoshop CS3 or CS4 and choose File -> New. Enter a width and height for your pattern; for this example, I’ll choose 400-by-400 at 72 pixels per inch. There is no requirement to construct a square pattern; if you think your concept will work better with a wide or tall pattern, enter a resolution like 600-by-300 or 200-by-800. (Twitter’s only requirement is that the overall image file size be less than 800k.) Click OK to continue.
Locate the Layers palette (Window -> Layers) and keep it handy, as you’ll be using it often. The first task is to set the pattern background color. Choose Layer -> New Fill Layer -> Solid Color. Enter a name for the color layer (i.e., Background Color) and click OK. Now choose a color from the Color Picker and click OK; a new layer will then appear in the Layers palette.(Remember that you can change your background color at any time by double-clicking the color layer thumbnail.)
It’s time to add graphic elements to your pattern. Choose Layer -> New -> Layer. You can add anything you want, from text to paint strokes to paths. The only requirement for this tutorial is that your graphic element fits within the document. When you’re happy with this first graphic element, toggle off the visibility of the layer using the eye icon next to it. Repeat this process–adding a new layer and a new graphic element, and then toggling off the visibility of the layer–until you have created all the graphic elements for your pattern.
Now you’ll need to position your graphic elements on the tile. Toggle on the layer visibility for the first element you created and then choose Filter -> Other -> Offset. (If you’ve created any vector objects, you’ll be warned that the vector mask will be rasterized before continuing.) Once the Offset window appears, check the preview option (if it’s not already checked). Immediately below, you’ll see a set of options for Undefined Areas; click the Wrap Around radio button. Now move the horizontal and vertical sliders to position your graphic element; as you’ll notice, you can push the graphic off any edge of the document and it’ll simply wrap around to the other side. Position the graphic element and then click OK. Simply repeat this procedure for each element, and you’ll construct an interesting pattern in no time!
Follow these steps to export your pattern:
Choose File -> Save for Web & Devices.
Choose PNG-24 from the Preset pop-up menu.
Make sure that Transparency is not checked.
Make sure that Convert to sRGB is checked.
Make that the projected file size (seen in the bottom right) is less than 800k.
Click Save and save the file to your Desktop.
Putting your pattern on Twitter
Uploading your pattern is straightforward. Go to your Twitter home page and click Settings; once the page loads, click Design. Immediately below the default themes, you’ll see an option Change background image. Click this link and then click Choose File. Find the pattern you saved to your Desktop and then click Choose. Check the option to tile background and then click Save Changes. Your new look is locked in–now tweak the design colors (text, links, sidebar, etc) to match!
[Chris McVeigh is an author, illustrator and toy photographer who lives in Halifax, Nova Scotia. On Twitter he is known as ActionFigured.]
