DRÄ Studio

Pixel pushing and pencil shavings

Home Blog Projects Wallpapers Themes Fonts

Blog

Making better thumbnails

Posted on Sunday, April 20th, 2008 under Design Downloads | No comments

During a recent project, I came across the problem of creating a number image gallery thumbnails at a specific size and saving them into the appropriate folders. Sounds easy, right? There should obviously be a great third-party Mac OS X app already out there for this, right?

Apparently not. I mean, there was at one time a great app that I was using to create my thumbnails, but between Mac transfers and not needing that particular functionality, I seem to have lost track of it. I even spend a couple of hours this weekend trying out all the shareware applications that came up in my searching of Macupdate. No luck, though.

Without a dedicated tool (or even a pre-built Photoshop automation), I had to settle for creating a custom Photoshop action. The final product (which is available on my Pownce postings) is a near-perfect droplet that will nicely produce meaningful, consistent thumbnails, with a tiny footprint. The source images do need to be at least 400px to 500px wide, but the only real drawback is that the limitations of the Photoshop “Save for Web” dialog doesn’t allow for complete processing and file re-naming. That part you will need to do yourself. But don’t worry, the time saved and the output thumbnails are worth the effort.

For the sake of discussion and posterity, why not take a look at some of the elements that I found missing from any of the current thumbnail generating applications/actions:


Measurements
All of the thumbnail generators I found (and even the semi-handy Automator action) support some form of setting custom pixel values for the final produced images (i.e. 100px, 50px, etc.). The only problem is that all of them will only let you set one value, either width or height, and not both.

The reasoning behind this is an obvious one. If you set the width to 100px, it uses that as the widest possible width and will constrain the proportions of the thumbnail to scale the height according. Sure this will produce images that scaled proportionally, but if your source images aren't all the same size, instead of having a nice grid of image thumbnails, you could end up with hodge-podge of different heights or widths overall for your images.

While the obvious fix for this problem would be to process all of the source images to be either square or at least the same size and proportion, an experienced designer knows that no project ever really falls into a consistency like that. The preferable generator would be able to take any orientation an image has and produce not only a thumbnail that can be limited in one dimension (i.e. width), but also produce a thumbnail limited by both defined dimensions. If the source images happen to be non-square, the thumbnailer should have the option to use a "chip" or predefined portion of the image. The idea behind this is that instead of just proportionally shrinking the image, it will grab just a selection of the image and use that in the thumbnail instead.

This idea of a thumbnail "chip" is also beneficial in creating more visually intriuging galleries. Instead of simply having miniaturized versions of the images, grabbing just a portion of the image draws out more details and adds a bit of randomness to the gallery as a whole. There is that much more interest for the viewer to possibly bother clicking on the gallery thumbnail to view the larger version.

Compression
The biggest problem I had with the droplet created in Photoshop is related to how strained the relationship between the "Save for Web" dialog and Batch processing is. After much testing and reiterations, my choices eventually came down to either having complete automation that saved thumbnails nearly 3 times the file-size OR having to manually click through 2 of the 10 steps in the automation. Since file-size is a concern when looking for ways to optimize website performance (even on this miniscule of a scale), I opted for the click-thru workflow instead.

If Photoshop would simply address the differences in functionally and wording between their "Save As" dialog (using formats like GIF and JPG) and their "Save for Web and Devices" dialog (using the same formats), my life would be saved that much more hassle and I could take advantage of the "Override Save As" option that the Batch processing and Droplet creation offers.

File naming
The other main issue I had with the creation of thumbnails is really only a result of having to settle for using only half of my desired Action workflow (because of the afore mentioned 'Save for Web' issue). Otherwise, most third-party thumbnail apps provide plenty of options for saving thumbnails into subsequent directories or prefixing/suffixing the file name according. Really, I would even settle for Apple releasing an updated Automator action that adds in a couple more of those kind of options. Their pre-installed action is super limited, albeit quite functional.

Those are the majority of concerns/grips I fell upon during this project. If you happen to know of a better tool out there or happen to be some kind of Action savant that can provide some workflow insight, don't hesitate. I plan on making plenty of more thumbnails in the future and could always use the extra minutes back of my life.

Related Posts:

Template for customizing the new Twitter
With the recent release of the new and updated Twitter, the majority of tweak-able profile design settings were lost and the twitterpated among us have been relegated to only changing the following:Background imageBackground colorLink colorText colorSidebar colorSidebar line colorThat isn’t much to work with, so I decided that with the recent re-styling of my ...
Headular Plethora
Here is the inked-over page of a head and face study I did today. With each model, I sought to not only portray different face shapes with differing features, but also to convey a certain emotion using the mouth and eyebrows. (Click the thumbnail to view the larger image). ...
How to customize form elements like Apple
or maybe an even better question: Should I customize my form elements like Apple? Let me explain.The DilemmaUp until recently, I haven’t really worked too directly with the <form> elements, but when finding that I needed to add more screen sizes for the Desktop section of my page on this site (as well ...
Illustration Friday : Tea
Here is my submission for Illustration Friday this week ... and who do you know that would more enjoy a good cup o' tea than this here guy? Hmm? Again, I have finally discovered a happy medium in working with Photoshop as my primary coloring device. I still drool when I think about how much I ...
Corporate Identities
While watching one of my recent favorite podcasts, command N, I followed a link to this site, which contains this fantastic collection of corporate identies ... and not just images of their logos, but full descriptions, creative teams, Pantone colors, and typefaces. Exhaustive in its information, this site is a great way to spend a ...

Write a comment

Your e-mail address is never published nor shared. Required fields are marked *

*

*

:

:

 

Back to Top