Designing for Twitter
A custom Twitter background is a must if you want to stand out from the crowd on Twitter. In this Photoshop tutorial we’ll look at building a stunning cosmic design that not only looks great, but fits within the crucial margins between the Twitter profile, allowing it to work at multiple monitor resolutions.
Designing for Twitter
Twitter has setting available for customizing the background image and colour scheme of a profile, which provides plenty of options for creativity. But just like in every day web design, variations in monitor resolutions come into play, so it’s crucial to ensure no important elements of your design are hidden on smaller resolutions, and that the design isn’t cropped off at larger resolutions.
There are typically three approaches when it comes to designing for Twitter:
The full page design
A full page design is basically one huge background graphic that fills the entire screen area. The advantage is that you can fit all kinds of creative elements into the design. The downside is the large file size, and the inevitable point where your design will crop off on a large monitor resolution.
The repeating pattern
A repeating pattern is a perfectly safe choice. The background will continue across every resolution small and large, and will fill the entire screen area. Unfortunately your options of design are limited, as your graphic has to tessellate in some way.
The half page design
The half page design makes use of both a background image, and a background colour. This way you’re open to creativity within your design, and by creating a design that fades out to a solid colour, you’re prepared for when the design is viewed at higher resolutions. Don’t forget with half page designs, portions your design may still become hidden at small resolutions, so be careful especially if you’re using text.
Let’s get started with our own design
The design we’ll be building is a half page layout that fades to black. The design itself is based on a cool cosmic space scene, resulting in a stunning a sleek graphic with lots of textures and lighting effects.
Download my handy Twitter background design template and open up the file in Photoshop. In the templates folder you’ll see a range of common monitor resolutions, showing where the main Twitter panel will sit on the screen. Remember to keep any important design elements within the safe area.
Fill the background with black. Then go to Filter > Noise > Add Noise. Select the options Gaussian and Monochromatic, then adjust the slider to add lots of speckles.
Press CMD+L to open up the Levels, then adjust the sliders to tone down the effect and give the appearance of a field of stars.
Add a Layer Mask, then use a large soft brush to erase the stars from the right of the design. Remember we’re using the ‘half page’ approach so we need the design to fade out to black.
Download a splatter resource from SXC, then paste rotate and scale it into place within the document.
Press CMD+I to inverse the design, switching it to a black background with white splatters. Change the blending mode to Screen to render the black area transparent so the stars show through. Paste in a second copy of the splatters to fill up the top and left areas of the template.
Type out some text to brand your design. Here I’m using the words Line25 set in the fantastic League Gothic font.
Change the fill colour to black, then scale and rotate the text vertically and position in the top left corner. Toggle the template layers on and off to ensure the text won’t be cropped off at the small resolutions.
Grab the Brush tool and select a spraypaint splatter brush. Dab a few spots of white on a layer underneath the text, so the splatter flare out from the letters.
Use a soft brush to add subtle spots of white behind specific areas of the text to give it more legibility. Tone down the opacity to maintain subtlety.
Add a Layer Mask to the text, then use a large watercolour brush at a low opacity setting to erase out a texture, allowing the underlying stars and colours to show through.
Finish off the design with a couple of large spots of colour. Change the layers to the Color blending mode to give a cold atmospheric feeling.
The final design includes plenty of detail for users with larger resolutions, but keeps the crucial element of the text inside the template for the small 1280px resolution.
Crop down the design to include as little of the solid colour as possible, then save for web. Being a smaller background image than a full page design the file size will be pretty average, which will ensure the design loads without delay.
Log in to your Twitter profile, then go to Settings. Click the tab labelled Design to access the background settings. Upload your exported graphic as the background image and deselect the tile option.
Next, adjust the colour scheme of your Twitter profile to match. Ensure the background colour is set to whatever colour your image fades out to, then choose some harmonious colours for the links and sidebar.
Once everything is saved you’ll be looking smart with a stunning and eye catching custom design.