Home » Featured, How-To

How to Resize and Crop Images Online

28 June 2009 2,909 views No Comment

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Photo editing software can be ridiculously expensive and oftentimes intimidating for folks who are new to the web. However, as the web is a visual medium, the true key to capturing and engaging your audience is an aesthetically appealing website. So, if you’re not a graphic designer, an illustrator or a photographer — what do you do to make a visually appealing website? And how do you make the images you do find look good?

Luckily, you’re not alone in this — and as demand begets supply, there are myriad options out there for finding free photos. But let’s talk about what FREE means before we get too far along in this.

Types of Free Images

  • Royalty Free: Not actually free. But there is no per-use charge. Meaning, you can print 500 shirts with this image if you like, but you do have to pay for its original licensing. Pricing varies greatly.
  • Creative Commons: Free images. Generally of a lesser quality, but – hey – it’s free! Generally involves an Attribution License — which requires that you somehow credit the original artist on the work itself.
  • For Royalty Free Images of a high quality, I recommend Istockphoto.com — their system is easy to use, it’s credit-based, so you can spend less for smaller images vs. larger ones, and there are tons of photos.

    For Creative Commons images, Flickr has a great resource here.

    Do not, under any circumstances, simply do a google image search and toss the photos up online. Most images are protected under copyright law and it’s a good way to get someone mad at you. ;)

    So — now that you have the images, how do you size them correctly?

    I recommend FotoFlexer. It’s a powerful, free online image editor. Doesn’t require any downloads, works with all browsers and operating systems, and it’s one of the less cumbersome that I’ve seen.

    So let’s go through a little resizing project, step-by-step.

    For this example, let’s use this one –

    http://s3.amazonaws.com/estock/fspid11/81/71/02/neon-burbank-tolucalake-817102-o.jpg

    I got it from Flickr’s Creative Commons section.

    First, download this image and save it to your hard drive where you can find it. (right-click over the image and save) Then go to fotoflexer.com.

    Click ‘Upload Photo” on the right-hand side.

    Find the image on your hard drive and upload it.

    Let’s say that, for this exercise, we want our image to be 600 pixels wide by 250 pixels tall.

    Click to go fullscreen, as this will make things a little easier.

    Click the Resize button.

    Make sure the “Keep Proportions” button is checked and change the width to 600, then hit Apply.

    Once back on the main screen, click the Crop button.

    Make a rectangular shape on the image. You will see little measurements as you drag the edges to change the size of the window.

    Stretch the sides until it’s at 600pixels wide, and then use the top and bottom sliders to isolate an area of the picture you want that is 250 pixels tall.

    Once satisfied, hit ‘crop selected area’

    Play around with any of the other settings you like, and when you’re ready, click Save and save it as a .JPG.

    Done! Easy as that. you now have a free, legal-to-use image that’s the right size for your website!

    Upload it to your site, add the photo credit, and go!

    1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
    Loading ... Loading ...

    Leave your response!

    Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

    Be nice. Keep it clean. Stay on topic. No spam.

    You can use these tags:
    <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.