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…

Gradient Overlay

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

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

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.

Hello viewers a new free twitter background for you designed by Shajed Evan.

Twitter is becoming a strong marketing tools for your services, that is why it is important to give your profile a cstomized look.

As a designer if you like to know how you can create some great design for your self you can go through some nice articles written on various design blogs. One of the most popular article can be found in Mashable : HOW TO: Create Custom Twitter Backgrounds

Download: If you like to download this free twitter background please click here

you can visit the live version visiting designers own twitter profile

If you like to have your own customized background contact Shajed Evan directly from his design studio SME DEVELOPERS

Dont forget to share this news with others!!!

I just tried some new search on how to optimize or remove unwanted elements from header file? I really liked three post. Bellow are the three Links from which I have taken references for this post:

• Removing wp_head() elements (rel=’start’, etc.)
• Cleaning up wp_head
• Remove unwanted WordPress header elements

I found these post really helpful and like to share some of my understandings with you:

Problem with wordpress wp_head()

wp_head() is a action hook for plugins which is used in HTML <head> tag in wordpress header.php file. It is used so that plugins can include their additional functionalities within <head> tag if necessary. Now the problem with this wp_head() is that it do have some of it’s own element itself which you can find in view-source page of your template. Have a look:
[code lang="html"]

The tag :

[code lang="html"][/code] is unnecessary if you do use different rss feed element like Feed Burner in your blog. Moreover it conflicts the original title tags as well. In some cases few social networking services like “StumbleUpon” get confused which title it should follow!

How to remove?

Remember removing the wp_head() element is simply designers choice. It is up to them. If you really want to use core Jquery link given by wordpress, want to write your blog using Windows Live writer then you should not remove these elements. One simple solution might be just remove the wp_head() from your header.php file. In that case it may hamper your template because  these Action hooker helps your template to work smoothly. What we can do is, to remove each single element inserting few codes in your function.php file.

Open your function.php from your Editor from wordpress admin or with notepad from your local PC. Now add following codes according to your interest. I have removed all of them because I already had substitutes for my template and most of them were useless for me.

Remove the links to the extra feeds such as category feeds

[code lang="php"]remove_action( 'wp_head', 'feed_links_extra', 3 );[/code]

Remove links to the general feeds: Post and Comment Feed

[code lang="php"]remove_action( 'wp_head', 'feed_links', 2 );[/code]

Remove the link  EditURI link

[code lang="php"]remove_action( 'wp_head', 'rsd_link');[/code]

Remove  Windows Live Writer manifest file

[code lang="php"]remove_action( 'wp_head', 'wlwmanifest_link');[/code]

Remove Index Link

[code lang="php"]remove_action( 'wp_head', 'index_rel_link');[/code]

Remove wordpress Generator

[code lang="php"]remove_action( 'wp_head', 'wp_generator');[/code]

** please be aware removing this link means you might have problem while upgrading your wordpress automatically form your admin dashboard.

Remove Start, Prev and current post link

[code lang="php"]remove_action( 'wp_head', 'parent_post_rel_link');remove_action( 'wp_head', 'start_post_rel_link');remove_action( 'wp_head', 'adjacent_posts_rel_link');[/code]

Remove Additional Jquery Link

If you include all your jquery script source manually in your <header> tag in that case self included jquery reference is an excess for you. We do have on function wp_deregister_script(‘jquery’) , But the we cant include this one in function.php file. It is because it inherit code wordpress admin panel jquery functionality. In that case (Thanks to Falcon to notify us) we just need to open our header.php file and include the code just above wp_head(), as follow:

[code lang="php"]wp_deregister_script('jquery');wp_head();[/code]

Thats all the basic wp_head() element you may want to remove to keep your <head> tag clear. Though some plug-ins will contradict with their own generated script like JavaScript or style sheets in that case you have to go more deeper. You just need to open that plug-ins main php file and try to find [code lang="php"]add_action('wp_head', 'plugin_function_here');[/code] after you do know the name of the plug-ins function just go back to your function.php file and include this code: [code lang="php"]remove_action('wp_head', 'plugin_function_here');[/code]And it will work fine.

Hope this discussion may help you guys. Please let me know if I missed something.

I am also very new in WordPress, still learning its inner functionalities. The template you are watching in this blog is basically a customization of two different free template combined into one. I learned how to add widget, create new function and insert code within core wordpress template. Anyway I can discuss about this later, but here I am listing few free templates that you might be interested to look at. Have a look below:

WordPress blog and portfolio templates for December 2009

CleanPress

GoodTheme

MotionStyle

Fullscreen

ArrasThemes

TypeBased

SimpleBalance

Bueno

Irresistible

Seabreeze

DeskSpace

The template are collected from different sources and from blog post, I like to thank them too.

Thanks to:

• WooThemes
• SpeckyBoy
• Vision Widget
• Instant Shift

Usability of a website :

You can find lots of definition given by expertise. My simple point of view is “Giving less effort to find what I want from a website within my particular interest”. That means my percentage of hovering will be less, It will be easy to navigate, I will know where I can find my desired contents within a website. Moreover it should meet our goal. It might be contents, Available links, in Design pattern or may be just a video. As an example we are more comfortable driving on a wide straight high-way rather than zigzag roads upon hill! That means how comfortable you are while purchasing a product from a shopping mall.

Website User Experience :

It is common for your viewers, even for you as a browser. When we start browsing a website conscious mind start giving feedback right then, “What is my experience?” Am I feeling good? Is it comfortable for my sight view? Can I keep trust on what i am looking at? How about the services it is providing me? How satisfied I am? Yes lots of questions comes up in case of user experience analysis. An user experience is something which can keep your customer stick with you at all time. Simple example might be a shopping center who do have small product line but it do have lots of returning customer only because these customers do get good customer experience.

The battle :

Usability or Experience? Well definitely both. But we just need to balance it at best possible limit both side. Very usable thing might not cover better experience, on other hand a product with high functionality might be difficult for use to everyone. That is why developers and designers both consider to balance these two facts at the same time.

A publication by Semantic Studio, “User Experience Design“ written by Peter Morvilles (Email : morville@semanticstudios.com).With many years of experiences in information architecture and UX design the writer developed a new model called “User experience Honeycomb“.

It was a extension to an infamous model named “Three circle of Information Architecture“. The new model just described 7 quality of an user experience, those are : Useful, usable, desirable, findable, accessible, credible and valuable. There are so many experts are there who are working with usability and UX, if you search thoroughly you might get more different techniques or mind map before practical integration. But the Map above is one of the basic content that you will find useful to fulfill your starting solution for usability and UX.

Please read the article by Peter here : User Experience Design

I have found some other posts in different popular blogs and you might be interested to have a look at those as well.

1. 6 simple ways to increase the visual impact of your Web Page

   

2. Simple usability problem to avoid

   

3. Brand = User Experience: The Interface of a Cheeseburger

   

4. Call to Action Buttons: Examples and Best Practices

   

5. 15 Common Mistakes in E-Commerce Design

   

6. Minimizing Complexity In User Interfaces

   

7. 10 Useful Usability Findings and Guidelines

   

8. 10 usability crimes you really shouldn’t commit

   

9. Long-tail User Experience: how to cultivate (or dissolve) a community

   

You may find some more resources and articles on-line, If You think I should include more link that you feel better please let me know. Let me know about your interest too.

Well this title is not new to some of wordpress blogger. Since I started blogging (to be honest very new), hovering those entire beautiful blog site existed, I always wondered how they can manage Twiiter avater in their comment area. Did they built their own plug-in or there might be a web service by twitter? While searching on goggle I got some blog post on SmashingMagazine and in WpBeginner, both described step by step approach towards your twitter based avatar for wordpress. Plugin named “Twittar” by SmashingMagazine and Ricardo Sousa. You can have a look at that post here.

But I found one in WordPress Plugin website name “Twitter Avatar” developed by BusinessXpand.com and author Thomas McGregor. It allows user to post there twitter username while they submit their comments. Below I will give some features and show how you can install this plugin to your wordpress theme.

What this “Twitter Avatar” do?

That picture tells everything, isn’t it?? Yes, you can have an additional text field for your commenter to submit their twitter username. Moreover it will show links to their twitter profile next to comment. Needless to say default avatar will be replaced by that twit commenter as well.
I personally liked it because it is customizable. You can give additional Css styling yourself which will fit with your designed template.

How to install?

Only problem I found with this problem is “You have open comment.php and insert some code” apart from that this plugin is fine. Well here we start…

1. Download the plugin to your wordpress plugin folder ex: www.myblog.comwp-contentplugins
2. Go to your dashboard click plugins
3. Activate the plugin
4. Go to edit themes and click on “comment.php“
5. There you will find

   <?php wp_list_comments(); ?>

6. Replace that with this code:

   <?php ( function_exists('twitter_comment') ?
   'twitter_comment' : null ), 'avatar_size' => 96 ) ); ?>

7. Again in the same file find this block :

   <?php else : ?>
   
   <p><input type="text" name="author" id="author" value="<?php
   echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req)
   echo "aria-required='true'"; ?> />
   <label for="author"><small>Name <?php if ($req)
    echo "(required)"; ?></small></label></p>
   
   <p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req)
   echo "aria-required='true'"; ?> />
   <label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>
   
   <p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
   <label for="url"><small>Website</small></label></p>
   
   <?php endif; ?>

8. Just Bellow this code insert the following code:

   <p><input type="text" name="author_twitter" id="author_twitter" value="<?php echo (isset($_COOKIE['author_twitter' . COOKIEHASH]) ? $_COOKIE['author_twitter' . COOKIEHASH] : '' );?>" size="15" tabindex="4" />
   <label for="url"><small>Twitter Username</small></label></p>

Important : Don’t give your avatar size more than 90 pixel because this plugin can only work under 90 pixel image size avatar.

Well that’s it. You may find out a Twitter Avatar option in your dashboard, you can give some value there but I will recommend give the avatar size in your css style file.