Design a modern twitter icon in photoshop for your website

Syncables 360 Premium v7 Save $10

Right now I am working on a web template for SME DEVELOPERS for Real state Business and have intention to release the template for free under IAMWD. While working on the template I tried to find few nice social icons, buttons that can fit into my design. After a long search within web and my existing resources I failed to grab one, on secondary solution I decided to design a twitter icon on my own!

I am not good on Photoshop, though I manage with templates but not good in sketches. I gone through Google and find out a nice tutorial by Desizntech. What I am going to show below is quite close to the tutorial from Desizntech but here I am including some of my custom parts.

Choose your image size

twitter icon

The easiest step for sure. Chose your canvas and image size. Here I have chosen 300×300 and transparent background.

Set your icon size with guides

Next I placed 4 different guides along with the rulers to initiate 50×50 pixel of size. Please see the above picture with blue box mark.

Draw Rounded Rectangular box

Select rounded rectangular box from tools and give it’s radius value to 5 in the square box you defined with guides in previous step. It will be something like the picture below.

Edit Layer Style

Here I have chosen Gradient Overlay, Pattern Overlay, Drop Shadow and Inner shadow. Please follow the pictures one after other…

Gradient Overlay

twitter gradient overlay

Twitter Gradient Editor

For gradient color chose #63d2f4 and second one on right #e9f5fa. Please note I have selected to show the gradient in reverse mode.

Pattern Overlay

Twitter Pattern Overlay

You can edit this section as you like to. I included it to give some patter feel but if you want you can skip this part.

Inner Shadow

It is better to chose a darker color than that of your background in Multiply Blend mode, here i have chosen #c4ddeb. You may give different value according to your need in distance or size.

Drop Shadow

Twitter drop shadow

According to the website background color I have chosen drop shadow color to #8d8b8b as my web content background is white. You can give any color that suits with your web background.

And that’s it your box styling is done. Next we can concentrate on twitter text ‘t’ !!

Adding Twitter Text ‘T’

First you will need to download Twitter Font Pico if you don’t have it in you collection. You can download this font via Bitrebels

After download add new text layer on top of the rounded rectanguler box and type ‘t’ with font style PicoBlackAI with the color #2cb7e2. Vertical Scale of the text will be 130%.

twitter text pico

After typing the font align it into the center of the shape by selecting both of the layer and then select Layer->Align->Vertical Centers and Horizontal Centers. If you do it correctly it will something like the picture shown below.

twitter text box

Add styles in to text layer

Double click on the text layer and select stroke. Chose color #ffffff and size: 3px position->outside

twitter text stroke

Then Select Inner Shadow and give values according to the picture below,

twitter text inner shadow

If everything goes fine the outcome will be as below,

twitter button big

And that’s it you are all done. You got your own custom icon!! Here what it may look like….

Twitter icon big

And this is your final icon

You can download the source from here: twittericon.psd

Finally I would like to hear from you. Please let me know about any of your techniques that we can share with others. I really need some guest writers who can contribute their concepts, techniques or knowledge with us. Please feel free to contact me at e…@i…s.com. Help us to promote our blog by sharing this page if you think it helps you. Don’t forget to subscribe to our RSS feed

Coming Soon: Keep an eye on our blog. We are going to submit a free website template based on XHTML, CSS3 and JQuery on Real State Business very soon.

Related posts:

  1. Display Twitter profile picture on wordpress comments
  2. Maverick Eye : Flash HTML website design from SME DEVELOPERS