Monday, September 10, 2012

Make Bunting Social Networking Buttons Tutorial

Learn how to make your own bunting style social media buttonsThe other day I came across a blog that had the cutest social networking buttons. You know - the pretty little buttons that connect you with their blog feed, facebook, and etsy shops?


Wherever did she get such cute buttons?, I wondered to myself.

I wanted cute buttons too! So I searched the internet for "free social networking buttons". But they weren't really what I wanted. And they didn't really feel like me.

So I decided to take matters into my own hands and make my own social networking buttons - bunting-style buttons, to be exact, and although I stayed up waaayyy too late making them?  I'm totally gaga over them. And they feel just like me.


....................................................................................................

▶▶▶Want to make your own bunting - style social networking buttons that make you feel all giddy inside? ◀◀◀
I'll show you how!


You will need a photo editing program. I used Photoshop Elements.

Create a new image resolution 300, 3 in. wide x approx .75 high, with a white background (or other color if you prefer)

Create your own custom social networking button with a photo editing program


You can make the bunting design like mine or make your own custom social media button design. What feels like you? Your photo editing program probably has some cool pre-ready images or backgrounds you can use as well.

To make the bunting social networking buttons like mine, I used the triangle shape. I dragged each triangle on the canvas, flipped them upside down, moved each one around to mimic hanging, and filled each one in with turquoise (or red; I alternated per button).

Use the traingle shape in Photoshop Elements to make bunting design for social media buttons


Next, I used the pencil tool to draw lines like string through each triangle and arranged them to look like hand stitches (each "piece of string" is its own layer).

Draw lines with drawing tool for Bunting string design

Lastly, I added text on the main background layer to indicate which button it was. I used Encino, 36 pt.


Make Social Networking buttons for all social media sources like facebook, Pinterest and etsy

Save your button to your computer as a .jpg image.

Now you will need to upload your image to an online photo storage site, so your computer can refer back to it. I use PhotoBucket.

Once you upload your file to your online photo storage site, the site will create HTML code that you can copy and paste back to your blog.  The code will look something like this:
<a href="http://youwebsite.blogspot.com" target="_blank"><img src="http://i103.photobucket.com/ albums/bb222/yourname/your business/facebook.jpg" height="50" border="0" ></a>
For blogger, go to Layout & Add a Gadget. Choose HTML/JavaScript to "add third-party functionality or other code to your blog." Give it a title and add the HTML code in the content section of the box. Save it and place the button (gadget) where you want it on your blog. I put mine on the top right-hand column.

That's all there is to it! The creative possibilities are endless when it comes to designing your own social media buttons. If you have any questions, please feel free to leave a comment and I'd be happy to give additional clarification.



Never miss a post! Subscribe to ShannonSews
Like on facebook.com/SSorensenDesigns
Follow @ShannonSews1 on Twitter
Subscribe to youtube.com/ShannonSews



Linked to:
http://sewmanyways.blogspot.com/, http://www.iheartnaptime.net, http://www.flamingotoes.com, http://sewchatty.blogspot.com, http://www.thegirlcreative.blogspot.com, http://cherishedtreasures-terry.blogspot.com http://www.ishouldbemoppingthefloor.com, http://sewcando.blogspot.com, http://creatingreallyawesomefreethings.com, http://craftomaniac.blogspot.com, http://www.betweennapsontheporch.blogspot.com, http://www.skiptomylou.orghttp://www.sweetlittlegals.com/ http://www.notjustahousewife.net/ http://www.hopestudios.blogspot.com/ http://todayscreativeblog.net/ http://carolynshomework.blogspot.com/ http://www.craftyconfessions.com/http://www.diybydesign.blogspot.com/, http://www.733blog.com/http://www.sew-much-ado.com/, http://www.mygirlishwhims.com/http://somedaycrafts.blogspot.com/, http://www.creationsbykara.com/http://www.gingersnapcrafts.com/, http://www.rolleduppretty.com/http://raegunwear.blogspot.com/ http://www.mineforthemaking.com/, http://www.theshabbycreekcottage.com, http://www.somewhatsimple.com/, http://www.aglimpseinsideblog.com/, http://www.houseofhepworths.com/, http://www.the36thavenue.com/ http://myricandreasen.blogspot.com, http://www.thirtyhandmadedays.comhttp://www.sugarbeecrafts.com/ http://www.delicateconstruction.blogspot.com, http://shabbynest.blogspot.com, http://www.504main.comhttp://westernwarmth.blogspot.com http://www.linesacross.com/

Tip Junkie handmade 
projects

8 comments:

  1. Thanks for sharing. That's so nice!


    I started my very first "Weekend Warmth" Linky party...and there are no rules. Please join in!

    http://westernwarmth.blogspot.com/2012/09/weekend-warmth.html

    ReplyDelete
    Replies
    1. Hi Bobi! Thanks so much for stopping by and for the invite! I'll be by to check out your new party. Best of luck to you and thanks for hosting!

      Delete
  2. This is great!! TFS!! I love learning how to do these things for my blog. Stopping by from Mine for the Making linky party.

    Here is what I shared this week: http://craftybrooklynarmywife.blogspot.ca/2012/09/another-fur-baby-coat.html

    ReplyDelete
    Replies
    1. You are so sweet. Thanks for your comment Alisha! I stopped by your blog and will be following you!

      Delete
  3. How awesome are you for posting this! People will love you. It took me FOREVER to figure it out!

    ReplyDelete
    Replies
    1. Thanks! There are so many technical things to keep up on with our blogs. Hope it makes someone's life a little easier! :)

      Delete

I'd love to hear what you have to say! Thanks so much for your comments! ♥

Blogging tips