How to Create a Style Guide for Your Blog Graphics

Blogging

How to Create a Style Guide for Your Blog Graphics

Blogging

Have you ever looked at another blog's post images and wished you have the time, talent or know how to create those fancy blog graphics for all your posts too?

And then when it comes time to publish a post, you pop open a program to make an image but it takes forever. 

You hit roadblocks like:

What image should I use?

What fonts should I try?

Why doesn't this look as good on the screen as it does in my mind!?

The web is visual and engaging images draw people to your content. How can you go from time starved, frustrated and not producing great (or any) blog graphics to one of those people that stands out from the crowd?

IT'S TIME TO CREATE A STYLE GUIDE FOR YOUR BLOG GRAPHICS

One of the ways we lose time making graphics (and what can be so frustrating) is that there are an infinite amount of choices available when it comes to your images. Between the millions of fonts, images, colors, textures and overlays, it takes hours to sort through all the possible options.

You don't need every possible option. You just need a small set of options for you particular blog so you can work faster and smarter plus have better looking images to show for it. When you create some boundaries for yourself, a distinct style will start to emerge for your images and readers will start to recognize your work the moment they see it!

Step 1: decide on a standard image size

To determine a standard size for all your images, the first place to look is your theme.

Your theme may have a set “featured image” size that the layout has been designed around so check your theme settings to see what dimensions you should be using if those are pre-set.

If you don't have a preset featured image size you can easily determine a good dimension for your images by doing a little inspection with Google Chrome.

To do this:

  1. Open up a blog post.
  2. Right click on your main blog content area and then click “Inspect Element.”
  3. You'll see a yellow tag pop up with a width and height dimension. (In the video it shows up as .entry-content 778px)
  4. The width of your content column is the widest your feature images should be.
  5. Write down your content width and a height you want to use so all your images will be the same size going forward.

Step 2: select a few standard fonts

After you've determined your image size, it's time to move onto fonts.

You may want to write the post title, a related quote or any other kind of text on your featured images. Deciding on a small set of fonts is going to help you not only create these images faster, but also help your blog have a consistent and polished look.

Picking fonts can be an overwhelming task, so once again, let's look to your theme for some guidance. What are your headline and body font? Do you have a particular font used in your logo or header?

Take cues from what's already being used on your blog to create a cohesive experience for your readers.  Check out this post if you're unsure of how to discover the names of fonts used on your blog.

Step 3: pick a color palette

Right now your theme is using a certain set of colors for links, headlines, sidebar titles, etc. This is the best place to look for color palette inspiration.

When choosing a color palette for your blog graphics, you may want to use the same palette as your blog or you may want to choose colors that go but aren't necessarily the same. The choice is up to you but the main thing is to choose a defined set of colors so when you make your images, they all end up coordinating with each other and with your site.

If you want to play around with color relationships to see what colors work best together, check out Kuler from Adobe.

After choosing 2-3 colors that work for your blog, write down the 6 digit hex color code so you can always use the same colors.

Step 4: create a blog graphic template

A few weeks ago we talked about a way to consistently write better blog posts and the way to do that is by creating a workflow and a template to give you a head start each time your write.

You can apply that same technique to your blog graphics by creating one or more templates that you use as starting points for your images.

To create a template, you combine all the information you've gathered in Steps 1-3 above and create a base image. Creating this base image will take you the most time out of this whole process but once it's done, you'll be an image machine!

Each time you need to create a blog graphic, you simply change out the template to reflect the theme or title of the post.

Just in case you think templates are boring, here's some examples of blog's that use this type of approach for their blog graphics:

MARIE FORLEO

Marie Forleo Blog GraphicsWith Marie's graphics there isn't any text or other items overlaid on the images themselves but all the pictures are from the same studio and have the same style. The title and comment count is built into the blog theme itself so that is always consistent. How could you adapt this style to your blog graphics?

CANVA'S BLOG

Canva Blog GraphicsCanva's blog graphics are a mix of color backgrounds and pictures with a text overlay describing the post. Is this simple but effective blog graphic suited to your style and content?

BUFFER'S BLOG

buffer blogBuffer's graphics all use a diagonal gradient background, an icon, a sans-serif font heading followed by a script font for the subheading. Each post follows the same formula and you can identify a post from buffer just by the graphic!

MICHAEL HYATT

Micheal HyattMichael Hyatt recently changed his blog graphics to be more consistent, just as we've been talking about. They are all image backgrounds with the blog title and author name overlaying the picture. The blog titles are a combination of a script font and a sans-serif font in all caps.

Let's recap the process:

  1. Find out your image dimensions.
  2. Decide on 2-3 fonts.
  3. Decide on 2-3 colors.
  4. Create one (or multiple) graphic templates.
  5. Write down all the information so you can find it easily.

What's your greatest struggle when it comes to blog graphics? Is it the time, creativity or software know-how (or something else)?

Have you ever looked at another blog's post images and wished you have the time, talent or know how to create those fancy blog graphics for all your posts too?

And then when it comes time to publish a post, you pop open a program to make an image but it takes forever. 

You hit roadblocks like:

What image should I use?

What fonts should I try?

Why doesn't this look as good on the screen as it does in my mind!?

The web is visual and engaging images draw people to your content. How can you go from time starved, frustrated and not producing great (or any) blog graphics to one of those people that stands out from the crowd?

IT'S TIME TO CREATE A STYLE GUIDE FOR YOUR BLOG GRAPHICS

One of the ways we lose time making graphics (and what can be so frustrating) is that there are an infinite amount of choices available when it comes to your images. Between the millions of fonts, images, colors, textures and overlays, it takes hours to sort through all the possible options.

You don't need every possible option. You just need a small set of options for you particular blog so you can work faster and smarter plus have better looking images to show for it. When you create some boundaries for yourself, a distinct style will start to emerge for your images and readers will start to recognize your work the moment they see it!

Step 1: decide on a standard image size

To determine a standard size for all your images, the first place to look is your theme.

Your theme may have a set “featured image” size that the layout has been designed around so check your theme settings to see what dimensions you should be using if those are pre-set.

If you don't have a preset featured image size you can easily determine a good dimension for your images by doing a little inspection with Google Chrome.

To do this:

  1. Open up a blog post.
  2. Right click on your main blog content area and then click “Inspect Element.”
  3. You'll see a yellow tag pop up with a width and height dimension. (In the video it shows up as .entry-content 778px)
  4. The width of your content column is the widest your feature images should be.
  5. Write down your content width and a height you want to use so all your images will be the same size going forward.

Step 2: select a few standard fonts

After you've determined your image size, it's time to move onto fonts.

You may want to write the post title, a related quote or any other kind of text on your featured images. Deciding on a small set of fonts is going to help you not only create these images faster, but also help your blog have a consistent and polished look.

Picking fonts can be an overwhelming task, so once again, let's look to your theme for some guidance. What are your headline and body font? Do you have a particular font used in your logo or header?

Take cues from what's already being used on your blog to create a cohesive experience for your readers.  Check out this post if you're unsure of how to discover the names of fonts used on your blog.

Step 3: pick a color palette

Right now your theme is using a certain set of colors for links, headlines, sidebar titles, etc. This is the best place to look for color palette inspiration.

When choosing a color palette for your blog graphics, you may want to use the same palette as your blog or you may want to choose colors that go but aren't necessarily the same. The choice is up to you but the main thing is to choose a defined set of colors so when you make your images, they all end up coordinating with each other and with your site.

If you want to play around with color relationships to see what colors work best together, check out Kuler from Adobe.

After choosing 2-3 colors that work for your blog, write down the 6 digit hex color code so you can always use the same colors.

Step 4: create a blog graphic template

A few weeks ago we talked about a way to consistently write better blog posts and the way to do that is by creating a workflow and a template to give you a head start each time your write.

You can apply that same technique to your blog graphics by creating one or more templates that you use as starting points for your images.

To create a template, you combine all the information you've gathered in Steps 1-3 above and create a base image. Creating this base image will take you the most time out of this whole process but once it's done, you'll be an image machine!

Each time you need to create a blog graphic, you simply change out the template to reflect the theme or title of the post.

Just in case you think templates are boring, here's some examples of blog's that use this type of approach for their blog graphics:

MARIE FORLEO

Marie Forleo Blog GraphicsWith Marie's graphics there isn't any text or other items overlaid on the images themselves but all the pictures are from the same studio and have the same style. The title and comment count is built into the blog theme itself so that is always consistent. How could you adapt this style to your blog graphics?

CANVA'S BLOG

Canva Blog GraphicsCanva's blog graphics are a mix of color backgrounds and pictures with a text overlay describing the post. Is this simple but effective blog graphic suited to your style and content?

BUFFER'S BLOG

buffer blogBuffer's graphics all use a diagonal gradient background, an icon, a sans-serif font heading followed by a script font for the subheading. Each post follows the same formula and you can identify a post from buffer just by the graphic!

MICHAEL HYATT

Micheal HyattMichael Hyatt recently changed his blog graphics to be more consistent, just as we've been talking about. They are all image backgrounds with the blog title and author name overlaying the picture. The blog titles are a combination of a script font and a sans-serif font in all caps.

Let's recap the process:

  1. Find out your image dimensions.
  2. Decide on 2-3 fonts.
  3. Decide on 2-3 colors.
  4. Create one (or multiple) graphic templates.
  5. Write down all the information so you can find it easily.

What's your greatest struggle when it comes to blog graphics? Is it the time, creativity or software know-how (or something else)?

Share this blog post

Rita Barry

Rita Barry is a marketing measurement and paid traffic specialist who helps online entrepreneurs understand how their marketing is driving sales so they can sell more. You can learn more about her here.

Rita Barry

Rita Barry is a marketing measurement and paid traffic specialist who helps online entrepreneurs understand how their marketing is driving sales so they can sell more. You can learn more about her here.