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.

General Design: Appearance of text in Photoshop vs Browser

Bottom of Page

1 to 15 of 15

  1.  
    • 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.
  6.  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?

  9.  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
    • CommentAuthorVectorGirl
    • CommentTimeFeb 10th 2011
     permalink
    I realize that this is a much older post, but I found this forum post to be rather interesting. If I could recommend anything, I would recommend just toying around with photoshop and your browser. While some aspects of your text design may look awful in the browser or in photoshop, it varies a lot from computer to computer. Graphics cards, monitors and one's overall system can literally make or break a design. I really don't believe that there are synonymous designs for every computer.

    If you want to get more tips, why not visit this post? It's what I use as a reference:

    http://www.instantshift.com/2009/06/19/trace communications/125-creative-text-based-logo-designs-for-design-inspiration/

    Hope this helps and I hope you've since learned more tricks. Peace! :)

    Rebecca Stone
    •  
      CommentAuthorAdamC
    • CommentTimeMar 21st 2011
     permalink
    I find it to be less hassle to stick to the fonts which I know are generally supported across most major operating systems. The real challenge is when you want to translate your site into another language. Then you have to hope that the font you used looks fine in that language too. It's a real headache sometimes.
    • CommentAuthordesigngene
    • CommentTimeMar 26th 2011
     permalink

    Cool tips, I was wondering about not exactly same but similar problems where same text behaves different in different browsers. Now I am sure that this information is going to help me a lot in new website design

    Thanks,

    •  
      CommentAuthorAdamC
    • CommentTimeMar 30th 2011
     permalink
    Another thing: with the newer versions of PS the font rendering is more accurate. I think the TrueType fonts tend to have the best rendering online.
    • CommentAuthordesigngene
    • CommentTimeMay 15th 2011
     permalink
    Yeah really, the font rendering is a great feature of new PhotoShop. This really helps to identify and implement different fonts and use them accurately in logo design and all your graphics.

1 to 15 of 15

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page