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.
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 studio website.
A simple, stylish pattern can add polish to your page, and people tend to associate you with the imagery you choose. 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.
Create a moderately sized pattern of at least 300-by-300 pixels or larger.
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 colour. Choose Layer -> New Fill Layer -> Solid Color. Enter a name for the colour layer (i.e., Background Color) and click OK. Now choose a colour 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 colour 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.
Offset lets you move images and have them wrap around to the other side of the canvas.
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.
You can export as GIF, JPEG or PNG, but PNG will give you the best quality output.
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 colours (text, links, sidebar, etc) to match,
Author-Chris McVeigh
No comments:
Post a Comment