A Quick Guide to Creating Beautiful Images for WordPress Blog Posts
A Quick Guide to Creating Beautiful Images for WordPress Blog Posts
What impression do you get from blogs that have no images or low quality, cheesy stock photos?
Perhaps you feel the blog is unprofessional or it gives you the feeling that the content is possibly of a lower quality? If your blog has poor imagery, then visitors to your blog might have the same first impressions of your site.
Fortunately, it doesn’t need to be this way and creating high quality, professional images for your blog can be easy, quick and inexpensive.
Want to find out how? Read on.
The Best Tools for Designing Blog Post Images
Before you begin designing your blog images, you will need some tools for editing. There are a number of free and paid solutions available:
Photoshop is the go-to image editing software for professionals. Developed by Adobe and part of their Creative Cloud toolset, Photoshop is great for working with photographs (no surprises there!).
Also part of Adobe’s Creative Cloud tools, Illustrator is the standard for working with vector graphics. These are images that are made of points and paths, unlike raster graphics, which are essentially a grid of pixels. The benefit of using vector graphics is that you can resize them without a loss of quality. Raster images will lose quality once they are enlarged beyond their native size.
GIMP is a free alternative to Photoshop. Whilst it isn’t as feature rich as Adobe’s solution, GIMP is still an impressive tool. For the purpose of creating featured images for your blog posts, it should be more than enough.
Canva (Free and Paid)
Canva is an online tool that allows you to easily create a variety of images from social media covers, to posters and, you guessed it, blog feature images. It’s easy to use and useful if you have a number of people working on the same website.
What Makes a Great Cover/Feature Image?
Now you have the tools you need to design blog post images, you need to think about the actual elements that are needed to design one.
Note that for many sites that provide free photographs, vector images, icons and fonts, you will probably be required to provide attribution. Don’t forget this and always check if any attribution is required.
You need to decide whether you want to use a blog post banner that is vector and more “cartoon-like” or whether you want to use photographs or real-world images. It will likely depend on what images you have available to you, but do try to get an understanding of what works best with your audience.
Imagine you are looking for blog posts about cakes. What would make you read a post more? A photo of a real cake that looks amazing or a vector image of a cake? I know what I would be more inclined to click on.
Sourcing General Imagery
For general imagery, there are a number of sites that provide a variety of image types, including photographs, vector images and icons:
- iStock (Paid) – provides stock photos, vector graphics and icons that are generally of a very good quality
- Shutterstock (Paid) – provides premium stock photos, vector graphics and icons that are also of a very good quality
- Freepik (Free and Paid) – this site provides a variety of free and paid stock photos, vector graphics and icons
- Canva (Paid) – provides stock photos, vector graphics and icons for a very low price for use within their platform
If you have your own photos, then that’s great. However, many people won’t have the equipment or experience to take professional photographs. Luckily, finding free stock images is easy using Librestock. This site is essentially a search engine of other websites that provide free stock images.
Sourcing Vectors & Icons
Vector images and vector icons are useful because they are very easy to customise. Changing proportions, colours, line thickness etc. are a cinch with vector editing programs. You can find free vectors using the following sites:
- Vecteezy (Free & Paid) – this site provides and range of vector graphics and icons
- Vectorstock (Free & Paid) – this site also provides a wide range of vector graphics and icons
Fonts are often overlooked, yet choosing the right font can make the difference between a banner image looking eye-catching and professional, rather than boring and amateur.
It’s important to choose a font that matches the message and theme of your post. For example, if your post is about strength training, you should choose a short, bold, serif font. If the blog post was about losing weight, you would want to choose a tall font with a low font weight. This isn’t only for style, but the characteristics of these fonts can subconsciously help to trigger emotions and thoughts in your readers as shown by a study carried out by Beth Koch.
There are many* online resources for fonts. If you intend to use the font within your HTML rather than within the image itself, for example overlaying the image with a heading element, then you will need to make sure that there is a web font version of your chosen type available. Check out these sites for fonts:
- 1001fonts – this site has a large number of free fonts for personal use
- Dafont – lots of fonts, with many of them being free to use
- Fonts.com – provides a subscription based service for access to many professional fonts
- Google Fonts – some people may not know this, but you can actually download Google Fonts to use in your desktop applications
As with imagery and fonts, your choice of colour can have a big impact on the feelings and thoughts of your blog’s readers. An article from Nick Kolenda shows the numerous ways that colour can affect the visitors to your site. For me, the key takeaway is the notion of associative network theory.
The concept of associative network theory is that each piece of knowledge is a node, including colours. As we live our lives and go through various experiences, connections are made between these nodes. Imagine, your favourite sweets as a child are sour and green. Due to extensive exposure to sour, green sweets, you will begin to build up an association between that taste and colour.
Why are these associations important? When nodes are triggered, they also trigger those nodes directly connected to them. Let’s take the sour, green sweets example. When you then see the colour or read the word “green” in the context of sweets or food, it will subconsciously trigger the node for sour taste. Likewise, if you read or hear the word sour, it will subconsciously trigger the green node.
You may be thinking, “OK, great. But, how does that help me choose a colour?”. Well, choosing the right colour will trigger certain nodes that will help reinforce your message. A rather obvious example, but imagine your blog is about money, finance and targeting the US market. In the US, money is green. It stands to reason that one of the colours most associated with money is green, and choosing this colour for your blog images will help to trigger the money “node” within your readers’ minds.
Stunning drag ’n’ drop themes with Upfront
Drag, scale, position, customize and see every edit you make to your website – in real-time – with our Upfront theme framework for WordPress. Choose from our collection of starter themes and get started customizing your site right away. You know that design you’ve got in your head? You can build it with Upfront.TRY WPMU DEV FREE LEARN MORE
There are a number of tools available online that can help you to choose colours. Use these alongside associative network theory:
- Adobe Color – this is a colour wheel provided by Adobe that can provide a variety of colour combinations based on different rules
- Paletton – this is another colour wheel similar to Adobe’s
- Material Palette – if you follow Google’s Material Design principles, then this website will help you choose suitable colour combinations
Creating a Featured Blog Image with Canva
We have looked at the various elements of your blog image. Now let’s put all of this into practice. We’ll be using Canva as it’s an online service that anyone can access. Our example blog post will be about “5 Salads in Under 5 Minutes” and we’ll be creating a featured image for it.
First things first, you’ll need to sign up to Canva. Once that is complete, sign in and you’ll be presented with your dashboard.
You’ll notice on this screen that there are a number of design options. These are essentially just different image dimensions. It is likely you will need something custom for your blog, particularly if you designed and built it yourself. To choose a custom size, click on the button in the top right of the screen labelled Use custom dimensions.
You’ll see a few input boxes appear for your width and height dimensions. We’ll be using 670px wide by 377px high. You are free to use whichever dimensions you need for your blog.
Click Design! and you’ll be presented with the screen where you will be designing your blog image. In the left-hand pane, you’ll see a number of layout options. For the purpose of this example, we’ll be selecting the single image option, which is the top-left selection.
For this post, I think a photo would work well rather than vectors. I’ve used Librestock to find a high quality, suitable image of a salad. I now need to upload it to Canva to use it within my blog image.
Click on Uploads in the left-hand menu. You’ll then be presented with the option to upload your own images. Click on this button and then select the image file you want to upload.
When the image has finished uploading you can simply drag it to the canvas. The background for our image is now complete.
We could now add the title of the blog post, but it would be difficult for our site’s visitors to read. If the image contained a solid block of one colour, then it would be possible to overlay text that sufficiently contrasts with the background. With our image, that isn’t the case. We need to add another element that we can overlay the text on. There are two choices for this:
- Create an overlay of a single block of colour with its opacity set to something lower than 100% so that the background image is visible
- Create an element that does not fill the background image
For this, I will go with the second option. I want the vibrant colours of the salad in our background image to be as visible as possible.
To add an element, click on Elements in the left-hand menu. You will be presented with a number of options for the various types of elements. We’ll be using a shape, so click on Shapes. Here you can choose the type of shape you want, and there are many options that are available for free. We’ll be choosing the circle for this tutorial, so click on the circle option. This will add this element to our image.
There are a number of ways that you can edit the circle. You can change the colour of the element by clicking on the colour block at the top left of the canvas. The opacity can be changed by clicking on the opacity button at the top right of the canvas. You can also edit the element’s size by clicking on it, then dragging the markers at the corners and edges of the shape.
For this image, the circle has been changed to white, the opacity has been reduced to 85%, and the circle has been made slightly smaller. Please note, that when resizing elements, they will likely not be in the position you had originally wanted. To move elements, simply place your cursor over the element, click and drag.
We can now add our text. Click on the Text option in the left-hand menu. A number of text templates will appear in addition to heading, subheading and body text options. We want to add a heading and a subheading, so click on both of these.
The heading and subheading will be added to our canvas. After selecting a text element, a number of text editing options will appear. This includes options for the font, the font size and text colour. Feel free to try these out and see which ones you feel work for your blog image.
This tutorial is using Quicksand as the font for both the heading and subheading. The font colour is set to black, so that it contrasts with the white background circle. The font sizes are also slightly different, with the heading being set to 38.7 and the subheading being set to 16.6.
We’re going to add one more element; a divider between the heading and subheading. This helps to separate the text, making it easier to read. It also adds some colour to the otherwise quite plain circle overlay.
To add the divider, click on Elements and then select Lines in the left-hand menu. You’ll have a number of line types appear. For this tutorial, one of the dotted lines was chosen. Click on this and it will add it to your canvas. You’ll probably want to resize and extend the line.
The line colour has been changed by clicking on the colour block at the top-left of the canvas. The line element was also re-positioned so that it was placed neatly between the heading and subheading.
All you need to do now is ensure you are happy with the size, placement, colours, fonts and images. Make any changes if necessary. You can even copy the canvas and work on multiple versions to compare. Once you are happy, you can export the image for use in your blog.
At the top right of your canvas you will see a Download button. Click on this and you will be presented with some file type options for the export. PNG is their recommended file format. I have noticed, particularly when uploading social media cover photos, that JPG files often appear at a lower quality. When uploading PNG files I do not have the same issue. Due to this, I almost always use PNG files for images I will be uploading.
Once you have chosen your file format and clicked Download, your image will then be saved to your computer for you to upload to your blog. Easy right! Once you have done this a few times, you’ll be able to create eye-catching, professional blog images in less than 5 minutes.
Here is the final image:
Creating Stunning Images for Your Blog is Easy
As you can see, creating images for your blog doesn’t have to take a long time or cost a lot of money.
What is even better, is that you can use these exact same principles for more than just featured images for blog posts. You can use these techniques to create professional images for use anywhere on your site as well as your social media profiles and display ads.