Converting Images into Shapes for Blog Graphics (Using Photoshop)

This tutorial is a response to many questions I get about how I “create those cool shapes” that I use on my blog. In a previous post I shared my Free Downloadable Photoshop Shape Images, one of which, I will be using during this tutorial.

 
Readers appreciate blogs being graphically interesting. It makes them stop and think, “Hey, That’s really cool!” In this example, I am using my most asked about, and personal favorite graphic shape. I call it the “swirly, curvy thingy” But it’s really called a Quatrefoil. I just love how classy it looks! Anyways, here’s the tutorial on how to use the “swirly, curvy thingy” to create beautiful stunning graphics!
One tip: When you save it, save it as a PNG and click “Interlaced.” That way the image background will remain transparent without having to save it as a Photoshop file. If it’s placed on top of something with a color other than white (like in the first picture on this post) it will show through and look “cut out”
What are you waiting for? Try it out! 🙂

thank you for stopping by!

  1. LydiaF

    April 8th, 2013 at 10:37 pm

    Thank you! I've learned quite a bit from your PhotoShop/Graphics tutorials.

  2. Hannah Hathaway

    April 9th, 2013 at 1:35 am

    Thanks! <3

  3. Anonymous

    April 26th, 2013 at 4:38 pm

    Would these graphics work with Photoshop Elements? Thanks, Nancy

  4. shugarlove.com

    May 20th, 2013 at 1:10 am

    Thanks for these fun graphics and tips! I finally mastered how to use them on my blog. You're the best!

  5. Hannah Hathaway

    May 20th, 2013 at 3:07 pm

    Glad you are using them! They look great on your blog!

    Love , Hannah

  6. Manonnn

    June 12th, 2013 at 1:38 pm

    I'm gonna try this right now!!!

    http://beautybubblesinyourlife.blogspot.fr/

  7. Manonnn

    June 12th, 2013 at 2:45 pm

    This is working really great, thank you so much I didn't get how to do this kind of stuff with photoshop, you are a life saver!!!

    http://beautybubblesinyourlife.blogspot.fr/

  8. Hannah Hathaway

    June 12th, 2013 at 3:17 pm

    So glad it helped! 🙂

  9. Lu Ann

    June 28th, 2013 at 6:10 pm

    This was so easy to follow, and fun to do! Love how some of my photos turned out. Thanks for sharing 🙂

  10. Jill Smith

    July 3rd, 2013 at 4:24 am

    I do this all the time to round corners too with the rounded corner shape from Photoshop. Love the shapes you have and will put them to good use. I love the different fonts you use in your images on the sidebar and for your menu items… they look super familiar but I can't quite put my finger on either the menu font or the cute handwriting like script with the images. Do you mind sharing what they are? Thanks for the awesome blogs! Found you from Pinterest and will be back for sure. 🙂

  11. Hannah Hathaway

    July 4th, 2013 at 2:40 am

    Hi Jill!

    The one in my menu is called Lavanderia, and can be found here: http://www.losttype.com/font/?name=lavanderia

    The handwriting one is called The One Exception, and can be found here: http://www.dafont.com/the-only-exception.font

    Have fun with them! 🙂

    <3 Hannah

  12. Anonymous

    July 7th, 2013 at 7:54 pm

    I really love this. I have been looking for a way to crop pictures like this, and your tutorial was so helpful! Thanks!

  13. Melissa Cloud

    July 8th, 2013 at 3:44 am

    Thanks so much for this tutorial!

  14. Anonymous

    July 8th, 2013 at 5:24 am

    Even easier way to do this is to use a solid shape have your image be the top layer and the shape the bottom right click on the image and put "Create clipping mask" it will put the image in the shape and you can move it around until you get it where you want it. 🙂 Great tutorial! I love finding new ways to do things.

  15. Hannah Hathaway

    July 9th, 2013 at 5:55 am

    Great tip! I love finding new ways to do things too! 🙂

  16. meg..

    July 8th, 2013 at 6:43 pm

    Thank you! I love learning something new, and this is fabulous. I'm so excited to start making picture shapes, instead of plain squares and rectangles.

  17. Nicola

    July 12th, 2013 at 10:52 am

    Lovin' your photoshop tutorials! Thanks!

  18. Katie Alipsticklife

    July 15th, 2013 at 9:29 pm

    I love this! Thank you so much for the helpful things. I do have a question: What is the cursive font you used on the graphic? I love it!

  19. Hannah Hathaway

    July 15th, 2013 at 10:21 pm

    No Problem, it's called Lavanderia. It's my absolute favorite (I can't get enough of it! 🙂

    You can download it for free here:

    http://www.losttype.com/font/?name=lavanderia

    Have fun!
    Hannah

  20. Anonymous

    July 22nd, 2013 at 11:26 pm

    Im really struggling with the magic wand tool. Sorry new to photoshop. I have photoshop C6. It seems to get everything out side of the shape as well. I have You Tube some tips, but having no joy ! Anytips ! 🙂 Natalie

  21. Hannah

    October 17th, 2013 at 2:01 am

    You may need to change the pixel tolerance (which on my version of Photoshop pops up on the top bar when using this tool) try playing around with the numbers to change how sensitive it is. <3

  22. Rheannon Driver

    August 19th, 2013 at 11:43 pm

    I don't know what I'm doing wrong!!! 🙁 But all I am getting when I copy and past is the thin line that is moving when I crop it. Is the quick selection tool the same as the wand!? Because I can't see the wand on my tool bar. I am using CS6 Extended if it makes any difference.

  23. Hannah Hathaway

    August 20th, 2013 at 4:54 pm

    This article will show you how to locate your magic wand tool in cs6

    http://forums.adobe.com/thread/990405

    Hope that helps! 🙂

  24. Christina Bingham

    September 16th, 2013 at 11:49 am

    Ok new to PS, every time I paste the swirly thingy onto my image the swirly thingy is way to small and does not include the entire picture (e.g. I'm trying to outline a picture of my son but its only large enough to do his eye) How do I change the size of the swirly but not change the size of the original picture (My son). I did the rest just with the eye and I have that down just need to change the size that the swirly captures. Thanks!

  25. Hannah Hathaway

    September 18th, 2013 at 1:41 am

    Hey Christina, well, first open up the "swirly" image in photoshop and go to "image" and then "image size" and that is where you can resize the swirly image. However, it the quality of the crisp edges may not be as clear when increasing the image size… So you may have to decrease the size of your image.

    Hope that helps! 🙂

    <3 Hannah

  26. Heather Thornton

    September 19th, 2013 at 1:44 am

    Hey, Great blog just found it! The shape is called a Quatrefoil xxx

  27. Hannah Hathaway

    September 19th, 2013 at 1:57 am

    Awesome! Thanks, I'll have to update the post with the real name! 🙂

  28. Amy Cooper

    October 22nd, 2013 at 9:59 pm

    Missy Hannah!!! You, my dear, are a goddess! Thanks for sharing your photoshop knowledge. I wish you and your adorable family much love and happiness. From the bottom of my heart, thanyou!

  29. Hannah

    October 23rd, 2013 at 12:01 am

    You are so sweet- thank you Amy! <3

  30. Jessica Rinehart

    December 14th, 2013 at 6:38 am

    Can you do any of this in Picmonkey? I do not have access to Photoshop. Thanks!

  31. Hannah

    December 14th, 2013 at 7:25 pm

    Not currently. 🙁

  32. SincerelySaida

    February 14th, 2014 at 7:14 pm

    Thank you this was really helpful 🙂

  33. Amanda

    March 17th, 2014 at 7:06 pm

    This is great! But is there a way to keep the frame it to?

  34. Hannah

    March 19th, 2014 at 7:00 pm

    Yes, you can just keep the frame as the top layer. Hope that helps! 🙂

  35. Delene Ridley

    April 18th, 2014 at 6:40 am

    I love your graphics…i found you on pinterest & now follow you on bloglovin & instagram . I was wondering if this would work with picmonkey since i dont have photoshop

  36. Hannah

    April 18th, 2014 at 6:04 pm

    Hi Delene, as of right now picmonkey doesn't have the ability to do this 🙁 but I'm on the lookout for free programs that do- so I'll post about it if I do find one.

    So glad to have you! XOXO

  37. Rebekah Foster

    April 28th, 2014 at 3:58 am

    Thank you!
    I don't know why but the whole clipping mask thing never clicked until your tutorial.
    Seriously, I have CS6 and was using iPhoto but with some of your tips and instruction I am not hating PS anymore. You are really good at making it seem approachable. I have to throw in that your daughter is a doll.
    Thanks!!!

  38. Hannah

    May 1st, 2014 at 1:47 pm

    So glad it helped Rebekah! And yes, she knows it too! Haha! 😉

    XOXO

  39. Katie

    May 27th, 2014 at 6:02 pm

    This is a great tutorial! Where do you get your shapes?

  40. Hannah

    May 28th, 2014 at 5:00 pm

    Hi Katie, Thanks! I make most of my shapes in Photoshop using the pen and the paintbrush tool. Hope that helps!

  41. Anonymous

    August 2nd, 2014 at 5:57 am

    this is the best blog ever!!!!!! love ya!!!! thx!!!

  42. Pamela Elliott

    December 9th, 2014 at 4:18 am

    super helpful!!! thank you so much!!!

  43. sandyhansenphototgraphy

    August 1st, 2015 at 7:58 pm

    Can you tell me how to cut out a shape? I found one I like but I am having a hard time cutting out perfectly

Leave a Reply

Your email address will not be published. Required fields are marked *