Текст у зображенні Photoshop виглядає "розмитим"

9

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

Я використовую передустановку в Інтернеті. Що ви рекомендуєте для найгостріших та найкращих результатів?

Ось поточний макет:

Заголовок

adobe-photoshop website-design cs5

— Джефф
джерело

ви намагалися збільшити растрові зображення? Зазвичай це призводить до розмитості. У бічній ноті, щодо растрових та векторних, див. Наприклад: graphicsdesign.stackexchange.com/questions/260/…

— Jari Keinänen

@koiyu - Шари, які мене найбільше хвилюють, - це текстові шари, і я їх не раструював

— Jeff

(ой, я дивився на криву навколо "xSky") Photoshop застосовує деякий антизшивання до тексту за замовчуванням, і налаштування може не відповідати вашим поточним потребам. На прикладі graphicsdesign.stackexchange.com/questions/1177/… є приклади (хоча це не відповідає безпосередньо на ваше запитання)

— Jari Keinänen

Дякую за цей пост, саме те, що мені потрібно було допомогти зі своїм розмитим текстом, приголомшлива чітка допомога :)

14

За замовчуванням Photoshop застосовує деякі тексти. Алекс представив приємне порівняння в іншому питанні :

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

варіанти згладжування

Примітка: якщо ви плануєте використовувати текстові шари як звичайний (HTML) текст у кінцевому продукті, браузери, швидше за все, візуалізують текст інакше, ніж це робить Photoshop. Більше інформації про це ви можете знайти в тому ж згаданому запитанні "Шрифт (анти) псевдонім у Photoshop" .

— Ярі Кейненен
джерело

Тож я здогадуюсь, що це робить Anti Aliasing? Як ще можна досягти жирного тексту? :)

— Джефф

Ви можете використовувати більш сміливу версію шрифту (за наявності), яку можна вибрати зі спадного меню поруч із сімейством шрифтів. АБО ви можете використовувати підроблений жирний шрифт Photoshop, який увімкнено натисканням кнопки T (поруч із кнопкою T ). АБО ви можете додати шар шару, наприклад, обведення, щоб текст виглядав сміливішим.

— Jari Keinänen

2

Крім того, можу додати, це одна з причин того, що " Малюнки тексту" не є хорошою ідеєю. Справжній текст може бути викладений самим бажаним способом клієнтом.

— mattdm

4

Переконайтесь, що атрибути heightта widthатрибути (або CSS) для вашого imgтегу відповідають фактичному розміру зображення. Інакше веб-браузер змінить його масштаб, і багато веб-браузери роблять це некрасиво. Навіть ті, хто робить це порівняно добре, можуть зробити зображення дещо розмитим.

Якщо ви хочете переконатися, що він виглядає правильно, тримайте пікселі 1: 1.

— mattdm
джерело

Річ у тім, що сам Photoshop виглядає розмитим. Як зробити "пікселі 1: 1"?

— Джефф

@Jeff "збереження пікселів 1: 1" еквівалентно перегляду зображення зі 100% збільшенням.

— Jari Keinänen

@koiyu - Гаразд, це я вже маю. :)

— Джефф

1

Я б не відображав текст як зображення, оскільки це призводить до доступності та проблем у пошуковій системі.

Однак якщо ви хочете відобразити текст у вигляді зображення, зображення у форматі png або gif дають кращі результати, ніж зображення у форматі jpg завдяки стисненню jpeg. Навіть якщо ви не стискаєте зображення, може з’явитися веб-переглядач, як Opera mobile або Інтернет-прискорювач.

— jeroen
джерело

Завжди використовуйте 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 в будь-якому випадку буде виглядати інакше!

— Сахбас має
джерело