• Home
  • Projects
    • Room Makeovers
    • DIY Home Improvements
    • Decorating Ideas
    • Organization
    • Furniture Makeovers
    • Crafts
  • Holidays
    • Winter
    • Spring
    • Summer
    • Fall
  • Printables
  • Recipes

How to Nest for Less™

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

in Photography, Tips & Tricks on

Sharing is caring!

0 shares
  • Share
  • Tweet

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 recently been posting about my favorite Tips & Tricks.

Well today I thought I’d share 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 AS a 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.

 

popular-projects
« Lessons Learned: My Favorite Projects {March 23rd}
Stenciled Pocket Watch Children’s Desk »

Comments

  1. Debbie~refreshrestyle says

    at

    I am so going to try this! Shared on FB, thanks!
    Debbie

  2. Claire says

    at

    Thanks for such a great tutorial, Erin! I’m hoping I can use the information to do something similar in Pixlr since I don’t have Photoshop. I had no idea there were so many great free images!

    Can’t wait to make a prettier button 🙂

    Claire

  3. Claire says

    at

    Oops, make that almost free!

  4. Holly @ My Sister's Suitcase says

    at

    Thanks Erin! I just pinned this and I will definitely be referring back to it soon 🙂

  5. Andrea says

    at

    This was really great and easy to follow. Thanks, so much! I just recently started my own blog and am trying to learn how to do some of the design stuff myself. Photoshop can be really overwhelming, but you made it look do-able. Your site is gorgeous, just wanted to give you a shout-out since I’m a fellow St. Louisan. 🙂

    • howtonestforless says

      at

      Thanks Andrea! Are you going to the bloggy boot camp in April? Would LOVE to see you there 🙂

      • Andrea says

        at

        I will have to look into it. I am BRAND new to blogging, not even a month in! So, I’m still learning, but I’m so glad to find out there are local resources out there!

      • howtonestforless says

        at

        Good luck Andrea! Let me know if you have any questions 🙂

      • [email protected] says

        at

        Do you mind me asking what is bloggy boot camp? I am a new blogger would love to attend. Is this something you have to go in person?
        And Thanks for the tutorial I do not have photoshop but thinking I can use pixlr instead

      • howtonestforless says

        at

        Shirly: Yes, bloggy boot camp is a one day blogging and social media conference from the SITS girls. I will be attending the one in St. Louis on April 21st. Here’s a link to the one I’m attending: http://www.bloggybootcamp.com/st-louis-2012/

  6. Laura / Pet Scribbles says

    at

    Visiting via Serenity Now’s Weekend Link Party! Glad I saw this, and have already pinned it, as your step-by-steps will come in handy! Thanks for showing us how it is done!

    • howtonestforless says

      at

      THanks Laura!!

  7. Laura says

    at

    Visiting from Making the World Cuter’s link party- this is a really helpful post for a new blogger like me! Thanks SO much!
    ~Laura

  8. Hilani-Handmade by Hilani says

    at

    Erin, this is great!!!

  9. Kristiina says

    at

    Thank you! I’m going to try this as soon as I have time.

  10. Kate @Craft Whatever says

    at

    So simple! Pinning this so I won’t forget!!

  11. [email protected] says

    at

    Now that’s a tutorial I can actually follow and understand! (I found you via Crafterminds.)

    • howtonestforless says

      at

      Thanks Erin!

  12. Laura Beth says

    at

    Erin, thanks for the great blogging tips. I used to use Picnik for EVERYTHING but with that going away I think I need to invest in photoshop!! You really produced some great images :o) Pinning!

    • howtonestforless says

      at

      Thanks so much Laura Beth!

  13. Sarah Carletti says

    at

    Well done. Great information! Thank you!

    • howtonestforless says

      at

      You’re welcome Sarah!

  14. Vanessa Barker says

    at

    This is such great information. Thank you SO much for sharing
    I’d love if you could come link up at my first ever Tutorial Tuesday at Our Thrifty Ideas http://www.ourthriftyideas.com/2012/04/tutorial-tuesday-1.html

  15. thoroughly modern me says

    at

    Thank you for putting this together. I am a graphic designer wanna be but don’t think it will ever happen. If I could create blog buttons etc. I would be content!!

    • howtonestforless says

      at

      Good luck!!

  16. Jackie says

    at

    Thank you for sharing your tips on making a button!! I’m a new follower! 🙂

    • howtonestforless says

      at

      Thanks Jackie, and welcome!

  17. Kim says

    at

    Thanks for the great tip!!!

  18. The American Homemaker says

    at

    Very fun! I’m a self taught photoshop user… there is SO much I still need to learn!!!

  19. Rachelle says

    at

    This is soooo helpful! I’ve been wondering how everyone has been popping up with these super nice buttons. Thank you for sharing! (I LOVE yours by the way…)

    • howtonestforless says

      at

      Thanks so much Rachelle!

  20. Sarah says

    at

    Oh my gosh this is so helpful to me & I found it at just the right time. I need to create a button this weekend & had no idea where to start. Thank you so much for this tutorial! You did a great job explaining it!

    • howtonestforless says

      at

      THanks Sarah! Good luck with your new buttons 🙂

  21. Jenn says

    at

    Thanks so much for the great tutorial! I will definitely be using this. Pinned it!
    Jenn 🙂

    • howtonestforless says

      at

      THanks Jenn!

  22. Natalie @ A Turtle's Life for Me says

    at

    I love your style and your writing style, but, unfortunately, I’m still lost! No worries, I’m sure it’s all my fault, but I just spent about an hour and half trying to make a button and in the end I got nowhere. I’m using Photoshop Elements, though, and I’m wondering if that’s the problem (aside from the fact that this stuff doesn’t come naturally to me AT ALL). Everything just came out all blurry and I couldn’t figure out where to fill in the circle with white and when I used the magic eraser tool, it took away all of my frame and left me with nothing but words! I think I’m off to bed for the night, but I’ll be back to try again tomorrow!

    • howtonestforless says

      at

      Photoshop Elements should be pretty similar to the full version of Photoshop (at least in the uses for creating a blog button). DON’T GET FRUSTRATED!! Practice makes perfect 🙂 Get some sleep and try again tomorrow! And if you have any questions, please feel free to email me (or we can set up a quick phone conference!). I’m here to help 🙂

      • Natalie @ A Turtle's Life for Me says

        at

        You are so sweet and I might take you up on that offer for a little extra help (or I may just pay you b/c I completely mean it when I say I’M LOST!!!). I need to take a break to get ready for Easter but I’ll back after everyone clears out of here on Sunday to try again! Thanks so much!

  23. Hollie Milne says

    at

    I appreciate all the tips you share about photoshop.

    • howtonestforless says

      at

      Thanks Hollie 🙂

  • Facebook
  • Instagram
  • Pinterest
  • Twitter

We love to conquer DIY, home improvement projects, and room makeovers. We're not experts; we just try to design on a dime.

Follow us as we try to update our latest house one project at a time. Check out our archives for over 1,000 DIY and home-related projects. Enjoy! Read More…

ARCHIVES

Copyright Policy

All text and images on this site are copyright of How to Nest for Less, LLC. Unless otherwise noted, you may not use this content without written permission.

This blog accepts forms of cash advertising, sponsorship, paid insertions or other forms of compensation. The compensation received may influence the advertising content, topics or posts made in this blog. That content, advertising space or post may not always be identified as paid or sponsored content.

The owner(s) of this blog is compensated to provide opinion on products, services, websites and various other topics. Even though the owner(s) of this blog receives compensation for our posts or advertisements, we always give our honest opinions, findings, beliefs, or experiences on those topics or products. The views and opinions expressed on this blog are purely the bloggers’ own. Any product claim, statistic, quote or other representation about a product or service should be verified with the manufacturer, provider or party in question.

How to Nest for Less is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com.

Privacy

Copyright © 2023 · glam theme by Restored 316

Copyright © 2023 · Glam Theme on Genesis Framework · WordPress · Log in

0 shares