Как сделать такую надпись

admin

Как сделать надпись красивой и понятной: стилизация текста в дизайне

Стилизация текста похожа на добавление соли в кулинарии. Немного, аккуратно — получается вкусно. Переусердствуем — становится несъедобно.

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

Поэтому важно знать основы стилизации в дизайне и уметь работать с ней.

13383313052020 aea97a12e1529ae09c2b37473bcc42f9fd796262

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

Что такое стилизация и зачем она нужна

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

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

13585113052020 0183a8eb3d28a61335d1b32362fefa6eacfb6c89

Стилизация — про поиск баланса между креативом и читабельностью.

13585113052020 8bc1aa9ad985c6b5f9a267787eba176dd734e55f

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

13585113052020 11c535a81148df46fd31a221d83fcc32d657cdb5

13585213052020 03cf79135f4779127c709c3f53c2bad793496501

Изменение формы букв хорошо работает в рекламных баннерах для привлечения дополнительного внимания.

13585113052020 1c268adcc76f0822608460c62d7afe7d51467887

Тренд на деформацию букв укрепился в диджитале с ростом популярности анимации. Чтобы печатные знаки в движении были нескучными, их собирают из кусочков, вертят в разных направлениях или меняют им форму.

13585113052020 f6426dfeec1bbbc01168489977c5e62d86273fab

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

Что делает буквы и слова узнаваемыми

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

13585213052020 8fd38b4a26de2bab6a71578865c1ee7aad61951e

13585113052020 0f30954966fa3616f494036fbb56e158cd32cc31

В верхней части букв больше всяких переломов формы, которые влияют на узнаваемость. Буквы «Г», «Т», «П» и многие другие в своей нижней половине напоминают одинаковые палки, а отличаются только верхушкой.

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

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

13585113052020 cc9fc8e6480ae902b98b6d5847371c9f0b916420

Второй популярный способ покреативить с типографикой — продлить концы букв в разных направлениях. Этим создают визуальный образ при минимальной деформации самого буквенного знака. Такое решение вы регулярно видите — в логотипе Subway:

13585113052020 fccf437ca742fde4461c31e59718d0c5de9ffc82

Наконец, важнее всего — общая форма буквы, а не детали внутри неё. При взгляде на «М» мы ожидаем увидеть два треугольника, на букву «Е» — подобие широкой вилки. Штрихи могут быть толще и тоньше, короче или длиннее, выше или ниже — мы всё равно узнаём букву, благодаря этому и существует огромное многообразие шрифтов. И если один штрих из «Е» вообще убрать, никто сильно не огорчится:

13585113052020 7b64da46b2dc4329c15be64aeef9e636261e678c

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

13585113052020 db1d00c070e6bfe7b03adea86604a37f834a8066

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

Давайте посмотрим на запись движений глаз с айтрекера :

Прибор для фиксации движений глаз.

13585113052020 4d91d82c34218935d797c0d03a5469af514ae1bf

Как видите, иногда из фокуса внимания выпадают не то что буквы, а целые короткие словечки. Их мы воспринимаем периферическим зрением и легко можем даже не заметить отсутствие, перестановку или искажение отдельных букв. А если и заметим, то без труда угадаем знакомое слово.

Это используется в дизайне — букву в слове можно изменить так, чтобы общее цветовое пятно не изменилось:

13585113052020 db52642fc67f6c7c46657360f234a883af322464

C каждым словом мы ассоциируем обобщённый, а не конкретный визуальный образ — именно эта способность позволяет нам без труда читать разные шрифты. Мы знаем, что в слове «ANIMAL» в начале будет что-то треугольное, потом много зигзагов, а затем — вертикальная палка с горизонталью внизу. Если общую форму не нарушать, с текстом можно всячески креативить.

Основные способы стилизации

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

Поворот и перемещение букв

Это простой способ оживить надпись без ущерба узнаваемости слова. Мы уже рассмотрели поворот одной буквы в логотипе «Animal Planet». Но наклон надписей встречается очень часто, и иногда отдельные буквы вылезают за пределы строки. Например, как «La» в этом логотипе свешивается вниз:

13585213052020 395ac55f9d2bdf7b2eaa249aca1918774fc91ed3

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

13585113052020 142e88e377e1752c1a8ec0f66a7134641e3185c1

Российскому жителю привычно и понятно, когда начало перевёрнутого слова внизу, потому что мы привыкли к такому написанию на торцах книг (в европейских книжках всё наоборот, начало вверху; впрочем, в дизайне используют оба направления).

Замена буквы

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

13585113052020 999812ce5fd1de4b615414bafbd93db5772fddd1

Слово-картинка

Иногда визуальный образ представляет собой не отдельные буквы, а целое слово. Это реже встречается, потому что читабельность в таком случае обеспечить трудно. Приём подходит для изображения простых предметов, в которых не придётся сильно ломать форму букв:

13585113052020 321ed7dda7d49b44474fa677da2349e6dadbddbe

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

13585213052020 6469bf1379f0a943d5f2777ef39b9772a52b542b

Соединение букв

Ещё один популярный способ разнообразить типографику — это лигатуры, соединения между несколькими печатными знаками.

13585113052020 876d2a4623d7106ddcdb74abf95c906e8a2da443

Негативное пространство

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

13585213052020 68b10686c7e5f4fd21d786a1986bab9736ebf362

С помощью пустот между буквами даже можно создавать простые картинки. Возможно, вы не замечали, что в логотипе FedEx последние две буквы образуют белую стрелку:

13585113052020 b7f630640f2efffc4c41d0d6466d02c19b3b342c

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

P. S. Универсальных рецептов нет

Существует бесконечное множество букв в алфавите, шрифтов, начертаний и способов стилизации. Поэтому нет единых инструкций на все случаи жизни.

Типографика — одна из самых сложных областей дизайна. Мы рассмотрели хорошие примеры, но зачастую надписи на вывесках, упаковках и логотипах всё же трудно прочесть. Даже если все буквы в наличии и на своих местах.

13585113052020 1df76a4fc6c31c6a6711f160e73ca03dbe05d16e

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

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

13585113052020 65b4a51f9238bb54752a4e540ba32171f5b09774

Бывают группы гарнитур с обычными засечками, с рублеными засечками, без засечек, а также декоративные шрифты, не подходящие ни под одно из описаний. В большинстве гарнитур есть разные варианты начертаний. Курсивные, жирные, жирные курсивные… Полужирные, полужирные курсивные… Тонкие, тонкие курсивные… В результате в нашем арсенале — бесконечное множество вариантов.

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

Иногда этих незатейливых средств вполне хватает для выразительной надписи:

Источник

Как сделать такую надпись

Здесь будет очередь обработки изображений. Добавляйте новые фильтры (снизу)

Добавить текст на фото онлайн

Чтобы сделать поворот фото загрузите изображения и укажите необходимые параметры (текст, позиция, шрифт, его размер и цвет). После этого нажмите кнопку «Скачать» и скачайте обработанные изображения.

Также вы можете добавить дополнительные эффекты для обработки фото.

autoimprove

Автоматически настраивает яркость и контраст изображения

mirror

Зеркалирует изображение по горизонтали или вертикали

rotate

Поворачивает изображение на заданный угол

swirl

Искажает изображение путем скручивания

Добавляет текст на изображение

frame

Добавляет рамку на изображение

black and white

Делает изображение черно-белым

negative

Делает негатив изображения

emboss

Делает изображение рельефным

wave

Добавляет водную рябь на изображение

shade

Добавляет эффект слепка на изображение

brightness

Изменяет яркость изображения

saturation

Изменяет насыщенность изображения

contrast

Изменяет контраст изображения

blur

Делает изображение размытым. Поддерживается несколько видов размытия.

Добавляет эффект пикселизации

gradient

Добавляет градиент на изображение

sharp

Усиливает резкость изображения

noise

Добавляет шум на изображение

paint

Добавляет эффект живописи на изображение

coal

Изображение станет выглядеть так, будто нарисовано углем

posterize

Ограничивает кол-во цветов в изображении

demotivator

Создает демотиватор из изображения

vignette

roll

Сдвигает изображение на заданное значение

snow

coal

Изображение станет выглядеть так, будто нарисовано карандашом

Источник

Добавляйте надписи на фото – это просто и быстро

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

put words on design

Выберите шаблон Crello – и начните редактировать

Надписи в Crello – оформляйте слова по-своему

Дизайн делает надписи ярче! Представьте, как хорошо будут смотреться ваши слова в красивом графическом оформлении? Такой картинкой точно захочется поделиться. Выбирайте идеальный шрифт для надписи из нашей библиотеки – или загружайте свой. Чтобы сделать интересные акценты, используйте анимации или премиальные фото или видео из коллекции Crello!

Шрифты задают тон

Просмотрите нашу внушительную коллекцию, в которой уже 250 шрифтов, – и выберите любой, который соответствует вашей теме и стилю. У вас под рукой и забавные шрифты с завитушками, и тяжелые брусочные, и легкие курсивные – есть даже шрифты «из воздушных шариков». Если не найдете подходящий, перейдите в «Мои шрифты» во вкладке «Тексты» и загрузите свой.

Добавьте WOW с помощью анимации

С помощью Crello делать анимацию проще, чем вам казалось! В нашем конструкторе добавить анимацию легко – функция дрэг-энд-дропа вам поможет. Анимируйте любую надпись или объект за пару секунд.

Добавьте красок

Черно-белые надписи – слишком скучные? Пусть ваши слова будут яркими не только по смыслу! Добавьте в надпись любой цвет, который вам нравится и соответствует брендбуку. Просто кликните на надпись и выберите нужный оттенок – чтобы все было идеально!

Прозрачность – со смыслом

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

От простого к крутому – с помощью слоев

Добавить надпись и на этом остановиться – не слишком хорошая идея. Используйте слои, чтобы размещать дизайн-элементы и рамки перед своей надписью и за ней. Пусть ваш дизайн станет особенным!

Оживите слова

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

Источник

Делаем прозрачную надпись на фото в Gimp2

5e13721d131b08cc2c2e47532af1d66f4c4fgw

Представляю вашему вниманию свой первый мастер-класс по созданию прозрачной надписи на фото с помощью программы Gimp2, которая является аналогом всем известного фотошопа. Данный МК подойдет даже тем, кто впервые садится работать с этой программой, так что помним: глаза боятся, а руки делают!

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

Файл > Открыть > Выбираем нужное фото

no avatar

no avatar

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

no avatar

В окошке набираем нужный нам текст. Не пугайтесь, если его не будет видно (см.1 на рис.). Щелкаем на букву «А» на панели инструментов, чтобы появились параметры текста. Выделяем его, настраиваем размер (см.2) и ширину (см.3). А теперь выбираем понравившийся шрифт (см.4). Без дополнительной установки шрифтов, выбор для надписи на русском языке весьма мал, зато для латиницы очень много красивого. Цвет нам не принципиален, его все равно не будет видно.

no avatar

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

no avatar

Теперь придадим тексту прозрачности. Для этого открываем Фильтры > Cвет и тень > Xach-эффект. В появившемся окне жмем «ОК» и ждем.

no avatar

Снимаем выделение с текста: Выделение > Cнять выделение.

no avatar

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

no avatar

Открываем Окна > Cnыкуемые диалоги > Cлои.

no avatar

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

no avatar

Нажимаем Файл > Экспортировать. Выбираем формат, имя и место для хранения фото. Жмем «OK».

no avatar

Появляется вот такое окошко. Выбираем бегунком качество нашего фото и снова «OK». Все! Мы молодцы! После этого спокойно закрываем рабочее окно без сохранения фото и радуемся результату.

no avatar

Наше фото теперь выглядит вот так:

no avatar

Благодарю за внимание! Надеюсь, я смогла быть вам полезной. С уважением, Елена.

Источник