Как сделать стилизованный текст
Как сделать надпись красивой и понятной: стилизация текста в дизайне
Стилизация текста похожа на добавление соли в кулинарии. Немного, аккуратно — получается вкусно. Переусердствуем — становится несъедобно.
Когда разрабатываете дизайн логотипа или креатив для рекламы, хочется сделать надписи красивыми и уникальными. Чтобы они выделялись на фоне других, привлекали внимание, радовали глаз. Но если переборщить — слова станет сложно читать, значит, текст станет хуже выполнять свою главную задачу — доносить информацию.
Поэтому важно знать основы стилизации в дизайне и уметь работать с ней.
Пишущий дизайнер. Пришла в профессию, получив второе образование, ранее занималась когнитивными исследованиями, SMM и копирайтингом. Пишет о визуальных трендах, делится наблюдениями из отрасли и техническими лайфхаками.
Что такое стилизация и зачем она нужна
Читатель быстро воспринимает текст, напечатанный классическим шрифтом, и легко улавливает его смысл. Но глаз за такие надписи не цепляется.
В борьбе за внимание приходится искажать форму, чтобы создать художественный образ — это и называется стилизацией. Её приёмы лежат в основе многих логотипов и рекламных креативов.
Стилизация — про поиск баланса между креативом и читабельностью.
Стилизация надписей в логотипе позволяет с первого взгляда понять, что за бренд перед нами. Визуальный образ может соответствовать названию или указывать на сферу деятельности компании.
Изменение формы букв хорошо работает в рекламных баннерах для привлечения дополнительного внимания.
Тренд на деформацию букв укрепился в диджитале с ростом популярности анимации. Чтобы печатные знаки в движении были нескучными, их собирают из кусочков, вертят в разных направлениях или меняют им форму.
Новичку может показаться, что это довольно лёгкая задача, но хорошая стилизация — настоящее искусство. Если вы напечатаете слово в графическом редакторе и начнёте двигать векторные кривые в буквах, то быстро обнаружите, как осмысленная надпись превратилась в симпатичную кракозябру.
Что делает буквы и слова узнаваемыми
Если не вдаваться в исключения из правил, всё самое важное у буквы расположено чуть выше её середины. Именно по этой области проще понять, что перед нами не просто картинка, а знак алфавита. А вот нижняя половина букв менее ценная, чем верхняя. Смотрите:
В верхней части букв больше всяких переломов формы, которые влияют на узнаваемость. Буквы «Г», «Т», «П» и многие другие в своей нижней половине напоминают одинаковые палки, а отличаются только верхушкой.
К тому же человеческий глаз ошибочно определяет середину чуть выше, чем она расположена на самом деле. Буквы в большинстве шрифтов построены с учётом этой особенности, и центральные элементы в них тяготеют к верхней половине.
Поэтому без особой необходимости её лучше не трогать. А вот искажать нижние части букв любят даже во многих декоративных шрифтах, это универсальный приём:
Второй популярный способ покреативить с типографикой — продлить концы букв в разных направлениях. Этим создают визуальный образ при минимальной деформации самого буквенного знака. Такое решение вы регулярно видите — в логотипе Subway:
Наконец, важнее всего — общая форма буквы, а не детали внутри неё. При взгляде на «М» мы ожидаем увидеть два треугольника, на букву «Е» — подобие широкой вилки. Штрихи могут быть толще и тоньше, короче или длиннее, выше или ниже — мы всё равно узнаём букву, благодаря этому и существует огромное многообразие шрифтов. И если один штрих из «Е» вообще убрать, никто сильно не огорчится:
Те части букв, которые не слишком важны для понимания формы, можно заменить на что-нибудь другое.
Но слова мы не читаем по отдельным буквам, а воспринимаем целиком как визуальную форму. Помните заезженный мем, где в словах перепутаны буквы, а читается всё равно без проблем? Это связано с тем, что глаза при чтении делают скачкообразные движения, и точек фиксации взгляда гораздо меньше, чем букв.
Давайте посмотрим на запись движений глаз с айтрекера :
Прибор для фиксации движений глаз.
Как видите, иногда из фокуса внимания выпадают не то что буквы, а целые короткие словечки. Их мы воспринимаем периферическим зрением и легко можем даже не заметить отсутствие, перестановку или искажение отдельных букв. А если и заметим, то без труда угадаем знакомое слово.
Это используется в дизайне — букву в слове можно изменить так, чтобы общее цветовое пятно не изменилось:
C каждым словом мы ассоциируем обобщённый, а не конкретный визуальный образ — именно эта способность позволяет нам без труда читать разные шрифты. Мы знаем, что в слове «ANIMAL» в начале будет что-то треугольное, потом много зигзагов, а затем — вертикальная палка с горизонталью внизу. Если общую форму не нарушать, с текстом можно всячески креативить.
Основные способы стилизации
Для хорошей стилизации важно не только продумать визуальные образы, но и учесть особенности восприятия букв и слов. Рассмотрим самые популярные приёмы, которые можно использовать в логотипах, вывесках и рекламе.
Поворот и перемещение букв
Это простой способ оживить надпись без ущерба узнаваемости слова. Мы уже рассмотрели поворот одной буквы в логотипе «Animal Planet». Но наклон надписей встречается очень часто, и иногда отдельные буквы вылезают за пределы строки. Например, как «La» в этом логотипе свешивается вниз:
Поворот слова — ещё один приём, который можно взять на вооружение. Часто и в наружной рекламе, и в интернете слово поворачивают на 90 градусов целиком:
Российскому жителю привычно и понятно, когда начало перевёрнутого слова внизу, потому что мы привыкли к такому написанию на торцах книг (в европейских книжках всё наоборот, начало вверху; впрочем, в дизайне используют оба направления).
Замена буквы
Узнаваемость каждой буквы особенно важна, если надпись коротенькая и незаезженная, например аббревиатура. Если слово длинное или просто у всех на слуху, можно убрать из него целую букву, заменив на что-то более интересное:
Слово-картинка
Иногда визуальный образ представляет собой не отдельные буквы, а целое слово. Это реже встречается, потому что читабельность в таком случае обеспечить трудно. Приём подходит для изображения простых предметов, в которых не придётся сильно ломать форму букв:
Если буквы нужно вписать в более сложные формы, для лучшей читаемости попробуйте добавить детализации и показать объём в пространстве. Было время, когда типографика с перспективными искажениями была моветоном и казалась устаревшей в рекламе и логотипах. Но уже несколько лет она держится в тренде:
Соединение букв
Ещё один популярный способ разнообразить типографику — это лигатуры, соединения между несколькими печатными знаками.
Негативное пространство
Другой относительно безопасный вариант креатива — это использование негативного пространства, когда фон становится буквой. Такой дизайн отличается от привычных надписей чёрным по белому, но не мешает восприятию смысла:
С помощью пустот между буквами даже можно создавать простые картинки. Возможно, вы не замечали, что в логотипе FedEx последние две буквы образуют белую стрелку:
Негативное пространство можно интересно обыграть и в фирменном стиле, и в рекламе. Оно позволяет креативить с надписями без ущерба лаконичности.
P. S. Универсальных рецептов нет
Существует бесконечное множество букв в алфавите, шрифтов, начертаний и способов стилизации. Поэтому нет единых инструкций на все случаи жизни.
Типографика — одна из самых сложных областей дизайна. Мы рассмотрели хорошие примеры, но зачастую надписи на вывесках, упаковках и логотипах всё же трудно прочесть. Даже если все буквы в наличии и на своих местах.
Несмотря на единые правила восприятия, в каждом отдельном случае на лёгкость чтения могут влиять разные факторы: специфика шрифта, длина и частота употребления слова, интервалы, цвет, размер букв. А читаемость названий — это главное, что важно сохранять, особенно в фирменном стиле.
Кстати, даже простые надписи в дизайне очень отличаются. Прежде всего это обусловлено разницей гарнитур и начертаний.
Бывают группы гарнитур с обычными засечками, с рублеными засечками, без засечек, а также декоративные шрифты, не подходящие ни под одно из описаний. В большинстве гарнитур есть разные варианты начертаний. Курсивные, жирные, жирные курсивные… Полужирные, полужирные курсивные… Тонкие, тонкие курсивные… В результате в нашем арсенале — бесконечное множество вариантов.
На восприятие текста также влияют пустоты между буквами. Их изменяют, варьируя интерлиньяж (расстояние между строчками), кернинг (расстояние между конкретной парой знаков) и трекинг (расстояние между всеми знаками).
Иногда этих незатейливых средств вполне хватает для выразительной надписи:
Как использовать инструмент «Текст» в Photoshop
Есть много причин, по которым вам может понадобиться добавлять надписи поверх изображений. Текст на фотографиях создает большие рекламные элементы, такие как на почтовых открытках. Вы можете писать в кавычках свои сообщения из социальных медиа или вдохновляющие фразы, добавить свое имя или адрес веб-сайта:
Основные инструменты для работы с текстом
Это может показаться довольно простой темой, но в Photoshop имеется универсальный набор инструментов для работы с текстом. Таким образом, в этом разделе вы узнаете различные способы добавления, настройки и работы с текстом.
Вот основные инструменты для работы с текстом в Photoshop :
Существует еще несколько инструментов, но мы поговорим о них позже. А сейчас давайте добавим какой-нибудь текст и поэкспериментируем с ним.
Эксперименты с текстом
В Photoshop существуют два способа добавить текст. Просто нужно нажать в палитре инструментов на инструмент « Текст », затем кликнуть на изображении и начать вводить текст. Второй способ заключается в использовании текста абзацем. Давайте попробуем их оба.
Откройте в Photoshop новый документ, и нажмите на инструмент « Текст ». Начните вводить текст. Вы увидите что-то вроде этого:
Откройте другой документ, нажмите на инструмент « Текст », если он еще не выбран, а затем нажмите курсором в любой точке и перетяните указатель, удерживая клавишу мыши, чтобы создать прямоугольник. Вы должны увидеть что-то вроде этого:
Вы можете растянуть опорные точки текстового поля ( маленькие квадраты в центре сторон и по углам ), чтобы определить размер области, в которой вы хотите вводить текст. Этот способ отлично подходит для больших объемов текста. Вы можете изменять размер текстового поля в настройках.
Вы можете использовать инструмент « Перемещение », чтобы разместить весь блок текста в любом месте страницы.
Текст абзацем также легче распределять по странице. Для его центрирования просто захватите одну из опорных точек и перетащите ее к правому краю страницы.
Перетащите левую опорную точку к левому краю страницы, а затем в верхнем меню нажмите иконку центрирования текста ( на приведенной выше диаграмме значится элемент №5 ). Это маленькое чудо! Ваш текст теперь выровнен точно по центру. И больше не нужно гадать.
Трансформация букв в тексте
Нажмите на иконку, которая выглядит как лист бумаги ( элемент #6 ). Откроется панель « Трансформация символов ». Если редактируете обычный текст, ваш слой текста должен быть выбран, чтобы вы могли вносить изменения. Если вы используете текст абзацем, то нужно выбрать текст, который вы хотите трансформировать.
Выберите, что нужно и попробуйте изменить различные параметры. При наведении на название параметра будет всплывать окно с подсказкой, в котором вкратце объясняется, за что отвечает каждый из них.
Трансформация блоков текста
Для того, чтобы прописать текст вдоль кривой, используйте инструмент « Деформация текста » ( выберите инструмент «Текст» в палитре инструментов и найдите между элементами 5 и 6 соответствующую иконку верхнего меню — она выглядит как буква «Т» с кривой внизу ).
Создайте какой-либо текст и убедитесь, что вы находитесь на слое с этим текстом. Нажмите на инструмент « Деформация текста », чтобы открыть всплывающее окно. Здесь вы можете выбрать тип фигуры, в которую будет вписан текст:
Три простых способа сделать текст заметным
Иногда, когда вы добавляете к фотографии текст, он может немного затеряться на фоне изображения. Даже если вы делаете его большим, он просто кажется недостаточно четким или прозрачным. Есть несколько причин этого:
А) Это может быть связано с настройками сглаживания. Зайдите в верхнее меню. Убедитесь, что для перехода не установлено значение « Нет ». Это особенно важно для изображений, которые вы будете публиковать в интернете. Выберите любой из других вариантов и посмотрите, как при этом меняются края текста. Окончательный выбор типа сглаживания зависит от ваших личных предпочтений:
Вот как это сделать:
Сначала выберите текстовый слой, для которого вы хотите создать тень. Перейдите в вашу палитру слоев и выберите внизу иконку « Стиль слоя », а затем выберите « Тень ».
В диалоговом окне « Тень » задайте следующие параметры. Если вы работаете с изображением в высоком разрешении для печати, то измените размер тени с 1 до 10. Возможно, потребуется настроить эти параметры в зависимости от размера вашего изображения, просто убедитесь, что вы используете те же числа:
Допустим, в приведенном ниже примере, вы хотите избавиться от облаков, расположенных за текстом, и сделать небо немного темнее, чтобы текст больше выделялся на его фоне. Выберите мягкую кисть и используйте инструмент « Пипетка », чтобы задать в качестве цвета кисти полутона — на этом изображении я выделил небо прямо над буквой « Р «. Задайте диаметр кисти равный высоте букв.
Теперь добавьте новый слой между фото и текстом ( это будет ваш секретный слой ) и порисуйте кистью по тексту. На самом деле вы будете рисовать под текстом, так как ваш слой находится под ним. Измените режим смешивания на « Темные цвета » или « Замена темным » ( это будет зависеть от цвета, который вы используете ), а затем можете задать соответствующую непрозрачность слоя:
Декоративный и стилизованный текст
Один из самых распространенных вопросов, которые я получаю о тексте на фотографиях, это как я создаю закрученный стилизованный текст. На самом деле в большинстве случаев это просто специальный шрифт, а не декорированные буквы.
С помощью нескольких простых методов вы можете сделать так, чтобы текст на самом деле привлекал к себе внимание. И вы можете сделать текст более стильным, декорировав его. Раскройте в себе художника-графика — теперь у вас есть все необходимое!