inTandem Mobile MenuinTandem Home




Wednesday, January 8, 2014

Image Editing with Picmonkey

Categories: Web Design, Creativity, How To

One of the most common problems my clients are facing is the resizing of their images to best fit into their websites. Whereas we can automate a certain part of the process within the content management system's code, to retain complete control over the exact area of an image that will end up on the website you should take the editing task into your own hands. And the free online image editor at is the perfect tool to get the job done in no time!

In it's original incarnation, the people behind PicMonkey had a free online image editor called Picnik and here at inTandem we were huge fans! Then Picnik got sold off to Google to provide the image editing functionality within Google+. Great news if you have a Google+ account but of no use if you don't. And I was looking for a free editing tool for my clients without any extra conditions. Then, 6 months later the original Picnik guys came out with PicMonkey - way better than the first editor and definitely way better than the Google+ offering.

So unless you have some fantastic image editing software on your own computer, I would highly recommend you have a play with PicMonkey. And your kids will have great fun with it too as it offers not only the standard editing functions but also plenty of fun features with seasonal extras. There is a premium account option at $33 (correct at time of publication) that gives you a bunch of extra features, more fonts etc. but for all of your basic image cropping, resizing and touching up needs the free version is more than enough (but if you fancy taking a few pounds off in your holiday snaps, would like to reduce a few wrinkles or give your images a craft-scissor style edge, then the premium account may be worth the investment!).

Cropping vs Resizing

One of the most common mistakes people make when sizing up images for their websites is simply resizing an image to the dimensions they have been given for a particular image placeholder. This often results in stretched and skewed images that simply don't look right as in many cases image place holders will not be in the same width:height proportions as standard photo dimensions but rather are set to fit in with a beautiful website layout (just think of narrow banner slideshows that are so popular at the top of web pages).

For example, below we have a pretty photo of the wonderful Ben Bulben mountain here in Sligo. In the original on the left, its dimensions are 300 x 450 pixels. If you try to fit this into an image placeholder at 280 x 300 pixels and simply resize it to these dimensions, our mountain will look rather flatter than usual and you certainly can recognise immediately that something is a bit off. You might think that nobody will notice but it's like pretending that a face full of Botox looks natural ... You just know it's not right!

Ben Bulben, Sligo


This is where cropping comes in. A little while ago I recorded a short tutorial video to show my clients how to use cropping in combination with resizing to produce the perfect web image for their sites!

And here is our Ben Bulben image in all its glory, properly resized and cropped:

Share this article:

Comments (0)

Add a Comment

Allowed tags: <b><i><br>Add a new comment:

Web Analytics