My blog has been moved to ariya.ofilabs.com.

Tuesday, June 03, 2008

creating fancy screenshots with Screenie

Screenshot of SpeedCrunch composed using Screenie

There are tons of open-source projects, on SourceForge, Google Code, etc. If you check a project, most likely you see the screenshots first (don't be ashamed, to look at a screenshot is human). And there lies the problem. There is a fairly small amount of coders that are both very good at writing codes and composing good-looking screenshots.

So we had a terribly hot weekend in Oslo. Too hot to be outside the whole day. So after populating the wonderful weekend with banana brownies (I still favor the one with mango, though), fresh chocolate waffles (let's see if I can still continue the Sunday morning waffle tradition), huge delicious pizza (as usual I underestimated the size), pasta bolognese ala myself (but still can't beat the best one, so I was told), every now and then my own interpretation of alcohol-free SOTB (guess what it is. hint: a cocktail of course), and finally some of the worse sushi rolls I ever made (they got it right when they say practice makes perfect), I still have some free time. Then...

I sat down and checked again this old piece of code, Screenie, that I never had time to finish (note to self: do that more often and clean up the junk). It was a tool to compose a screenshot with some style. By style here I mean of course just copy Apple. Why? If you check e.g. Apple Keynote site, you see the proof that simple transformation and effects can make a big difference. What Screenie can do for you should be predictable: to create a screenshot like that.

Assuming you have Qt 4.4 and git, here are the steps:

git clone git://github.com/ariya/screenie.git
cd screenie && qmake && make

(Likely you need qmake-qt4 for (K)ubuntu and Debian).

Basically you have a window where you can drag-and-drop an image from Konqueror (either local file or from the Internet) and place it there. You have three spots on the screen to fill. Tweak the parameters to achieve the 3-D goodness and translucent reflection that you want. Finally right-click to save the result.

As some Apple web pages show, there are certain cases where you want two images instead of three. So use your imagination and the check boxes are at your disposal. In the following example, I just drag-and-drop the two Plasma screenshots (one, two) I have on my Flickr straight from Konqueror. Don't you agree that visually it does make a difference?

Plasma screenshot composed using Screenie

Benjamin was already playing with that. Helder was using it for SpeedCrunch. Who else wants to join the club?

17 comments:

Anonymous said...

Just tried it, it's awesome!

I'm immediately contemplating using it for a website promoting KDE. It's design a black background, though. Can I have a colorcombo for choosing the background? :-)

Anonymous said...

wow, this is a sweet tool. can you make available a windows version? i can't install qt, git and all the other stuff here @ work and the official windows-version does not seem to provide the features for this fancy "apple-look"... :-)

Shyru said...

Looks great!
What is still missing from the apple version: The shadow behind the screenshot in front. It adds more depth to whole and lets it look more 3D. Any Idea on how to add that?

peppelorum said...

Nice! One small thing, on Kubuntu you have to uninstall 'qt3-designer qt3-dev-tools' or otherwise they will interfere with the qmake and qt-designer for qt4.

Anonymous said...

WOW!! just what I need.... easy to compile and easy to use :-)

I have been making that kind of stuff with GIMP for web pages , but this saves me allot of work (and looks great), really thanks!!!

Just a notice: There is a software for Windows named screenie too.. Its only a screen capture thing.. But not that you get any problems, well here is the link: http://www.screenie.net/

Anonymous said...

what about to have this app, or something like this directly into kde? it's a must have...it's awesome :)

Ariya Hidayat said...

Thanks everyone for the comments!

@sebas: just do a git pull :-)

@Anonymous: I'm too lazy to build the Windows binary. Let's see if somebody volunteers to do that.

@Shyru: a real 3-D soft shadow requires more effort than this quick hack. But who knows...

Anonymous said...

Awesome, Ariya :)

Thanks!

Anonymous said...

Very cute!

Only problem is that when I try and save the image it's 0 bytes, which is a bit of a downer. :-(

This is with a 64-bit version of KUbuntu, don't know if that makes any difference...

Anonymous said...

If I do not specify .png as file extension my files are 0 bytes too. But if I specify the extension the image is saved correctly.

Anonymous said...

Ahh, that's got it working, thanks Fa!

Unknown said...

Great app, thanks! I'll try to post a windows binary as soon as I switch to win32 ;)

Anonymous said...

Are there any limits for the ratio of width and height for the images?
one of my images has a size 1168 x 768 px and a part of top of that images is lost.

Anyway, very nice tool. Time to add it to our kde userbase so maybe it gets more attention.

Anonymous said...

wat about for fedora users???

Unknown said...

Great idea for the initial screenshot, but I'm starting to bump into people who offer ONLY a screenie screenshot.

Big disincentive to try their app when I can't read the text in the screenshotted windows. (I'm the kind of person who likes comprehensive screenshot coverage so he can almost try the app before deciding whether or not to install it and test)

Svein said...

Just the tool I needed! I am redoing a blog and needed at tool to make my main article illustrations a little more fancy. Thank you for this very useful tool.

I wish it was possible to tilt images around the horisontal axis as well as this can be very ok for single screenshots.

Anonymous said...

Another program called "screenie":

http://pubwww.hsz-t.ch/~mgloor/screenie.html