Techie: Create Your Own Custom Follow Buttons!

Screen Shot 2013-02-06 at 12.32.58 PM

I just made my own custom follow buttons for Facebook, Twitter, Pinterest, and Bloglovin’ yesterday, so here is a little tutorial to help you create your own!

I searched for hours for a good tutorial on how to customize buttons and badges, but I didn’t turn up anything that explained it well. I had almost given up hope, but somehow when I was playing around with the HTML from one of my previous (and pre-made) Twitter follow buttons, I made it work! Perhaps I am a little too excited about this, but it is so much more simple than the online tutorials would have you think. I am going to go through the process very slowly for those of you who have little familiarity with Photoshop or HTML.

First, lets start with the fun part: CREATING!

Begin by opening a new blank file in Photoshop. I have Photoshop Elements and it works just great (and it is a lot cheaper!) Size it to 100 x 100 pixels. You will re-size it at the end to a smaller size.

Screen Shot 2013-02-06 at 4.59.50 AM

Screen Shot 2013-02-06 at 5.00.47 AM

Then choose a background color that suits the theme of your blog. I chose yellow for the example.

Screen Shot 2013-02-06 at 5.01.31 AM

Click into paint bucket and then click your blank image to transfer your chosen color.

Screen Shot 2013-02-06 at 5.01.49 AM

Zoom in a couple of clicks. This makes it much easier to see the detail of your design.

Screen Shot 2013-02-06 at 5.02.18 AM

I am going to show an example of a simple Twitter design. I used the brush tool and painted the bird for my own personal Twitter button (which you can do quite easily) but I will use text for the example.

Choose a new foreground color that complements your background.

Screen Shot 2013-02-06 at 5.02.32 AM

Then choose your font and type the letter you want. Reposition it until you are satisfied with the placement.

Screen Shot 2013-02-06 at 5.03.49 AMScreen Shot 2013-02-06 at 5.04.15 AM

You can keep it as is, or continue editing it. Here I choose to use the Lens Flare effect.

Screen Shot 2013-02-06 at 5.24.35 AM

Play around with designs that suit your aesthetic, or try out new effects. Then re-size your image to 50 x 50 pixels and save it (I prefer jpg).

Screen Shot 2013-02-06 at 5.25.45 AMScreen Shot 2013-02-06 at 5.25.58 AM

Lastly, upload it to Photobucket and copy the direct link on the right side of the page.

Screen Shot 2013-02-06 at 5.26.58 AM

Now you are ready to imbed your custom follow button in the widget area of your website or blog!

I put mine in my sidebar by moving an empty text box (which holds random text or html) into the sidebar and entering the needed HTML.

Below is the HTML that I wrote for a custom follow button. All you have to do is enter your own information into the sections in quotation marks. For those of you unfamiliar with HTML, it is important that the quotation marks are not deleted from the script.

Java ex

So if I want to use the image I just created above for my Twitter follow button, the HTML would look like this:

Java ex L&G

Below are the pieces you need to put your own script together. Just copy and paste them as you build your custom badge!

<a name=”

” href=”

” title=”

“><img src=”

” alt=”

” border=”0″ /></a>

Simply save your HTML and visit your website to admire your new one-of-a-kind follow buttons!

Here are the new ones I made for Lilbo & Gnomie:

Screen Shot 2013-02-06 at 3.11.35 PM

Cute right?

I hope you enjoyed the tutorial. If you have any questions about my process please leave them in the comments and I will get back to you as soon as I can.

Xoxo,

Lily

Advertisements

7 thoughts on “Techie: Create Your Own Custom Follow Buttons!

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