This is a step by step guide to create your own custom twitter background using Photoshop. This tutorial will not only help you to make a professional looking Twitter background but also helpful to get the exact image size which will look perfect on higher resolution screens. This twitter background tutorial is created by a friend of mine, Puneet Sahalot. Puneet is an engineering student, graphic designing enthusiast, internet geek and also love to write poetry. I would like to thank Puneet for taking so much pain in creating this tutorial for our readers.
Step 1:
Create a new Photoshop document of size 1280 x768 or greater. Since background image in twitter is visible completely only on wide screen monitors and laptops you should select the size of image accordingly. Set background color: #068dcc
………………..
Step 2:
Now, we need to define our area of work as only side parts of the picture will be visible on twitter. Use Ctrl+R to have the ruler visible in your workspace. Now, drag a guideline from left ruler to a mark of 15 pixels. Drag another guideline from left to the mark of 260 pixels as shown in image below:
………………..
Step 3:
To draw the separator line below the silver button, use shape tool and a draw a 1pixel thick line with color : #0291d5. Draw another line exactly above it and change the color to #0085c4. Your image should look like:
………………..
Step 4:
To have a better visual appeal we would add a glow and shadow to the separator line. Create a new layer and name it “glow” just above the separator line layer. Use a small white to transparent gradient at the top edge like shown in the image:
Since, this is a separate layer, drag it to the position exactly below the separator line, adjust its width such that it equal to the length of the line. Now, your image should look like:
The separator line looks more detailed and has an added visual appeal.
………………..
Step 5:
To add shadow to the line create a new layer and name it “shadow”. Use elliptical selection tool to make a selection as shown below. Next use bucket fill tool to fill the selection with #525151.
Next, deselect the layer. Go to filter -> blur -> Gaussian blur. Set radius to 5.5. Now, clip the part of the ellipse below the line. Resize its width and make it equal to the length of the line. Also, resize its height so that its only slightly visible above the line.
………………..
Step 6:
To draw the silver button we use rounded corner rectangle shape tool. Set radius to 20px. Draw the rectangle as shown below and align it to the center of the line.
Right click the layer and rasterize it. Now click “blending options” in the right click context menu. Apply gradient overlay with the settings shown below. Use a light gray and white gradient color. Set angle to -94o and scale it to 134%. Next, apply 1 pixel stroke of color: #7777 to the button.
Click on images to enlarge
Click on images to enlarge
………………..
Step 7:
After this, cut the part of the button below the line.
Adjust its position above the line such that your image should now look like:
Please be careful about the order of the layers. Make sure that you have placed your layers the way shown in the figure:
………………..
Step 8: Adding your twitter name
Use Rockwell Extra Bold font and color: # 2b95c4 to for your name. Resize and align the text to the center of the button. To create the slightly engraved effect use the settings shown below:
Click on images to enlarge
………………..
Step 9: Adding the Pic
Create a new layer and name it “frame” draw a box using rectangle shape tool as shown below fill it with color: #FFF. Go to blending options and apply a slight stroke of 1 px color:# cdcdcd. Also apply a slight ‘drop shadow’ with settings shown below:
Click on images to enlarge
Duplicate the layer and press Ctrl+t to use transform tool, rotate the frame to +2o. Duplicate the layer again and rotate it to -2o. Move both the duplicate layers below the original layer. Now add your pic to the center of the frame. The final image will look like:
………………..
Step 10: Creating the content box
Use rounded corner rectangle tool to draw the content box. Set the radius to 10px. Apply a stroke of 1px color: #fff and a gradient with settings shown below:
Click on images to enlarge
………………..
Step 11: The final step
Type in your content in the box as you wish. The filled content box may look like the figure. You can use the slightly engraved effect used in step 8 to highlight some text. You can get these icons from here.
The completed custom twitter background:
Tutorial written for OrkutHeroes by Puneet Sahalot
{ 1 comment }
Thanks @puneetsahalot for this wonderful tutorial and @zazo for publishing it.