6 ms·

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

6 points by ksat 14y ago

ksat 14y 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 14y ago
  add the ability to go grab the screenshot (just give it the url) and you've got a winner
  - ksat 14y ago
    :), thanks, that'll cost server resource. I don't know if I can run it for free. I'll try though
sleveless 14y ago
Neat idea. But cannot save my image on chrome
- ksat 14y 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.
pirateking 14y 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.
- ksat 14y 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 14y ago
    One of the reasons is that type looks much better on a mac.
    - revolutions 14y ago
      In general, I agree that Helvetica looks much prettier on a Mac than on Windows (one of the main reasons I despise seeing font-family:Helvetica,Arial,sans-serif; on pages). Some other fonts don't look too bad on Windows, though. I don't know much about font rendering; this is just what I've noticed. For what it's worth, some screenshots of the same text with font-family set to Helvetica [0], Myriad Pro, and Segoe UI on Windows 7, Firefox. Helvetica(/Arial): http://snag.gy/Jneor.jpg http://snag.gy/Jneor.jpg Myriad Pro: http://snag.gy/f2IJx.jpg http://snag.gy/f2IJx.jpg Segoe UI: http://snag.gy/ujvpX.jpg http://snag.gy/ujvpX.jpg [0] This actually defaults to Arial, I believe, because afaik Helvetica is not bundled with Windows. (Is there no way to use asterisks on HN?)
  - pirateking 14y 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).
roryokane 14y 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_screenshot.png 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.
- ksat 14y 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 14y 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.
  - roryokane 14y 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+2L+G39+8W+30D+2BT+42+1U9+1KU+53K+4A+19+6X5+1R0+1KK+1T+9Z 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.
ksat 14y ago
Why was this article removed from HN home page?

6 points by ksat 14y ago

ksat 14y 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 14y ago
add the ability to go grab the screenshot (just give it the url) and you've got a winner
- ksat 14y ago
  :), thanks, that'll cost server resource. I don't know if I can run it for free. I'll try though

sleveless 14y ago

Neat idea. But cannot save my image on chrome

ksat 14y 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.

pirateking 14y 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.

ksat 14y 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 14y ago
  One of the reasons is that type looks much better on a mac.
  - revolutions 14y ago
    In general, I agree that Helvetica looks much prettier on a Mac than on Windows (one of the main reasons I despise seeing font-family:Helvetica,Arial,sans-serif; on pages). Some other fonts don't look too bad on Windows, though. I don't know much about font rendering; this is just what I've noticed. For what it's worth, some screenshots of the same text with font-family set to Helvetica [0], Myriad Pro, and Segoe UI on Windows 7, Firefox. Helvetica(/Arial): http://snag.gy/Jneor.jpg http://snag.gy/Jneor.jpg Myriad Pro: http://snag.gy/f2IJx.jpg http://snag.gy/f2IJx.jpg Segoe UI: http://snag.gy/ujvpX.jpg http://snag.gy/ujvpX.jpg [0] This actually defaults to Arial, I believe, because afaik Helvetica is not bundled with Windows. (Is there no way to use asterisks on HN?)
- pirateking 14y 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).

roryokane 14y 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_screenshot.png 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.

ksat 14y 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 14y 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.
- roryokane 14y 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+2L+G39+8W+30D+2BT+42+1U9+1KU+53K+4A+19+6X5+1R0+1KK+1T+9Z 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.

ksat 14y ago

Why was this article removed from HN home page?