Sunday, April 21, 2013

Kick Ass Twitter Background Hack

My friends and colleagues can make fun of me all they want; I use PowerPoint to design many of my graphics.  Why?  Because it is so easy to use, so powerful and virtually everybody has it on their computers so it is easy to share files.  I read an article today about why it is important to have a kick-ass Twitter background (  Indeed, the background on Twitter (as opposed to the cover) is often overlooked, yet when viewed on a computer, is incredibly valuable real estate.  If a picture is worth 1000 words, then a good Twitter background is worth at least more than 140 characters.  So this is my hack on creating a kick ass Twitter background. 

Step 1
First, decide what type of design you want. The link above has some good examples.  I'm going to classify them as follows:  
  • Collage of work - This is great for artists, photographers, world travelers and authors.  Show off your best work in your background.  For authors, display your book covers.  For world travelers, show off your favorite pictures / memories.  You can display your collage in several ways:
    • Squared up - multiple small pictures in a grid format
    • Off-kilter - rotate the images slightly left and slightly right to create a tilted look, and overlap the images slightly
  • Header - This is a professional-looking background that focuses on the top.  Have your logo on the side near the top, and some cool pattern and/or stripes near the top.  The bottom should be more plain, one color or a gradient.  
  • Who We Are - For startups and small businesses, this may make the most sense to help convey a consistent message.  Your logo should be prominent on the left side, either near the top or bottom, and you can use the rest of the left margin for words bundled with symbols and basic graphics.  If you have a physical core product, consider showcasing a napkin sketch of the product here. 
  • Philosophy - This is a good branding background.  The idea is to focus less on what specific products or services you offer, and more about fundamental feelings about life.  A simple background coupled with some words of wisdom work great to convey the "why" of your business.  
Step 2
The next step is to lay out your graphics and words.  Open a blank PowerPoint (emphasis on blank).  Add any graphics or images you want to be prominent, including your logo if you want to incorporate it.  I like to use the shapes PowerPoint offers; many of them are very recognizable and can make a big impact if used properly.  When adding shapes, think BIG!  Details will be lost on your users, so don't clutter your background; use bold graphics with thick outlines.  PowerPoint gives you the option to add text to certain shapes and images, but I recommend against this, because it limits your freedom on how to space and shape your text.  Instead, use a free form text box for each segment of text you want, so you can move it around and shape it freely.  If you create the text box and then the shape over it, you can put the shape behind the text by right-clicking on it and choosing "Send to Back", or right-clicking the text and choosing "Bring to Front".  Don't worry too much about what the *right* spacing is at this point, we'll have some iterations once we see how it looks on Twitter, so you can adjust as needed.  The point is to get something up so you can know what needs adjustment.  

Step 3
Third, create one large box to serve as the base background, over the edges of the slide.  Specifically, start in the top left corner of the slide and stretch it to be about 300% of the slide horizontally and up to 200% of the slide vertically.  This ensures that even if the user's browser is zoomed out or the resolution is larger than normal, the background will still fill their screen.  Alternatively, you can make the background tile-able, meaning it would look okay if it was repeated right next to itself.  If you take the tile-able approach (like for collages), then you can make the background as big or as small as you want.  
Remove the border from the box, that is not needed.  For the fill, I generally recommend using a gradient rather than a solid color; the gradient gives a feeling of movement.  For professional-looking backgrounds, use one bright color (olive green, blue, and orange work well) and one neutral color (gray, beige or white).  Alternatively, you can fill the background with an image, so long as the image isn't too busy.  You may want to play with the transparency or coloring of the image to make it more subtle.  When satisfied, right-click on the box and click "Send to Back" to get it to appear behind the other objects you've placed.  
Note:  Yes, I know PowerPoint has the option of changing the background on the slide, but there is a method to my madness in using a box instead.  Later, we will copy and paste all the objects into Paint, and doing so will not grab the PowerPoint background.  

Step 4 (optional)
Fourth, add layers in the form of watermarks or polka dots, etc.  You'll have to be the judge if your background is too busy or not; if you're showcasing a bunch of work then you may not want to add anything, but if you just have a few words and your logo, I'd recommend this step.  Now that you have a base background and some graphics or content in the foreground, I recommend adding watermarks of sorts.  These will reside behind the core content but in front of the base background, and should be even larger shapes or graphics.  Let's say you want to add circles.  Draw a circle and make it pretty big, even going over the edge of your base background.  Right-click on it and choose Format Shape, remove the border in Line Color, and then go to the Fill tab.  Here, I recommend using a solid fill, choosing a color close to your background color, or a neutral color like gray or white.  Set the Transparency to somewhere around 68%, and then tweak it up or down depending on how it looks against your background and foreground content.  When you're done, send it to the back and then send the base background box to the back again.  Make sure to fill the entire background box with these watermarks, so that when viewers are zoomed out, they will still see a consistent look. 

Step 5
Step five is to use select all (Ctrl+A) and copy it (Ctrl+C).  Open up Microsoft Paint (I know, thought you'd never see that again, right?) and paste it (Ctrl+V).  If you don't know where Microsoft Paint is, try these steps:
  • Open the Start Menu, click Run... and type in "mspaint" and click OK.  
  • If you have a Windows button on your keyboard, hold that down and hit R, then type in "mspaint" and click OK.  
Bam!  You have a rockin' background to test on Twitter.  Save the file as a .jpg, .gif or .png, and put it somewhere you'll be able to find it.

Step 6
Finally, you get to see your masterpiece come to life.  On your Twitter profile, click the little gear icon near the top right corner, and choose Settings.  On the navigation bar on the left, select Design.  Before uploading your image, choose the "Theme" that best fits your color scheme; this way the font colors will look better after you've updated your background image.  Then, find the "Change background" drop down and select "Choose existing image".  Navigate to where your image was saved and click Open.  At the time of this writing, Twitter has some message about how you can preview the change before saving it, but that wasn't working for me so I had to click "Save changes" and then refresh the page.  Either way, you should now be able to see how the image looks with all the Twitter stuff on top of it.  

Step 7
Unless you have spacially cognitive superpowers, you probably see something that isn't the right size or isn't spaced well.  This is where the trial-and-error, or iteration, comes in.  You can go back to your PowerPoint, and adjust the sizes and spacing of the content, base background and layered watermarks to make it fit the Twitter page.  Make only a few changes at a time (literally, I recommend making no more than three changes at a time), then repeat steps 5 and 6 to see how it looks before making additional changes.  Make sure to view at the normal zoom, or 100%, but also to zoom in and out to see how the different elements look at the various levels.  The goal is to optimize your design for 100%, but make it flexible to look good zoomed in and zoomed out.

Step 8
Once you're pretty happy with your background, send the link to your favorite graphic designer or artist friend for feedback.  They may recommend additional tweaks to blow it over the top.  

And that, my friends, is a quick and dirty way to make a Kick Ass Twitter Background.  

No comments:

Post a Comment