« All Pro Tips

20 Steps To Create A Killer Twitter Background


by (@badasstweets)



Posted in:

The background is entitled “The Beginning.” It’s a background that we offer for free on our KillerTweets website. It’s been downloaded over 5000 times as of writing this tutorial. Feel free to visit the site and download it for yourself.

There are many ways to work within the layers (i.e. blending modes, layer properties, etc.) to create your desired effects and including them all in one tutorial would make for a really long one. So, I tried to be as concise as possible with my explanations.

This was a pretty fun background to work on. I wanted to create this incredible cosmic scene incorporating a lot of elements related to earth and space. This is actually one of my favorite designs and I’m happy to share it with you. The first picture, of course, is the completed design.

The first step in any design like this is to start compiling images to make the collage. There are many sources to find stock photography and a Google search will also turn up some pretty incredible images. You can purchase stock photography from sources such as Corbis, Getty Images, iStockphoto, or Shutterstock. There are many place out there to find what you’re looking for. This design is a combination of both stock photography and some photography of my own.

Step 1

I started the design by creating a new document that was sized at 1600X1200 pixels, 72 DPI. In our designs, we’ve found that this size works the best for almost any resolution monitor. Not too big, not to small. There are really no right or wrong sizes as long as your design is well blended across your background. Also, keep in mind that most people are on widescreen monitors and the old 1024×768 standard is very quickly going away, if not already buried.

Step 2

Next, I found a really cool image of a galaxy with bright colors and cool elements. I figured this would be a great image to start with as I built my layers to achieve the desired result.

Step 3

I duplicated that layer and moved it toward the bottom of the page, erasing the top of the image so that it blended better with the layer below.

Step 4

I found an image of the top crest of a globe. I sized it to fit my 1600 px wide canvas and centered it vertically. I added a layer mask and used the gradient tool to blend the image above the crest and below the crest. Again, that made for better continuity with the layers below.

Step 5

I duplicated my galaxy layer and moved it above the globe layer I just created and set the Blend Mode of that layer to “screen” in my layer properties. This gets rid of the black space in the image and only allows the lighter layers to show.

Step 6

I wanted to add some texture to the bottom by creating this crackle effect. I found an image of cracked earth, sized it to my canvas and put it at the bottom of the page. Again, I created a layer mask and used the gradient tool to blend the top of the image with the layers below.

Step 7

This time, I set the Blend Mode of that layer to “soft light” in my layer properties.

Step 8

I added a great picture I found of some mountains. I used the eraser tool to erase everything above the mountain tops. I then added a layer mask and used the gradient tool to blend the bottom of the image with the layers below.

Step 9

I added an image of some clouds I found directly below the mountain layer to give some more depth to the design and create the appearance of a storm on the horizon. The image was in color, so I unsaturated it to create a gloomy mood. I erased out around the clouds what I didn’t want of the background.

Step 10

I had another image of a globe with light cresting over the top and put that layer directly behind the mountains. I created a layer mask and used the gradient tool to blend the top, left and right sides. I set that layer to “overlay” in the layer properties. I duplicated that layer, adjusted the opacity back to around 85%, and used the eraser tool to clean up unwanted areas of that image.

Step 11

I found this really cool image of one of those electricity globes that electrify when you touch them. I situated that image over the globe layer I just created and set the layer blend to “screen.” I added a layer mask and used the gradient tool to blend that image with the background.

Step 12a

I wasn’t quite happy with the lighting on the mountain tops, so I created a blank layer above the mountain layer. I grabbed my paint brush, set the color to white, and painted a over the area that I wanted to highlight more.

Step 12b

I set that painted layer to “overlay” in my layer properties, adjusted the opacity to get the desired result, and used the eraser tool to clean up any unwanted overspray.

Step 13

Next, I duplicated the mountain layer. I clicked on “Edit/Transform/Flip Vertical” to flip the image vertically and create a mirror effect. I set the layer blend to “screen” in the layer properties and adjusted the opacity to achieve the desired result.

Step 14

I also had this image of a tree that I liked. This time, I set the layer blend to “multiply.” I then used the magic wand tool and eraser tool to take out the backgrounds around the tree.

Step 15

The tree was a little too dark so I again created a new layer and painted white directly over the tree (see step #12A.). I set that layer to “overlay” in the layers property and adjusted the opacity to get the desired result.

Step 16

I had a couple of pictures of some CGI developed comets in multiple shapes & colors. I placed it in the image, set the layer blend to “screen” and used my eraser tool around the comet to take out the background.

Step 17

Next, I duplicated the mountain layer. I clicked on “Edit/Transform/Flip Vertical” to flip the image vertically and create a mirror effect. I set the layer blend to “screen” in the layer properties and adjusted the opacity to achieve the desired result.

Step 18

I added another comet on the right side above the mountains using the same technique in step #16.

Step 19

Then, using a lens flair brush (found via Google), I set my color to white and accentuated some of the stars in the sky and added a few of my own.

Step 20

The image is complete. From that point, we add our logo and upload to our website or Twitter page. That’s it.

Picking the right images is really important to any design. They can make or break it. You can also achieve a lot in Photoshop with the right layer blends and adjustment layers. Hopefully, this will inspire you to create your own killer backgrounds! Come check out our other stock backgrounds OR order a custom background design at www.KillerTweets.com.

About the Author

Chad McMillanChad McMillan (@badasstweets) is Creative Director for ShowCase Marketing, a marketing and brand architecture firm located on the east coast. He’s also the creator and principal designer for KillerTweets.com, a site specializing in killer Twitter background designs. He oversees a team of brand developers, programmers, and badass designers on a mission to change the face of graphic design.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Design Float
  • StumbleUpon
  • TwitThis

What people are saying:

  1. Paul Ehrenreich
    March 30th, 2009 at 6:09 am

    Thanks for the write up!

    This inspires me to get better at photoshop and finally create my own twitter background

  2. Bronson
    March 31st, 2009 at 11:21 am

    That image could be a tad heavy, but it’s a really kick ass design. Nice work!

  3. Roland
    April 2nd, 2009 at 1:49 pm

    thx for the inspiration! great article!

    i just found one fact you should think about:
    you mention 1600×1200 as the perfect size for most users, but for the increasing widescreens @ 1680×1050 you’re getting too small and your visiors see this black stripe on the right.

  4. Misty Belardo
    April 2nd, 2009 at 5:42 pm

    Its always great to see how awesome works of art are made. You rule.. Love the way you made it so step by step and easy to follow. Great post. Thank you for sharing = )

  5. KillerTweets
    April 5th, 2009 at 6:00 pm

    Thanks for the kind words guys and gals!

    Also, great point Roland. We’ve considered adjusting the size of the backgrounds to fit the 1680px width. We might even consider offering multiple sizes with each download. Appreciate it!

    Also…a percentage of ALL sales in April go to support Water of life (http://givefreshwater.org), an organization dedicated to providing clean, fresh water to villages around the world by sending teams and equipment to dig wells in places like Liberia and Ecuador. It’s really a great cause.

    Thanks again!

  6. Doctor Twitter
    April 7th, 2009 at 1:18 pm

    Cool effects you added..like the crackled ground

  7. Yolanda
    May 21st, 2009 at 10:03 am

    Hi. I don’t want to be trite, but the design is awesome. Thanks for sharing the whole process.

  8. Poyel Nelson
    June 13th, 2009 at 4:13 am

    Thanks for sharing!

1 Trackbacks For This Post

  1. You are now listed on FAQPAL

    20 Steps To Create A Killer Twitter Background…

    Learn how to make a killer Twitter background from one of the leading background designers….

Got something constructive to say?

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>