Photo Editing Tips

Photo Editing Tips & Tricks for Bloggers
- The Ultimate Guide

As a blogger, you use images and photos every day to publish your content.

How do you edit your photos and images?

There are a lot of complicated tutorials online using sophisticated (and expensive) tools.

Don't you wish there is a simple summary of the key things you need to know as a blogger?

That's what I'll cover in this guide below.

Contents

Fundamentals

Image Editing Tools

Free Image Resources

Image Editing Tips and Tricks

  • ​Resizing
  • Adding Filters
  • Cropping
  • Remove Background
  • Add Transparent Overlay

Creating Images for Social Media

Reducing the Size of Your Images

Image Sizes, Colors & Image Types

Enter your text here...

Image Types

There are numerous image types out there - JPG, BMP, PNG, GIF.... What should you use?

They all serve different purposes, but let me simplify it for you.

In particular, there are 2 that you should know especially, namely JPG & PNG. When editing photos and images, you will export your image in either of the 2 image types.

So what's the difference and how do you choose?

JPG (or JPEG)

Most of the images you come across on the web uses JPG. And in most instances indeed, JPG is a great format for photographs, and other realistic images.

PNG

PNG is best used for logos, icons, text and drawings.​
PNG also has the benefit of transparency - hence ideal for a logo.

Example of an icon with a colored background. Note that only the PNG version retains the transparency.

Image Dimension

An image's dimension is measured in "pixels".

A pixel is a unit measurement of an image. With every 2 dimension image, there's a Length and a Breadth.

It's easier to under "pixels" relative to one another.

For instance, an iPhone 6 has dimensions of 

Let's Talk about Colors

With colors, you'll also get into various versions of how colors are used. (They can be easily converted from one format to another). The most common versions are HEX and RGB, which is probably the only 2 formats you need to know.

HEX (#)

HEX stands for Hexadecimal, and is the format used on the web

A HEX value looks like this as an example:
#FEFEFE

RGB

RGB stands for Red, Green, Blue. This is the format used typically by desktop software.

An RGB value looks like this:
Red: 254, Green: 254, Blue: 254

In most cases, as you work on images on the internet versus on your computer image editing software, you may need to convert them from one format to another.

For example, selecting a color with a WordPress plugin (notice the #8300e9):

For example, selecting colors on your desktop software, like powerpoint (notice the Red, Green, Blue):

Color Picker

My favorite way to find out the HEX value of a color of an image on the internet, is to install and use this great Google Chrome extension -> ColorZilla.

Font Picker

​There's not too much to talk about fonts, except for the fact that I like to find out what fonts other websites are using.

Here's a great tool (a Google Chrome extension) that you can install to check out what font a page is using. - What's the Font

After you install the extension, simple go to a webpage, highlight a font, right click, and select "What's the Font?"

A resulting font name will be shown to you. How cool is that!

If you're interested to learn more about font pairings, here is a detailed guide for you.

Best Image Editing Tools

When editing images, most people have their preferred toolkit.

Mine are based on Price, Ease of Use, and Power (in that order). Here's the 3 that I lean on for all my tasks:

Canva

Canva is a revolution. It's free to use, entirely web-based, and is a blogger's best friend. I'll go as far as to say if you're not using Canva, you're really hurting yourself.

Pixlr

Pixlr provides 2 free, web-based image editing tools. 

Pixlr Express allows you to make quick edits to a single photo.

Pixlr Editor is an advanced tool, more like Photoshop.

Pixelmator (Mac only)

Everyone needs a "powerful" image editor at times. Pixelmator is my choice - powerful to use, affordable alternative to Photoshop. There's a learning curve though, which you can pick up in their tutorials.

As a runner up, there's also Gimp. It's free, open source, and available on Windows, Mac. I don't personally use it, but it's worth a shot.

Canva is a fantastic web-based tool, that let's you edit photos and images for blogging purposes, in the simplest way imaginable. It's much more than photo editing, in that it allows you to create beautiful web graphics for blogging, social media rapidly.

Pixlr Express is a very easy to use, free, web-based tool to edit your images, including resizing, adding filters etc.

Where to Find Free Image Resources

The thing about images and photos, is that they have ownership rights attached to it.

The original photos that you take are yours to use, of course.

But this does not apply to the majority of the photos you find online - you may infringe on copyright if you use them.

Which leads me to keep a depository of sites that makes great stock photos for anyone to use. The list below are completely free to use in any way, for both commercial and non-commercial purposes.

Basic Image Editing Tricks

In this section, I'll highlight some of the basic image editing tricks you can employ to manage your images.

How to Resize Your Image

In Windows:

The quickest way to resize an image in Windows is to use "Paint". It comes inbuilt with Windows.

Right click your image > click "edit"

On a Mac:

The easiest way to resize an image is to use "Preview".

Double click on the image to open the image with Preview.

Click Tools -> Adjust Size

In Pixlr:

If you find using desktop software a hassle, you can also resize images using Pixlr Express.

How to Add Filters to Your Photo

In Pixlr:

Enter your text here...

In Canva:

Enter your text here...

Other Tools...

You can obviously use your mobile phone or tablet to add filters to your photo (example):

Enter your text here...

How to Crop Your Image

In Windows, you can use Paint. But for some reason, it's a real hassle to crop an image with Paint in Windows. So I prefer to use Pixlr Express instead.

In Pixlr Express:

Select Adjustment -> Crop

On a Mac:

It's quite a bit easier on the Mac, using Preview.

How to Remove a Background Image

In Pixelmator:

Enter your text here...

How to Add a Transparent Overlay

Enter your text here...

In Canva:

Enter your text here...

In Pixelmator:

Enter your text here...

How to Pair Colors

It's a real art and skill to pick good colors. Some designers have really good eye for colors.

For the rest of us, we can rely on the Adobe Color Wheel.

You simply choose a base color, by entering the HEX or RGB values...

Then you select the color rules, e.g. Complementary, Monochromatic etc.. and Adobe Color Wheel will churn out professional color pairings for you!

How to Pair Fonts

Enter your text here...

Enter your text here...

How to Annotate on Images

I'm sure you've also come across other bloggers annotating images like the below:

One of the easiest tools to use (and it's free), is to use Skitch.

How to Create Images for Social Media

Canva is a special tool that's really great for creating images specially for social media sharing.

It takes just a few clicks to select the post you want to create (Twitter, Pinterest, Facebook Post, Instagram and more...), then you can customize ready made templates to make your image creation a breeze!​

This video below will show you how easy it is to create social media posts with Canva!

How to Reduce or Compress Your Image Sizes for the Web

Images & photos with large sizes take a long time to load on your visitors' computers/tablets/smartphones.

Even worse, if it takes too long, they'll leave your website entirely and never return.

While "resizing" the dimensions of your photo or image does result in a decrease in file size, there is a much better way to "optimize" the images, while retaining the dimensions.

For this, I use TinyPNG.

Just visit the site, and drag and drop your images onto the page to optimize them.​

If you're using WordPress for your site, you can also install Tiny Compress Images. It's made and powered by TinyPNG. I don't use the plugin (prefer to still do it through the website), but the ratings are good, so give it a try!

Enjoyed This Guide?

I hope you enjoyed this guide and it was helpful for you when using images for your website or blog.

If you did, do share this resource so others can benefit from it, by either:

1. Sharing this on your favorite social network

2. Linking to this page on your site/blog's resources page or sidebar

If you like, here are some images to brighten things up:

Thanks for sharing!!

- Ray Tan