Текст в моем фотошопе выглядит размытым

9

Я создаю заголовок веб-сайта в Photoshop CS5, однако, когда я смотрю на него, текст выглядит очень размытым, и я понятия не имею, почему.

Я использую веб-пресет. Что вы рекомендуете для самых резких и лучших результатов?

Вот текущий макет:

заголовок

adobe-photoshop website-design cs5 Джефф
источник
Вы пытались увеличить растровое изображение? Это обычно приводит к размытости. Примечание: растр и вектор см., Например: graphicdesign.stackexchange.com/questions/260/…
Яри ​​Кейнянен,
@koiyu - Слои, которые меня больше всего волнуют, это текстовые слои, и я их не растеризовал
Джефф
(о, я смотрел на кривую вокруг "xSky"). Photoshop по умолчанию применяет некоторое сглаживание к тексту, и эта настройка может не соответствовать вашим текущим потребностям. Есть примеры в graphicdesign.stackexchange.com/questions/1177/… (хотя это не дает прямого ответа на ваш вопрос)
Яри ​​Кейнянен,
Спасибо за этот пост, именно то, что мне нужно, чтобы помочь мне с моим размытым текстом, потрясающая ясная помощь :)

Ответы:

14

По умолчанию Photoshop применяет некоторое сглаживание к текстовым слоям. Алекс привел хорошее сравнение в другом вопросе :

сравнение

Параметры сглаживания доступны на панели инструментов и в Characterокне:

параметры сглаживания

Примечание: если вы планируете использовать текстовые слои как обычный (HTML) текст в конечном продукте, браузеры, скорее всего, будут отображать текст иначе, чем Photoshop. Более подробную информацию об этом вы можете найти по тому же вопросу «Font (anti) aliasing in Photoshop») .

Яри ​​Кейнянен
источник
Таким образом, я думаю, что это антиалиасинг, который делает это? Как еще можно добиться жирного текста? :)
Джефф
Вы можете использовать более смелую версию шрифта (если есть), которую можно выбрать в раскрывающемся списке рядом с семейством шрифтов. ИЛИ вы можете использовать искусственный жирный шрифт в Photoshop, который активируется нажатием кнопки T (рядом с кнопкой T ). ИЛИ вы можете добавить эффект слоя, например обводку, чтобы сделать текст более смелым.
Яри ​​Кейнянен
2
Кроме того, я мог бы добавить, что это одна из причин того, что изображения текста не очень хорошая идея. Реальный текст может быть представлен клиентом наиболее желательным способом.
mattdm
4

Убедитесь , что heightи widthатрибуты (или CSS) для вашего imgтега совпадает с фактическим размером изображения. В противном случае он будет изменен веб-браузером, и многие веб-браузеры делают это безобразно. Даже те, кто делает это относительно хорошо, могут сделать изображение несколько размытым.

Если вы хотите убедиться, что он выглядит правильно, оставьте пиксели 1: 1.

mattdm
источник
Дело в том, что в самом Photoshop это выглядит нечетко. Как мне сделать «пиксели 1: 1»?
Джефф
@Jeff "Сохранение пикселей 1: 1" эквивалентно просмотру изображения при 100% увеличении.
Яри ​​Кейнянен
@koiyu - Хорошо, у меня уже есть это. :)
Джефф
1

Я бы не отображал текст в виде изображения, так как это приводит к проблемам с доступом и поисковой системой.

Однако, если вы хотите отобразить текст в виде изображения, изображения png или gif дают лучшие результаты, чем изображения jpg, благодаря сжатию JPEG. Даже если вы не сжимаете изображение, браузер, такой как Opera mobile или интернет-ускоритель, может это сделать.

Йерун
источник
Всегда используйте PNG, ушел из JPEG давным-давно: P
Джефф
1

Я бы сделал текст в виде прозрачного файла PNG для лучшего разрешения. Другая альтернатива - использовать sIFR как для стиля, так и для SEO. sIFR в основном встраивает шрифт как Flash, но он на 100% удобен для поисковых систем. Смотрите некоторые примеры, например, на 3d-photomontage.com .

Тони Тан
источник
1

Я должен отметить, что абсолютно нет необходимости использовать текст изображения в вашем дизайне. Избегайте использования не-веб-шрифтов для основного текста. - Я знаю, что они отлично смотрятся в дизайне, но у вас больше проблем с HTML, чем оно того стоит.

Просто выберите «Нет» в параметрах сглаживания в PS, если вы не хотите размытия текста. HTML-версия всегда будет отображать текст по-разному, в зависимости от операционной системы или браузера, поэтому на самом деле мало что можно сделать.

Посмотрите на это, это должно помочь вам больше решать проблемы рендеринга текста в вашем HTML, а не в PS

http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty

Я всегда проектирую с выбранным сглаживанием «Crisp» и осознаю тот факт, что текст в HTML все равно будет выглядеть иначе!

Сахбас имеет
источник