Tutorial: How to Create a Dazzling Blog Post Graphic Template

How to Create a Dazzling Blog Post Graphic Template using BeFunky. An exclusive tutorial from www.DesignYourOwnBlog.com

Having unique blog graphics that stand out in Pinterest is a must if you want more traffic.

But you also want graphics that follow a similar design style so that people can learn to identify them with your blog.

And let’s face it, a template that you can reuse will only end up saving you tons of time.

How to Create a Dazzling Blog Post Graphic Template using BeFunky. An exclusive tutorial from www.DesignYourOwnBlog.com

Background image courtesy of Shay Cochrane Stockshop. #scstockshop @scstockshop

How to Create a Dazzling Blog Post Graphic Template using BeFunky. An exclusive tutorial from www.DesignYourOwnBlog.com

So due to the popularity of my recent post on Creating Stunning Blog Post Title Images, today I’m going to show you how to create a dazzling blog post graphic template that you can use over and over again! And we’re going to do it using a free online tool I’ve recently discovered called BeFunky!

Why BeFunky?

Because:

  1. it’s free (with an upgraded version available)
  2. it allows you to create beautiful graphics using your own fonts and
  3. it actually allows you to save working projects that you can edit later!

The first thing I want you to do is sign up for a free account so that you can save your template later. On the BeFunky homepage, click the hamburger icon at the top right and click Sign Up:

Tutorial: How to Create a Dazzling Blog Post Graphic Template using BeFunky - a www.DesignYourOwnBlog.com exclusive.

After you’ve created your account, click on Designer at the top, center. Here you’ll be presented with several different pre-made layouts that you can check out and customize. But for this tutorial we’re going to be starting from scratch.

Tutorial: How to Create a Dazzling Blog Post Graphic Template using BeFunky - a www.DesignYourOwnBlog.com exclusive.

Step 1. Choose a Template

At the bottom of the Template menu, click Blank Templates then Blog Resources, then select the 800 x 1200px template. This will give us a blank sheet that is vertical and the right proportions for pinning to Pinterest:

Tutorial: How to Create a Dazzling Blog Post Graphic Template using BeFunky - a www.DesignYourOwnBlog.com exclusive.

Step 2: Choose a Background

Now you’ll want to select a background for your graphic. You may choose to use a solid color, a pattern or photograph from either your computer or Pixabay (more on that in a minute).

Things to keep in mind while selecting a background image:

  1. Make sure the image you choose has the right context and relates to the subject.

    Here are a few resources for you to find free images for your posts:

    23 Sites for Free + Affordable Feminine Styled Stock Photography

    The BIG Guide to Free Images for Your Blog Posts // Part 1: Public Domain

    The BIG Guide to Free Images for Your Blog Posts // Part 2: Creative Commons

  2. Use a simple image that isn’t too busy and has “white space” where you can add your title.

    Consider using a styled photo, solid colors or subtle patterns that don’t have a lot of contrast like gradients, geometrics, etc.

  3. Make sure your background has a style and colors that are consistent with your brand.

    You might want to add a filter to the image, but if you do, be sure to use the same filter on all your post graphics for consistency.

To add a background image to BeFunky, click on Image Manager on the left side and you’ll have a few options here: You can upload an image from your computer, open a previously created image in BeFunky, search for a free image on Pixabay or use a photo from your Facebook account.

Tutorial: How to Create a Dazzling Blog Post Graphic Template using BeFunky - a www.DesignYourOwnBlog.com exclusive.

BeFunky gives you the option to save your photos to your BeFunky account, which you can then easily access through the Image Manager.

Once you’ve added an image to your library to the left, you can drag it onto your template. You may have to drag the corners to size it correctly.

You can move the image around to crop it if necessary to achieve the desired white space for your text. (Notice the gray area around the canvas? That’s the full size of the photograph I uploaded, but I’m cropping it to the image area).

Tutorial: How to Create a Dazzling Blog Post Graphic Template using BeFunky - a www.DesignYourOwnBlog.com exclusive. Background stock photo courtesy of SC Stockshop: http://shaycochrane.com

Background image courtesy of Shay Cochrane Stockshop. #scstockshop @scstockshop

Step 3. Add Text

In the left menu, click the ‘T’ for Text and it automatically adds a text field to your design. The first thing I do is remove the outline and change the text color to black. Don’t add color yet, we’re just going to play in black and white for now.

Tutorial: How to Create a Dazzling Blog Post Graphic Template using BeFunky - a www.DesignYourOwnBlog.com exclusive.

Next, enlarge the font size and start typing in your post title. You can enlarge the text area by dragging the blue handles on the sides of the text area.

Tutorial: How to Create a Dazzling Blog Post Graphic Template using BeFunky - a www.DesignYourOwnBlog.com exclusive.

Now you can play with the text size, letter spacing (kerning) and paragraph alignment as well as alignment to the image as a whole. Remember: don’t introduce colors just yet.

Things to keep in mind when selecting fonts:

  • Use fonts that are consistent with your brand.
  • You can select fonts from BeFunky or from those installed on your computer.
  • Use contrast within your font selection. Learn how to pair fonts.
  • Make sure the fonts are easy to read at a quick glance.

Next find the proper placement for your title in relation to the background. You may want it centered on the image or aligned to one side. The possibilities are endless so have fun with it!

To achieve the look below, I ended up creating a new text box for each line so that I could vertically space them the way I wanted and play around with size and kerning more freely.

Tutorial: How to Create a Dazzling Blog Post Graphic Template using BeFunky - a DesignYourOwnBlog.com exclusive.

Don’t forget to add your blog’s URL somewhere along the bottom.

Two Options for Busier Backgrounds:

If you’re set on using a pattern or an image that’s not very simple or one doesn’t have “white space” for your text, here are a few things you can do:

Use an overlay
This is a shape you place above the background and underneath the text. You can leave it solid or reduce the opacity for a transparent effect. Whatever you choose to go with, make sure that the text is readable.

To add a shape, click Design Elements (Triangle icon) in the left menu, then go to Shapes.

Edit the background image in the BeFunky Photo Editor first
Before you do this, make sure you save your Design Project in BeFunky so you can come back to it. (See Step 6 below to learn how).

Use a filter or desaturate (remove color from) the image. You’ll find all kinds of filters and effects in the BeFunky Photo Editor to play with.

Related: Create Unique Graphics from Stock Photos for Your Blog and Social Media [Tutorial]

Step 4: Add Design Elements (optional)

Now that we have our background and all the necessary text, you might want to embellish the design a bit more by adding some cute icons or graphic elements. This is completely optional and you should take care to not clutter up the design too much.

To add design elements, click on the Triangle in the left menu to bring up the Design Elements available.

Tutorial: How to Create a Dazzling Blog Post Graphic Template using BeFunky - a DesignYourOwnBlog.com exclusive.

Step 5: Finally, Add Colors

I find it best to wait until the end to add colors because it’s easy to get distracted by them before the layout of the design is finished. You may choose to use your brand colors in your text and if so, it’s perfectly fine to use tints or shades of your brand colors if necessary to help them contrast against the background.

I usually like to make the URL lighter than the rest so that it doesn’t detract from the rest of the design.

Tutorial: How to Create a Dazzling Blog Post Graphic Template using BeFunky - a DesignYourOwnBlog.com exclusive.

Step 6: Save Your Template

Perhaps the most important piece of this tutorial is to save your template as a project so that you can edit it again for your next blog post!

  1. At the top of the screen, click Save, then select Save as Project. (You will need to be logged in to do this).
  2. Give your project a name.
  3. Select BeFunky as the location, instead of My Computer, to keep an editable file.
  4. Click Save and you’ll see your new project appear in the Project Manager to the left.

Step 7: Resize Your Image

Never upload an image to your blog that is larger than your needs. To resize your new image:

  1. Click Save at the top again, then select BeFunky.
  2. Give it a name and click Save.
  3. Now click on the BeFunky logo in the top left and select Photo Editor.
  4. Tutorial: How to Create a Dazzling Blog Post Graphic Template using BeFunky - a DesignYourOwnBlog.com exclusive.

  5. In the Photo Editor, click Upload at the top, then select BeFunky to select the image you just saved.
  6. Now click the Edit button to the left, then Resize.
  7. Tutorial: How to Create a Dazzling Blog Post Graphic Template using BeFunky - a DesignYourOwnBlog.com exclusive.

  8. Change the width of the image to the width of your blog post column. The height will automatically resize to keep it the image’s proportions.
  9. Click Save at the top again, then select My Computer this time.
  10. You’ll be presented with saving options here. To learn which options are best for page speed and quality, you must read this post on image performance.

Step 8: Reuse Your Template

The next time you want to create a new graphic from your template…

  1. Open up BeFunky and click on Designer again.
  2. Click on the Project Manager folder icon in the left menu.
  3. Tutorial: How to Create a Dazzling Blog Post Graphic Template using BeFunky - a DesignYourOwnBlog.com exclusive.

  4. Click on BeFunky.
  5. Click on Get BeFunky Projects.
  6. Click on the project you’d like to open.

Now you can add a new background by clicking on the background image then clicking Replace Image in the dialog box that opens up. Select an image from your computer to upload and it will replace the current background.

Align the image to your liking, edit the text and/or graphic elements to match your new post title and voila!

Tutorial: How to Create a Dazzling Blog Post Graphic Template using BeFunky - a www.DesignYourOwnBlog.com exclusive. Background photo courtesy of Chaitra at Pink Pot Design Studio. You can get this photo and more simply gorgeous photos for free here: http://www.itspinkpot.com/creative-convex/

Background photo courtesy of Chaitra at Pink Pot Design Studio. You can get this photo and more simply gorgeous photos for free here.

So that’s it! You’ve created a new template for your blog graphics that you can use again and again to save yourself some time.

Your Turn

What kinds of projects could you see yourself using BeFunky for? Let us know by leaving a comment below!

Hey friend, want free DIY design stuff?

I've got an entire library of FREE goods just for you! Join the 7000+ others and get instant access now!

Powered by ConvertKit
Mariannes signature for DesignYourOwnBlog.com

36 Comments

  • BeFunky sounds like a great resource! Saving a template to use over again would make things so much easier and faster. I use PhotoShop and will set up a template there. Duh! Not sure why I didn’t think of using a template for my blog images until reading this post.

    Thanks, as always.
    Erika Swafford recently posted…The 5 Types of Photographers – Which One Are You?My Profile

    • Marianne says:

      Oh Erika, don’t feel bad. I’m SO the same way! My images are all over the place, although I’m finally starting to settle on a template now. 🙂

  • Sofie says:

    I love this incredible article! I have been looking at Canva for work exactly for the templates options, but this is so much better. Thank you for writing such a useful article 🙂
    ~ Sofie
    Sofie recently posted…How to get the most out of your sketchbooksMy Profile

    • Marianne says:

      You’re so welcome Sofie! Yes, that is one downfall to both PicMonkey and Canva’s free option. I was so excited when I discovered BeFunky allowed you to save templates, it’s a game-changer for sure!

  • Ooh, another excellent resource! I haven’t heard of BeFunky before, and I love having another option for creating blog post images. I do something template-ish with Canva – by creating one blog post image, then copying it and editing it. The process works, but it’s not as smooth as it could be.. I’ll be checking out BeFunky for sure. Thanks for the great post, Marianne!
    Bridgid Gallagher recently posted…How to Create a Share-Worthy Blog Post in 7 Steps + a Free ChecklistMy Profile

    • Marianne says:

      Hi Bridgid, yay I’m so glad you enjoyed this post and discovered another tool. Canva is definitely a great option, but I think you’ll be surprised at how nice BeFunky is so I hope you give it a try! Thanks again for coming by to check this out.

  • Yolanda says:

    So glad I found this post. BeFunky has the best of PicMonkey and Canva, but runs much more smoothly. Thanks for sharing.

  • Alicia says:

    Exactly what I’ve been looking for! I want to start making my images more uniform on my posts to help tie everything together. Thank you for sharing. I think this will be a huge time saver for me!!

    • Marianne says:

      You’re very welcome Alicia, so glad to know it helped! It’s something I was struggling with too myself so I wanted to share my experience.

  • ShanBaylis says:

    I use photofy and it has all the same features. I also use fotor but now that photofy has had an update for photo resize I don’t needed it anymore. I can save my hex color codes and my blog logos as well for fast placement. I am able to save my projects as well. The template idea is a great idea which I have never thought about. I am always in need of time saving strategies. Thanks for the post!

    • Marianne says:

      Oh interesting Shannon! I had never heard of Photofy before, I’m going to have to check that one out now. And yes, templates are a must for saving time!

  • Francesca says:

    Gosh this is going to be so useful, thank you Marianne! I don’t think I’ve heard of BeFunky before this post – kudos to you for the great discovery

  • Petra P. says:

    Is there any way to make your own blank template (something like Custom Canvas in PicMonkey)? For example, 980x150px. Thanks!

    • Marianne says:

      Hey Petra, I think at this time, you cannot create a custom size template in the BeFunky Designer. However, you can use a larger template than you need, then crop or resize it by saving your template and then uploading it to the BeFunky Photo Editor. Those functions can be found in under ‘Edit’ in the toolbar. Let me know if you need further explanation. 🙂

  • julie says:

    oh my… how did I never hear of BeFunky before?? This is a fabulous find, SO much better than trying to use PicMonkey and Canva in tandem (can’t believe I even thought that was a useful idea).

    Thanks again Marianne!

  • Madi says:

    This is great – thanks for sharing, can’t wait to use it!!

  • Michelle says:

    I might be a little late to the party, but this guide is super helpful! I’m just being to put together my brand (I know, I did it out of order). It is incredible to find another photo editor that allows me to save and later edit images. I also really liked the complete step-by-step of creating a better graphic. I think this guide will help me substantially up my graphics game. Thank you for putting this together!

    • Marianne says:

      Hey Michelle, I’m so glad to hear it! And there is not correct order of things. I mean, there are, kinda, but going back and perfecting it later is a great thing. It’s never too late. Thanks for checking it out and hope you create some amazing images!

  • Barb says:

    Great info! Thank you very much.

  • Mahriya says:

    Thank you so much! I’ve never heard of BeFunky and will be sure to use it now!Off to create a graphic now!

    P.S I’d like to raise to your attention that the ‘Follow-up comments via email’ links are not working. Whenever I comment and check the ‘Follow-up comments’ box I receive the email to confirm the subscription with a link to do so. I click on the links but an error message shows up? I don’t know if it’s my laptop or software but it’s strange? Any help or advice?

    • Marianne says:

      Hey Mahriya, thanks for letting me know. I had a feeling there might be a problem with this plugin and I finally found the issue and fixed it!

      Can’t wait to see the new graphics you create!

      • Mahriya says:

        Thank you! I didn’t receive this comment notification (as the plugin wasn;t working) so I had to remember which post I commented on! Now, hopefully, It will work and can continue enjoying this amazing blog!

        • Marianne says:

          You’re too sweet Mahryia, thank you!

          • Mahriya says:

            I just created my first graphic on BeFunky. It was really great and fun to tinker around with!
            Then, as I was saving my design to BeFunky so I could use it as a template, my laptop crashed and the tab somehow got closed and… I didn’t get to save the template so I’m going to have to do it all over again! Thanks for this tutorial though!

          • Marianne says:

            Oh no what a huge bummer Mahriya, I’m so sorry! I have had this sort of thing happen to me many times as well so I feel your pain. My experience however has always been that I design something even better the second time. Hope that is the case for you too.

  • Michelle says:

    I’ve had lots of fun with Canva on my blog and social media posts, but this sounds great. Must try! Thanks for the tutorial.

    • Marianne says:

      Canva is also awesome, i use a mixture of them both AND Photoshop to do different graphics for various circumstances. Let me know how it goes with BeFunky!

  • Kelli says:

    Hey!! Love this tutorial! One question…how did you get your lightbulb element on the image? When I upload my little logo graphic, it tries to replace the main image! Would love to have a consistent logo to add to mine like yours!

    • Marianne says:

      Hi Kelli, hmmm it’s been a while since I did this tutorial but I’m thinking that you might try clicking or double clicking the icon so that it gets added to the image instead of dragging it. Let me know if that works.

Leave a Reply

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

CommentLuv badge