0

Game kern

Kerntype

Игра, которая учит кернить — если вы в нее поиграете, вам станет физически больно, когда вы увидите неправильный кернинг.
http://type.method.ac/#
Color — A Matching Game

Игра, которая приучает чувствовать цвет. В ней 6 уровней, каждый сложнее другого.
http://color.method.ac/
Webfont

Отечественный сервис Webfont.ru — каталог бесплатных шрифтов для использования в вебе. Можно подключать шрифт напрямую с сайта, можно через плагин для редактора (Sublime Text 2, PHP Storm, NotePad++), можно просто скачать в нескольких форматах. С его помощью можно подгрузить на сайт нестандартные шрифты. Всего около 450 шрифтов, из них около 300 поддерживают кириллицу.
http://webfont.ru/
Pattern Library

Библиотека качественных бесшовных паттернов.
http://thepatternlibrary.com/
Character Code

Своеобразный справочник самых ходовых символов — показан вместе с HTML-кодом, кодом в hex и описанием каждого символа.
http://character-code.com/
Sizzlepiq

Можно проверить, как изображение на сайте будет выглядеть на десятках разных устройств, от самого маленького телефончика до Retina-экрана. Причем загружать можно не по одной картинке, а сразу целой папкой.
https://www.sizzlepig.com/
Flakes

Open-source фреймворк для разработки дизайна и интерфейса бизнес-приложений. Представляет собой набор CSS, javascript-библиотек и других полезностей.
http://getflakes.com/
Evil-Icons

Набор иконок в формате SVG от российских разработчиков. Поддерживает Rails, Sprockets, Node.js, Gulp, Grunt и CDN.
http://evil-icons.io/
Skeleton
Для тех, кому горит — Skeleton в 400 строк кода, простой адаптивный шаблон. Можно сразу приступать к разработке.
http://getskeleton.com/
Material Palette
Генератор палитр для тех, кому полюбился Material Design. Выбираете два цвета и получаете полную палитру, которую можно скачать.
http://www.materialpalette.com/
UXCheck
Chrome может все, даже проверить сайт на наличие проблем с юзабилити. UX Check — это расширение для браузера, которое ищет и выделяет проблемы в этой области. Отметки затем можно экспортировать.
http://www.uxcheck.co/
Apple Pie
Набор CSS-инструментов для разработки продвинутых веб-интерфейсов. Упрощает работу с кодом и его организацию благодаря семантическому подходу к CSS.
http://www.apppie.org/
Frame
Онлайн-создание макапов — загружаете, подравниваете изображения, и все готово. Полезно, если нужно быстро показать верстку сайта.
http://frame.lab25.co.uk/
JS Nice
Анализирует JS-скрипт, загруженный вами, и превращает его в человеческий вид, переименовывая переменные и параметры (сервис использует данные, основанные на сотнях open source проектов).

Применение к тексту заливки и обводки

Добавим заливку и обводку к только что созданным буквицам. Выделите буквицы. Выберите кнопку заливки на палитре Образцы ( рис. 4.25). Задайте параметры образца ( рис. 4.26).


Рис. 4.25. Инструмент Заливка на палитре Образцы
Рис. 4.26. Окно выбора параметров образца

Аналогично заливки для выделенной буквицы примените обводку ( рис. 4.27). Толщина обводки по умолчанию равна 1 пункту, но ее можно изменить в диалоге Окно-Обводка, открывающем палитру Обводка ( рис. 4.28).


Рис. 4.27. К буквице применена обводка
Рис. 4.28. Применена обводка толщиной 3 пункта

Кернинг (Kerning)

При рассмотрении текстов, набранных пропорциональными шрифтами больших кеглей, часто создается обманчивое впечатление, что расстояние между литерами различное. Это явление наиболее ярко проявляется в таких парах букв, как «WA» и «AY» (или, например, в русских «ГА»). Некоторые настольные издательские системы позволяют выполнить корректировку межлитерного интервала в парах литер в словах в зависимости от кегля. Такой процесс корректировки называется кернингом. В результате кернинга устраняется оптический эффект неравномерности межлитерного интервала. Пример кернинга между буквами Г и А (в слове БУМАГА) показан на рис. 4.29.


Рис. 4.29. Пример кернинга между буквами Г и А

Для оптимального восприятия текста зрением межсимвольные пробелы не должны быть одинаковыми. Чем крупнее текст, тем большее значение для его внешнего вида имеет кернинг. Текст мелкого кегля можно вообще не подвергать кернингу. Так, например, в программе CorelXARA для проведения ручного кернинга курсор должен быть установлен между сближаемыми символами. При изменении значения кернинга первая литера остается на месте, вторая перемещается. Фирменные шрифты снабжены таблицами кернинга, то есть списком пар, для которых нужно сокращать пробел при наборе текста. Это, например, ГО, ГА, АУ и другие. Программы верстки снабжены возможностью автоматического кернинга, т.е. можно организовать автоматическую корректировку пробелов в парах кернинга в тексте любой длины. После обработки текста автоматическим кернингом в заголовках и другом крупном тексте иногда дополнительно проводят ручной кернинг.

Трекинг

Трекинг, в отличие от кернинга, задается не для пары, а для нескольких символов и в данной программе характеризует величину межсимвольного пробела в группе символов. Пробелы меняются одинаково для всех выделенных символов. Если задавать трекинг для выделенной пары, то он аналогичен кернингу. Трекинг оказывает самое сильное влияние на окраску текста, поскольку им определяется расстояние между отдельными буквами. Чем больше разрядка между буквами, т.е. свободнее трекинг, тем светлее окраска. Если трекинг достигает максимума, текст начинает рваться и утрачивает окраску, потому что его однородность нарушается. Техника трекинга (изменения расстояния между символами) улучшает оптические свойства текста при больших и малых размерах шрифта. Иначе говоря, трекинг определяет межсимвольное расстояние как функцию от размера шрифта. Для того чтобы окончательно понять, зачем нужен трекинг, посмотрите на рис. 4.30. Как вы можете заметить, первый вариант с положительным трекингом ( рис. 4.30,1) выглядит растянутым — расстояния между буквами довольно большие (в других шрифтах это можно заметить еще сильнее). Во втором примере для того, чтобы текст был более удобен для чтения и воспринимался целостным, применен отрицательный трекинг ( рис. 4.30).


Рис. 4.30. Текст набран с трекингом в +30 единиц (сверху) и с трекингом в -30 единиц (снизу)

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

Единицы измерения кернинга и трекинга

Кернинг и трекинг измеряются в специальных относительных единицах — тысячных долях круглой шпации (ems/1000), поскольку при смещении в паре важны не точные значения, а их отношение к величине символов в конкретной гарнитуре. Применение такой относительной единицы автоматически делает эти смещения пропорциональными кеглю шрифта. В полиграфии используются дополнительные единицы измерения — круглая шпация, полукруглая шпация, тонкая шпация, характеризующие горизонтальные размеры шрифта. Они соответствуют ширине заглавных букв М, N и строчной буквы t. Круглая шпация примерно равна размеру шрифта, полукруглая шпация составляет 0,5 размера шрифта, а тонкая шпация — 0,25 размера шрифта. Поскольку все шрифты разные, то и ширина литеры М у них может различаться. Таким образом, значение круглой шпации колеблется в зависимости от кегля и гарнитуры. Шпации применяются при измерениях абзацных отступов, кернинга и других перемещениях символов.

Настройка кернинга и трекинга в InDesign

К одному и тому же тексту может применяться как кернинг, так и трекинг. Итак:

Термины

Кернинг — это процесс добавления или вычитания пробелов между определенными парами символов. Иначе говоря, кернингом (kerning) называется изменение ширины пробела для конкретных пар литер (выполняемая при верстке в DTP «тонкая подгонка» межбуквенных просветов для определенных пар литер). Кернинг как атрибут символов, характеризует не сами символы, а расстояние между ними (межсимвольные пробелы). Точная их настройка необходима для улучшения зрительного восприятия текста. По умолчанию в программе InDesign используется метрический кернинг, поэтому кернинговые пары букв автоматически подстраиваются при импортировании или наборе текста. Вы можете вручную измените пробелы между некоторыми буквами в тексте, чтобы сомкнуть бросающиеся в глаза зазоры ( рис. 4.31).
Трекинг — это процесс растяжения или сжатия блока текста. Трекинг — это процесс выравнивания пробелов в диапазоне букв. Например, вы можете выполните трекинг заголовка текста, чтобы вместить весь заголовок на одной строке ( рис. 4.32).


Рис. 4.31. Примеры критических сочетаний букв (кернинговые пары) без кернинга (сверху) и с кернингом (снизу)
Рис. 4.32. Пример трекинга текста

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

Рис. 4.33. Выполним кернинг между парой МО

Выберите инструмент Текст и посредством щелчка установите курсор между буквами «М» и «О» в слове «Грамота». На палитре Символ настройте кернинг этой пары и остальных пар букв в слове Грамота ( рис. 4.34). Пробел между буквами меняйте до тех пор, пока вид двух смежных букв не устроит вас эстетически.

Рис. 4.34. Кернинг выполнен

Теперь, используя палитру Символ мы изменим значение трекинга для заголовка «История короткой жизни и трагической смерти колобка». Прежде чем установить значение трекинга, необходимо выделить весь диапазон букв, трекинг которых вы хотите осуществить ( рис. 4.35 и 4.36).

Рис. 4.35. Выделяем текст для трекинга
Рис. 4.36. Трекинг заголовка текста произведен

Работа с табуляциями

Табуляции можно использовать для расположения текста во фрейме в определенных позициях по горизонтали. Выберите команду Текст-Табуляторы, чтобы открыть палитру Табуляторы. Создайте пустой текстовый фрейм и нажмите на значок магнита на палитре Табуляторы ( рис. 4.37). При щелчке на значке магнита происходит выравнивание масштабной линейки с выделенным текстом (в нашем случае — с размером текстового фрейма).


увеличить изображение
Рис. 4.37. Вид палитры Табуляторы

Чтобы задать табуляцию для всего абзаца, перемещайте нижнюю часть маркера. Чтобы задать табуляцию только первой строки — переместите верхнюю часть маркера. Или (2-й способ): щелкните на верхнем маркере, выделите его и в поле Х задайте числом табуляцию первой строки. Аналогично, щелкните на нижней части и в поле Х задайте табуляцию всего абзаца. Задавать положения табуляторов можно как положительными, так и отрицательными числами (но в границах фрейма) — рис. 4.38.

Рис. 4.38. Показан составной маркер табуляции

В палитре Табуляторы выделите все слова от Монитор до $85.0. Щелкая чуть выше линейки палитры установите положения табуляторов, например 40 для первого, 50 — для второго и 60 — для третьего ( рис. 4.39).


увеличить изображение
Рис. 4.39. Текст вставлен во фрейм и выделен

В поле Отточие установите тип заполнителя, например, поставьте точку и пробел после нее. Тогда расстояние табуляции будет заполнено точками, разделенными пробелами. Нажимая на клавишу Tab, вставьте табуляторы между словом Монитор, плата, Процессор, Память и соответствующей ценой. Получится примерно так ( рис. 4.40).

Рис. 4.40. Табуляторы расставлены

Удалить все маркеры табуляции на палитре можно открыв контекстное меню, вызываемое правой кнопкой мыши ( рис. 4.41).

Рис. 4.41. Можно очистить все или удалить конкретный табулятор

Вопросы для самоконтроля

  • Поясните шрифтовые термины «Гарнитура» и «Стиль» шрифта.
  • Выполните создание текста вдоль траектории.
  • Для любого текста поменяйте три параметра шрифта — гарнитуру, кегль и стиль.
  • Что называют «Выключкой»?
  • Покажите, как добавить специальные символы.
  • Выполните создание буквицы.
  • Как применить к тексту заливку и обводку?
  • Где произвести настройку кернинга и трекинга шрифта?
  • На практическом примере покажите ваше умение работать с табуляциями.

Кернинг – это увеличение или уменьшение интервала между определенными парами символов. Трекинг – это расширение или сужение интервала между символами в выделенном тексте или во всем блоке текста.

Кернинг текста можно настраивать автоматически с использованием метрического или оптического кернинга. При метрическом кернинге (называемом также автокернингом) используются пары литер, которые включены в большинство шрифтов. Эти пары литер содержат сведения о расстояниях между конкретными парами букв. Вот некоторые из них: LA, P., To, Tr, Ta, Tu, Te, Ty, Wa, WA, We, Wo, Ya и Yo. Метрический кернинг применяется по умолчанию, поэтому к конкретным парам букв кернинг применяется автоматически во время импорта или ввода.

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

Параметры кернинга и трекинга
А. Исходный текст Б. Текст с оптическим кернингом В. Текст с установленным вручную кернингом между буквами «W» и «a» Г. Текст с трекингом Д. Совмещение кернинга и трекинга

Можно также воспользоваться ручным кернингом, что позволит идеально настроить расстояния между двумя соседними символами. Трекинг и ручной кернинг можно использовать вместе. Для этого сначала настраиваются отдельные пары букв, а затем блоки текста делаются более сжатыми или разреженными. Это не оказывает влияния на относительный кернинг пар букв.

Если поместить курсор вставки между двумя буквами, на панели «Символ» появляются значения кернинга. Аналогично этому при выделении слова или фрагмента текста на панели «Символ» появляются значения трекинга.

Как трекинг, так и кернинг измеряются в тысячных долях em – единицы измерения, которая определяется относительно текущего размера шрифта. Для шрифта размером 6 пунктов 1 em равен 6 пунктам. Для шрифта размером 10 пунктов 1 em равен 10 пунктам. Кернинг и трекинг строго пропорциональны текущему размеру шрифта.

Примечание: Значения кернинга и трекинга применяются к текстам на японском языке, но вообще эти параметры используются и для настройки межсимвольного интервала между символами латиницы.

На заре появления айфона Стив Джобс хотел, чтобы на iPhone OS существовали только веб-приложения. Потом он осознал свою ошибку и Apple открыла разработчикам инструменты для создания привычных нам утилит из аппстора.

Однако веб-софт никуда не пропал. Он развивается и живет своей жизнью. Давайте посмотрим на яркий пример того, что вызвало бы много положительных эмоций у Джобса, – игру Kern Me. Стив был помешан на шрифтах, поэтому он бы сразу понял, о чем это приложение. Однако 95% людей никогда не слышали про кернинговые пары. Это основа типографики (не путать с типографией).

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

Ке́рнинг (англ. kerning) при наборе текста — избирательное изменение интервала между буквами в зависимости от их формы.

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

Сразу скажу, что Photoshop кернинга не понимает, поэтому все буквы расставляет без поправок на их форму. Хороший дизайнер ВСЕГДА улучшит набранный текст руками.

На этом теория заканчивается. Переходим к игре Kern Me.

Заходим с айфона или айпэда на сайт http://type.method.ac.

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

Когда вы почувствуете, что баланс найден, жмите на кнопку Compare для подведения итогов и сравнения с идеалом.

Если из 10 заданий вы получите больше 70 очков, то я не зря писал этот обзор 🙂

Еще раз ссылка на сайт – http://type.method.ac

На планшетнике смотрится куда круче. Через обычный комп тоже можно играть.

(Проголосуйте первым за статью!)
🤓 Хочешь больше? Подпишись на наш Telegramнаш Telegram. … и не забывай читать наш Facebook и Twitter 🍒 iPhones.ru На заре появления айфона Стив Джобс хотел, чтобы на iPhone OS существовали только веб-приложения. Потом он осознал свою ошибку и Apple открыла разработчикам инструменты для создания привычных нам утилит из аппстора. Однако веб-софт никуда не пропал. Он развивается и живет своей жизнью. Давайте посмотрим на яркий пример того, что вызвало бы много положительных эмоций у…

admin

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *