Translation

9.10.10

CREATE A TWITTER ICON IN SIX EASY STEPS USING PHOTOSHOP

STEP 1:

Open up a new document in Photoshop 128×128, transparent background.
step_1

STEP 2:

Select rounded rectangle tool from the shape menu.
step_2

STEP 3:

Draw a rectangle shape as shown on the picture. Use ruler if you need to.
step_3

STEP 4:

Now use the Path selection Tool ( Keyboard Shortcut “A”) to select the shape. Right click on mouse to get the drop down menu. You should see “Make Section” option. When you select/click that option the rectangle shape now should be turned into selection.
step_4

STEP 5:

Now the exciting part. We are going to fill up the rectangle selection. The color selection completely depends on you. You can choose  different colors to match your preferences and your websites color scheme. Here is foreground #63d2f4 and background #10b8ec
step_4a
Select the Gradient tool. Fill up the rectangle with gradient. Hold the Shift key if you want the gradient to be straight.
step_4
We are going to use Pattern Overlay from Layer Style. You can access it by Double clicking on the layer or Going to Layer>Layer Style> Pattern Overlay on Photoshop menu. Below is Pattern I choose. The used pattern link is mentioned above , but you can choose any kind of patterns you want.
step_5
Keep the opacity to low so the background is not too dark. Here is my result. It is zoomed 200%
step_5a

STEP 6

Now we are going chose Pico (T1) Font Black Al, with white font color and center the font or arrange the way you want. You have a simple twitter icon already! You can stop here if you want. Here is the result:
step_6
Lets make a different version. Choose the font color to #2cb7e2 . This is makes the “t” it almost same color as background.
step_6_a_1
Apply the following Stroke and Inner shadow from Layer Style.
Stroke: Give the “t” white outline. 4px
step_6_a
Inner Shadow: for the inset effect.
step_6_b
Here is the result:
step_6_c
So there, you have it.  A simple yet nice looking twitter icon. I also created one with bird instead of the text. For the bird style just paste the vector bird and change the color and style as you like.
additional


0 comments:

Post a Comment