Welcome to WebmasterWorld Guest from 54.234.244.30

Forum Moderators: not2easy

Message Too Old, No Replies

How to make Photoshop text match HTML text

How to make Photoshop text match HTML text

     
4:16 am on Jan 4, 2012 (gmt 0)

Preferred Member

5+ Year Member

joined:June 19, 2006
posts: 476
votes: 0


This has been a long ongoing problem that I have never figured out.

Ill get a design in PSD format, and when I go to code it into a website template. Its difficult to get the text to match exactly. It seems Photoshop wants to use pt sizes and on my sites we use px size.

Any ideas or suggestions?
4:41 pm on Jan 4, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


You should be able to set your preferences to px in PS

Edit -> Preferences -> Units & Rulers -> Type (select pixels)

It also depends on the resolution of the file. If you work with 72 DPI files, it should be pretty close, at least, if you're using web-safe fonts.

It's really irrelevant - it will never render "exactly" the same. The anti - aliasing settings and rendering engine in Photoshop is independent of the operating system's type rendering in various browsers, so it will always be "just different enough" to make a visible mismatch. Pick one or the other and go with it. :-)
4:42 pm on Jan 4, 2012 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4


Hi there drooh,

this link will, hopefully ;), give you the required technique....

coothead
7:21 pm on Jan 4, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:6153
votes: 284


rocknbil has the best answer as to setting PS to pixel measure. I tend to design from the other direction, website first (in code) then adding any imaging necessary to finish. In my experience it is the underlying code that makes the site work, not the pretty design. :)
11:12 am on Feb 29, 2012 (gmt 0)

New User

joined:Feb 24, 2012
posts:32
votes: 0


Send it over to ImageReady, which I believe comes with every Photoshop installation. At the bottom of the menu is a quick jump button. From there you can save images straight into html files if I recall correctly. I'm not on a computer with it to check but I remember doing it.
4:41 pm on Feb 29, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


The question is not how to get images into HTML, it's how to match text rendered by Photoshop with text rendered by HTML.
10:12 pm on Feb 29, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
posts:12716
votes: 244


You can replace the word "Photoshop" with absolutely anything-- up to and including "my computer"-- and the answer will always be "Can't be done". Your Palatino is not my Palatino; your screen resolution is not my screen resolution; your browser defaults are not my browser defaults ... et cetera.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members