ShowHN:(my weekend hack): SafariShot: Screenshots like it's running on a mac

http://ksat.me/safarishot-your-webpage-on-safari-on-osx/

by ksat • 14 years ago

6 15 14 years ago

ksat6• 14 years ago

Hi OP Here: Safarishot is a Js tool that will wrap your screenshots (taken on any os) in a nice safari window running on a mac.

brittohalloran• 14 years ago

add the ability to go grab the screenshot (just give it the url) and you've got a winner

ksat6• 14 years ago

:), thanks, that'll cost server resource. I don't know if I can run it for free. I'll try though

sleveless• 14 years ago

Neat idea. But cannot save my image on chrome

ksat6• 14 years ago

Hi. Thanks. Yeah noticed that too. Seems like bug in chrome? Can you try on firefox. That's the one where everything seems to be working just fine. reading localfiles, canvas and save image.

pirateking2• 14 years ago

The reason Safari screenshots may be considered more "professional" looking may also be the reason it is my preferred browser - the interface chrome is minimal and monochrome, making it easier for me to focus on the content.

ksat6• 14 years ago

Yeah thats true. But frankly I never got why practically "everybody" takes their screenshots on a mac - It's almost like I've to go buy a mac just to take the screenshots and do my screencasts.

P.s: I did buy a mac last year.

ThomPete• 14 years ago

One of the reasons is that type looks much better on a mac.

pirateking2• 14 years ago

The developers may actually be using Linux/Windows, but the designers have quite a bit of influence if they control the final presentation of the product to the user. The bias towards Mac screenshots could be due to designers typically using Macs (a stereotype that has proven to be true more often than not from my experience).

roryokane2• 14 years ago

Even though the intent is to make the screenshot look more professional, there is a flaw that makes the result look unprofessional. The flaw is that the text in the title bar and the location bar isn't rendered as it would be on a Mac. See the difference in this reference screenshot I found: http://macamour.com/blog/wp-content/uploads/2008/06/safari4_....

Here are the problems with the text rendering that I could spot:

• The current text has too much hinting and not enough anti-aliasing. Use different font smoothing settings in whatever code you're using to overlay the text.

• The font appears to be Aktiv Grotesk, but should be Lucida Grande.

• The baseline of the URL text is not aligned with the baseline of "Google" in the search bar.

On the other hand, the light-gray-shadow embedding effect of the title looks good.

As a side note, the explanatory text has very many small grammar and capitalization errors. Getting the text revised by a friend might help. But it's not too bad, because the controls are really all you need to use the site, and the controls are explained pretty clearly.

Also, I like the fact that you give default values for everything, so you can see exactly how the app works without digging around for an image.

ksat6• 14 years ago

* I'll see what I can do. * I am using Lucida Grande, but it needs to be installed on the machine. * Should I move it down like 2 pixles? Seems fine on my machine though

Thanks for the feedback. I am not english native - ran the blog through a online-grammer-checker something and it said everything is fine :)

veemjeem• 14 years ago

Would the average person who prefers "professional" screenshots be able to tell the difference between Aktiv Grotesk and Lucida Grande? You have a sharp eye, but I would think 99.9% of the population looking at these screenshots would not complain about Aktiv Grotesk.

roryokane2• 14 years ago

Actually, from looking at the generated image, I was only able to tell that the font looked vaguely "wrong". I found out it was specifically Aktiv Grotesk only by going through many steps on Identifont: http://www.identifont.com/identify?22+%20+9J+39+1R6+26RB+4PW....

But still, I agree that most people would probably not notice the font being off at all. And the font smoothing difference jumps out at me the most; if the use of Aktiv Grotesk was the only difference from real Safari, I might not have noticed anything.

ksat6• 14 years ago

Why was this article removed from HN home page?

ShowHN:(my weekend hack): SafariShot: Screenshots like it's running on a mac

Related Stories