How to make your own twitter logo

This post will go over some Photoshop techniques that you can use so that you can make your you twitter logo that you can put on your website next to your twitter feed.

Photoshop skills covered:

1. Quickselection tool
2. Layer Masks
3. Layer FX

 

The first thing I need you to do is to head over to http://twitter.com. You will notice the header looks something similar to this:

 

We are going to take just the logo leaving just a tiny bit of the blue around the logo. A good way of doing this is just taking a screen capture and using the lasso tool. You should end up with something that looks like this:

Click on the zoom tool and zoom in on logo so that it is around 400%. Next you are going to want to select the “Quick Selection tool”. This Photoshop tool is located in the same section as the magic wand tool.

Now that you have the “Quick Selection Tool” selected you are going to click all around the twitter font (Logo). It should have done a good job of selecting the outside info like this:

Select “Inverse” or for you shortcut freaks “Shift+CTRL+I”.

Now that the logo is the only thing selected we are going down to the layers section and make a new mask for the logo layer. The mask layer button is the dark square with a white hole in the middle.

Once you have don this you are going to create a mask for the layer. Now if you haven’t ever used a Photoshop mask it is very much like a mask that you would put on a Halloween. You are able to cover up most of the layer but you are allowed to let certain parts to be seen. Because we have the logo selected, we are going to mask everything but the logo. The great thing about masks is that they are non-destructive!

Once you apply the mask you will see something very similar to this:

 

Notice all the dotted edging on the logo? Let’s clean it up using the advanced Mask Edge tool. Listen carefully because this was one of the hard things I found to master when I first started using masks. In the screenshot bellow you can see the original picture (orange) and the second section (yellow) is the button for the mask. You have to click the mask section of the layer before you will be able to use the mask tools.

Once you do that you will notice that the options are no longer grey.

You are going to need to click the “mask edge…” button. You are going to want to play around with the settings until you get something that looks like this:

My settings I chose were:

The next thing you want to do is to apply a shadow to the layer. This will make things look really nice. To add a shadow layer you must click back on the picture instead of the mask in the layers section.

Once you have don that at the bottom of the layers section hit the “FX” button and choose “drop shadow”.

Once you’ve done that you are going to want to make sure the logo looks something similar to this:

The settings I used to get this shadow were:

Now you can unlock your background which is just white by selecting the layer and then double clicking on it. You can now use the twitter logo with almost background on your website!

Recap – Here’s the original:

Here are some examples:

Bonus points to anyone who can guess what was used for the background portion of the last three pictures.

Tags: How To

This entry was posted on Tuesday, January 19th, 2010 at 10:08 pm and is filed under Adobe Photoshop. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.