Create a Twitter Icon in Six Easy Steps Using Photoshop

Categories: Tutorial | Oct 14, 2009

You do not need to be a Photoshop pro or Iconist to create a simple icon. Just have an idea of what you want to create and start from there. In this post we are showing you how to create a simple twitter icon for your blog or website in six easy steps.

First lets see what we are creating.

preview

I am assuming you know how to install patterns in photoshop. Also the PSD is available to download at the end of the post.

Here are the resources you need to download.

Techie Patterns for Photoshop
Vector Twitter Icon
Twitter Font ( via Bitrebels Thanks Richard)

We are creating a 128x 128 icon. If you want the icon to resizeable it is a good idea to create the icon in Illustrator. For the purpose of this tutorial we are going to stick to 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

Experiment with the layer styles and come up with your own unique style.

You can download the PSD from following links:
Twitter Icon PSD | Mirror

If you enjoyed this post, get free updates by email or RSS.

Posted Under: Tutorial

Tagged: icon, Photoshop, Twitter Icon

freetutorial says:

December 28, 2009 at 9:40 am

Hi, Very nice article,.

Please continoue.
freetutorial´s last blog : Php Comments

TheWebTuts says:

November 9, 2009 at 8:40 am

Tutorial added to thewebtuts.com

Coppermine says:

October 22, 2009 at 8:10 pm

ha ))

сотовые телефоны екатеринбург says:

October 18, 2009 at 6:37 pm

You already got some great responses…

Girlie | Digital Room says:

October 17, 2009 at 12:46 am

Looks like a very fun tutorial! I would love to try this one out. Hope it’ll look as nice as the one you did.

sriganesh says:

October 15, 2009 at 11:24 pm

nice and fun tutorial, iam worrking on some icons for release. and thanks for RT.
sriganesh´s last blog : Photo Illustration by Jerico Santander

Kouba says:

October 15, 2009 at 10:46 pm

I liked it. So much useful material. I read with great interest.

Hermitbiker says:

October 15, 2009 at 7:15 pm

Great Photoshop tutorial, DesiznTech !! You have a really great blog going here too !! Photoshop still makes my “last 2 braincells… vaporlock” though !! I just have the “free” stuff for now and I’m also playing around with the “free” Terragen2 generator also !! Just don’t have much money right now and I wanted to see if I could “create” something using free software… b4 paying out the “big” bucks !! Everyone is much more advanced than I am… but I am learning… slowly !!

Keep up the great work you are doing here and I am now “subscribed” to your “rss” feed… so I can try to “keep up with your blog too !!

Thanks for the help !!
Hermitbiker´s last blog : http://Hermitbiker.stumbleupon.com/review/34131971/

Mark Montoya says:

October 15, 2009 at 4:14 pm

Great post. I’m going to look to include them on my sites. Thanks!

Polprav says:

October 15, 2009 at 3:27 pm

Hello from Russia!
Can I quote a post in your blog with the link to you?

Bariski | TutZone.net says:

October 15, 2009 at 2:12 am

Very nice tutorial buddy, simple and cool. Thanks for sharing.
Bariski | TutZone.net´s last blog : 18 Really Beautiful and Creative Web Designs

October 14, 2009 at 5:30 pm

Interesting and informative. But will you write about this one more?

Leon says:

October 14, 2009 at 5:12 pm

Fun tutorial! Why didn’t you just make a vector shape layer with desired effects (such as gradient) via blending options?

btw, there are two steps 5

Kawsar Ali says:

October 14, 2009 at 6:01 pm

Because I wanted take easy route I thought this was easy to me. But great suggestions. Thanks for the heads up with step its fixed.

Harry Ford says:

October 16, 2009 at 9:39 am

Agreed with Leon not sure why you wouldn’t just use a rounded corner vector with gradient in the style. Would be far easier. I suppose it does show another way to create a grad though.