Menu

Joomla Blog

Tutorials, reviews, case studies and other tips to help website owners and website developers master the Joomla content management system.

Cropping Images

Cropping imagesWebsites need photos to give them some "warmth" and I admit that this advice falls into the "do as I say, not as I do" category. Our site could certainly use more images and this is on our ever-expanding list. At some stage you'll be called on to insert an image into a spot where it just doesn't look right. Sometimes the image really isn't appropriate. But often all that's required is some creative cropping (and possibly resizing). It's amazing what you can hide when you crop as you can see when you compare the thumbnail in this paragraph with the original below. Almost all photo editors have a crop tool so I won't recommend a specific tool. However if you are starting from scratch, I recommend reading my review of PicMonkey

Before cropping

Although I'm not going to pretend to be a photo expert, I have worked with graphic designers and some of their skills have rubbed off. There are no rules with photography and so the "after" photos below aren't necessarily better than the original. But you will learn some simple techniques you can use to enhance your Joomla content.

Remove "mistakes"

Photo before cropping

The most obvious use of the crop tool is to remove people or objects that shouldn't be in the shot. This is especially useful when celebrities get in the way. I'm sure this is what you really wanted to see:

Photo after cropping

 

Get Closer

Before cropping

One of the most common pieces of advice in photography schools is to get closer to the action. But if you didn't do that at the time of the shot, the crop tool can come to your rescue. 

After cropping

 

Rule of thirds

Photo before cropping

Hang on - I thought you said there were no rules! Yes, well but this is a good one so forgive me. There is something magical in the universe about the number three. There were three wise men, three musketeers and neapolitan ice cream just wouldn't be right with 2 or 4 flavors. And so it is with subjects in photos. Picture a picture with a three-by-three grid floating over the image. For some reason that only scientists can explain, the eye finds it more pleasing when the subject is positioned at the intersection of of the grid lines. So try to crop images in such a way that your subject is positioned at one of those points.

Photo after cropping

 

Changing the aspect

There is a trend at the moment to include a large image panel in Joomla templates. This looks terrific on the template demo site, but when it comes time to choosing an image for your site, it can be challenging to find something suitable. If you have a large photo, it might be possible to heavily crop it to fit this awkward aspect. The same principle applies to all areas, especially those pesky small module positions.

 

Cropping people

It's often okay to crop heavily, especially when space is tight such as on a summary page such as the home page or a category page. Newspapers are the best example of this as their screen real estate is limited. The example below includes several people shots where the tops of their heads and more are cropped. When you first do this, it feels wrong, but the result is fine.

Newspaper example of cropping

When editing people photos, avoid cropping at joints i.e. points of the body that bend. The above example includes an advertisement at the left. The first woman looks fine as her entire elbow is missing. But the woman to her right looks a little odd as her left arm has been cropped at the shoulder. Once again there are no rules and that's the best they could have done with the limited space available. But in general avoid cropping at joints and the worst case of this is when you crop at the neck.

If you have other examples to share or possibly examples of bad crop attempts, please leave a comment.

Rate this blog entry:
Site Administration Blues
ACL Manager Review

Related Posts

 

Comments 8

Richard Pearce on Thursday, 31 May 2012 17:59

In case you're wondering; the panoramic shot is from the headland at Long Reef Beach in Sydney. Quite a tricky golf course when there's an easterly. The saturated effect used for my girl in the tall grass was created using Instagram. Both taken on an iPhone.

0
In case you're wondering; the panoramic shot is from the headland at Long Reef Beach in Sydney. Quite a tricky golf course when there's an easterly. The saturated effect used for my girl in the tall grass was created using Instagram. Both taken on an iPhone.
Giovanni Yarabek on Thursday, 31 May 2012 21:05

BRILLIANT Advice. Nice and concise. 31 year veteran in all things graphic design, and you summed this lesson up very well. The recent trend (for perhaps 8 years now) is to crop faces very close. And the rule of thirds still applies ... the eyes should fall on those imaginary vertical lines you reference above. (as one example). -- Perhaps next speak about color ... adjusting color ... as the 2nd and 3rd image examples could benefit from some lightening.

0
[b]BRILLIANT Advice[/b]. Nice and concise. 31 year veteran in all things graphic design, and you summed this lesson up very well. The recent trend (for perhaps 8 years now) is to crop faces very close. And the rule of thirds still applies ... the eyes should fall on those imaginary vertical lines you reference above. (as one example). -- Perhaps next speak about color ... adjusting color ... as the 2nd and 3rd image examples could benefit from some lightening.
Richard Pearce on Friday, 01 June 2012 05:11

Thanks. As I am not a designer, I was hesitant to give this advice. But these are the sorts of "mistakes" I see on a lot of Joomla websites.

0
Thanks. As I am not a designer, I was hesitant to give this advice. But these are the sorts of "mistakes" I see on a lot of Joomla websites.
Guest - James on Thursday, 31 May 2012 21:18

Hey Richard, Do you live in/near Sydney?

0
Hey Richard, Do you live in/near Sydney?
Richard Pearce on Friday, 01 June 2012 05:23

Yes, I am Turramurra. And before you ask, "no" that doesn't mean I'm in an upper north-shore multi-million dollar mansion in a leafy street. Not that there's anything wrong with that, but I need to sell A LOT more videos to get to that level. :D

0
Yes, I am Turramurra. And before you ask, "no" that doesn't mean I'm in an upper north-shore multi-million dollar mansion in a leafy street. Not that there's anything wrong with that, but I need to sell A LOT more videos to get to that level. :D
Stuart on Thursday, 31 May 2012 21:21

Richard,
Great Article! This information will be handy, Since I just lanched our site I will have to train our content providers.
A question I have about images has to do with storage. Should the go into the main image folder or should all images go into a categoried folder?

Thanks Stuart

0
Richard, Great Article! This information will be handy, Since I just lanched our site I will have to train our content providers. A question I have about images has to do with storage. Should the go into the main image folder or should all images go into a categoried folder? Thanks Stuart
Richard Pearce on Friday, 01 June 2012 05:17

It's up to you. Personally I would put them somewhere inside the images folder. But you might like to create some sub-folders like 'staff', 'products', 'videos' etc. So staff photos go into /images/staff

0
It's up to you. Personally I would put them somewhere inside the images folder. But you might like to create some sub-folders like 'staff', 'products', 'videos' etc. So staff photos go into /images/staff
Robin McCamont on Friday, 01 June 2012 12:35

great article, richard! i especially liked your closing suggestion - the one about NOT cropping at the neck...! too funny! i didn't know about the 3x3 grid "rule", so thanks for sharing that tip!

0
great article, richard! i especially liked your closing suggestion - the one about NOT cropping at the neck...! too funny! i didn't know about the 3x3 grid "rule", so thanks for sharing that tip!

Free Joomla TutorialLearn Joomla for free with our 16 lesson, 2 hour course.

Get Started