Twitter has become one of the hottest sites to be seen on, everyone is on it.

It is increasingly being used as a real-time direct marketing and expression tool, whether you are, Life training coach, Designer, an Artist, a Musician or a Blogger. Wouldn’t it be nice to STAND OUT?

This post outlines how to build your own Twitter background using Adobe Fireworks. If you’re ready to design, lets commence….

HINT: You can browse through popular Twitter users’ profiles for inspiration. However be careful about copying designs and photographs and other resources as they may be copyrighted.

PREPARATION:

Plan your background design (sketch if you have to) before you begin.
I intend to design an extended layout to display ‘Additional information’ in the sidebar (left of the background). I am thinking; “Twittersphere” comprising, clouds, flying planes, various twitter birds and very brief ‘additional information’ (My name, and what i do)

LETS DESIGN (TUTORIAL):

1. Create a blank canvas with dimensions 1280×768

 

2. Choose your canvas background. I have chosen a light grey with the use of the ‘color-picker’ tool

 

3. Using the ‘rectangle tool’, and ‘guides’, draw your rectangular ‘active twitter content’ (timeline, sideline and menu) as show below.

 

4. Google image search, download, open and paste the twitter logo into place as shown below.

 

5. Holding down the shift button, click all 3 shapes and the twitter logo to select them all, then ‘Right-Click’ and select ‘Group’ to group all objects together.

 

6. With the ‘grouped’ item selected, select your ‘Align’ tool from the ‘Window’ drop down menu if it is not already open, make sure the ‘Position’ is activated and Click the ‘Align horizontal center’ to align the ‘Grouped Object’ to the stage

 

NOTE: Colors of both the timeline and menu boxes are non-editable and will stay white but the color of the sidebar should be chosen to compliment your overall background design.

7. ‘Lock’ and ‘Hide’ the grouped ‘active twitter content’ layer to avoid accidental edit as you proceed to design your background

8. Proceed to layout your background design, ensuring that the ‘Additional information’ fits within the Background area to the left of the ‘active twitter content’.

9. I achieve the ‘Twittersphere’ background by ‘Copying’, Pasting, Re-sizing and altering Opacities and Contrast levels of my graphic elements. I make use of the ‘Chamfer’, ‘Rectangular’, ‘Pen’, ‘Text’ tools (a combination different fonts) and my ‘Avatar Graphic’ to achieve the ‘Additional information’ section.

 

NOTE: Your design is entirely up to you – knock yourself out. Remember, however, to tweak your design to display properly at the major screen resolutions.

You can test you design in your web browser using the ‘Preview in Browser’ button under the ‘File’ drop-down menu. If you are previewing in the ‘Google Chrome’ browser, the ‘Resoultion Test’ extension can be used to preview your design at different browser sizes.

10. Select all your ‘Background (Twittersphere)’ elements and again ‘Right-Click’ and select ‘Group’ to group all objects together.

 

11. ‘Re-arrange’ your layers by dragging the grouped ‘Background’ layer underneath the ‘active twitter content’ layer. Un-hide the ‘active twitter content’ to show it’s content and there you go.

 

It’s complete – admire your new background.

 

12. Re-hide your ‘active twitter content’ layer as you prepare to ‘Optimize’ and ‘Export’ your new background.

13. To Optimize, ‘Right-Click’ and ‘Insert Rectangular Slice’, ‘Edit’ the ‘Width’ to 1280px and height to the shortest which includes all your active design (vertically). Remember to keep the file size as low as possible.

 

14. Open the ‘Optimize’ panel from the ‘Window’ drop down menu if it is not already open and choose JPEG – Better Quality, Quality – 80% as shown below.

 

15. ‘Right-Click’ and ‘Export Selected Slice’. ‘Save’ and proceed to load your New Twitter Background design to your profile.

 

NOTE: Although a canvas width of 1280px was used in this tutorial, I have tweaked my final design to a width of 1920px so that my design spans the entire width of a 1920px resolution monitor

 

 

HOW TO SET UP:

Setup you new Twitter background on your Twitter page.

1. Click Settings -> Design -> Change background image.
2. If you do not intend to tile your background image, uncheck the ‘Tile background’ radio button. Click Save changes.



 

3. To set up other colors used in your profile (Text, Name, Link, Sidebar fill and Sidebar border) click Change design colors.

 

Finito!,… You have a distinctive Twitter Background, Now go conquer the (Twitter) World : ).