My Photoshop to CSS conversion notes

Photoshop-to-CSS conversion notes.md

This work is licensed under a Creative Commons Attribution-ShareAlike 2.5 Canada License.

Template

Navigation menu item {
  font-family:   'ClarendonLTStd';
  font-variant:  'Regular';
  font-size:     16.41pt;
  font-leading:  39.59pt;
  font-kerning:  Metrics;
  font-tracking: -25;
  color:         #fff;
  font-style:    normal;
  font-weight:   normal;
  font-aa:       Strong;
}

Leading

A leading of Auto is equivalent to 1.2 or 120%.

Tracking / Letter spacing

Photoshop's letter-spacing property values are 1/1000em. Therefore, a letter-spacing of -25 in Photoshop corresponds with a letter-spacing of -0.025em.

Anti-aliasing

Photoshop's anti-aliasing property values are:

• none

  • turns off anti-aliasing

• sharp

  • ensures that text sticks to pixels, so less blurry edges

• crisp

• strong

• smooth

  See http://tutorialblog.org/photoshop-which-anti-alias-setting-is-best/ for an example of all values

The CSS3 property font-smooth just turns anti-aliasing on or off. It's recommended to turn on for the whole document; but it won't translate nicely.

Webkit has a -webkit-font-smoothing property which does a bit better. It's values are:

• none

  • turns off anti-aliasing

• subpixel-antialiased

  • looks bolder, like Photoshop's "sharp" and "strong" (respectively)

• antialiased

  • looks lighter, like Photoshop's "crisp" and "smooth"

  See http://maxvoltar.com/archive/-Webkit-font-smoothing for an example of all values.

Therefore, I'm recommending:

Photoshop setting	CSS setting
`none`	`none`
`sharp`	`subpixel-antialiased`
`crisp`	`antialiased`
`strong`	`subpixel-antialiased`
`smooth`	`antialiased`

Gradients

Use http://www.colorzilla.com/gradient-editor/ to generate code for maximum compatibility.

Box Shadows

Use http://css3generator.com/ to generate code for maximum comaptibility.

Text Shadows

Use http://css3generator.com/ to generate code for maximum compatibility.

Border radius

Use http://css3generator.com/ to generate code for maximum compatibility.