Using ImageWell for Blogging

ImageWell, as openedIf you’ve got a Mac, you’re in for a treat. I’m going to share with you the best tool in my arsenal for adjusting images from a camera or from iStockphoto (they have a free image of the week that is usually 5-12MB in size): ImageWell. For only $20, you get every basic feature for editing an image for your blog that you could possibly need, plus a bunch of easy-access and easy-save features that will knock your socks off if you live in a climate that wears socks.

Starting With the Basics

Your blog obviously has a width set for the content area, and for most sites, this is between 450 and 650 pixels (px) wide. This site, as it is at this moment is using a 640px content area, so I have several WordPress media settings set to create appropriate thumbnail and full-width sizes of my images based on that width. Many of us use a lightbox plugin that enlarges the image when it’s clicked, so the maximum size you want that to go is the size of a laptop screen for those on the go, limiting the largest image you need to be 900px wide or 600px high, whichever is comes first. It does you no good to have a 100px tall image that is 1800px wide on a 13″ laptop. So, what are you supposed to do if you have an image that is too big?

Enter, ImageWell

I discovered this about a week after I got my first Mac: a 6 yr-old, 12″ MacBook running OS X 10.4, rather poorly. I got it used and it clearly needed a lightweight program for image editing rather than trying to run Photoshop Elements on it. Looking at the capture above, you can see how simple the window is, and that’s about it, but it’s so powerful in little ways.

  • Dialog boxYou can open images nearly too many ways. There is the drag and drop method of dragging a file from Finder to either the ImageWell icon in the Dock or to the image area of the program itself. You can also Control-click the image area to bring up a dialog box with even more options that make Windows users jealous.
  • You can change the image dimensions, compression, file name, file type, save location, watermarks, and orientation all from the main window. This makes for very rapid image processing, especially when you’re creating a gallery. The screenshot of a gallery of our vacation photos here were all later re-sized (and watermarked) using the method described below in just a couple of minutes.

A gallery with watermarks

Steps for Resizing

  1. Get the image into ImageWell. I usually drag and drop them because I have Finder open at the bottom of my screen.
  2. Enter a new height or width based on the orientation of the image. Since this is landscape, I choose 900px wide.
  3. Rename the file up at the top and select a location to save it to just below the image. I chose my blog folder on Dropbox. I’ll explain how to set those up in a bit.
  4. Sometimes with camera images, you need to rotate the image and re-save it, which is done on the More tab, and you can see Watermark is just to the left of that with watermark options.
  5. Every now and then, you’ll want to crop an image or adjust the brightness or contrast, right? Then click Edit at the bottom left for a new screen with those abilities. See the crop tool in the upper right? Click the ImageWell icon on the far left to return to the normal view.
  6. Edit screen

  7. Click the Send button to save the image to the location you have selected from the pull-down list (explained below).

Locations dialog boxIf you click Locations on the main screen, you can add all sorts of save-to spots for one-click saving to a folder, FTP, Flickr, ImageShack, or SmugMug, to name a few. While it can be handy to upload straight to FTP for certain blogging platforms, I choose not to for WordPress because it generates thumbnails when uploaded directly into a post, which also associates the files with the post for creating a gallery, as I’ve done with the four trashcan images in a row. You’ll notice that sometimes I create a folder just for a particular time of editing (p2-June is a folder in my blog folder for my vacation photos) because I can easily remove them with the minus button at any time the list gets too long to be easily functional. Click the plus button to create a new entry, select the location type on the right, and then the Location Properties area will take on the new format for the fields required for the location selected. If you selected Folder, click the little ellipses button to bring up a folder selector.

That’s all I can think of to get you started on the road to quicker, easier image re-sizing and saving on your Mac. If there is a better program out there for the money, or even more money, I haven’t seen it. I use ImageWell even when Photoshop Elements is already open because saving the image to one of my preset locations with an easy-access file name change field is faster than what I can do in Photoshop. Admittedly, cropping is faster in Photoshop, but if you’re combining a re-size, re-name, and a crop, go with ImageWell. You’ll be faster every time.

Freelance or Free Work?

One of the biggest learning curves I’ve encountered with my services-based business is how to get paid for a reasonable about of work performed. It’s very easy to go in polar opposite ends of the spectrum: charge for every little thing, including e-mails and brainstorming; and charging for 1/4 of the actual time spent on a project. Neither way will work for long and will have disastrous results for the business.

Pro-Service, not Pro-Bono

You know you’re in for a reverse sales pitch when a client says they “don’t expect you to work for free” and follows that by the word, “but.” There are plenty of people around who want and expect freelancers (especially designers) to trade their work for less than their services are worth, or even for free. Here are things to look out for and what is not acceptable to agree to:

  • Free labor expectations from non-profits or churches. Nothing in the Bible says it’s right to pressure a professional to work for free. That is their discretion if they want to offer their services as an offering.
  • Free or discounted labor because the client is an “A-lister.” You may or may not get additional work just because you did work for a major corporation or Joe Blow Blogger with 1M pageviews per day.  Feel free to offer rebates or commission if additional work does come through, but don’t get pressured into it.
  • Free or discounted labor in return for referrals based on the success of the work you did for them. Once you hand the work over, everything is out of your control. Even if you have control, that’s a miserable deal because you are slave to them to ensure your paycheck and no longer working for yourself.

Tips for a Real Win-Win

I’m still learning the ins and outs, but in the last 6 months, there have been plenty of opportunities to learn lessons and improve the way things flow. Here is a small list of what has worked for me:

  • Set a project price rather than hourly rates if you can. Account for the time you may spend in a 70/30 worst-case scenario. Make it more than an easy project with no problems, but less than a disaster. If you are going to succeed in the business, you’ll end up ahead 90% of the time and send you packing to get a job soon enough to not fool yourself longer than necessary.
  • Set a clear cut-off point for work included in the project price or other included services. For example, my projects end after two revisions after the first draft. If there are still client issues after that, then communication is an issue and it is creating unnecessary work, which will be paid for on their dime at my hourly rate.
  • It’s okay to offer a discount for publicity for your work for them, but don’t work for free, under ANY circumstances.
  • If your initial call/correspondence with them annoys, bothers, or offends you, turn down the work. With very rare exceptions, this is the best indicator you have of how the work will go. I’ve returned one person’s full payment because of this coming true and brought out one potential client’s true colors with a reasonable proposal counter-offer to cement my intuition about them.

Remember, if you’re not happy running your business, you are handicapping your success. You deserve to work under the best possible conditions, so make it so.

Check Your Browser Compatibility THEN Freak Out

Messed up in IE8Tonight I decided to check my professional sites in the “other” browsers; those being IE6/7/8. I was pretty sure Chrome was okay, but I checked it anyway. I was aghast when I saw nearly every version of them going wonkers with a web-based browser compatibility site. Not believing their stuff, I came upstairs to my PC and checked IE8 and Chrome. Sure enough! I had a crappy site. The image was on the wrong side of the text, the text was white on white, and the footer was pushed over. What the heck!?

I was fearing the worst: I totally screwed up the theme styles compatibility-wise, so I checked the theme’s demo site to be sure it displays correctly out-of-the-box. Yup, it did. So, I took the home page PHP into my fancy new (and FREE!) editor called PSPad for Windows to view it with some syntax coloring.

I started to count the number of opening <DIV> tags with the number of closing </DIV> tags in that relatively small file. It didn’t take long — 6 for 6. Since that was the easy fix shot down, I went to the stylesheet to look at my CSS. Was the image ambiguous as to its float command? Was the text also ambiguous? Nope. Had I mixed up the order of the PHP from the original? Nope. Everything was in order on the surface.

Then… WHAM! It hit me square in the eyes, like this image.

Code Whammy!The site as it was meant to beThere must have been some point where I was in the file and hit Delete when I thought the cursor was somewhere else, because there is no other reason for that closing > to have been missing. I put it back in and almost yelled when everything snapped into place like it was supposed to in EVERY browser. Of course, I have such a passionate hatred for IE6, I don’t care what it looks like there. Things lining up in IE6 is just a bonus.

Now I am fully-equipped to sell my services with a completely modified home site AND portfolio site. Both were modified heavily from the same theme designer, Jason Schuller, at Press75. The main site was from Cafe Press and the portfolio site was from Photo Graphic.

If you are interested in a professional modification of a WordPress theme, please contact me here: WordPress Customization.

The Evolution of a Twitter Background

I wanted to share my revisions of my own Twitter background at http://twitter.com/jpetersen so I’ve uploaded a gallery of my revisions.