how do you make screenshots look good?!

[pagetta]

I have been tasked with making an email flyer, and my manager wants screenshots of the software we're promoting on them. I personally think screen shots look a bit naff as they never have enough resolution to see what they are actually of (particularly on a 72 dpi screen) so in my view they are fairly un-aesthetically pleasing images that are of no use at all!

So my question is... does anyone have any ideas how to make screenshots look good, or can anyone point me to any examples of 'sexy' looking screen shots? any ideas at all would be most welcome!

thanks everyone!

[N30]

Why not have the small image linked to javascript pop up windows or new browser windows showing a larger view, just like you'd do with a normal product shot?

That's what I've done in the past & it seems to work well ;-)

[Scott Adie]

One thing that may help, and I use for how-to in-house training manuals is to use a screenshot of the entire screen you want to show then zoom in and make 'detail' screenshots of your discussion points or topics. If you have image editing software, you can vignette these images into an appealing visual reference.

[Chris]

agreed w/N30. use the thumbnail, click-here-for-larger-image approach. that's what i always do at work, anyway.

[relisoft]

one thing that i have found is that screem images resize better in some programs and also at basic increments. My preference is to use either Fireworks or Paintshop pro for this, the former being preferred. If you shrink an image like suggested above, shrink it to 75% or 50% or original size.

[tshesse]

i could show you but then i'd have to take you out ...

anyhow, what we did is chop and blow up. left side navigation ... pointless chop it out. menu on top ... chop it out. crop in the meat and blow it up to highlight it. Make 3 of these bubbles placed aestically (sp?) on page with opposite text and it should look good.

[backslash]

I develop software (Mozzle Domain Name Pro and Complete Time Tracking) and recently came across a site that had some great looking screenshots that were clear and stood out so I asked them how they did them with a view to update mine.

The site with the nice screenshots is:
http://www.araxis.com/merge/

Here is their response:
"The small thumbnail screenshots are first captured with Alt-PrintScreen, then pasted into Adobe Photoshop. For something like the two-way file comparison thumbnail, the context menu and the main window are captured separately and pasted into Photoshop on separate layers. The combined image is then scaled to about 26% of the original size (we use an 80% scaling for the "normal" size screenshots on our site), using the Image Size operation with bicubic resampling. I think I might then have applied a little sharpening, just to remove a little of the perceived blurriness that bicubic resampling usually gives. Finally, still in Photoshop, a "Drop Shadow" layer style was added to both layers, giving the shadow effect (3px distance, 5px spread, 120 degree angle, 62% opacity).

If you don't have Photoshop, I expect that you'd be able to achieve pretty similar results in an alternative graphics manipulation program such as Paint Shop Pro."

I plan to use a similar effect on my screen shots.

[marbant]

add. if you scale them down, use photoshop's built-in or NIK pro sharpening filter. makes edges look much better.

here is a sample:
http://www.celumimagine.com/screenshots/en

[rockyday]

If you can increase the screen size, having a large monitor is essential, then capture the screen shot and change the res from 72 dpi to 144 or whatever then the screen shot will get proportionally better.

[UCSI]

Hello - the best screenshot (amongst other features) software that I have found and use almost every day is SnagIt from TechSmith, http://www.techsmith.com/products/snagit/default.asp
Hope that helped!
Best - Sabine

[DrTandem1]

I think she said she wanted this for an email, so JavaScript pop-ups are probably not the answer.

Screen shots can look about as good as the original. Here is one I took of a banner on this site:

http://www.lotionlady.com/images/ss-cart.jpg

And here is one from another site:

http://www.lotionlady.com/images/ss-jar.jpg

since I'm not at my own computer and have no access to anything other than Microsoft's photo editor, I think they look okay. What do you think?

[Jabber_uk]

Photoshop CS2 has a nice in built feature called Web Photo Gallery. You could have thumbnails or icon/logo images in your email and link them to the photo gallery - We did one on this site for a customer:

http://www.haraki-bay-hotel.com/

Good luck!

[N30]

I think she said she wanted this for an email, so JavaScript pop-ups are probably not the answer.

Ok fair comment, that could get complicated but what about if pagetta linked the screenshot thumbs to a presentation page on the clients site, that would solve the problem & get the viewer onto the clients site, everybody does it ;-)

[pagetta]

DrTandem1 is right - this is for an email promotion and so pop ups would not be a good idea, as for linking thumbnails back to the site, it is a good idea but we have one main 'call to action' on our email, and don't want to diffuse the impact of this click through with other click throughs to see screenshots. They need to be part of the visuals of the actual mailer.

Thanks for some of the links there though, I will have a look through them and see what I can do - backslash that's a great link thank you :-)

[Mac 5]

I liked the screen capture method backslash described, except for the resizing to 80% with bicubic resampling. A screen capture starts out at 72 pixels/inch. If you resize it smaller with the resampling box checked, you are thowing resolution away.

I would go to the Image Size menu in Photoshop, resize to 80% and uncheck the Resample Image box. This would increase your resolution from 72 to about 90 pixels/inch.

If this was for print, I would bump the resolution up even higher, gradually in a couple steps, in the Image Size dialog box, now check the Resample Image box type in 120 pixels/inch, hit OK. Go back to Image Size dialog box, with the Resample Image box checked type in 150 pixels/inch, hit OK. Continue until the resolution is about 1.5 times the linescreen, 150 line screen printing, 225 pixels/inch. Your image will start to show some pixelizing, go to filter blur/gaussian blur move the slider until the pixelizing starts to go away. Then filter/unsharp mask to get it sharp again. If needed, touch up with other Photoshop tools.


Then continue with the sharpening, dropshadows backslash described.

[Faglork]

I liked the screen capture method backslash described, except for the resizing to 80% with bicubic resampling. A screen capture starts out at 72 pixels/inch.

Maybe. But maybe not. See
http://ask.metafilter.com/mefi/17284

[Scott Adie]

Obviously you're trying to do a good job for your firm. They ought to help you out I think!. Shouldn't they buy you the largest monitor of the highest resolution that will fit on your desk? That way you will have screen captures that should scale nicely.

I'm at work so I can't give you the details but some screen capture utilities will let you select the file type and resolution that you save your captures in. Try saving in TIF or BMP format as they don't apply the compression that JPG does and should provide a better result. Remember that JPG compression is not loss-less unless you save at the lowest compression allowed.

Since you're e-mailing anyway, I've also found that Acrobat PDF files usually look better that JPG files sent by themselves that are de-compressed by the receiver when opened. I don't know why but it's probably because of the way Acrobat creates the files.

[pete200677]

I had this problem last year, and the way i got round it was, get a jazzy monitor load the software on to it and take digital photos of the monitor, or alternatively paste the screenshot onto a photo of a monitor, then it gives you something to play with rather than just a static boring screenshot of some software

[MarcieZoob]

What has worked best for me is to Alt+PrintScreen to save the screen capture to my clipboard. Open PhotoShop and click on New to open a new canvas. Change the resolution from 72 to 150 and click OK. Now paste your image into your canvas and use your Unsharp Mask filter to clean it up, if needed. Save you file as a high-resolution JPG.