Posts Tagged ‘Gimp’

There are loads of free tools for the online journalist, as we all know. One of my favorites, which has been around for awhile, is Gimp (for editing images).

gimpI’ve probably edited hundreds of images using Gimp (including transparent images for customized icons displayed on Google Maps and Simile timelines).

For my students: The design of the WordPress theme we’re using, Arras, relies on a very horizontal “thumbnail” to accompany each post. Your homework, DUE BY END OF DAY NEXT TUESDAY, is to create this thumbnail, which will automatically appear on the home page of our site along with a headline from your post. You can see what I’m talking about on the site. If you didn’t do the original homework assignment from two weeks ago (creating your first hyperlocal post for our class site) nor try to make it up during last week’s homework assignment, you won’t be able to do this week’s homework (so start thinking about extra credit projects to make up for that).

Also, as a reminder to my students, bring an audio recorder and a well-developed idea to pitch for your next hyperlocal post to next week’s class (that’s Oct. 13).

Now, back to this week’s homework: Create an image that, at a minimum, is 632 pixels wide and 251 pixels tall, at 72 dpi. The image size can be bigger than that, and at a different proportion, but the theme will auto crop to make it fit, which sometimes works well and sometimes creates an awkward picture.

So how do you go about resizing/cropping an image for this exercise? You can use Photoshop, which is installed on the lab computers. A basic tutorial on how to use Photoshop to resize an image is here; a separate tutorial for using Photoshop to crop an image is here. If you choose the Photoshop route, skip the Gimp section and go to the WordPress tutorial at the bottom of this post when you’re done editing the image.

If you choose to use Gimp (which I like) to edit your photos, you can follow the tutorial below that I put together. Gimp is not as powerful a program as Photoshop, but it’s totally free and does the trick for most basic needs.

Gimp tutorial on resizing/cropping images

For a basic tutorial on sizing and cropping an image in Gimp for the purposes of the hyperlocal.sfsu.edu/j395 site, follow these steps:

1. Open up your image in Gimp (File/Open/(select your image)

2. Check the size of your existing image (Image/Scale Image).

If your image is too small, that is, not at least 632 pixels wide or 251 pixels tall, you can do one of two things: enlarge the image by typing in either “632” for width OR “251” for height (the image will resize proportionally). The downside of doing this is if you enlarge the image too much, the sharpness of the image will noticeably diminish. The second option is to find another (bigger) image to use.

gimp-cropIf your image is too big, that is, bigger than 632 pixels wide or 251 pixels tall, you can do one of three things: shrink the entire image by typing in a smaller number in the width or height box. You could also crop the image to the appropriate size using the rectangular tool in the Toolbox window (see image — it’s the rectangle in the upper left corner of the Toolbox). After selecting the tool, draw a rectangle around the portion of the image you want to keep, then choose Image/Crop to selection.

Or, you could leave the image alone and let the WordPress Arras theme auto crop it (a bit risky, but it might not be so bad).

One more thing: In the “Scale Image” box, the x and y resolutions should be 72 pixels.

gimp-save3. Finally, once you’re happy with what you’ve done, save the image (File/Save as). Keep or change the name, make sure you’re saving it to the right location (desktop is fine) and make sure you’re saving it as a jpg (or jpeg) file type. You shouldn’t typically have to worry about the file type if the original image was a jpg. If you’re not sure, just click on the “select file type” option in the “Save image” window (see accompanying image) and choose “jpg.”

Now, to WordPress

Now that you have the large thumbnail ready, you’ll want to add it to your WordPress post (NOTE: You can also use this large thumbnail as an image that appears directly in your individual post; it can do double duty, if you so choose).

wp-upload1. Open your post in the edit mode in WordPress. Upload the image by clicking on the box right next to “upload/insert” (see image). Select the image you want to upload.

wp-upload022. Copy and paste the URL generated after the image has uploaded — it’s called the “Link URL” (click the thumbnail to the left for a large screen shot). In this step, you also have the option of inserting the same image into your post (choose the alignment and the size, then click on “insert into post”).

3. Go back to your post in edit mode and scroll down and “add custom field.” If you click in that window, you should get a drop-down menu that includes “thumb” — choose that. In the field to the right of that, paste the “Link URL” that you had saved. Then click the button “add custom field.” Publish or update the post and see if the large thumbnail shows up on the  home page. (Click the screen shot below for larger view.)



Read Full Post »