Create a Custom Twitter Background in Photoshop

There are three main content areas to a Twitter page. First, is the live feed area, second is the information area to the right of the live feed (who you follow, who follows you, etc.), and then last is the control bar at the top of your Twitter page. Below is a description of each location and how to create a grid in photoshop that can be used in designing custom Twitter backgrounds.

1. First, open a new document that is 1660px wide by 746px tall and 72dpi.

2. Go to "View > New Guide..." We'll be adding four guides, so you'll repeat this step for each guide.

3. Your first guide will be horizontal and at 50px. This guide represents the area that the control bar is in. Anything between the top of your page and this guide will not be visible.

4. Next, we'll add our first vertical guide at 210px. The area from the left side of your page to this grid is one of our editable areas.

5. Our next vertical guide will go at 758px. This guide is the end of our live feed area.

6. Our final vertical guide will go at 1135px. The area between the last guide and this one is your information panel. We put this guide here because in the new twitter design your info panel background is transparent (meaning that the design behind it is visible). This way, if you'd like to add something here you can, but if not you'll know where NOT to hide things!

You can now begin to add your content. Below is a view of my final design in photoshop with the grid set up.

To see my design live, check me out on twitter @PeonyGraphics.

About is here to help designers. Whether you are experienced and are trying to get over a hump, or are brand new to graphic design and have no idea where to start, we want to help.

Read More

User login