Twitter Background : Step by step how to design!

Welcome to another tutorial from Adobe Tuts! This time you are going to learn on how to create your very own customized twitter background.

For those, who don't really know what is Twitter all about, here's the right definition! Twitter is a service for friends, family, and co–workers to communicate and stay connected through the exchange of quick, frequent answers to one simple question: What are you doing?

Here's a sample of my own Twitter page and join today to start receiving my updates! @ramesstudios



In this tutorial, I'll be showing you the process of creating twitter background of my adobe tuts! @adobetuts

First of all, download the Twitter backround template that I've created for you here

Step 1

I'll be using 1280x1024 resolution because it's the standard size + mostly used screen res these days. We'll be working on only the part I've specified above. You can go beyond the size but it can only be seen on larger size monitors.

Step 2

In order to create the background, you'll need plain, patterned or image. In this tutorial, I'll be using wood with black color fading around it. Why fading? Because later on, we need to blend the image with the twitter page background.

Step 3

Adjust the opacity to 70%, so that you can actually see where is the exact working area of your twitter background.

Step 4

Now, you need to start adding all your logos or graphics onto your twitter design.

Step 5

Here's a lil tips.
- Add your logos (if you have any)
- Email address (your followers can email you)
- Your blog/ website URL (followers can check out portfolio or services offered by you)

Step 6

Add some photos or image props to make the page look more attractive.

Step 7

This is how the design will look like once you've added all the necessery info and graphics.

Step 8

Make the wood background's opacity back to 100%.

Step 9

Crop the whole image and save it.

Step 10


Use the File> Save for web in order to save it. Choose the right optimized size and quality and proceed to save it.

Step 11

Now go to http://twitter.com to register. Once you've done that, go to Settings and click on the Design tab. Select the "Change Background Image" and click on browse. Locate the photo and "Save Changes"

Step 12

Next, click on the "Change Design Colors". Change the colors according to your background designs. Use the color picker in your photoshop (see below) to help you decide which color suits your twitter page.



Walla!!!!! That's all! You're done! See below for the final twitter page design. It's now up live at http://twitter.com/adobetuts/



Let me know if you have any questions!

Create your very own planet!

After a long break, Adobe Tutorials is now back!

Wanted to know how can you create your very own planet in 360 view? Check out this tutorial!



Step 1

Open up any panorama shot taken by you or from any stock photos and cropped it out the way I've done above.

Step 2

After cropped, it will look something like this.

Step 3

In order to have smooth continuous 360 view, both left and right of the photo should match. To do that, select few pixels of it (probably 70px width). Copy that part and paste it.

Step 4

Once you've pasted it, flip it horizontally.

Step 5

Using the eraser, erase some part of the pasted photo on the right side. See arrow. (so that the left part looks matching if we make it continuous)

Step 6

Now select both layers and merge it (Control - E)

Step 7

We're almost done! Go to Filter> Distort> Polar Coordinates and select "Rectangular to Polar"

Step 8

If you noticed, the photo looks stretched. You need to re size it by pressing "Control - T".

Step 9

Scale the photo to the left so that it'll look more roundish.

Step 10

As the final step, simply crop it out from the photo and you're DONE!

There you go! A very straight forward tutorial to create you're very own planet in 360 view! :D

Any comments appreciated! More cool tutorial coming your way!