52 Weeks of Pinspiration {Week 2}–Making a Blog Button

Welcome to Week 2 of my 52 Weeks of Pinspiration series!

So you might have noticed that I’ve been participating in a lot of online classes and workshops.  And each of these classes offers its participants a little graphic – blog button –  to display on their blog.

So I figured, hey – I have a big girl blog now, so I should make a little blog button for my Pinspiration project.  The only problem is that I don’t know CSS from Shine-o-la about HTML, graphic design, or anything else website related for that matter.

So I did a quick search of my dear friend, Pinterest (yes I think Pinterest is a she), and of course she did not let me down.   I stumbled across this gal’s website and I found it to be incredibly helpful and informative.

http://bloggingwithamy.com/how-to-make-a-blog-button/

So according to Amy, the first step in making a blog button is to create the base from either a photo, image, or other graphic.  The problem is that I didn’t have a graphic image to start with. I thought about using one of my favorite photos and overlaying some text on it (like Amy’s example above) or creating a design with my scrapbook supplies and taking a photo of it, but that wasn’t really the look I wanted.  Finally it dawned on me to create a digital scrapbook element!  It would everything I wanted – unique, creative, colorful, and graphic.

Was I going to let the fact that I’ve never created a digital scrapbook page in my life intimidate me?  Absolutely not! 

In her blog post, Amy has a couple of suggestions of free on-line applications where you can create graphic images, but I recently purchased Adobe Photoshop Elements so that’s where I started.

A lot of scrapbooking companies carry digital templates and elements now, so I started by checking the website of one of my favorite scrapbook paper lines, Basic Grey.  They have an entire line of digital supplies and I selected this colorful “Perhaps” collection starter kit.  It contains several different “papers” and decorative elements such as borders, flowers, and frames.

*Please see Basic Grey for terms of use regarding their digital products.

Like I said before, I have ZERO experience with digital scrapbooking so I have no idea if I did this the right way (in fact I’ll bet I made it WAY harder than it needed to be…a specialty of mine), but I thought I’d show you the steps I used to create my blog button graphic image.

So, first in PSE I’ll open one of the “papers” from the kit I downloaded.

File>Open…

…I selected the “Gretel” patterned paper.  It creates a new 12” x 12” canvas which is fine because I’ll resize it to 125 x 125 pixels at the end.

Next I want to add some text, but first I wanted to make a white background for it.  So I create new, blank layer in the Layers palette.

I make sure the blank layer is hi-lited and then select the Shape tool and choose the Rectangle.  I’ll pick white for the color then drag a rectangle on the lower fourth or so of my paper.

Next I create another blank layer and click on the Text tool.  I drag my text box over the white rectangle, choose my font type and color (Georgia, 72 pt, bold, black), and then type “52 Weeks of Pinspiration.”

The font size isn’t quite right so I’ll select the text and increase it to 100 pts.

There…text size seems good but I don’t really like the black, so I’ll change the colors to match my paper.  I’d like the top line to be the sage green, so I click the eyedropper tool and click it over one of the green flowers.  That green color will then become the foreground color.  Next, I’ll click on the Text tool,  select the first line of text, and then click on the green foreground color.  A dialog box will pop up with the green color so I’ll click OK.

I think I’ll make the lower text the magenta color so I’ll repeat the previous step except choose the magenta flower with the eyedropper.

There!  Cute!   But I think it still needs a little jazzing up.  The white and the magenta flowers seem like they could use a little accent in their middles so I’ll try one of the elements that came in my kit.

Once again, File>Open and select the element.

I need to get this flower onto my other project so I’ll go to Window>Images>Tile and it will bring up both of the windows I have open. Now I’ll just click on the flower layer in the Layers palette and then drag the flower layer over onto my other canvas.

You can see where it created a new layer in my project. Cool!

I need to make the flower a little smaller and then move it into the center of the white flower so I’ll select the Move tool and click on my flower.  With the handles I’ll resize it until it looks right them move it.

Yay!  OK. I need another flower so I’ll make a copy of my flower layer by selecting it in the Layers palette and then click Ctrl+J.

Maybe I’ll add one more as the “dot” on the middle “i”of Pinspiration.

Perfect!!

Are you having fun yet??

OK.  I like it, but hmmmm…it needs something.  Like maybe a border.  So I’ll create another blank layer and then click on the Shape tool and select the custom shape tool.  In the dropdown menu I’ll choose the square thin frame.

Since magenta was the last color I used, it’s still selected so now I’ll just drag the shape over my canvas.

Awesome!  I love it! 

OK. Now I need to save it and resize it to be 125 x 125 pixels per Amy’s instructions.  File>Save for web…

Click yes.  Then there’s this screen that shows the before and after.

I select an image type of JPEG and quality of 72, then in the New Size box I change the values to 125 and 125 and click apply.

And after all of that, I would like to reveal my brand new blog button…

{{{drum roll}}}

Wasn’t that fun??

In addition to my 125×125 pixel blog button, I also saved a larger size image (the image above) to display in blog posts, etc.

OK.  So now back to the scary, tech stuff.

I followed Amy’s instructions exactly to upload and create the code for my button.  And just like that I now have a blog button!  Yay!!!

I have to say, Amy does a great job of explaining things in ordinary terms and it wasn’t that hard after all!

Anyway, I definitely got outside my comfort zone in this project, but really, it was a lot of fun experimenting and playing around with the colorful scrapbook elements.  Plus, I am proud to say that this old dog CAN learn new tricks!

Peace, Kelly

P.S.

As always, I’d love to know what you’ve been making!  Leave a link in my comments to either your blog or Flickr and be sure to help yourself to my cute, little blog button too.