How to create blog photos and pins : my time-saving method

Tutorial: How to Quickly Create Great Blog Images and Pins

Shares keep this blog alive...Share on StumbleUpon0Tweet about this on Twitter5Pin on Pinterest8Share on Facebook0Share on Google+0Share on LinkedIn0

I’m gonna say it.

How to create blog photos and pins : my time-saving method

I’m gonna say it again guys.

Look away if you don’t wanna read it…

PEOPLE LIKE PRETTY PICTURES!

Ok, we got that outta the way early this post.

It’s true, which is why I’ve mentioned it like a billion times here on TechYourBlog. People are more likely to share your post if it’s got nice pictures. People are more likely to read your whole post if it has good visuals.

If they stick around to read a whole post, they’re more likely to click over to another one, and spend even more time on your blog.

Good blog photos contribute to a domino effect, keeping readers around and bringing them back.

So today I’m going to show you how I make blog photos. For me, this means featured post images – that won’t get me sued – and pinnable images that people can share on Pinterest.

I’m going to show you:
  • how to make the process quick and easy to repeat so you can become a blog photo machine
  • how and why I choose certain image sizes for my blog photos
  • where I get photos to use on my blog if they aren’t mine
  • how I setup Photoshop (for those of you who use it) to make editing blog photos easy

I had to create this process to make creating blog images easier and faster for myself, and it can definitely help you streamline your blogging work too!

This tutorial is going to take place in Photoshop, but you can easily take the steps here and translate them to other editing programs.

1. Open Photoshop

Open the image file you want to use for your background.

(it should be a fairly large file size – definitely over 1000px)

You’ll be using one photo for the background of both your blog post’s featured image and post pin. Makes it all pretty and organized that way, eh?

Screen Shot 2016-06-13 at 9.42.00 AM
This image’s original size in pixels – it’s a pretty large file! That’s good!
Screen Shot 2016-06-13 at 9.30.13 AM
My background image

Where to get photos:

I use photos or mockups for background images. If I’m using a photo, I either take it myself or get something from a free stock site – check out this list of resources for lots of free blog photo options.

Mockups

Mockups are a little different. They’re Photoshop or Illustrator files with multiple layers, so you can move the different object around to create unique photos. I almost always use GraphicBurger for free mockups.

These two photos are from the same mockup but I decided to hide certain objects to create two different blog photos.

2. Create 2 more new files

I named mine featured_image_template.psd and pin_template.psd

You’re going to save these later as PSD files so they’ll be reusable in the future.

Image sizes

I always edit image size in pixels (px)

Featured image: 1200×800

I use this size because 1) it creates a landscape oriented image 2) it covers pretty much any social media or blog requirements without stretching the image. Social media sites are going to automatically resize your image a lot.

Pin: 300×1000 | 500×1000 | 500×1200 | 800×1000

What size you choose for your pin will depend on how long you want it to be. These sizes are all going to be vertical oriented – which is great for Pinterest – but you may want to change between really long pins or shorter, depending on the image.

Learn more about optimizing blog images over on buffer

Screen Shot 2016-06-13 at 9.39.35 AM

Once you have your 2 blank images, you can start editing.

3. Arranging the tabs for easy editing

See in the image above how all my blog images are in separate tabs? That makes them harder to edit quickly, so I always take a second to arrange them so I can see them all at the same time.

Go to Window >>> Arrange >>> Then choose how you want the images to show up.

I like 3-up Stacked

Screen Shot 2016-06-13 at 9.40.35 AM

Now you can zoom out in each little window until you see each photo in it’s entirety.

Screen Shot 2016-06-13 at 9.41.00 AM

Screen Shot 2016-06-13 at 9.41.18 AM

4. Making your blog post’s featured image

  1. Make sure the background image tab is active by clicking on it.
  2. Click and drag the background image over to the featured image space

Screen Shot 2016-06-13 at 9.42.11 AM

Notice how much bigger the background photo is in the featured image tab? We want that – that’s why we choose a background image that’s big – bigger than our featured and pin templates.

Now you can leave it as is, move it around to create a different look, or resize it.

Resizing

Make sure that the background image layer is selected in your layers tab.

Screen Shot 2016-06-13 at 9.42.36 AM

Go to Edit >>> Transform >>> Scale

Screen Shot 2016-06-13 at 9.42.55 AM

  • A resizing box will appear around the background image layer.
  • Hold down Shift to make sure the image doesn’t distort when you scale it.
  • Click and hold a corner and drag it inward to make the image smaller.

Screen Shot 2016-06-13 at 9.43.24 AM

Once you’ve scaled it down as far as you want, press enter.

Screen Shot 2016-06-13 at 9.44.05 AM
Same background image, I just resized and moved it over so you can’t see the watch.

5. Adding text

Some bloggers like to use text in their featured images, some don’t. It can depend a lot on your theme. Some themes (like TechYourBlog’s current theme) place the title over the featured image automatically, so adding text doesn’t work so well.

Once you have the background image the way you want it, all you need to do is add your text (if you want text in a featured image) and save!

Screen Shot 2016-06-13 at 9.48.18 AM

6. Rinse and repeat with the pinterest image

You’re going to go through the exact same process with your pinterest image. Text actually is required for this one, or there’d be no point in making it!

  1. Drag the background image over to the pin template.
  2. Resize it and move it around until you like it.
  3. Add text.

Screen Shot 2016-06-13 at 9.55.41 AMThat’s it! Just save your new blog post pictures as jpeg (or jpg – same thing) then save your new featured post and pinterest pin templates as PSD files so you can just open and reuse them with a different background image and different text.

I hope you guys like this tutorial! If you think it might be helpful to others, please share it around, I really appreciate it!
Shares keep this blog alive...Share on StumbleUpon0Tweet about this on Twitter5Pin on Pinterest8Share on Facebook0Share on Google+0Share on LinkedIn0

About the author

TYB

A sarcastic introvert with a blogging compulsion and a tendency to pet ALL THE DOGS.
Problem-solver, critical thinker, tech-enthusiast, occasional artist, very-expensive-piece-of-paper-holder (aka my Psychology degree.)
Fan of chai tea, hard cider, and new places.

View all posts
  • Love this, thanks girl! Since I’ve been considering switching over to self-hosted WordPress, I’ve been thinking a lot more about how I need to use photos that I won’t get sued for using, haha. Which is kind of tough with a pop culture blog, but I’ll figure it out:P What’s your opinion on using gifs? I read conflicting things online about their legality:/

    • Hey Ashlee! I don’t know about gifs. They’re used all over the place – including being integrated with Twitter and Facebook… So it seems like there’s a certain amount of accepted use? But I haven’t looked into it much. There’s also fair use for pop culture stuff – like reviews and commentary, as long as whatever you’re doing doesn’t interfere with the copyright holder’s ability to make a profit, but the law seems kinda murky. Taking pics of products yourself is seems to be pretty much always ok, especially if you own the product. You seem like you’re doing pretty good so far though 🙂

      • Thanks friend! Yeah, it definitely seems like gifs are generally lawsuit-free. The fair-use stuff with copyright images always kind of confuses me, but your explanation helps:) I do want to take more of my images on my own though, just to be safe!