Tutorial: Use your own images as custom Skype status buttons or use the originals on any background
Ahhh Skype, bringing people together without the need for a telephone since 2003, but people who like creative control will have found some issues with the standard Skype buttons and want to make custom Skype status buttons.
If you’re looking to make a custom Skype button, it’s probably not because the ones that exist as terrible, as they’re not. The issue is that they don’t have transparent backgrounds so you are limited to having them on a white website or having an ugly white area surrounding them.
Fear not, as this short article will enable you to use your own image as a Skype button but also shows you how to use the official buttons on any background.
First, let’s look into the custom Skype button. I found this code that’s very clever code and allows you to replace the standard Skype statuses with your own images. The Skype statuses are:
0 – unknown
1 – offline
2 – online
3 – away
4 – not available
5 – do not disturb
6 – invisible
7 – skype me
The trouble is that Microsoft have been tinkering with the way that Skype works and as such the above method for using your own images as custom Skype buttons is somewhat unreliable, at least for the time being.
Make Custom Skype Status Buttons
I’ve created a series of overlays that you can use on the standard Skype button images to allow you to use them, as though they have a transparent backdrop.
To make this work you need to create an overlay in an image editing application such as Adobe Photoshop or Illustrator or download this pre-made template
You can then change the colour of the overlay to match the requirement of you website or use it as a clipping mask if you need it to be an image or texture.
Then simply lay it over your chosen Skype button and hey presto a custom Skype status button!
