Tag Archives: twitter

Design a modern twitter icon in photoshop for your website

Posted on by
Reply

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.

Twitter background inspiration, May 2010

Posted on by
5

Twitter is not only limited within 140 characters anymore. People are using it for their online branding as well as a tool for communication with new clients. That is why many businesses and individuals are giving an special attention to make their profile background a custom look and feel which could give their branding intention a new edge.

Below I will be listing some new inspirational Twitter background profiles collected from different sources that been found on June 2010. Please stay tuned with us subscribing to our RSS feeds and help us grow.

@unmarketing
@marekuk
@jophillips
@chrisspooner
@problogger
@evan2all

Very short list for this month. I will be watching for more inspirational twitter background for June. Till then keep visiting and if you think you have a nice background of your own that you like to include for June 2010 please follow and mention @iamwebsitedeveloper and write about your background. I will browse them to include here on I AM WEBSITE DEVELOPER.

New free Twitter Profile background for download

Posted on by
1

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!!!

Display Twitter profile picture on wordpress comments

Posted on by

Lead Gen Banner


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.

twitter-bird-wallpaper

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?

Twitter-avatar

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.