Как сделать дизайн надписи
Как сделать надпись красивой и понятной: стилизация текста в дизайне
Стилизация текста похожа на добавление соли в кулинарии. Немного, аккуратно — получается вкусно. Переусердствуем — становится несъедобно.
Когда разрабатываете дизайн логотипа или креатив для рекламы, хочется сделать надписи красивыми и уникальными. Чтобы они выделялись на фоне других, привлекали внимание, радовали глаз. Но если переборщить — слова станет сложно читать, значит, текст станет хуже выполнять свою главную задачу — доносить информацию.
Поэтому важно знать основы стилизации в дизайне и уметь работать с ней.
Пишущий дизайнер. Пришла в профессию, получив второе образование, ранее занималась когнитивными исследованиями, SMM и копирайтингом. Пишет о визуальных трендах, делится наблюдениями из отрасли и техническими лайфхаками.
Что такое стилизация и зачем она нужна
Читатель быстро воспринимает текст, напечатанный классическим шрифтом, и легко улавливает его смысл. Но глаз за такие надписи не цепляется.
В борьбе за внимание приходится искажать форму, чтобы создать художественный образ — это и называется стилизацией. Её приёмы лежат в основе многих логотипов и рекламных креативов.
Стилизация — про поиск баланса между креативом и читабельностью.
Стилизация надписей в логотипе позволяет с первого взгляда понять, что за бренд перед нами. Визуальный образ может соответствовать названию или указывать на сферу деятельности компании.
Изменение формы букв хорошо работает в рекламных баннерах для привлечения дополнительного внимания.
Тренд на деформацию букв укрепился в диджитале с ростом популярности анимации. Чтобы печатные знаки в движении были нескучными, их собирают из кусочков, вертят в разных направлениях или меняют им форму.
Новичку может показаться, что это довольно лёгкая задача, но хорошая стилизация — настоящее искусство. Если вы напечатаете слово в графическом редакторе и начнёте двигать векторные кривые в буквах, то быстро обнаружите, как осмысленная надпись превратилась в симпатичную кракозябру.
Что делает буквы и слова узнаваемыми
Если не вдаваться в исключения из правил, всё самое важное у буквы расположено чуть выше её середины. Именно по этой области проще понять, что перед нами не просто картинка, а знак алфавита. А вот нижняя половина букв менее ценная, чем верхняя. Смотрите:
В верхней части букв больше всяких переломов формы, которые влияют на узнаваемость. Буквы «Г», «Т», «П» и многие другие в своей нижней половине напоминают одинаковые палки, а отличаются только верхушкой.
К тому же человеческий глаз ошибочно определяет середину чуть выше, чем она расположена на самом деле. Буквы в большинстве шрифтов построены с учётом этой особенности, и центральные элементы в них тяготеют к верхней половине.
Поэтому без особой необходимости её лучше не трогать. А вот искажать нижние части букв любят даже во многих декоративных шрифтах, это универсальный приём:
Второй популярный способ покреативить с типографикой — продлить концы букв в разных направлениях. Этим создают визуальный образ при минимальной деформации самого буквенного знака. Такое решение вы регулярно видите — в логотипе Subway:
Наконец, важнее всего — общая форма буквы, а не детали внутри неё. При взгляде на «М» мы ожидаем увидеть два треугольника, на букву «Е» — подобие широкой вилки. Штрихи могут быть толще и тоньше, короче или длиннее, выше или ниже — мы всё равно узнаём букву, благодаря этому и существует огромное многообразие шрифтов. И если один штрих из «Е» вообще убрать, никто сильно не огорчится:
Те части букв, которые не слишком важны для понимания формы, можно заменить на что-нибудь другое.
Но слова мы не читаем по отдельным буквам, а воспринимаем целиком как визуальную форму. Помните заезженный мем, где в словах перепутаны буквы, а читается всё равно без проблем? Это связано с тем, что глаза при чтении делают скачкообразные движения, и точек фиксации взгляда гораздо меньше, чем букв.
Давайте посмотрим на запись движений глаз с айтрекера :
Прибор для фиксации движений глаз.
Как видите, иногда из фокуса внимания выпадают не то что буквы, а целые короткие словечки. Их мы воспринимаем периферическим зрением и легко можем даже не заметить отсутствие, перестановку или искажение отдельных букв. А если и заметим, то без труда угадаем знакомое слово.
Это используется в дизайне — букву в слове можно изменить так, чтобы общее цветовое пятно не изменилось:
C каждым словом мы ассоциируем обобщённый, а не конкретный визуальный образ — именно эта способность позволяет нам без труда читать разные шрифты. Мы знаем, что в слове «ANIMAL» в начале будет что-то треугольное, потом много зигзагов, а затем — вертикальная палка с горизонталью внизу. Если общую форму не нарушать, с текстом можно всячески креативить.
Основные способы стилизации
Для хорошей стилизации важно не только продумать визуальные образы, но и учесть особенности восприятия букв и слов. Рассмотрим самые популярные приёмы, которые можно использовать в логотипах, вывесках и рекламе.
Поворот и перемещение букв
Это простой способ оживить надпись без ущерба узнаваемости слова. Мы уже рассмотрели поворот одной буквы в логотипе «Animal Planet». Но наклон надписей встречается очень часто, и иногда отдельные буквы вылезают за пределы строки. Например, как «La» в этом логотипе свешивается вниз:
Поворот слова — ещё один приём, который можно взять на вооружение. Часто и в наружной рекламе, и в интернете слово поворачивают на 90 градусов целиком:
Российскому жителю привычно и понятно, когда начало перевёрнутого слова внизу, потому что мы привыкли к такому написанию на торцах книг (в европейских книжках всё наоборот, начало вверху; впрочем, в дизайне используют оба направления).
Замена буквы
Узнаваемость каждой буквы особенно важна, если надпись коротенькая и незаезженная, например аббревиатура. Если слово длинное или просто у всех на слуху, можно убрать из него целую букву, заменив на что-то более интересное:
Слово-картинка
Иногда визуальный образ представляет собой не отдельные буквы, а целое слово. Это реже встречается, потому что читабельность в таком случае обеспечить трудно. Приём подходит для изображения простых предметов, в которых не придётся сильно ломать форму букв:
Если буквы нужно вписать в более сложные формы, для лучшей читаемости попробуйте добавить детализации и показать объём в пространстве. Было время, когда типографика с перспективными искажениями была моветоном и казалась устаревшей в рекламе и логотипах. Но уже несколько лет она держится в тренде:
Соединение букв
Ещё один популярный способ разнообразить типографику — это лигатуры, соединения между несколькими печатными знаками.
Негативное пространство
Другой относительно безопасный вариант креатива — это использование негативного пространства, когда фон становится буквой. Такой дизайн отличается от привычных надписей чёрным по белому, но не мешает восприятию смысла:
С помощью пустот между буквами даже можно создавать простые картинки. Возможно, вы не замечали, что в логотипе FedEx последние две буквы образуют белую стрелку:
Негативное пространство можно интересно обыграть и в фирменном стиле, и в рекламе. Оно позволяет креативить с надписями без ущерба лаконичности.
P. S. Универсальных рецептов нет
Существует бесконечное множество букв в алфавите, шрифтов, начертаний и способов стилизации. Поэтому нет единых инструкций на все случаи жизни.
Типографика — одна из самых сложных областей дизайна. Мы рассмотрели хорошие примеры, но зачастую надписи на вывесках, упаковках и логотипах всё же трудно прочесть. Даже если все буквы в наличии и на своих местах.
Несмотря на единые правила восприятия, в каждом отдельном случае на лёгкость чтения могут влиять разные факторы: специфика шрифта, длина и частота употребления слова, интервалы, цвет, размер букв. А читаемость названий — это главное, что важно сохранять, особенно в фирменном стиле.
Кстати, даже простые надписи в дизайне очень отличаются. Прежде всего это обусловлено разницей гарнитур и начертаний.
Бывают группы гарнитур с обычными засечками, с рублеными засечками, без засечек, а также декоративные шрифты, не подходящие ни под одно из описаний. В большинстве гарнитур есть разные варианты начертаний. Курсивные, жирные, жирные курсивные… Полужирные, полужирные курсивные… Тонкие, тонкие курсивные… В результате в нашем арсенале — бесконечное множество вариантов.
На восприятие текста также влияют пустоты между буквами. Их изменяют, варьируя интерлиньяж (расстояние между строчками), кернинг (расстояние между конкретной парой знаков) и трекинг (расстояние между всеми знаками).
Иногда этих незатейливых средств вполне хватает для выразительной надписи:
10 мобильных приложений для создания красивой типографики
Существует множество программ, с помощью которых можно создать красивую типографику. Но что делать, если нужно добавить подпись к изображению, что называется, на ходу? Конечно же, воспользоваться мобильным приложением для смартфона. Ведь это очень удобно и не почти не требует времени – нужно лишь найти подходящую картинку, выбрать шрифт и набрать нужный текст.
FreelanceToday предлагает вашему вниманию 10 полезных приложений для создания красивой типографики, которая послужит отличным дополнением к фотографиям и иллюстрациям.
Приложение для iOS Typorama автоматически генерирует текстовые макеты в 35 типографских стилях. Пользователь может выбрать наиболее подходящий шрифт из сотен доступных вариантов. Нужно выбрать фон, написать текст, добавить стиль и все – типографика готова. Можно применять к тексту различные эффекты и фильтры, добавлять ленты, значки, тени, градиенты и объем. Готовые изображения можно распространять в социальных сетях, использовать в качестве обоев для рабочего стола или сделать из картинки баннер.
PicLab – это графический редактор, с помощью которого можно обрабатывать изображения и добавлять к ним шрифт. Можно применять различные эффекты, использовать предустановленные шаблоны, добавлять к картинкам текстуры, использовать фильтры. Также в приложении можно использовать несколько текстовых слоев. На готовой картинке появляется водяной знак приложения, но его можно убрать, заплатив 1 доллар.
Приложение Font Candy отличается большим количеством тщательно подобранных шрифтов. Можно выбрать фоновое изображение, добавить к картинке свой текст или предустановленную подпись. В результате получаются изображения, которые выглядят так, как будто над ними поработал профессиональный дизайнер. Если пользователь затрудняется с выбором подходящей картинки, то можно воспользоваться функцией поиска, которая предложит скачать изображение из сервиса Pixabay. Приложение разработано только для устройств с iOS на борту.
С помощью Over каждый может почувствовать себя творческим человеком. Приложение имеет свыше 800 предустановленных иллюстраций и 300 уникальных шрифтов, что позволяет реализовать практически любую идею. Приложение можно использовать для создания поздравительных открыток, вдохновляющих цитат, также можно сопроводить текстом понравившуюся картинку. Также можно очень быстро визуализировать удачную мысль, которая вдруг пришла на ум. Приложение позволяет скачивать изображения с Unsplash и Pixabay с помощью аддонов, его можно использовать для создания эффектных иллюстраций для оформления своих страничек в соцсетях. Верcия для iOS. Версия для Android.
Воспользовавшись мобильным приложением Quick, можно быстро добавить подпись к понравившейся фотографии. Одним из достоинств Quick является удачно реализованная функция подбора шрифта – их можно быстро менять, одновременно выбирая, какой из них наиболее гармонично будет сочетаться с изображением. После того, как шрифт будет выбран, останется лишь отрегулировать цвет и размер подписи. Версия для Android.Версия для iOS.
Если хочется сопроводить изображения красивой подписью, то можно воспользоваться мобильным приложением Notegraphy. Пользователь может воспользоваться одним из 40 готовых шаблонов и 120 различных вариантов оформления. Результатами можно поделиться в социальных сетях или разместить картинку в общей галерее.
Phonto – это простое приложение, с помощью можно быстро и просто добавить текст к иллюстрациям. В приложении можно выбрать один из 200 предустановленных шрифтов, а если результат не устроит, то можно добавить собственный шрифт. Средств работы с текстом достаточно много, можно менять размер, цвет, межбуквенный и межстрочный интервал, добавлять тень и другие эффекты. Версия для iOS. Версия для Android.
Приложение Fontspiration позволяет создавать анимированную типографику. Пользователь может выбрать любой из более чем 100 имеющихся шрифтов и создать красивую сопроводительную подпись. Если по каким либо причинам не удается получить желаемый результат, то можно посмотреть работы других пользователей, представленные в галерее. Готовый проект можно сохранить как обычную картинку, также можно сделать анимированную гифку и даже видео. Очень полезное приложение – настоящий графический редактор с неплохим функционалом.
Приложение Ampergram создавалось для работы с изображениями из соцсети Instagram. Основная фишка Ampergram заключается в том, что приложение находит буквы на фотографиях, размещенных другими пользователями и и составляет из них слова. Особо качественной типографики добиться вряд ли удастся, но забавно. Версия для iOS. Версия для Android.
Как сделать красивую надпись на фото в «Инстаграме»
Так как сделать надпись на фото в «Инстаграме» бывает часто необходимо, но встроенная функция в приложении отсутствует, блогерам и владельцам бизнес-страниц часто приходится пользоваться альтернативными методами. С помощью текста можно указывать стоимость товара, место его реализации или подписывать тему поста.
Часто блогерам бывает нужно сделать надпись на фото в Инстаграм.
Зачем добавлять надпись на фото
Площадка давно перестала использоваться только для общения. Социальную сеть применяют для продвижения товаров и услуг.
Надписи используют для:
Когда не стоит добавлять текст
Не всегда введение надписи способствует продвижению профиля. Не стоит добавлять на фото свой никнейм. Если человеку нравится контент или товар, он откроет страницу и без привлекающей надписи. Также нельзя добавлять неподходящий по смыслу текст. Неправильно выбранное сопровождение может испортить интересную картинку. Подписчики не будут обращать внимания на такой профиль.
Размеры картинки и расположение текста
В социальной сети можно размещать изображения 1080х608, 1080х1080, 1080х1350. Картинка может быть вертикальной или горизонтальной. Расположение надписи зависит от нескольких факторов. В теории она может занимать всю площадь. Но в коммерческих постах нужно соблюдать правильное соотношение текста и других элементов картинки. Если надпись занимает более 20% площади, количество рекламных показов уменьшается.
В Инстаграме можно размещать изображения разных разрешений.
Как сделать надпись на фото в «Инстаграме»
Быстро написать текст на изображении можно в разделе сторис. Процедуру выполняют так:
Обработанный таким способом снимок можно размещать и в простых постах.
Топ-3 приложения для наложения текста на фото
Для добавления слов на рисунки используют разные программы и онлайн-сервисы. Предлагаю рассмотреть наиболее популярные варианты.
Snapseed
Фоторедактор часто используется для создания текстового сопровождения в кружочках. Приложение совместимо как с Android, так и с iOS. Особенностями софта считаются:
Помимо перечисленных, имеется множество других функций, которые помогают создавать красивые изображения с надписями.
Благодаря простому интерфейсу пользоваться приложением смогут не только опытные блогеры, но и новички.
Canva
Набор функций не ограничивается добавлением текста. Приложение используется профессионалами. Инструмент имеет русифицированный интерфейс, есть возможность введения надписей на кириллице.
Особенностями приложения являются:
Textgram
Инструмент имеет простой и понятный интерфейс. Программа переведена на русский язык. Поддерживается кириллица, однако ассортимент стилей недостаточно широк.
Преимуществами софта являются:
Идеи интересных подписей
Можно написать на картинке:
Полезные рекомендации
Перед тем как сделать надпись на фото в «Инстаграме», нужно изучить такие советы:
Начинающие пользователи часто размещают некачественные картинки с неуместным текстом. Такие ошибки могут приводить к потере подписчиков.