Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorrasice
    • CommentTimeMar 23rd 2006 edited
     permalink
    I have recently developed a liking towards text based design. I have always designed my websites entirely using photoshop and then moved on to coding.

    The thing that bugs me(and makes it difficult to do such designs) is how anti aliased text looks on photoshop and then how it looks entirely different on the browser when its coded using the same font. For example fonts like Lucida Grande/Sans Unicode, look terrible on photoshop and great on the browser once coded (as we know).

    I was wonder if theres something im doing wrong, or is there sort of setting that could fix this problem?

    I am using CS2 on the windows platform

    thanks in advance



    EDIT: I do mean aliased text , anti aliased text obviously is totally different.
    • CommentAuthormista3
    • CommentTimeMar 23rd 2006
     permalink
    I know the problem... I use Fireworks for mockups but it is also pretty rubbish and rendering small text the same way a browser does...

    Sometimes I use http://typetester.maratz.com/ to generate snippets of text that I then screengrab and paste into my mockups, or I quickly put together some css/html for the text I need and screengrab that instead.
    • CommentAuthorrasice
    • CommentTimeMar 23rd 2006
     permalink
    I use typetester for that purpose as well. There must be an easier way :)
    • CommentAuthormista3
    • CommentTimeMar 23rd 2006
     permalink
    Hmmm... Photoshop - no.... Fireworks - no..... Illustrator - no....

    Must be missing something! (I'm on a mac though)
    • CommentAuthorMcJay
    • CommentTimeMar 24th 2006
     permalink
    Just use aliased text.. if you can make your layout look good with that it'll look VERY good in browser. I always use that method.
  1.  permalink
    In Photoshop you can use Anti- Aliasing for that.
    If you want it to look pretty much the same as browser display select none.
    Otherwise Photoshop treat it as a bitmap image rather then vector.
    When you using Anti-Aliasing method like Sharp or Crisp Photoshop rendering text differently so pixels on a sides are degrading and not equal to the pixels in a middle.


    Best, DS
    • CommentAuthorrasice
    • CommentTimeMar 24th 2006
     permalink
    I should have made that clear in the post, but I do mean aliased text. But even aliased text looks totally different in the browser compared to photoshop.
    •  
      CommentAuthorJohnRiv
    • CommentTimeMar 24th 2006
     permalink

    I just did a testcase on my PC and the fonts are very close. Sure they're slightly off, but I wouldn't say they're "entirely different". In the case of Lucida Sans with aliased text, it's actually 100% identical.


    I'm also using CS2 on the Windows Platform, so I'm not sure what's going on... unless you guys are using text smaller than 9px?

  2.  permalink
    John, if you don't mind, I will be saving that image and using it for future reference. I would've tested this myself but my computer's physical limitations prevents me from using Photoshop 7 (yes, 7) for a long time.

    Thanks,
    • CommentAuthorrasice
    • CommentTimeMar 27th 2006 edited
     permalink
    @ JohnRiv your testcase has helped me understand the problem. Basically the difference in photoshop compared to the browser is Cleartype. Theres a plugin that is supposed to mimic Cleartype on PS called Sharptype.

    A similar thread at Aquasoft:

    http://www.aqua-soft.org/board/showthread.php?t=32390
Add your comments
    Username Password
  • Format comments as (Help)