Я использую Photoshop для разработки веб-сайтов, и всякий раз, когда я сравниваю дизайн Photoshop с предварительным просмотром браузера в реальном времени, шрифты отображаются по-разному.
По сути, любой метод сглаживания, который я выбираю в фотошопе, всегда производит впечатление полужирного текста . Поэтому я всегда вынужден отключать сглаживание (для обычного текста 12px/14px).
Есть ли метод, с помощью которого я могу добиться такого же рендеринга шрифтов в Photoshop, как тот, который Windows использует с помощью cleartype?
Если нет, есть ли шрифты, которые выглядят лучше, чем Arial, когда сглаживание отключено?
Есть две причины, по которым текст ClearType такой четкий.
Вы можете набрать свой текст в Блокноте, сделать его снимок экрана с помощью какого-нибудь удобного инструмента и вставить его в Photoshop с режимом наложения «Умножение» (потому что это черный текст на белом фоне). Но это не удобно. Редактировать: это также может быть почти невозможно сделать с любым цветом переднего плана, кроме черного.
Этот парень описал метод ручного субпиксельного рендеринга, и, на мой взгляд, он улучшает четкость шрифта, приближая его к ClearType. Но он по-прежнему использует подсказки Photoshop, поэтому он не такой четкий, как ClearType.
Вам действительно нужен рендеринг в стиле ClearType в Photoshop? Если вы экспортируете любую графику, содержащую текст, для использования в веб-дизайне, она не должна содержать субпиксельную визуализацию, поскольку она не подходит для некоторых дисплеев (ЭЛТ, повернутый телефон). И если вы не экспортируете текст, а просто смотрите на него, рендеринг в Photoshop выглядит нормально.
Photoshop — это не программа для веб-дизайна. Чтобы текст выглядел в браузере так же, как и в графике (jpg, gif и т. д.), вы должны использовать один и тот же шрифт в обеих программах. Некоторые шрифты используются не всеми браузерами.
В зависимости от размера вашего текста хорошим шрифтом среднего размера может быть Tahoma, Helvetica, Trebuchet или Georgia. Посетите этот веб-сайт, чтобы найти несколько хороших идей: http://www.snaphow.com/10-most-popular-web-fonts-used-in-web-safe-design/
Большие шрифты — это то, где сглаживание начинает иметь значение.
Если вы пытаетесь объединить текст с текстом на странице, я предлагаю использовать позиционирование CSS для достижения ваших целей. CSS позволяет размещать текст с вашей веб-страницы поверх изображений и использует относительное и абсолютное позиционирование для отображения страницы именно так, как вы хотите. Вот пример и руководство: http://css-tricks.com/text-blocks-over-image/
К сожалению, Photoshop не поддерживает субпиксельный рендеринг. Как и любое другое программное обеспечение Adobe, за исключением Dreamweaver . (Ну, это не совсем технология Dreamweaver, поскольку она просто отображает HTML, а затем передает текст операционной системе для визуализации.)
Предлагаемый рабочий процесс может заключаться в том, что вы создаете и нарезаете свой дизайн в Photoshop, а затем открываете его в Dreamweaver. Если дизайн нуждается в дополнительных исправлениях, вы можете одновременно открыть файл в Photoshop, внести изменения, сохранить и обновить вид в Dreamweaver. Добавьте окончательную, настоящую копию в Dreamweaver. Вы также можете заменить Photoshop на Fireworks; или даже начать создание каркаса в Fireworks → продолжить в Photoshop → опубликовать через Dreamweaver. (Понятно, почему редакции Creative Suite обычно покупаются комплектами, не так ли?)
Если дизайн в предварительном просмотре Dreamweaver выглядит иначе, чем в браузере (браузерах), это другой, к сожалению, вопрос (и я говорю не только о типографике, но и о рендеринге в целом). Чем раньше вы сможете перейти от Photoshop к живой демонстрации — через Dreamweaver или нет — тем лучше. Я бы очень хотел, чтобы Photoshop обладал возможностями субпиксельного рендеринга (но в то же время надеюсь, что он не будет представлен в CS6, или, по крайней мере, надеюсь, что к тому времени я разбогатею)!
Просто примечание: ClearType защищен примерно 10 патентами, поэтому точно такой же рендеринг маловероятен. Также стоит отметить, что OS X по умолчанию использует другой рендеринг (Quartz), как и графические интерфейсы в дистрибутивах Linux.
Дизайн в HTML и CSS. Если вы ДОЛЖНЫ вернуть его в макет PhotoShop, сделайте снимок экрана из браузера, а затем верните его в свой документ PhotoShop.
В общем, настройка типа в PhotoShop — это боль.
Возможным обходным решением может быть использование «резкого» метода сглаживания и установка внутреннего свечения с нулевой глубиной для текстового слоя:
Для этого образца я использовал белый цвет, непрозрачность 85%, режим наложения «экран», 0 дросселей, 0 размер. Не так хорошо, как Ms clear type, но выглядит менее жирно...
(первая строка = без сглаживания, последняя строка = резкое сглаживание без внутреннего свечения)
пользователь 2849