how to nest for less

Guest Post:: How To Make a Blog Button

Photoshop-tips-tricks-camera

Today I have the fabulous Erin from How To Nest For Less guest posting for me. She’s here to teach us a few things about Photoshop. Get ready to learn!

………………………………………………………………………………………..

Photoshop Tips & Tricks: How to Make a Blog Button {Using Stock Images}

As most of you know, Picnik will soon be going away and a lot of bloggers are left in the dark when it comes to adjusting their photos and creating new blog buttons. I’ve always been an avid user of Photoshop and currently have a series sharing some of my favorite Tips & Trickson my blog.

Well, when Megan asked me to guest post on her site, I thought this was the perfect chance give a quick tutorial on how to make creative blog buttons using Photoshop and stock photos… perfect for beginners. So let’s get going!

First thing you want to do is find your design elements. Since I’m guessing most of you aren’t graphic designers or illustrators, you’ll need a little help with this part! One of my favorite sites to purchase stock photos, illustrations and vector artwork is BigStockPhoto.com.

You can purchase web-sized JPGs from as little as $2.99. Yes, you can sometimes find little illustrations online that you can grab off Google, but some of those images are copyrighted. Play it safe and purchase your clip art or illustrations. Plus anything you purchase for a blog button can also be used for your website header or Facebook timeline cover! Just note that any item you purchase from BigStockPhoto.com cannot be redistributed. It is for personal use only.For the first blog button I found this little pink polka dot background (which you could easily create yourself) and a little blue birdie.First thing you’re going to do is size your downloaded photo. I suggest starting with a 300 pixel square. Most websites and bloggers use 125×125 pixel buttons, but I find it better to create the file larger and scale down as needed.You can either create a new document at 300×300 pixels and drag your downloaded background to the new document and transform it to fit (Image > Free Transform), or you can crop the downloaded image to size (I chose the latter for this exercise).I set the width and height in the Options Bar to 300 pixels each (see above screenshot) and cropped the image.

Create a new layer on top of the background image. Use the circle marquee tool to draw a circle and fill it with white (Edit > Fill). Add a drop shadow if preferred.

If your icon (like my birdie) has a plain white background you can use the Magic Eraser to isolate the bird. Just click in the white area with the tool and it magically disappears! Now you can drag the bird onto the new button and create a layered effect.

Next let’s add some text! Use the type tool to create your text, change the font, and choose your colors. Position it into place.

Go ahead and save the layered file as a PSD to you can make any changes in the future.To make the JPG version, go to Layer > Flatten Image.


NOW WE MUST CHANGE THE IMAGE SIZE TO 125X125 PIXELS.
Go to Image > Image Size.

Change the pixel with at the top to 125 (the height should automatically change with it).

Now you can SAVE ASa JPEG by going to File > Save As. Change the format to JPEG and click SAVE.

TADA! YOU HAVE A BLOG BUTTON!
{aint’ she cute?}
If I didn’t overload you too much already,
wanna see one more quick thing?
 

For this next blog button I decided to download this fancy background with several tags. It had everything I was looking for… clean space to type my information, a little birdie for “How to NEST for Less” and some little clothes buttons (for this blog BUTTON!). OK, it’s not always that easy to find something so perfect, but it does happen!


I downloaded the small version and saved it to my desktop.

Now I don’t need all of this. I only want the bottom right hand corner so I’m going to crop out the rest.Use your crop tool and set the parameters in your Options Bar to 300×300 pixels. Again, I do this size first because it’s easier to see the details when I’m creating these elements and I can always make the image smaller… you can NEVER make an image bigger (it will get pixelated and blurry!).

Once you have the image cropped, you can add your text (I rotated mine a bit with the Transform tool or Control/Apple T).

And that’s it!
Looks like a professionally designed button in a matter of minutes!

BigStockPhoto.com has a bunch of elaborate, predesigned scrapbook-like elements available for download. This is make your design effort SUPER SIMPLE! Just plop on the text and you’re done! Here are some quick samples of some adorable backgrounds…

One last thing… If you want a grab box with the code for your new blog button, check out these tutorials:

The Cool Realm Code Generator
Between Naps on the Porch
Live. Laugh. Rowe.

Thanks Megan for having me over for the day! I hope I didn’t confuse too many people! Feel free to email me with any questions, or visit How to Nest for Less for more Photoshop Tips & Tricks!

…………………………………………………………………………………………….

Thanks so much Erin for teaching us how to make our own blog buttons! Definitely plan to use these tips in the near future.


You can follow Erin daily on her blog, How To Nest For Less or on Twitter and Facebook!

Pin It

You May Also Like:

Old 2 New: Driftwood Table

2naivir
Image and video hosting by TinyPic
Today I’m starting a new series called Old 2 New. Each Friday for the next few months I’ll be showcasing things that people have transformed from Old 2 New!

I love to see people transform something that was once old or even trash into something really beautiful. Sometimes I have a hard time seeing the beauty in something old, but hopefully this will inspire both you and me to see the potential in pieces!

So, let’s take a look at the first Old 2 New feature!
Erin from How To Nest For Less transformed this old magazine table…
Image and video hosting by TinyPic
into this gorgeous and textured magazine table!
Image and video hosting by TinyPic
Don’t you love the different tones she used?
Image and video hosting by TinyPic

Be sure and check out her full tutorial on how she transformed this table!

Image and video hosting by TinyPic
Have you heard about Annie Sloan’s Chalk Paint? This chalk paint was used to transform this magazine table.  I’ve seen it all over blog land. It’s a dream for a DIY person because it requires no sanding or priming before and is easy to distress and add dimension to pieces once it’s on.

If you live in or around the Brentwood/Franklin, TN area, one of my awesome blog readers told me you can get it at a local store in Brentwood called C’est Moi. I’ve never been there but I’m excited to check it out! Maybe I’ll work on my own little diy project with this paint soon!Hope you enjoyed the first Old 2 New feature!

Have any of you ever used Annie Sloan’s chalk paint?

You May Also Like: