Select Page
Graphics tips to help improve your Pinterest Interest and get more clicks

Are you struggling to grow your brand on Pinterest? Have you heard that part of the solution to more followers is to post pins with great looking images? If so you’re probably getting a little concerned about how much all those images are going to end up costing you?

Well, fear not, as this post is precisely what you need. Read on to find out not only how you can create as many images for your Pinterest feed as you want or need, but also how to do it completely free – and when I say free I bloody-well mean it. Plus, you will also get some pointers on displaying your pins to best effect on your website… because every little bit helps.

This strategy will also help you avoid receiving one of those nasty copyright infringements notices which seem to be on the rise of late.

There are an alarming number of Pinterest image guides out there giving tutorials on how to create great looking pins for any website, even the ones which have no Pinterest worthy graphics. The usual method is to use an existing graphic on the website and modify it in some way. Sometimes you may have to download the image, edit it, and then upload your finished work to Pinterest.

However, the Stencil web application makes itself accessible directly through the browser interface. You don’t actually have to download any images to make the pin worthy of your Pinterest feed, as a simple right-click is enough to open the app and work with the image directly.

What is alarming about this process is a complete disregard for copyright. Sure, you are promoting the site using their graphic, albeit a slightly modified version, However, in order to make it Pinterest worthy you have to modify the image in some way with text. More often than not you will have to resize the image as well so it fits in with Pinterest’s preferred format.

Sadly, I am yet to see a guide which recommends asking for permission from the site owner first. Without that permission, you may be in breach of copyright and you can get yourself into trouble.

I understand; you come across a great post – packed full of awesome, usable information and you want to share it (as you should). But… there are no pinnable images to be seen, at least none that are worthy of being displayed on your carefully molded, lovingly crafted Pinterest feed.

Unfortunately, this does not mean that you can  doll up an image from the site in question just because it might not look good on your Pinterest feed.

Businesses spend big bucks building up their brand. This means they carefully consider all the colors, fonts, and images which go into creating a company image that is instantly recognizable. Most businesses have probably spent a sizeable portion of the marketing budget in doing so.

More than a few businesses will take exception to their blog post images being messed with, even if it is free promotion for them. I’m not saying all businesses will complain – most won’t – but there is a whole predatory industry springing up around copyrighted images being used illegally.

Just remember this; even a crappy image you don’t own can cost you thousands if the owner of the image decides to take issue with your use of it. Check out Social Media Examiner for more on using images on your blogs and social media accounts, all while staying out of trouble.

Pinterest Code Hacks

You’ve no doubt come across sites where an image is one size on the blog post, but when shared on Pinterest it somehow changes to its full size. This is nothing more than a couple of lines of code and it’s quite simple to implement.

You can type the code directly into your image tag via the WorPress text editor, but I like things simple and use CSS to keep everything neat. This allows you to create an easily remembered class for your Pinterest and you will have less code to insert into your image tag.

First Create A Child Theme

Before you start modifying your CSS I highly recommend creating a child theme. What’s that you ask? A child theme is a theme which inherits its functionality from another theme (referred to as the parent theme).

So why do you need a child theme if WordPress is already doing what you want it to do? The answer is… updates!

It’s a rare WordPress user who leaves their site in its default format. There are always little tweaks to be made (and a few big ones!) here and there to create a brand and make the website stand out from the crowd.

Then come the inevitable updates. If you haven’t used a child theme all of your hard won tweaks are going to be wiped out as the theme defaults back to its original styling.

You can always just not bother updating but not installing the latest versions leaves you vulnerable to hackers who will exploit gaps in security left open by out of date software.

Installing a child theme negates all of these problems as your style changes are created in the child theme’s very own CSS file.

It used to be somewhat complicated for the novice site builder to create a child theme, but now there are tons of plugins which do the job for you. I personally use Child Theme Configurator.

If you don’t have a child theme go and install that plugin now so the CSS code you will be using stays put the next time your theme updates.

Edit Your style.css File

Now that you have your child theme you need to go to the style.css file. You can get there by going to Appearance –> Editor. Click on the style.css link in the right-hand column and insert the following code into the file:

.resizepinleft {
float: left;
vertical-align: top;
margin: 0px 15px 15px 0px;
width: 45%;
}

.resizepinright {
float: right;
vertical-align: top;
margin: 0px 15px 15px 0px;
width: 45%;
}

It’s important to have the dots before the class name so don’t leave them out when copying the code. Click to update the file, and then go back to your post editor. When inserting your image into a post all you have to do now is use something similar to the following code:

<img src=”http://www.yoursite.com/image.png” class=”resizepinright” />

How to create graphics that will increase the interest in your Pinterest imagesAnd you should get something like the image to the right. It fits nicely on the page without taking up all of the real estate. If you right click on the image and view it in another tab you will see the full size image.This is also what will get pinned to Pinterest.

Notice the class attribute. This will float the image to the right of the paragraph with the text flowing around it. If you want it on the opposite side simply use the resizepinleft class.

So, what are the advantages to using CSS over just inserting the full code into each image tag? Let’s say, a few months down the track, you change the layout of your site a little and want to adjust the look of your Pinterest images.

If you haven’t used CSS you have to hunt down every single img tag and change the code accordingly.Trust me when I say this would be a huge task on a 3-year-old blog with hundreds of posts.

With CSS you take care of every image on your site with one little tweak to your code in the style.css.

If you wanted to make every image just a little smaller or bigger a quick change to the width attribute is all you need. Likewise, if you decided to increase the margin size so the text doesn’t bump up so close to the edge of the image, or put a border around the image to make it stand out more, it’s a simple task to make a sitewide change with CSS.

Hiding Pins

Creative bloggers who use Pinterest to its fullest potential often have one, or two, or even three pin-worthy images for pinners to choose from. These can take up quite a bit of room on your post, even if they are resized. And some posts look a little silly with three images all saying basically the same thing.

How can you give pinners a variety of images to choose from without stuffing up the format of your post? CSS can come to the rescue for that as well.

Insert this code into your style.css file:

.hiddenpin { display: none; }

Now the image tag in your actual post will look a little like this:

<img src=”http://www.yoursite.com/image.jpg” class=”hiddenpin” alt=”Don’t forget to add the alt text which is what Pinterest uses to fill out your description field automatically”>

The image can still be picked up by the Pinterest save button, but it doesn’t display on the post itself. Ta Da! More options for pinners to choose from, without cluttering your post with redundant images. Take note of the alt tag in your image code, this is where Pinterest will get the description for what your pin is about so make sure it’s filled out with your keywords.

Creating graphics that will ramp up your Pinterest Interest and get more clicksIt would be good if there was code that hid all of my images from the Pinterest share button, and only displayed the ones I do want to be shared. All of those smaller images dotted around the page optimized for Twitter, the sidebar images, and the related post images all have a job to do – but don’t really work for me on Pinterest. Unfortunately, the coding solution for doing this is a little unwieldy and frankly not worth the trouble.

There is a plugin from warfare plugins, which allows you to set a default Pinterest image,┬ábut I already have a share button solution and don’t really want to install yet another plugin. It does look like a handy solution though so you should definitely check them out.

If you’ve Had Enough of Reading Then Read This

The rest of this article details each step for creating an awesome Pinterest image using a free vector program and it has turned into a bit of a monster post. Turns out it takes a lot longer to describe a process via text than it does with video… so here ya go, I made one for you to watch the entire process.

No Design Skills and No Budget for Graphics? No Problem

If you’ve been blogging for more than 5 minutes you’ve no doubt heard about the wonders of Canva, Stencil, or any one of the other myriad services out there promising to turn graphic designer newbies into… maybe not professionals, but something resembling a competent designer.

The prices on these services are pretty good, and for the most part affordable, but if you’re just starting with a new blog that’s not yet paying its keep then cheap may still be out of reach.

Blogs need graphics, and lots of ’em, if your posts are to stand any chance of getting shared via social media.

You don’t just need pretty Pinterest piccies, you also need images optimized for the other social channels. What works on Pinterest won’t look so good on Twitter. Even Facebook demands a different sized format for the image to look perfect.

As you can see your graphics bill is soon going to add up, as most of the cheaper services will give you a license to use an image just once. If you need it in another size, then that’s another version you have to create and pay for again.

There is an option for the graphics starved blogger that is a little easier on the wallet. With this method, you will be churning out awesome graphics lickety split, which are also all perfectly optimized for Pinterest.

The only caveat is you do need to install a graphics program on your PC. It’s powerful but I’m going to show you only the features you need to churn out great looking graphics your readers will love to share.

The software in question is Inkscape. As it’s Opensource software you get all the functionality of a powerful desktop editing program without spending any money. Get Inkscape here and set it up.

Start a New Document

Once you have Inkscape all setup open up a new document. We want to set up the drawing to a Pinterest preferred dimension so go to File –> Document Properties (ctrl + shift + D). There’s a lot of stuff here but we just need to use the custom size settings – about half way down the box. Make sure you set the units to pixels, the width to 735, and the height to 1102.

Import Image

I am going to be using an image from unsplash.com which is already in portrait format so I don’t have to do too much modifying. You can get it here at Unsplash, but most portrait images should work as well. The picture fits right in nicely with just a little resizing. Go to File –> Import and load the image into the document.

You can also just drag and drop from your folder. In the dialogue box, I have selected Embed, Default import resolution, and Blocky (optimizeSpeed). If you select link then you will need to keep the original picture on your hard drive for Inkscape to link to if you want to work on the image again.

If you select the Smooth option your export PNG will have a larger file size. For the purposes of using your image on the web, Blocky does a great job and you would need a keen eye to tell the difference.

The imported image is going to be much larger than your actual document size but that is easily fixed. Hold down ctrl and rotate your mouse wheel until you can see the full image.

Anytime you need to move, rotate, or resize a shape it’s all done with the Select and Transform objects tool – the arrow at the top of the left hand which looks like a black mouse cursor. If it’s not selected click it now and select the image you just imported.

Now grab one of the double sided arrows on the edge of the image and drag inwards – while still holding control – until the image is about the same size as your page.

Moving an Image in Inkscape

If you click the image twice you will see the arrows change to curved versions. This is the rotate option so make sure your arrows are straight. If your arrows are curved just click on the inside of the image again to get back to the resizing option.

You need to align the image precisely with the top corner of your page. Rather than dragging it with the mouse and trying to eyeball it, you can simply enter 0 and 0 into the X and Y co-ordinate settings as shown in the image below.

Now that we have our image nicely placed it’s time to start sprucing it up with some of our own graphical elements. I’m a bit of a graphic design wannabe, which means the amount of talent I have for it fits into the tip of my pinkie finger, and there is room to spare.

Adding a Shape in Inkscape

This is why I still use Canva and other sources for inspiration. I find a design I like and then I re-create it in Inkscape using my own graphics. You really don’t have to know much about Inkscape in order to do this as Canva is such a simplified design suite Inkscape has all the tools you need to easily do everything Canva does… and then some.

For the design we are about to do I went to Canva and selected the More templates option. Then I selected the Pinterest template and scrolled through layouts on the right-hand side until I found something I liked and knew I could easily recreate.

This is the image we will be working from, using our own fonts, image, and colors.

Okay – we need a shaded foreground to make the text stand out against the background image, so let’s get started by drawing a rectangle. In Inkscape select the rectangle tool and draw out a rectangle. It doesn’t matter what size it as you can resize once you have it on the screen.

Click on the Select and Transform tool and select the rectangle. Drag it over to your image and then select the Fill and Stroke options box on the right-hand side.

This is where you control the color of your shape elements, as well as the stroke size and color (puts a border around your shapes). We don’t want a border so select the Fill and Stroke (ctrl + Shift + E) and click the box with the x in it to remove the borders around your rectangle.

You can also remove the stroke (another way of referring to the border around your rectangle) by making sure your rectangle is selected, holding shift, and then clicking the X in the color bar down at the bottom the Inkscape window. See the image above.

Transform and Resize the Rectangle

Use the x and y co-ordinates boxes you used earlier to place your picture and put the rectangle at 0,0. You can also make sure it’s exactly the same dimensions as your background image by typing 735 and 1102 in the width and height boxes respectively.

Now grab your Select and Transform tool and select the rectangle. Hold down shift and ctrl at the same time and drag inwards. This will resize your rectangle from the center so it remains aligned with the background image.

Just keep going until you’re happy with the size. By holding down Shift and ctrl you can be sure your rectangle is nicely centered with equally sized margins around the edge.

You also want to be able to see through to the image behind your rectangle so drag the opacity bar in the Fill and Stroke box (Shift + Ctrl + F) down to wherever you like so you can see the image underneath. I set mine to about 70%.

Add Corner Emblems

We have two little embellishments in the upper left and lower right of our Canva template so we need to go about duplicating those. Click on the Bezier curves pen in your toolbar as shown in the image and then draw out the same shape I have. You can zoom in with ctrl and the mouse wheel to make it easier. Turning on your guides with Shift + 3 will also help a lot.

It’s basically just a few lines so it shouldn’t pose any problem for you. Hold down ctrl while moving the mouse to keep the lines straight. If it’s not quite right you can always adjust it later using the Edit path nodes tool (as shown in the image below).

Once you have the basic shape you can now use the Edit Paths via Nodes tool and move outside edges in like the one in Canva. Click the bottom inner node (the little circles on the ends of the lines) and drag it upwards a couple of guide squares.

Do the same on the other top inner point (except drag it to the right). It’s a simple idea which adds a little more detail and interest to the image.

Move the shape over and onto to your image towards the top left corner and change its color. Changing the color of any selected shape is as easy as selecting any of the hues displayed on the bar at the bottom of Inkscape.

Use any color you like but I’m going to stick with white for now and see how it goes. As mentioned before you can also turn off the border by holding shift and clicking the X in the bottom left corner.

With your shape selected hit ctrl + D to duplicate it. Then move it away from the original and down to the bottom right of the shaded rectangle. Using the Select and Transform objects tool (F1) click on the shape twice (so you get the rotation arrows). Now rotate the shape until it’s the opposite way up of the top one. You can hold ctrl to rotate in increments which will make it easier to align with the bottom edge and right edge of your rectangle.

If you have the guides on you can go ahead and turn the guides off now by pressing shift + 3 again and zoom out. This is what your image should be looking similar to now.

Draw Lines in Inkscape

Now we just need two simple straight lines. Use the bezier curves tool and hold ctrl while you draw a line across the image as shown. Just eyeball as you can adjust the size once you’ve created the line. Make it white by holding shift and selecting white in the bottom color bar. You need to hold shift to control the color, as this is actually a line (or path) rather than a shape.

With your line selected go into the Fill and Stroke options box and change the thickness by selecting stroke style and type a number into the Width box. I used 1.3 for mine.

Put the line about where you want it, and then open up the Align and Distribute box (ctrl + Shift + A). If the line isn’t selected, make sure it is, hold shift and click on your shaded rectangle so they are both selected. Now hit the center on vertical axis icon to align the line to the vertical center of your shaded rectangle.

Duplicate the line with ctrl + D and move the duplicate downwards by holding ctrl and using the mouse so it stays on the same horizontal axis. You can also move it by tapping on the down arrow if that’s easier.

Add the Text

We are almost done as now it’s time for some text and a couple of little embellishments.

Select the text tool from the toolbar to the right and click anywhere on the document. Type your text. To make it easier to manage I put all text on separate lines in their own separate boxes. Type the text, click anywhere on the document away from the text, and lay down more text. You’ll be able to shift select text to work on multiple lines at a time (such as changing fonts and whatnot).

Select the first text box and choose your color. With the font tool selected you can now change it to a font of your liking. The font box is at the top left, 3rd row down. To resize the font, click anywhere on the document and then click back on the text again to show the transform arrows.

With the text selected use ctrl with the mouse and drag it to a size you like. You can also control fonts via the toolbar at the top but I like to eyeball it while I’m nutting out the design.

With the text still selected click on your shaded rectangle while holding shift. Now hit the center on vertical axis button to align the two. Go through and do the same with the rest of the text.

As you work you may have to re-align everything a few more times to keep everything centered.

For the fonts, I used Bebas Neue for the top text, and Lobster 1.4 for the large subheading. You can get free versions of those fonts with a quick Google search. After a bit of fluffing about with the text and spacing of objects, I eventually created a layout I could be happy with.

I changed the color of the inner shaded box to white and adjusted the transparency using the process we went through above.

I also applied a drop shadow to the large text at the bottom to make it stand out a little more. Drop shadow is in Filters –> Shadows and glows. Turn on the live preview to see what’s happening in real time as you make adjustments.

The little graphic of the easel and paint tray at the top of the image is something I downloaded from FreePik.com and imported as described above. I have a paid membership with this site but if you have an attribution on your site (put one in your footer so it’s on every page) you can use their images for free.

Export the Image as PNG

Now all that is left is to export your image. Click on Export PNG Image (Shift + ctrl + E) in the boxes on the right of the screen. Select Page option and then click on Export As. Select your folder and name your file. This doesn’t actually export your file as you have to click on the Export button at the bottom to complete the process.

To export your file at full resolution you need to change the image size settings. As you can see, the image will export at 595 x 841 at 72 DPI. If you change the DPI to 96 it will go back up to 735 x 1102. You can always leave this as the height to width ratio of the image remains the same, but the image quality will be slightly lower. However, there is an advantage to a lower quality image is that it will speed up your site’s page load speeds.

Exporting your file saves your image as a PNG. If you want to keep the file as a template you have to use the File –> Save As option and select the Inkscape SVG option. This gives you the ability to use the image as a template for your next great Pinterest banner.

If you like, you can download my SVG file to play around with and use it for your own graphics. Download it here.

Summing Up

And we are done. It takes a lot longer to describe it in text form but once you get the hang of it an image like this will take no longer than 5 to 10 minutes to create. If you take the image you create and use it as a template for further creations you should be knocking them out even faster.

Canva is a great source of inspiration, and Inkscape gives you the ability to create a somewhat unique image you can call your own; plus they look great on your Pinterest feed.

The simple set of tools I showed you are only a small sampling of the true power of Inkscape. With even that small selection every design I have come across in Canva has been re-creatable.

Of course, some of the canva designs which include the more fancy borders may take a bit longer if you are going to recreate them in Inkscape, but there is a way around that.

Create your design in Inkscape sans borders, then create an image of the same dimension in Canva with just the borders, and then upload the image you made in Inkscape.

Many of the borders provided by Canva are free so you still won’t incur any costs. You can also download borders and fancy scroll work from FreePik.com if you don’t have time to create them yourself.

Need Awesome Content?

Having trouble keeping up with your hectic publishing schedule for your blog? Check out my writing services where I can help you fill out your site or email sales funnel with relevant useful information your email subscribers will love.

Pin It on Pinterest

Shares
Share This