I have been wanting to change the color of my social icons for awhile now, and decided today is the day.

So, of course, when in need of graphic design help, I turn to my favorite, PicMonkey.

PicMonkey makes creating your own social icons a snap.

Here’s the step by step….

STEP #1: Go to main page of picmonkey and press edit photo.

STEP #2: Upload a blank white rectangle. You can create an image of a blank white rectangle by uploading a photo to PicMonkey and picking the rectangle shape.  You may recall the shapes feature from PicMonkey from when I discussed it two months ago.  I then covered the photo in the white rectangle shape and saved the image as “Blank White Image for PicMonkey”.  This will make future projects like this one much easier.

STEP #3: Pick out your shape and color for your button.  Note: if you know the exact color code, you can type it in as shown below and hit enter to lock it.

STEP #4: Go to Blog Designer Network for free vector social images.  Save the images you would like to create buttons for on your blog.

STEP #5: Place social images onto buttons.  I decided to use the aqua and purple from the theme colors of my blog.

STEP #6: Time to crop your image.  Choose crop, then size rectangle to outline your icons.

STEP #7: You will want to resize this image.  I used a 280 width since my sidebar is 300.  You can adjust to whatever makes sense for your site.  Then save your newly created image.

STEP #8: After saving as an image, you will need to upload the image you have created into your media library into your blog or photo site, so that it is stored somewhere and now has a url of its own.

STEP #9:  Now, it is time to scale your image.  Go to image-maps.com. Place the url for your image on the home page as indicated by blue arrow.  Then click on the button below that says “start mapping your image”.

STEP #10: Image is uploaded!

STEP #11: Click on rectangle shown by the arrow below.  The rectangle will allow you to outline your images one by one and link a url to each icon on its own.

STEP #12: Below, you can see the rectangle is around the twitter icon.  I then put my twitter social page url.  Uncheck “show text links”, then click on save.

STEP #13:  Once you have linked all of the urls to their corresponding social icon, this is how the screen should look.  All of the icons should have an outline.  Note:  You need to click rectangle before you start the process of mapping the url for each icon, so that in the end they each have an outline as seen below.

STEP #14:  Click on “get your code” button.

STEP #15:  Click on HTML Code and your code will show up below.

STEP #16:  Copy and paste the code wherever you would like your images to show up.  You’re all done!!

I hope this helps and that you have LOADS of fun creating your new and improved social buttons.

PicMonkey makes it easy and super fun as always!!  And, our new friend, image-maps.com, makes mapping images an absolute breeze.  Gotta love it!

Twitter

Pinterest

0