Не так давно мы представили очередное улучшение сервиса автоматической HTML верстки сайтов — это извлечение всех стилей текста из текстовых слоев Photoshop. Расскажем более подробно о CSS верстке текстовых слоев Photoshop.
Шрифты
Для начала о том, какие текстовые слои Photoshop будут сверстаны как текст. Как текст будут сверстаны только те слои Photoshop, текст которых использует безопасные web шрифты. К безопасным web шрифтам принято относить следующие шрифты:
- Arial
- Arial Black
- Helvetica
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Lucida Console
- Lucida Sans Unicode
- Palatino Linotype
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
- Symbol
- MS Sans Serif
- MS Serif
Текстовые слои, использующие эти шрифты будут сверстаны как текст, имеющий соответствующие CSS стили. Иначе, текстовый слой будет сверстан как изображение, у которого в качестве альтернативного текста (аттрибут «alt») будет задан текст слоя.
Использование нестандартных шрифтов абсолютно нормально для логотипов, заголовков и т.п. Однако, их не рекомендуется использовать для основного текста. Во-первых, для загрузки изображения требуется намного больше времени, чем на загрузку текста. Во-вторых, использование изображений плохо для SEO. В-третьих, пользователи не могут выделить текст, скопировать его и т.п.
«Point Text» vs «Paragraph Text»
В Photoshop есть 2 способа написания текста — «Point Text» и «Paragraph Text». Переключиться между ними можно щелкнув правой кнопкой по слою и выбрав «Convert to Point Text» или «Convert to Paragraph Text». Избегайте использования «Point Text» для многострочных текстов. Используйте для этого «Paragraph Text», это позволит получить более хороший результат.
Использование Layer Efects
Если Вы используете Layer Effects для получения каких-либо дополнительных эффектов изображения, то как и для всех случаев использования Layer Effects — необходимо либо сконвертировать такой слой в Smart Object, либо растеризовать. В противном случае Вы получите текст без каких либо эффектов.
Следуя данным правилам Вы с легкостью создадите CSS верстку web сайта из PSD макета Photoshop.
Подробнее читайте на странице документации сервиса.
