The Pet Blogger's Hat

Where Pets and Blogging Come Together

Pet Blogging Starts Here!

PROMOTE YOUR PET BUSINESS, OR SHOWCASE YOUR PETS IN STYLE

Want to know more?

  • Home
  • Blogging Life
  • Getting Started
  • Getting Noticed
  • Making Money
  • Case Studies
You are here: Home / Getting Noticed / 10 easy steps to create a pinnable image for your blog post

10 easy steps to create a pinnable image for your blog post

August 19, 2016 By admin Leave a Comment

pinnable-imagesPinterest is a very useful tool for pet bloggers. It is a visual search engine, and an extraordinary library of images.

It lends itself well to pet blogging because pets are so visually appealing

Unlike most other forms of social media, your success with Pinterest will depend more on what you place on your blog, than on the time and effort you spend on your Pinterest account.

Creating great pinnable images and putting ‘pin it’ buttons on them, is the key to success.

If you do this well, your fans will pin your images on their own accounts and word of your website will spread.

Pinterest image quality is improving

At one time you could get away with quite mediocre images on Pinterest, but that is no longer the case.

Images need to look good and be high quality.

There are various tools we have tried for making quick and easy Pinterest images but they have all fallen short of the standards needed to do well on Pinterest.

Photo manipulation software

There are various ways to create photos with text on.

We did use Canva for a while, and it is very user friendly, but we just weren’t happy with the results and now use Adobe Photoshop

Photoshop used to be prohibitive in terms of price, but they now do a monthly subscription version which is much more affordable

Learning to use Adobe Photoshop

Adobe Photoshop can be incredibly daunting for beginners. It’s worth the effort to learn how to use it though if you want an attractive blog.

There are some good tutorials available online for Adobe, but sometimes it is difficult to find exactly what you need.

I am lucky because my son is an animator and skilled in using Photoshop.

When he shows me how to do something that I think will be useful for other pet bloggers, I break it down into baby steps and post it up here.

Creating a simple pinnable image

Promoting an article on pinterest often means combining images and text.

Today’s post aims to show you how to create a very simple pinnable image in photoshop using a few basic photoshop tools.

I’ll show you exactly how to make the image in the pin at the top of this article. You’ll be working in two areas on your photoshop dashboard.

  • On the image itself
  • In the layers tab

You’ll also learn how to use six basic tools

  • The crop tool
  • The text tool
  • The move tool
  • The rectangle tool
  • The magic wand
  • The select tool

Without further ado, let’s dive straight in

Ten steps to a pinnable image

Right click on a photo on your computer, and select ‘open with photoshop’

Make sure you can find see the layers tab to the right of your workspace. If it isn’t there.

On the image

#1 Crop the photo

On Facebook and Twitter, landscape images are best. On pinterest, landscape images don’t do so well.
crop-toolYou need to crop your image to make it taller than it is wide.

The exact proportions are not desperately important though some bloggers do find that taller images work better for them.

Click on the crop tool in the tools strip down the left hand side of your window.

1bNow drag the handles on the sides of the image so that only the area you want to keep is highlighted, and press enter.

If you are not happy with the result go to the edit menu at the top of the screen, press ‘undo’ and try again!

#2 Adding text

Click on the text tool.  It’s a T in the tools strip down the left hand side of the workspace.

Screen Shot 2016-08-19 at 16.11.48Make a small text box in the centre of the image by dragging with the text tool

Now type a simple slogan into the box.  Don’t worry about size or position – you’ll change those with the move tool.

Just get your text up there

I wrote PINNABLE IMAGES

Now click on the move tool.  It looks like a cross.  And sits at the top of the strip.

Screen Shot 2016-08-19 at 16.17.52The move tool does more than just move stuff.

It lets you drag the text box around and if you click on the corners or edges of the text box with the move tool, you can also make the text bigger or smaller, and shorter or taller.

To keep the original proportions of the text, hold the shift key as you drag at the corners of the text box.

Make another text box above (and below if necessary) to contain any additional text.

Screen Shot 2016-08-19 at 12.03.14I wrote ‘how to make simple’ above and ‘for your blog’ below.

This is what is looks like at this point.

Helpful tip:  To make your smaller text below the central text the same as the text above, just go to the layers tab and duplicate that layer.

We’ll look at the layers tab in a minute

The next step is to make our white banner across the image

#3 Make a white rectangle

Screen Shot 2016-08-19 at 16.27.44Click on the rectangle shape tool.

It’s the one in the middle in this screenshot

Now draw a large rectangle across the center of the image

Make sure it is completely covering all the text

Now we’ll do some work in the layers tab

white-rectangleIn the layers tab

#4 Make the shape more transparent

The layers tab is located on your right.  Your work consists of separate layers

Screen Shot 2016-08-19 at 12.22.28Your photograph is one layer, each block of text you created is another layer, and your rectangle is another layer.

The layers are all stacked on top of one another and you can re-order them by dragging.

Click on the rectangle and using the opacity slider at the top right of the layers tab, make the rectangle slightly opaque (70%)

Any final tweaks to your text need to take place now because once you rasterise, you cannot change it.

Once you are happy with your text proceed to step 5

#5 Rasterise the text

Don’t ask me what this means.

I have no idea.

Screen Shot 2016-08-19 at 12.24.27I only know that it is a necessary part of the process!

Right click on each of the text layers and click ‘Rasterise Type’

#6 Rasterise the shape

Now we do the same to the shape

Right click on the rectangle layer and click Rasterise Layer

In the layers tab, drag the rectangle layer down below the text layers (if it isn’t already) This enables you to see what you are doing in the next step

Let’s move back to the image

On the image

#7 Select the letters

Screen Shot 2016-08-19 at 17.20.02Select the magic wand tool and click on the first letter of the text.

Now hold down the shift key while you click on the remaining letters.

Keep going until all the letters are selected

If your letters are in several layers as mine were, make sure you check ‘Sample All Layers’  before you begin selecting

Screen Shot 2016-08-19 at 12.28.34It’s right at the top of the page

You’ll need to use the layers tab to switch to the next layer

In the layers tab

#8 The mysterious delete step

Here is another step I don’t understand.

In the layers tab click anywhere on the rectangle layer and press ‘delete’.

Yes, I know you don’t want to delete the rectangle (that’s what I said) but that isn’t what happens.

Go right ahead and press that delete button.

Screen Shot 2016-08-19 at 17.23.09#9 Hide text layer

Now for each of your text layers in turn, click on the eye symbol to the right. That hides the layer.

And hey presto.

You have an image with a semi-opaque rectangle over the center

Screen Shot 2016-08-19 at 12.39.58And the words you want to display etched out prettily.

If the background behind your white banner is a little pale you can darken the area quite easily to make your letters stand out better

Simply click on the select tool – now go to the layers tab and click on your photograph/background layer.

On that layer, drag and select the area covered by your white banner.

Now find your brightness and contrast tool – its the sun symbol in the adjustments tab at the top right hand side of your workspace.

Screen Shot 2016-08-19 at 16.48.48Click on it and using the brightness slider, drop the brightness down in that part of the photograph

Just until your letters stand out nicely.

All that remains is to save your image to your desktop (or some other folder if you prefer)

#10 Export your pin

You are going to use the export command (NOT save) to convert your image to a jpg, ready for uploading to your blog, and to your pinterest page

Click on file (top of your screen), scroll down the file menu, and select export and enter your preferences.

Next time, I’ll show you how to get people pinning your images right from your website.

Give it a go and let me know how you get on!

[thrive_leads id=’258′]

Leave a Reply Cancel reply

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

How To Learn From Blog Income Reports

How To Learn From Blog Income Reports

Blog income reports are a great way to … More...

Pet Blog Case Study

Pet Blog Case Study

  Case studies are a useful … More...

How To Start An Email List

How To Start An Email List

AWeber is an online email management … More...

Recent Posts

  • Traffic Income Report October 2016
  • Pet Blog Pinterest Experiment: The Results
  • Pet Blog Progress Report September 2016
  • Pinterest Strategies: Our Pet Blog Pinterest Experiment Part One
  • Investing In A Facebook Business Page: Pros Cons And Tips
Pages V Sessions: And How Many Page Views Per Session Should My Pet Blog Get?

Pages V Sessions: And How Many Page Views Per Session Should My Pet Blog Get?

Should you be tracking sessions, or page … More...

Planning And Preparing Your Pet Blog

Planning And Preparing Your Pet Blog

This is Stage One of Our Starting a pet … More...

WordPress Categories: How to set up categories in your blog

WordPress Categories: How to set up categories in your blog

Today we'll look at how to set up … More...

What To Blog About: Choosing A Subject For Your Pet Blog

What To Blog About: Choosing A Subject For Your Pet Blog

What is the best way to approach writing … More...

10 easy steps to create a pinnable image for your blog post

10 easy steps to create a pinnable image for your blog post

Pinterest is a very useful tool for pet … More...

Copyright 2016 The Pet Blogger's Hat