Иллюстрированный самоучитель по Adobe Photoshop 6. Интерлиньяж в фотошопе


Типографика в веб-дизайне: интерлиньяж, кернинг

Типографика: интерлиньяж, кернинг

Если вы занимаетесь Web-дизайном, но вам еще есть куда совершенствоваться, то, возможно, вам будет интересна наша небольшая статья о типографике. При разработке дизайна сайта необходимо четко понимать, как работать с текстом, а именно с межстрочным расстоянием, межсимвольным расстоянием, да и вообще, как выбрать шрифт. В этой статье мы постараемся внести ясность в такие аспекты веб-типографики, как интерлиньяж и кернинг. Мы научимся тому, как и когда их применять.

Для начала, откроем панель "Character" в фотошопе. Там находятся нужные вам настройки текста. Если не можете найти эту панель в рабочем пространстве, то откройте через Window-Character.

Выбор шрифта и настройка отступов

Leading (Интерлиньяж)

Когда вы работаете с параграфом, или просто с любым участком текста, который занимает более одной строки, вы сталкиваетесь с параметром Leading (Интерлиньяж). Это - расстояние между строк. Общая картина будет во многом зависеть от этого параметра. Типографика шрифта: интерлиньяж

Стандартной пропорцией интерлиньяжа считается 120%. То есть, если размер (size) шрифта 20 точек (pt), то интерлиньяж должен быть 24 точки (pt).

Интерлиньяж на примере текста

Сокращение интерлиньяжа до показателя ниже 120% создает слишком высокую "скученность" и плотность символов, а также создает риск столкновения элементов символов между собой.

Текст с уменьшенным интерлиньяжем

Чтобы отрегулировать интерлиньяж в Photoshop, используйте соответствующее (Leading/Интерлиньяж в зависимости от языка интерфейса) поле в панели Character. Редактироваться будет интерлиньяж того слоя текста, который в данный момент выделен.

В некоторых случаях вам, возможно, понадобится, чтобы расстояние между одними строками были больше, чем между другими. Для редактирования интерлиньяжа отдельных строк операция почти не меняется, за исключением того, что выделяете вы не весь текстовый слой целиком, а только те строки, интерлиньяж которых надо изменить.

Кернинг: межсимвольные интервалы

Кёрнинг

Кёрнинг - говоря по-простому - расстояние между двумя символами. Целью кернинга является создание гармоничного пространства в рамках группы символов, и, в некоторых случаях, намеренное сильное увеличение/уменьшение этого пространства в целях придания тексту какого-то особого внешнего вида. Почти все шрифты, которые вы используете, уже включают в себя определенные прописанные расстояния между комбинациями символов, называется это Metric Kerning. Следует отметить, что если увеличить размер шрифта, или, например, изменить интерлиньяж текста, то Metric Kerning может ответить на эти изменения не совсем корректно. Если выставлен параметр Optical Kerning, фотошоп (или другая программа, которую вы используете) будет применять кернинг автоматически. Но, как ни странно, большинство дизайнеров не находят эту функцию полезной. Самым предпочтительным остается Manual Kerning.

Что такое manual kerning? По сути - это Кёрнинг вручную. Представьте себе, что расстояние между символами заполнено некой жидкостью, и такое же количество жидкости должно четко вмещаться между всеми расстояниями. Вы регулируете расстояние между символами на глаз, но если глаз отточен, то это - лучший прием.

Текст до кернинга

Надпись после кернинга

Кернинг может быть вручную отрегулирован в панели Character в Фотошопе. Перед этим выставьте курсор между символами, расстояние между которыми собираетесь регулировать. Есть способ побыстрее. Также выставьте курсор между этими двумя символами, а затем, зажав клавишу Option, нажимайте стрелки влево/вправо. Результат будет нагляден.

Вот несколько вещей, которые нужно помнить о кернинге

  1. Начинайте с самых сложных сочетаний символов. Например, кернинг между заглавными и строчными буквами.
  2. Оставьте регулирование кернинга на конец работы над дизайном. Пусть это будет одним из последним шагов. Работайте над ним тогда, когда уже на 100% будете уверены в выбранных шрифтах, чтобы не потратить время зря.
  3. Цель кернинга - сделать текст оптически-корректным. Тут нет никакой математической формулы, канонов и прочего. Просто практикуйтесь, и все начнет получаться. Иногда играйте в эту игру - Type.method.ac

webformula.pro

Photoshop - CSS-правило letter-spacing – Zencoder

Наконец-то у меня дошли руки и пришло время разобраться с палитрой “Символ” в Photoshop.

До сегодняшнего дня о ней знал не полностью. Конечно, с такими полями, как “Шрифт”, “Размер шрифта”, “Цвет шрифта”, “Межстрочное расстояние” я был знаком. Но вот столкнулся в одном из psd-макетов с неизвестным мне полем.

Предположительно, оно должно было означать расстояние между буквами строки. То самое, за которое в CSS отвечает правило .

Еще более загадочным для меня было значение этого поля: . То, что знак минуса означает “ужать” слова в строке, можно было догадаться. Но вот что за единицы измерения применяет Photoshop в данном случае? Как мне перевести это значение в CSS? В каких единицах - пикселях или em?

Ответы на эти вопросы в русскоязычной части Интернета я не нашел. Не спорю, может и плохо искал. Но обнаружил их в англоязычной части. Вольный пересказ одной замечательной статьи, посвященной этому вопросу, я привожу в данном небольшом обзоре.

Итак, есть psd-макет, на котором для шрифтов применено загадочное значение в таком же, не менее загадочном, поле:

Letter-spacing в Photoshop

Смотрим внимательно на панельку “Символ”. Здесь собраны воедино все свойства, отвечающие за прорисовку шрифта на макете.

Верхние два поля - “Georgia” и “Regular”. Здесь все просто и понятно - семейство шрифта и его начертание. В CSS данные значения оформляются через правила и .

Второй ряд из двух полей, со значениями и . Думаю, здесь также не должно возникнуть вопросов. - размер шрифта, - интерлиньяж, межстрочное расстояние. За первое свойство в CSS отвечает правило , за второе - .

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

В CSS имеется аналогичное правило, которое называется . Не стоит путать его с очень похожим правилом . Разница между ними очевидна, хотя сфера применения одинакова - строка текста. задает расстояние между словами, а - расстояние между буквами.

Вернемся к нашим баранам. Видно, что в поле стоит значение . О том, как перевести его в CSS, расскажу немного позже. А пока кратко пробежимся по остальным строкам палитры “Символ”.

В четвертом ряду располагаются два поля, назначение которых в оригинале пишется так: “Vertical scalar tool” и “Horizontal scalar tool”. Можно догадаться, что с помощью этих настроек можно масштабировать (растягивать или сжимать) буквы как по-вертикали, так и по-горизонтали.

В последнем (пятом) ряду находится поле изменения расстояния для индексов, и поле цвета шрифта (букв).

Вот, в принципе, и все описание. Краткое - но к чему растягивать его? Полное описание с картинками, полезное для себя, нашел в этой статье.

Перейду к вопросу, который остался открыт - как преобразовать значение в Photoshop в аналогичное правило CSS?

Что за единицы измерения использует Photoshop в данном случае, честно сказать, не знаю. Какие-то загадочные, свои собственные, наверное. Но это и не интересно, если что. Нужно лишь перевести их в одну из двух наиболее популярных единиц измерения CSS - или .

Перевод осуществляется с помощью формул. Эти формулы были выведены опытным путем автором статьи - Justin Marsan. На своей собственной практике я пару раз проверил их и пришел к выводу, что они верны.

Формула перевода значения Photoshop в :

X / 1000

где - это значение в Photoshop. В конкретном случае оно будет равно:

-25 / 1000 = -0.025em

Формула перевода значения Photoshop в пиксели :

X * Y / 1000

где - это значение в Photoshop, - размер шрифта там же. То есть, сначала значение межбуквенного расстояния умножается на размер шрифта, а затем полученное значение делиться на 1000.

В конкретном случае формула и результат будет следующим:

-25 * 22 / 1000 = -0.55px

На этом, думаю, что все сказано.

cssletter-spacing

gearmobile.github.io

Иллюстрированный самоучитель по Adobe Photoshop 6 › Текст в Photoshop › Атрибуты символов текста [страница - 190] | Самоучители по графическим программам

Атрибуты символов текста

Смещение базовой линии. Воображаемая линия, проходящая по нижнему краю основного элемента символа, называется базовой (см, рис. 7.23). Литера как бы лежит на этой линии. Обычно базовые линии символов строки находятся на одном уровне. Однако положение базовой линии можно менять, вводя соответствующие значения в поле Baseline shift (Смещение базовой линии) палитры Character (Символ). По умолчанию смещение базовой линии равно 0. Оно измеряется в тех же единицах, что и кегль. Положительное значение смешения соответствует подъему символа относительно остальных, отрицательное – опусканию (рис. 7.27).

Иллюстрированный самоучитель по Adobe Photoshop 6 › Текст в Photoshop › Атрибуты символов текстаРис. 7.27. Смещение базовой линии

Интерлиньяж. Это расстояние между строками. В Photoshop интерлиньяж измеряется как расстояние между базовой линией данной и следующей строки (см. рис. 7.23). Параметр задается для каждого символа. Если в строке есть символы с разным интерлиньяжем, то программа определяет интерлиньяж строки как максимальный среди заданных для символов строки.

Интерлиньяж может быть стандартным или точным. Стандартный интерлиньяж равен 120% от кегля наибольшего символа строки. В этом случае величина интерлиньяжа гибко меняется в зависимости от кегля. То есть стандартный интерлиньяж – относительная величина, пропорциональная кеглю символов. Чтобы задать для символов стандартный интерлиньяж, установите в поле Leading (Интерлиньяж) палитры Character (Символ) значение Auto (Авто). При точном интерлиньяже расстояние между строками фиксирование. Для его установки введите нужную числовую величину в поле ввода Leading (Интерлиньяж).

Трекинг. Характеризует межсимвольные пробелы. Уменьшение трекинга отнимает, а увеличение – прибавляет к межсимвольному расстоянию определенную величину. Для измерения трекинга и других горизонтальных размеров в шрифте используются шпации. Круглая, полукруглая и тонкая шпации – относительные полиграфические единицы измерения, равные, соответственно, ширине заглавных букв М, N и строчной буквы t данного шрифта. Таким образом, круглая шпация примерно равна размеру шрифта, полукруглая шпация составляет 0.5 размера шрифта, а тонкая шпация – 0.25 размера шрифта. Сокращение для круглой шпации – em. Шпации применяются при измерениях абзацных отступов и кернинга, а также при задании других смещений символов. Межсимвольные расстояния измеряются в тысячных долях круглой шпации (em/1000). Этот параметр задается в поле Tracking (Трекинг) палитры Character (Символ) и может быть как положительным, так и отрицательным (рис. 7.28).

Иллюстрированный самоучитель по Adobe Photoshop 6 › Текст в Photoshop › Атрибуты символов текстаРис. 7.28. Трекинг с различными значениями: -100 (а), -50 (б), О (в), +50 (г), +100 (д)

Иллюстрированный самоучитель по Adobe Photoshop 6 › Текст в Photoshop › Атрибуты символов текста а Иллюстрированный самоучитель по Adobe Photoshop 6 › Текст в Photoshop › Атрибуты символов текста бРис. 7.29. Текст без кернинга (а) и с кернингом (б)

Кернинг пар. Характеризует изменение ширины пробела между определенными парами символов. Настройка интервалов необходима для улучшения зрительного восприятия текста. Если межсимвольные интервалы одинаковы, то для некоторых сочетаний символов интервал между ними выглядит увеличенным по сравнению с другими. Так, на рис. 7.29, а пробел между буквами А и G выглядит шире, чем между буквами Е и N. Обычно кернинг делается в сторону уменьшения пробела – таким образом, что выступающие части одного символа пары заходят в пространство второго символа (рис. 7.29, б). В результате размещение символов становится зрительно более равномерным.

Кернинг может быть автоматическим. Шрифты снабжены таблицами кернинга, т. е. списком пар символов, между которыми пробел при наборе текста автоматически сокращается (например, для пар ГО, ГА, АУ, Cm, Те и др.). Установите в палитре Character (Символ) в поле ввода Kerning (Кернинг) значение Metrics (Метрический), если вы хотите чтобы программа проводила в тексте кернинг на основе таблицы.

Чем крупнее текст, тем большее значение для его внешнего вида имеет хороший кернинг. В заголовках и другом крупном тексте задают точный (или ручной) кернинг, когда символы сближают произвольно. Для установки кернинга вручную поставьте курсор между проблемной парой символов и задайте числовое значение в поле Kerning (Кернинг). Положительные величины смещают символ вправо, отрицательные– влево. При изменении значения кернинга первая литера остается на месте, вторая перемещается. Кернинг проводится только в точке вставки. Он не определяется ни по умолчанию, ни для выделенного текста. Измеряется кернинг в тысячных долях круглой шпации (em/1000).

Ширина и высота символов. В расширенном или суженном начертании гарнитуры рисунок каждой буквы изменен с учетом ее ширины так, чтобы получился гармоничный шрифт с выверенным соотношением ширины штрихов и межсимвольных интервалов. В отличие от этого, ширина и высота символа в рамках программы изменяется простым их сжатием и растяжением. Соотношение ширины и высоты символа данного начертания может быть задано вводом значений в процентах в полях Vertical Scale (Высота) и Horizontal Scale (Ширина) палитры Character (Символ). Исходная ширина и высота принимаются за 100%. Значение ширины символов меняется и при масштабировании текстового объекта. На значение же высоты в поле Vertical Scale (Высота) масштабирование не влияет, вместо этого увеличивается или уменьшается кегль.

ПримечаниеУвеличение высоты символа практически повышает его кегль. Однако программа считает кегль увеличенных литер исходным и не меняет значение интерлиньяжа.

При сжатии и растяжении нарушаются соотношение толщин между горизонтальными и вертикальными штрихами литер, пробелы в очках букв Б, О, Q и т. д. внешний вид и читаемость шрифта ухудшаются. Особенно к этому чувствительны шрифты с засечками, поэтому для них подобные деформации нежелательны. Рубленые шрифты меньше искажаются при смене ширины, но и здесь эту величину не стоит менять более чем на 10-20%.

samoychiteli.ru

7 хитростей профессиональной работы с типографикой

Многие люди имеют опыт работы в Photoshop, небольшая часть этих людей совершенствуется в сфере графического дизайна. И совсем немногие понимают принципы, лежащие в основе дизайна, и могут объяснить причины, по которым что-либо выглядит “хорошо” или “плохо”.

Одной из самых больших трудностей в изучении принципов дизайна является правильное использование типографики. Всё гораздо сложнее, чем просто найти хороший шрифт. Существует много других свойств: цвет, размер, толщина, интерлиньяж, трекинг, отступы и др.

Грамотное использование типографики может быть решающим в дизайне и превратить его из любительского в великолепный, а из великолепного в невероятно фантастический. Из этого руководства вы узнаете, как на практике сделать вашу работу более элегантной всего в несколько шагов.

Шаг 1. Что не так с этим изображением?

Давайте начнем с того, что многие честолюбивые дизайнеры создадут, если попросить их сделать простой заголовок с текстом из нескольких абзацев в программе Photoshop или Illustrator. Для неискушенного взгляда все здесь выглядит ни хорошо, ни плохо, текст просто есть. Но вы же не хотите создавать дизайн, который “просто есть”?

Что не так с этим изображением?

Шаг 2. Отступы и пустое пространство

Первым делом добавим отступы вокруг целого текстового блока. Оставляя свободное пространство вокруг текстового блока, мы даем читателю возможность не утомлять глаза при прочтении строк и предложений, что делает чтение более приятным процессом. Целью дизайнерской типографики во многих случаях является улучшение удобочитаемости текста. В конце концов, зачем вообще нужен текст, если его никто не будет читать?

Отступы и пустое пространство

Шаг 3. Интерлиньяж и межстрочное расстояние

Другой способ сделать ваш текст более удобочитаемым – увеличить межстрочное расстояние (Line spacing), или Интерлиньяж (Leading). Интерлиньяж (Leading) – это попросту вертикальный интервал между строками текста в абзаце. Достаточное значение интерлиньяжа упрощает переход от строчки к строчке во время чтения. Есть хорошее правило для определения оптимального интерлиньяжа: он должен быть порядка 150% от размера вашего шрифта. Например, если установлен размер шрифта 12 пунктов, то интерлиньяж будет 18 пунктов. Это простая математика: 12 пунктов x 1.5 = 18 пунктов.

Интерлиньяж (Leading), как и другие настройки, о которых рассказано в этом руководстве можно изменить в программах Photoshop или Illustrator на панели Символ (Character).  В меню Photoshop это Окно > Символ (Window > Character), в меню Illustrator - Окно > Текст > Символ (Window > Type > Character).

Интерлиньяж и межстрочное расстояние

Шаг 4. Трекинг и межбуквенное расстояние

Ну вот, текст уже выглядит получше, но для достижения результата близкого к идеалу еще многое нужно сделать. По умолчанию межбуквенное расстояние во многих шрифтах не оптимизировано для улучшения удобочитаемости. Часто буквы расположены слишком близко друг к другу, и для удобного чтения их нужно разреживать. Межбуквенное расстояние еще называют Трекингом (Tracking).

Не стоит путать Трекингом (Tracking) с Кернингом (Kerning) – это интервал между определенными парами букв. В данном документе мы совсем немного увеличили значение Трекинга (Tracking), но все равно это улучшило удобочитаемость и подачу текстового материала.

Трекинг и межбуквенное расстояние

Шаг 5. Начертание и выбор шрифта

Многие пропускают пункты 1-3 и переходят сразу к этому – выбору шрифта. В мире существуют сотни и тысячи различных шрифтов, так что бывает очень сложно выбрать подходящий. Стоит начать с того, что большая часть бесплатных шрифтов сконструированы плохо, да и просто уродливы. Не стесняйтесь прислушиваться к рекомендациям других дизайнеров, чьи работы широко признаны. Ниже приведен список некоторых из хороших ресурсов, где можно найти как бесплатные, так и платные шрифты:

·         Adobe Fontfolio (very expensive)

·         Hoefler and Frere-Jones

·         HvD Fonts

·         DaFont

Начертание и выбор шрифта

Шаг 6. Размер шрифта

Другой способ создать разделение между заголовками и абзацами – это изменить размер текста.

Еще одно полезное правило для заголовков: их размер должен быть в 2-3 раза больше, чем размер текста абзацев. Итак, размер текста в абзаце в данном случае 12 пунктов, так что заголовок будет 32 пункта – это в 2 и 2/3 раза больше.

Размер шрифта

Шаг 7. Толщина шрифта

Хотя это работает не всегда, но изменение толщины шрифта может улучшить удобочитаемость, разбив страницу текста на части. Особенно при чтении текста онлайн люди чаще пробегают документы глазами, нежели читают внимательно, таким образом толщина шрифта поможет быстро перейти к следующему разделу текста, который их интересует.

Таким образом, заголовок каждого раздела отделяется от основной информации, следующей за ним.

Толщина шрифта

Шаг 8. Цвет и контраст

Черный текст на белом фоне – это хорошо, но цветной текст на белом фоне может быть даже лучше. Работа с контрастом непроста. Слишком сильный контраст приведет к тому, что глаза читателя будут больше уставать со временем. А слишком слабый заставит глаза читателя больше напрягать глаза, чтобы попросту разглядеть текст. Темно-серый текст на белом фоне глазам прочесть гораздо проще, нежели черый. Этот эффект может быть практически незаметным, однако ваши глаза сказали бы вам спасибо даже спустя 10 минут чтения.

Кроме снижения нагрузки на глаза, изменение цвета заголовков поможет читателю быстрее заметить их. Даже использование неяркого синего оттенка (как в данном случае) очень сильно меняет ситуацию. Люди подсознательно воспринимают черный цвет, как “скучный”, а вы же не хотите чтобы так было…

Добавление даже неброских цветов в текст придаст ему более профессиональный вид. 

Цвет и контраст

Шаг 9. Экспериментирование

Я не могу ручаться, что советы, приведенные выше подойдут для всех случаев. Это основные правила, которые необходимы для классической типографики, но мы же знаем, что правила существуют, чтобы их нарушать. Первым советом было: добавлять отступы. Примеры ниже показывают, что это не всегда обязательно. Эти два примера резко отличаются друг от друга, однако оба они выглядят хорошо. Вот тут уже в дело вступает опыт. Приобретая опыт и экспериментируя, вы начнете понимать, какие методы работают, а какие – нет. Некоторые из великолепнейших дизайнерских работ были созданы при абсолютном игнорировании этих правил, так что используйте их, как отправную точку, если вам нужен простой удобочитаемый текст, который при этом еще и приятен глазу.

Экспериментирование

Шаг 10. До и после

Как вы можете видеть, немного знаний, опыта и несколько простых изменений могут повысить уровень ваших дизайнерских работ.

Ссылка на источник

До и после

sveres.ru


Смотрите также