All about the PNG and ICO file formats.

A Facebook icon can be used to link to your fan page and build fans,  the design of the icon plays a big part in improving the chances of users clicking it and becoming your fan.  The following Photoshop Tutorial will guide you through the process of designing a cool looking icon for your website! The end result will look like this:

Step 1: Make a 64×64 document in Photoshop, you can resize the image later but as I’ve said before, I find designing icons in a 64×64 area works very well. Use the rounded rectangle tool to draw a curved square that takes up most but not all of the space in the document, this is very important.

Step 2: Apply a Blue gradient to the image, it can be any color but since Facebook’s primary color is blue, it makes sense to use blue to maintain a sense of familiarity. Selecting an appropriate blue gradient isn’t too hard, make sure to keep it looking smooth and easy on the eyes.

Step 3: We will be applying a white inner glow with an opacity of 40%, this inner glow will help make our Icon look even more sleek and smoother. I’ve used white as the color of the glow but yellow works well too, anything that is slightly shinier than the main gradient colors should look fairly nice.

Step 4: Finally we will be adding a 1px dark Blue stroke to the icon, this will darken the borders and make our icon’s borders more visible, the gradient and the glow will also be more noticeable due to implementing the stroke. You can pick any dark blue color that stands out more than the gradients you used.

The last thing you need to do is add the text using any font you like and you’re good to go! If you need any inspiration on how Facebook Icons should look like, take a look at  Thanks for reading. 🙂


Comments on: "How to Make a Facebook Icon" (1)

  1. good

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Tag Cloud

%d bloggers like this: