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.
* 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 :)
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.
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.
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.
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.
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).
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.
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.
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.