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

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 все равно будет выглядеть иначе!

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