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
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…
For gradient color chose #63d2f4 and second one on right #e9f5fa. Please note I have selected to show the gradient in reverse mode.
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.
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.
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%.
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.
Add styles in to text layer
Double click on the text layer and select stroke. Chose color #ffffff and size: 3px position->outside
Then Select Inner Shadow and give values according to the picture below,
If everything goes fine the outcome will be as below,
And that’s it you are all done. You got your own custom icon!! Here what it may look like….
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.