Из-за тощих шрифтов интернет становится нечитабельным. Из-за тощих шрифтов интернет становится нечитабельным Как сделать шрифт контрастнее
Одним из последних трендов в веб-дизайне стало использование в качестве фона изображений с высоким разрешением. Здесь очень важно, чтобы текст, помещенный поверх такого фона, выглядел достаточно контрастно. Четкость и легкость восприятия – очень критичная составляющая информации, передаваемой через веб-сайт.
Данный урок по фотошопу познакомит вас с пятью способами оптимизации контраста при расположении текста поверх изображений.
1. Наложение цвета
Текст на представленном ниже изображении разобрать очень трудно, и причиной этому сложный, неоднородный фон. Фон содержит значительное количество деталей, особенной в области меню. Так же, в силу специфики фона, практически полностью теряется интересная текстурность использованного шрифта “Buffalo Wings”. Совершенно очевидно, что контрастность на данном изображении нуждается в доработке.
Прежде всего нужно создадим новый слой и назовем его “Наложение цвета”. Далее, возьмите образец цвета с поверхности показанной ниже рубашки (нажмите и удерживайте для этого клавишу I), и при помощи сочетания клавиш Shift + F5 залейте выбранным цветом созданный слой.
Наконец, уменьшите Непрозрачность (Opacity) залитого цветом слоя до 50%, и сместите его под слой с текстом.
Как вы можете заметить, контраст стал заметно лучше. Кроме того, детали и текстурность шрифта “Buffalo Wings” стали отчетливее.
2. Тень
Представьте себе ситуацию, когда клиент хочет, чтобы вы разместили тонкий, изящный текст поверх сильно детализированного участка фото. Такое тоже иногда случается, и приходится искать способы достижения приемлемой контрастности между фоном и текстом.
В подобных случаях, прежде всего, нужно выбрать правильный цвет текста.
Очевидно, лучше всего будет смотреться какой-нибудь светлый цвет. Например, белый.
Следующим шагом нужно применить стиль слоя Тень (Drop shadow). Уменьшите Непрозрачность (Opacity) до 52%. Затем задайте Размах (Spread): 16% и Размер (Size): 10 пикселей. Угол должен быть примерно -144 градуса.
Как видите, применение простого стиля слоя заметно улучшило контрастность.
3. Лини
Это – один из наиболее легких способов улучшения контрастности. Достаточно просто добавить две белые линии под и над надписью, зрительно отделив, таким образом, текст и фон.
Добавленные две линии…
…обеспечивают улучшают восприятие двух элементов дизайна.
4. Оттенение
Еще один способ улучшения восприятия текста за счет усиления контраста – добавление под текст оттененной фигуры. Чтобы вам легче было понять о чем идет речь, я покажу на примере.
На примере ниже надпись практически невозможно прочесть, потому, что она сливается с фоном. Разделитель между строками текста теряется среди деталей здания на фоне.
Чтобы улучшить читабельность текста выберите инструмент Произвольная фигура (Custom Shapes Tool), или просто нажмите клавишу U. Выберите любую фигуру на свое усмотрение. Здесь нет каких-либо правил и рекомендаций.
Залейте фигуру черным цветом и задайте белую обводку толщиной 3 пикселя.
Сместите слой с фигурой под слои с текстом и его разделителем, после чего уменьшите Непрозрачность данного слоя до 57%.
Результат выглядит более профессионально, да и воспринимается намного лучше
5. Размытие фона
Пятый и последний способ улучшения контрастности – применение к фону легкого эффекта размытия.
На исходном изображении текст различить довольно трудно.
Доброго часа всем!
Вообще, идеально, чтобы вы спокойно могли работать с монитором на расстоянии не менее, чем 50 см. Если вам работать не комфортно, некоторые элементы не видны, приходиться щуриться - то нужно настроить монитор, чтобы было все видно. А одно из первых в этом деле - это увеличить шрифт до удобно-читаемого. Итак, этим и займемся в этой статье…
Горячие клавиши, чтобы увеличить размер шрифта во многих приложениях
Многие пользователи даже не знают, что есть несколько горячих клавиш, которые позволяют увеличить размер текста в разнообразных приложениях: блокноты, офисные программы (например, Word), браузеры (Chrome, Firefox, Opera) и пр.
Увеличение размера текста - нужно зажать кнопку Ctrl , а затем нажать кнопку + (плюс) . Нажимать «+» можно несколько раз, пока текст не станет доступен для комфортного чтения.
Уменьшение размера текста - зажать кнопку Ctrl , а далее нажимать кнопку - (минус) , пока текст не станет мельче.
Кроме этого , можно зажать кнопку Ctrl и покрутить колесико мышки . Так даже несколько быстрее, можно легко и просто отрегулировать размер текста. Пример этого способа представлен ниже.
Рис. 1. Изменение размера шрифта в Google Chrome
Важно отметить одну деталь : хоть шрифт и будет увеличен, но стоит вам открыть другой документ или новую вкладку в браузере, как он станет снова таким, каким был ранее. Т.е. изменения размера текста происходят только в конкретном открытом документе, а не во всех приложениях Windows. Чтобы устранить эту «деталь» - нужно настроить соответствующим образом Windows, а об этом далее…
Настройка размера шрифта в Windows
Представленные ниже настройки были сделаны в ОС Windows 10 (в ОС Windows 7, 8 - почти все действия аналогичны, думаю, у Вас не должно возникнуть проблем) .
Сначала необходимо зайти в панель управления Windows и открыть раздел «Оформление и персонализация » (скрин ниже).
Рис. 3. Экран (персонализация Windows 10)
Затем обратите внимание на 3 цифры, представленные на скриншоте ниже (кстати, в Windows 7 этот экран настроек будет несколько отличен, но настройка вся аналогичная. По моему мнению, там даже нагляднее) .
Рис.4. Варианты изменения шрифта
1 (см. рис. 4): если открыть ссылку «используйте эти параметры экрана » то перед вами откроются разнообразные настройки экрана, среди которых есть ползунок, при передвижении которого размер текста, приложений и др. элементов будет изменяться в режиме реального времени. Таким образом можно легко подобрать оптимальный вариант. В общем, рекомендую попробовать.
2 (см. рис. 4) : подсказки, заголовки окон, меню, значки, название панелей - для всего этого можно задать размер шрифта, причем, даже сделать его полужирным. На некоторых мониторах без этого никуда! Кстати, на скриншотах ниже показано, как это будет выглядеть (было - 9 шрифт, стало - 15 шрифт) .
3 (см. рис. 4): настраиваемый уровень масштабирования - достаточно неоднозначная настройка. На некоторых мониторах приводит к не очень удобно-читаемому шрифту, а на некоторых позволяет взглянуть на картинку по новому. Поэтому, ее рекомендую использовать в последнюю очередь.
После того, как откроете ссылку, просто выберите в процентах, насколько вы хотите увеличить масштаб всего, что отображено на экране. Имейте ввиду, что если у вас не очень большой монитор, то некоторые элементы (например, значки на рабочем столе) сместятся со своих привычных мест, к тому же, вам придется больше прокручивать страницу мышкой, xnj.s увидеть ее полностью.
Рис.5. Уровень масштабирования
Кстати, часть настроек, из приведенных выше, вступает в силу только после перезагрузки компьютера!
Изменение разрешения экрана для увеличения значков, текста и др. элементов
От разрешения экрана зависит довольно многое: например, четкость и размер отображения элементов, текста и пр.; размер пространства (того же рабочего стола, чем больше разрешение - тем больше значков поместиться:)).; частота развертки (это связано больше со старыми ЭЛТ-мониторами: там чем больше разрешение, тем меньше частота - а ниже 85 Гц использовать крайне не рекомендуется. Поэтому, приходилось подгонять картинку…) .
Как изменить разрешение экрана?
Самый простой способ - это зайти в настройки вашего видео-драйвера (там, как правило, можно не только изменить разрешение, но и поменять другие важные параметры: яркость, контрастность, четкость и пр.). Обычно, настройки видео-драйвера, можно найти в панели управления (если переключить отображение на мелкие значки, см. скрин ниже).
Так же можно щелкнуть правой кнопкой мышки в любом месте рабочего стола: и в появившемся контекстном меню, часто есть ссылка на настройки видео-драйвера.
В панели управления своего видео-драйвера (обычно в разделе, связанного с дисплеем) - можно изменить разрешение. Дать какой-то совет по выбору в данном случае довольно сложно, в каждом случае нужно подбирать индивидуально.
Моя ремарка. Несмотря на то, что таким образом можно изменить размер текста, прибегать к ней я рекомендую в последнюю очередь. Просто довольно часто при изменении разрешения - теряется четкость, что не есть хорошо. Я бы рекомендовал сначала увеличить шрифт текста (не изменяя разрешения), и посмотреть на результаты. Обычно, благодаря этому удается добиться лучших результатов.
Настройка отображения шрифта
Четкость отображения шрифта даже важнее, чем его размер!
Я думаю, что со мной многие согласятся: иногда даже крупный шрифт выглядит размыто и разобрать его не просто. Именно поэтому, изображение на экране должно быть четким (без размытостей)!
Что касается четкости шрифта, то в Windows 10, например, его отображение можно настроить. Причем, настраивается отображение для каждого монитора индивидуально так, как это больше подходит вам. Рассмотрим подробнее.
Сначала открываем: Панель управления\Оформление и персонализация\Экран и открываем ссылку слева внизу «Настройка текста ClearType «.
Далее должен запуститься мастер, который проведет вас через 5 шагов, в которых вы просто будете выбирать самый удобный вариант шрифта для чтения. Таким образом подбирается самый лучший вариант отображения шрифта именно под ваши нужды.
Отключать ли ClearType?
ClearType - это специальная технология от Microsoft, которая позволяет сделать текст таким четким на экране, как будто он напечатан на листе бумаге. Поэтому не рекомендую его отключать, без проведения тестов, как будет у вас выглядеть текст с ним и без оного. Ниже приведен пример, как это выглядит у меня: с ClearType текст на порядок лучше и удобство чтения выше на порядок.
Использование экранной лупы
В некоторых случаях бывает очень удобно использовать экранную лупу. Например, встретили участок с текстом мелкого шрифта - приблизили с помощью лупы, а затем снова восстановили все в норму. Несмотря на то, что эту настройку разработчики делали для людей, у кого плохое зрение, иногда она помогает и вполне обычным людям (по крайней мере, попробовать, как это работает, стоит).
Для начала нужно зайти в: Панель управления\Специальные возможности\Центр специальных возможностей .
Когда нужно что то увеличить, просто щелкаете по ней и меняете масштаб (кнопка ).
PS
На этом у меня все. За дополнения по теме - буду признателен. Удачи!
Цитата или заголовок поверх фотографии. Сегодня это тренд, который мы видим везде: в Instagram, на журнальных обложках, на первых окнах посадочных страниц. Но пытаясь оформить таким образом картинку, вы могли столкнуться с проблемой читабельности текста. Ниже изложены 7 очень простых способов сделать текст на фотографии лёгким для восприятия. И х отя эта статья про типографику, она бесполезна для дизайнеров (они всё это знают без нас), но пригодится контент-менеджерам и SMM-щикам.
1. Используйте пространство фотографии
Подберите фотографию с достаточно большими фрагментами однородного фона. В пейзаже текст вы сможете расположить на фоне неба. На снимке из урбанистичной модной фотосессии - на фоне кирпичной стены.
2. Расположите текст на подложке
Этот приём не только решает проблему читабельности текста, но и управляет вниманием зрителя. Используйте контрастную шрифту плашку, чтобы повысить читабельность. Подложка чаще всего бывает в виде геометрической фигуры, однотонной или полупрозрачной. Можно использовать построчную подложку, например, имитируя выделенный маркером текст.
3. Попробуйте размытое изображение
Очаровательный в своей простоте способ. Размыв фоновое изображение (или его часть), вы сразу перемещаете заголовок в фокус. Это, конечно, не освобождает вас от необходимости поиска контрастного цвета для шрифта, но делает задачу читабельности проще в разы.
4. Подбирайте контрастные цвета
Вам могут и не понадобиться никакие спецэффекты, если цвет вашего шрифта и палитра изображения достаточно контрастны.
5. Затемнённый фон
Увеличить контрастность, а с ней и читабельность текста, вы можете, понизив насыщенность изображения. Наложенный поверх фотографии слой чёрного цвета с 30-40% прозрачностью даст нужный эффект.
6.Цветной фильтр
По тому же принципу вы можете использовать цветные фильтры
7. Сделайте шрифт гигантским
Крупные элементы обладают большим визуальным весом, поэтому если не удалось выехать на контрасте цвета и глубины, будем «играть со шрифтами».
Друзья, поговорим о не менее важной теме – удобство пользования компьютером, а именно чёткость шрифтов, отображаемых на мониторе.
Многие из нас целыми днями работают за компьютером. И конечно же знают, как сильно устают глаза. Но разве многие из нас делают специальные упражнения каждый день, чтобы глазки расслаблялись, думаю, нет.
Давайте же поможем нашему здоровью хотя бы немного и определим необходимую чёткость шрифтов.
Компания Microsoft уже подумала о наших глазках и предлагает нам свою технологию ClearType . Данная технология разработана специально для ЖК-мониторов и обеспечивает сглаживание шрифтов, повышая тем самым удобочитаемость. ClearType отображает слова на экране монитора такими же четким и ясными, как будто они напечатаны на листе бумаге.
А теперь настроим чёткость шрифтов
- 1. Перейдем в меню “Пуск ”, далее в раздел “Панель управления ”, далее выбираем “Оформление и персонализация ” (можно воспользоваться поиском windows для других ОС, см. ниже)
- 2. В открывшемся окошке находим раздел “Шрифты ” и ниже кликаем по ссылке “Настройка текста ClearType ”. Откроется новое окно.
На windows 10 будет находится в том же разделе.
- 3. Поставьте галочку в пункте “Включить ClearType ”, кликаем по кнопке внизу “Далее ”. В новом окошке будет предложено установить оптимальное разрешение для экрана. После проведения соответствующей настройки опять нажмите “Далее ”.
- 4. Вам будет предложено последовательно в 4-х примерах выбрать наилучший вариант отображения текста. После проведения соответствующих настроек нажмите кнопку “Готово”.
Настройка размера шрифта
Если Вам кажется, что отображаемый в приложениях шрифт маловат, и Вы постоянно напрягаетесь, чтобы прочитать что-нибудь на экране, то Вам просто обязательно необходимо увеличить размер шрифта по-умолчанию.
Для этого Переходим снова в “Панель управления ” –> “Оформление и персонализация ” –> кликаем по пункту “Шрифты ” –> далее в правой части окна управления выбираем “Изменение размера шрифта ” и подбираем наиболее удобный вариант.
А теперь радуемся полученному результату. Наши глазки точно теперь скажут нам спасибо.
