Hi everyone, and welcome to part two of my basic blog design series! Fun fact: this is actually the second time I'm writing this post, because I accidentally deleted the first draft instead of publishing it...c'est la vie, I suppose. Anyways, this tutorial will walk you through each step of creating cute and easy social media buttons using Canva, which is an amazing (and free!) resource for bloggers and designers. My next post in this series will detail how to upload your completed buttons to your blog, so be on the lookout for that in the next few days! (Click here to check out my first post which teaches you how to make a cute blog header!)
Are you ready? Let's get started!
1. Size Your Canvas
Open up Canva and click the "Use Custom Dimensions" link on the top of your screen. From here, enter your desired dimensions for your buttons. Note: Canva requires that your dimensions be a minimum of 40 x 40 px, so I recommend starting off with 100 x 100 px for the sake of easy designing. You can always resize your buttons later using programs such as PicMonkey or Photoshop. ( A good size for most social media buttons is around 50 x 50 px, FYI!)
Go ahead and type in your dimensions, and click "Design!"
2. Choose Your Background Shape
Once you reach the design page, look at the menu to your left and select SEARCH >> SHAPES. You'll then see a bunch of shape options that you can choose from, ranging from circles, to hearts, to squares, etc. You can really choose any shape for your buttons, but for this tutorial I'll be using the orange circle. Just click the shape you want, and you should see it centered on your 100 x 100 canvas to the right.
3. Choose Your Button Colors
Now it's time to choose what color you want your buttons to be. I'm going to make all of mine the same color, but multi-colored (or ombre) buttons can look really cute, too! To change the color of your button, click the colored circle beside the trash can, and then click the plus sign (+). From here, you can pick a color from the wheel, or type in a hex code for the color you want. I want my buttons to be pink, so I simply typed in the color code and hit enter.
3. Duplicate Your Button Templates
Now that you have the basic template for your buttons, you need to duplicate them for the number of social media sites you plan to link your buttons to. On my blog, I have social media buttons for Twitter, Instagram, Pinterest, and Google Plus, so I'll need a total of 4 template copies.
To do this, simply click on the icon that looks like two pieces of paper stacked on top of one another beside your first button. Repeat this for however many copies you need to make, and now you're ready for step 4!
4.Add Your Social Media Icons
This part is a little tedious, but it's really simple, so hang in there! Canva has icons for practically every social media site, so it's just a matter of searching for them and arranging them on your backgrounds once you find them. I'm going to detail the steps for a Pinterest button, but this will work for any other website icon as well.
On the menu to your left, click SEARCH and then type in the name of the website of the icon you want. I typed "Pinterest", hit enter, and then several icon options popped up below the search bar. I chose the simple black "P", but whatever you use is totally up to you! (Unfortunately, since it's an image, you can't change the color of the font, but black should work for most blog designs.) Simply click the icon you want and it should center itself on your blank background, where you can then arrange the size and orientation of the logo.
Now just repeat this "search and arrange" step for all of your buttons, and you're ready to save!
5. Save Your Buttons
Once you're done with your buttons, click "DOWNLOAD" in the top bar of your screen, and then select "AS AN IMAGE". Your buttons will then be stored in a folder on your computer (most likely in your "downloads" file or on your desktop), and now you're ready to resize and upload them!
* (Bonus) resizing Your Buttons Using PicMonkey
If you don't have access to photoshop, PicMonkey is a great website that allows you to easily edit images for free!
To resize your buttons, open PicMonkey and select "EDIT" from the top menu. From there, click "COMPUTER" and select the image you want to resize. (As far as I know, PicMonkey only allows you to edit one photo at a time, but as long as you use the same dimensions for each button, you should be totally fine.)
Once you make it to the design screen, click the "RESIZE" button towards the bottom of the menu on your left. From there, type in the dimensions for your button (again, 50 x 50 pixels should do the trick) , make sure to uncheck the "keep proportions" box, and then click "APPLY".
To save your button, click "SAVE" in the top menu bar. You'll then be taken to a page where you can edit the file name, location, and image quality for your button. I recommend saving it to your desktop as something along the lines of "pinterest-button" for easy recognition when it comes time to upload your buttons to your blog.
And now you're done! Be on the lookout within the next week or so for my next post in my blog design series, which will teach you how to upload your buttons to your site and link them to your social media pages!