For my first tutorial as a Photoshop Elements Brand Ambassador, I'm going to share with you how to make a circular blog button. This button can be used for countless things: a profile picture, social media links, links to particular pages or blog features, sharable buttons, or even as an advertisement if you choose to sponsor another blog.
I get quite a bit of email inquiries on how to make blog buttons, and the best part of this tutorial is that you can make literally any shape you want. If you just want a standard square or rectangle, just skip the "Cookie Cutter" steps (steps 2 + 3) and head on into adding your text! If you want a speech bubble, a heart, or anything else your heart desires, just click through the shapes offered by PSE. One great thing about Adobe Photoshop Elements is that it makes doing shaped clipping masks insanely easy! If you have standard Photoshop then there are a few more steps you have to take to do it manually, but that's not too hard either. I'll be sharing screenshots throughout so you can follow along. Feel free to click on the screenshots to make them full size so you can see exactly what I'm doing. The directions will also be in the text in case you can't make out the buttons.
Anyway, let's get started!
1. Start by opening up Photoshop Elements. Click File --> New --> Blank File to begin. Decide on what size you want your button to be. A good "safe" width for most Blogger blogs is 200 pixels wide, by however tall you want. Since we want a perfect circle, I'll do 200x200. *Make sure your resolution is set to 72 and your Color Mode is RGB!
Sidenote: Resolution refers to DPI (dots per inch) and 72 is the standard for computer monitors and tvs. Same with RGB. That's because all of the little dots you see making up a tv screen are red, green and blue! 300 is the standard resolution for anything that will be printed. CMYK, which stands for Cyan, Magenta, Yellow and Black , is the color mode for printing.
2. Choose the image you want to use as your button by clicking File --> Place. You can Transform your image to fit the canvas by pulling on the anchor points located on the corner of the image and in the middle of each side. *Tip: Hold "Shift" as you transform the image so it will retain it's proportions without getting skewed.
3. Once you have your image situated as you would like, CTRL + Click (Right-click on a PC) the image layer on the Layers palette, and click Simplify Layer.
4. After you layer has been simplified, Select the "Cookie Cutter" tool on the left tool bar (It's located under the crop tool, and it looks like stacked stars!). Select the shape you want your button to be made into. For this tutorial, I chose a solid circle. *Tip: Click the two arrows on the right of the shape palette to load even more options!
You can play around with size and placement of your shape as much as you'd like. You can also hold down the Shift key while placing it and it'll keep it's proportions! This is really important when it comes to shapes like circles.
5. If you'd like to add text to your button, Click the Horizontal Type Tool and choose the font, color and size. You can always edit your text after you place it, don't worry!
6. If your shape is anything other than a square or rectangle, Click the eye icon to the left of the Background layer to hide it. Once you save your button as a PNG file, this will allow you to put it on any color background and you won't have an ugly white square border behind it.
7. Once your button is just how you'd like it, Click File --> Save As and name your button. Choose the folder you'd like it to be saved in and click "Format". Choose PNG if your button is anything other than a square/rectangle, or choose JPEG otherwise.
*Sidenote: PNG files save the image so that it has a transparent background. A JPEG simply compresses all of the layers and the white background will show up if your shape is a circle, etc. Also, when saving your button as a JPEG, the Options prompt will come up after clicking "Save" and ask you for the Quality. "10" is always a safe bet! If you want to keep a editable version of the button with all of the layers intact, also choose to save a Photoshop/PSD version! You can open this file from Photoshop at any time and make any changes that you want.
Now you're free to use your button for whatever you wish! You can use it as a profile picture on the sidebar, or you can make social media/featured post buttons, too. You can also use this as a way to make your own sharable blog buttons to swap with friends.
If you'd like to have the sharable buttons on your blog, along with the code for people to copy + paste, read below!
Another question I get pretty often when it comes to blogging is how to code the little box with the HTML for people to take and share. Just copy the HTML in the box underneath, paste it into a widget on your sidebar (or on a Buttons page) and plug in your own URL and image link! *Note: The code below includes the code to have the image above the box as well! That way people know which button they're choosing!
Copy and paste the following code where you want your button + HTML box to show up! Make sure you delete the asterisks (*) before saving!
<*textarea cols="23" rows="2"><*img src="URL TO YOUR BUTTON HERE!"><*a href="URL TO YOUR BLOG/PAGE HERE!"><*img src="URL TO YOUR BUTTON HERE!"><*/a><*/textarea>
Well friends, that'll do it! Hopefully that was decently easy to understand, and hopefully some of you found that helpful! If you have any specific requests for future Photoshop features or tutorials, I'd love to hear them! Just let me know what you'd like to learn!
♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥