Using great photography in a design can really push it that extra level, especially when one of your clients commissions a photography shoot specifically for your use.
Unfortunately, working with tight deadlines and limited budgets, this is most often not the case – and we generally find ourselves turning to stock photography sites instead.
When discussing the various online stock photography libraries available, most would be familiar with iStockPhoto. Apart from its less than perfect interface, it provides a useful catalogue of more than 5.5 million reasonably priced stock files. For this reason, it has become a popular source of images amongst many designers & a suitable solution for many of our clients.
Personally, I find iStock has one of the better libraries of good photos available online, and tend to prefer them over other low-priced stock libraries – although I also find it has a lot of flaws. One of the biggest gripes I have with iStock is the tiny image comps that are provided for download – unless you’re designing at the resolution fit for the iPhone, it is almost impossible to use one of these images at a decent size in a concept mock. You could always purchase each image – but if they aren’t suitable, you may quickly find yourself eating away at your limited project budget.
Another alternative, that I’ve often been guilty of, is stitching several zoomed previews together. The downside though – its messy, time consuming and for some reason, I always feel a little dirty afterwards.
That was until I found Greasemonkey. Greasemonkey, an extension for Firefox, makes it possible for you to ‘customize the way websites look and function’ essentially allowing you to change the style and scripts for a specific page to your liking. There is a huge library of greasemonkey scripts available for download at the extension’s website, ranging from style changing of the youtube video player to displaying ebay item locations on google maps.
With this knowledge, and awesome tool in hand, I made a reasonable assumption that the iStock image zoom feature (when logged in) was in fact using full high-res images, although only displaying part of the image in the ‘zoom area’. Based on this assumption, and some playing around with another great Firefox extension, Firebug, I was able to change the stylesheet enough so that the zoom area became much larger, big enough to show the full high res preview image. As soon as I realised I could change the stylesheet, I set upon using my very basic knowledge of javascript to build my own Greasemonkey script.
The outcome – a (very basic) script that allows you to preview iStock images at their full zoom resolutions.
To get this up and running for yourself, all you need to do is install the greasemonkey extension for firefox, and click here to install my script.
Once its all been installed, login to your iStock account and find an image. Once the page for that image has loaded, click on the image as if you were going to zoom, and ta-da! You should have your larger comp on the screen, ready to be used in your next mock-up.
As mentioned, the script is very basic, and only provides the functionality of viewing the full image. I’d encourage anyone keen enough to play with it as they wish.
*On a legal note – I accept no responsibility for people using this script to avoid paying for images – the script is provided for composition purposes only. The images are heavily watermarked, and unless you want your next design to end up on photoshop disasters, please respect the iStock community and pay for those images that do end up in production.
Hope you enjoy.
Nice script,
I really agree using the possibilities of istock but I hate the use of dirty enlarged images in your mockup. I generally opened istock in IE (the only time I use IE) and zoomed every part of the image and dragged it into photoshop. Then I positioned them in the right places and merged my layers.
So you can imagine how this script will help me…
Thanks
Awesome script – I’ve been trying to find a way of doing this for a while now.
Very nice script, thanks a lot. Istock is pretty much my home for stock photography and this add on has made a huge difference, nothing worse than etching a pixelated stock image!
ah…. at last.. freedom from rez-up!
thaaaaaaaaaaaaaaank you!!!!! it’s just amazing!
Brilliant. I’m going to use this. No more hacked & stitched comp images.
Nice work, Jay. Finally something on the interwebs that proves ridiculously useful.
Beautiful. Major problem-solver for us designers. Thanks for sharing! We use iStock exclusively for our work, so this is an enormous help.
Jay, Thanks for sharing and nicely done! This is something I’ve always hated dealing with, much better than stretching the tiny comp istock provides and leaps ahead of stitching different zooms together. This totally saves a time suck. gotta love greasemonkey!
Apparently the script no longer works since firefox updated to v3.6 any chance a new version of grease monkey that works with 3.6? great addon btw
you are my hero.
Oh. Yeah.
THANKS!!!
Yep, script seems broken now. Waaaaah.
@Paul, @Cynthia – the script seems to still be working fine for me – what Firefox version / OS are you using?
Hi Jay,
thank you for this script. Works like a charme.
B-rrrilliant! God bless you Jay.
This is going to save me (as well as a lot of designers out there) a lot of time!
I’ve always been a fan of iStock for stock photography. Will be trying greasemonkey and see if it works for me. thanks!
This script is awesome. Now, if I want a nice preview for a client with large picture background (for example) I do this:
1. switch to fullscreen (F11)
2. printscreen the enlarged versions so that I have everything
3. assamble and crop the images to make a single layer
4. switch to quick mask mode
5. paste a pattern of the watermark (with a safety margin)
6. switch back to load the selection
7. Content-aware fill and …
Voila!
I have a big preview image without watermark and with only a few visible minor errors.
BTW, If you dont have the CS5 (or later) and therefor the content-aware fill, it is possible to use the patch tool with similar results.
You can have the pattern here: http://storage.tomasreichmann.cz/istockphoto-watermark-mask.pat
{ You might need to resize the pattern if so just use a layer with pattern fill, rasterize and paste into quickmask }
I always buy the picture in the end but during mock up it might be these extra 5 minutes that persuade the client without having to buy the picture you might end up not using.
Can’t get the script to work with their new website.
Hi Miko,
It’s seems to be working for me still – can I ask what browser/OS you are using?
Cheers,
Jay
Jay,
I didn’t think it was working either. But I signed in, and BAM! Like a charm.
Thank you, by the way! I’ve loved this script for a while now. keep up the great work!
Sandoer