1

I'm setting out a template in PS 1280x700 px 300dpi (I know web is 72 but I like more clarity when working in PS).

My main problem is the way the text renders; I'm using Helvetica Neue Light 15px and it's coming out quite jaggidy. Is there a way to smooth / use it as a font instead of following the pixel grid so it would look like it will on the web?

My second question is when setting out a nav is there a better way to separate the text headings? At the moment I either just use the space bar 5 or 6 times to break them up (which is really bad when you want to go back and make changes as you have to change all of them) or I make each heading a text layer and space them on a grid, again not great when I want to make changes.

Improve this question
5
  • 1
    Your "second question" is really unrelated to the first. It's a legitimate question, so please remove it from here and make it a separate question so we can answer it.
    – Lauren-Clear-Monica-Ipsum
    Jun 18, 2012 at 14:32
  • @lauren ispum, will do
    – sam
    Jun 18, 2012 at 16:42
  • Changing the DPI of a fixed pixel dimension image does nothing to improve or reduce 'clarity'. As for font smoothing, that's an option in the font pallet. There's everal option.
    – DA01
    Jun 18, 2012 at 18:43
  • @da01 is there a anti aliasing method that is prefered to get it to look as it will on the web or is it just to be done by eye ?
    – sam
    Jun 18, 2012 at 19:56
  • @sem there is no 'one way' that it looks on the web. It will differ from device to device, browser to browser, operating system to operating system, font to font.
    – DA01
    Jun 18, 2012 at 20:12

2 Answers 2

Reset to default
4

hmm, well in the Character options, when the text is highlighted, there is an "Anti Aliasing" option, that you can change from smooth, to sharp, crisp, strong, and none.

But that is kind of strange you are getting that issue.

Make sure you are looking at the text at 100% zoom. I have noticed that in my designs sometimes, especially when I use OpenType PostScript (otf files).

So if you zoom at 100%, see if that is the issue first. Also since you are working on a bigger design, you can scale the zoom down to 50%, and wont get that Jaggedy effect either, but anything in between you will...

If neither of those work, it may be a problem with the file. If none of those work, then I dont see it working right in CSS/HTML. Did you notice it render correctly in CSS/HTML? If so, then yeah, its the Zoom, or the Anti Aliasing.

Which Version are you using, (if you cant find anti-aliasing) I can probably explain it, but its a bit different in different versions. But generally, its on the top, right below the main menu, a couple options right after the font size. Its a drop down box.

Good luck buddy.

EDIT: As for your second question, go into the Character docklet/menu. If its not visible on the right side near your layers, then you need to enable it by selection the "typogrpahy" workflow instead of "Essentials", OR go up to the main menu, and select "Window > Character" then it should pop up. You can do the anti aliasing there too. But what you want to do with that, is highlight your headline, and highlight the first line of the next text. Once you do that, go into the character window, and change the "Leading" (which is the first option on the right side. Hover over it and it will say "Change the Leading" to be sure. That is equivelent to CSS's Line Hieght.

Pretty much everything you do in Photoshop, in that character menu, you can do in CSS.

Also, if I were you, I would use pt's (points) for text. I always seem to have an offset issue with Pixels, when I transfer a design to code. Points never let me down.

You can change your rulers, and the whole document for the rest of the design to points if you want, in the main menu, in "Edit > Preferences > Units and Rulers"

Good luck bud.

Improve this answer
3
  • thanks, its in cs5 extended, to confirm it renders fine in html/css its just when working in PS its seems to confine the text to a pixle grid rather than letting it be fluid lines
    – sam
    Jun 18, 2012 at 12:26
  • No Problem bud. Do you mean an actual grid? or just the grid that was set in the beginning using the DPI. Because if you mean just a grid set by the preferences, you can turn it off in the main menu, "View > Snap To > Grid".
    – CDesign
    Jun 18, 2012 at 12:29
  • i meant the grid set when i made the canvas so the 300x300 dpi grid
    – sam
    Jun 18, 2012 at 14:17
0

You can try validating your Photoshop file for web-specific typography issues via https://www.oss-usa.com/web-preflight?promo=psd-parser

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.