Everyone is on Twitter. If you’re a web designer hoping to grow your brand, so are you. One of the key ways to show off your brand and inject personality in your personal Twitter page is to design it yourself. Here’s a way to create a one-of-a-kind Twitter background in less time than you think.
For this tutorial, we’ll be building on a fairy theme.
1. Create a new document in Photoshop. The size dimensions are 1600 x 1200. Name this file “twitter_bg.”
2. Open a pattern like this one from ColourLovers.
Go to Edit > Define Pattern to add this pattern into your Photoshop collection for later.
3. Open the forest image from here. Drag the image onto the twitter_bg canvas. Go to Edit > Transform > Scale. While maintaining the ratio, scale to 175% width and length.
Make a duplicate layer of the forest image. In the duplicate layer, move the image over to line up side by side. Next, go to Edit > Transform > Flip Horizontal. Make sure there is no gap between the images.
4. Merge the layers together pressing Ctrl + E on your keyboard. Select the healing brush to add leaves to the mirrored bushes and some of the trees, which are both dead giveaways that this image is tiled. So, press the Alt key on your keyboard to sample an area which you’d like to collect from, in this case the leaves. Next, release the Alt key and begin carefully adding leaves to the bushes, removing some leaves from the bark of the trees.
Next, create a new layer for the background. Move the layer underneath all others. Fill this layer with the color #604323. Return to the image layer and use the move tool or your up arrow on your keyboard to push the image up, creating a small band at the bottom of the screen.
5. Create a new layer. Select the Black and Clear gradient from the Gradient Editor.
Draw a gradient, starting at an angle from the upper left corner. This create a spotlight effect.
Change the layer’s opacity to 55%. Go to Blending Options for the layer. Go Select the Pattern Overlay, and choose the pattern from Step 2. Change the blending mode of this overlay to Luminosity. Scale to 270%. Change the fill to 60%.
6. Create a new layer. Select the rectangle marquee. Enter in the fixed size of 200 x 500. Draw the marquee to the left of the screen, leaving approximately 20 px of space from the margin of the page. It may be easier to add guides to help you estimate, which can be dragged from the ruler. Fill this marquee with the same color brown (#604323).
7. Create another layer. Take the text tool and type your text. In this tutorial, we’re using Grutch Shaded at 60pt. Go to Blending Options, and add a drop shadow. Select Bevel/ Emboss, and change the glass contour to “cove deep.”
8. Open the castle image from here. Erase the background, leaving only the castle and the forest underneath it. Drag this image onto the twitter_bg canvas.
Resize the castle to fit over the brown rectangle from Step 6, positioning it under the text. While the castle image is selected (if not selected, click on its layer while holding the Ctrl key), go to Edit > Adjustments, and select Auto Levels, Auto Contrast, and Auto Color. Next, select Color Balance, and enter in the following levels: +15 | +50 | 0.
Take the eraser tool and begin erasing the bottom edges. Next, make a duplicate of this layer and move it underneath the original. Go to Filter > Blur > Gaussian Blur. Change the radius to 20%.
9. Add additional text for your tag-line. The text in this tutorial is VincHand. The text here is 85 pt, but the space between the lines is 55 pt.
Add a drop shadow and bevel to the text.
10. Save your image, choosing the “Save for Web” option. Make sure the file size is smaller than 800k which is Twitter’s file capacity.
Next, sign on to Twitter. Go to Settings from the top menu bar and select “Design.” Next, select “Change Background.” Upload your image, and you’re set! Don’t forget to add a profile image to complete your personalized Twitter page. You’re done! Have a look at the final Twitter page here.