Creating a Custom "Pin It" Button

In today’s tutorial I’ll be showing you how I made my own “Pin It” button. There are probably several ways to do this, and this may not be the best, but it’s how I did it. The program used was Photoshop. I’ve used this program for several years in my design profession. If you’re still learning, please do not be intimidated. I think this is a pretty simple process, it just may take some trial and error to get the hang of it.

1. Save this icon to your computer (I named this file “P”). It is a .png file meaning that it will maintain its transparent background.

2. In Photoshop, select File/New. It should bring up a window that looks like this:
Be sure to change the Background Contents to Transparent. I chose to make the button at 50 x 50 pixels and 72 pixels/inch (I named the file “Pin-It Button”).
3. Once the new file is open, select a color for your background. This color will be the circle of the button itself. Choose the Ellipse Tool. To ensure a “perfect” circle I always hold the shift button while drawing. This will constrain the proportions. You want to make sure that the circle’s edges stay within the 50 x 50 pixel square. Otherwise you’ll end up with some flat spots!
4. Now open your “P” icon file in Photoshop. Once that is open, go to Image/Adjustments/Invert (or Ctrl+I). This makes the icon white.
5. You should now have two file windows open in Photoshop (the “Pin-It Button” and the “P”). While working in the “P” window, use the Layers box. Select the “P” icon layer and drag it into your “Pin-It Button” window. This will automatically create a new layer in this file. You’ll need to resize the “P” until it fits within the circle.  
If you want to get fancy, you can add some effects. I decided to add a drop shadow because it needed a little more separation from the green background color. You can be as creative with this step as you want!
After you have played with it and made it your own, you need to save the file as a .png. This keeps the background transparent. Now it’s ready to load into your blog’s HTML. For that tutorial, click here.
I hope this helps!

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s