Wednesday, January 13, 2010

Create a Coffee Flavored Twitter Background

Create a Coffee Flavored Twitter Background

twitter_bg_200x200Twitter has become the go-to social media for design businesses in 2009 and we can only expect this trend to increase in 2010.

It's important to customize your Twitter profile, making use of all the screen real estate to enforce your brand. So let's create a Twitter background for a fictitious design studio called "Coffee Driven Design".






Types Of Backgrounds

There are two possible types of backgrounds you can implement on Twitter: a tiled image or a single image aligned to the top left corner of the screen.

The second option suits our needs much better because we can use the space to the left of the Twitter column (which is centered) to create a vertical sidebar with our custom graphics, web address and tagline.

Final Result

Take a look at the finished image, a coffee flavored Twitter background.
final

Step 1

Before we start dowload this ZIP file TwitterBG that contains the coffee pot icon and the final PSD.

Open Photoshop and create a new document, 1280×800 pixels. Our design will have to fit in a 245px wide column. That's the left side column available in a browser window at the popular 1280×800 resolution. Vertically we shouldn't exceed 630px. See the template in the next image.

template
First set the background color to a pale yellow (1a) then, on a new layer, create a vertical coffee gradient (1b). Go to Filter > Noise > Add Noise and choose the settings you prefer to add a slight texture to the gradient (1c). Not only does this spice up a simple background, it also removes the horizontal banding that sometimes occurs on big gradients.
1

Step 2

We need a coffee maker as centerpiece of the design. You can take a picture of your coffee pot or download a stock image and place it in the document. I used one of my icons, the classic Italian Moka Express from my Breakfast Icons set. For the sake of this tutorial, though, use the PNG included in the download pack. Place the coffee pot at the bottom of our reference column (2a). Hit Cmd+U to bring up Hue/Saturation and move the Hue slider until the icon acquires a slight brown tinge (2b). Now it looks more at home (2c).
2

Step 3

Hit Q to enter Quick Mask mode and create a black and white horizontal gradient, making sure the black is on the right. Hit Q again to exit Quick Mask mode and you should see a selection marquee (3a). Apply it as a mask to the layer. This effectively fades out the gradient (3b). We can now crop our document to 900px wide.
3

Step 4

Select the Brush tool (B) and hit F5 to open the Brushes window. Select a soft round brush and if you have a tablet set both Size and Opacity Jitter to Pen Pressure. If you don't have a tablet set the brush to a low opacity (4a). Make sure the foreground color is white and paint a swirl of steam from the beak of the coffee pot to the top of the image (4b). Paint a bunch of steam puffs too (4c).
4

Step 5

Using the Smudge Tool mix the swirl and the puffs together to form a cohesive cloud (5a). With the Eraser Tool (E), set to a soft brush with low opacity, selectively erase small areas to add depth (5b).
5

Step 6

Go to Filter > Blur > Motion Blur and use the settings shown in image (6a). The result (6b) is more convincing. At this point I decided the cloud was too transparent so I painted some more steam (6c). You can adjust the steam cloud to match the background if you want, adding a slight yellow tinge.
6

Step 7

We can now add the name of our studio and the web address (7a). Cmd+click the text and then hide it, select the steam cloud and go to Layer > Layer Mask > Hide Selection (7b). We have successfully written our company name in the steam cloud (7c). Export the image as JPG and let's add it to our Twitter profile.
7

Step 8

On Twitter select Settings > Design and click on Change Background Image (8a). Select the image you just exported and save the changes (8b). Now our background image is set. We need to customize the colors of the interface. Click on Change Design Colors and enter values from the background. Use the darkest brown shade for the text, a medium orange for the links and the bottom shade from the gradient for the background and the sidebar (8c). Add a tweet to see if everything is in order (8d).
8

Step 9

Our background is in place so we can go back to Photoshop and add the final details. Select the layer mask on the cloud layer (9a). Go to Filter > Distort > Ripple and use a 50% amount (9b). Now the words in the steam are nicely distorted and they look more realistic (9c). All we need to do now is add our tagline and export the updated image to our Twitter account (9d).
9

Conclusion

Customizing your Twitter background is very easy and fun. The only drawback is varying screen resolutions which can sometimes hide the design or push it too far from the content column. Have you customized your profile yet?