- Как сделать надпись красивой и понятной: стилизация текста в дизайне
- Что такое стилизация и зачем она нужна
- Что делает буквы и слова узнаваемыми
- Основные способы стилизации
- Поворот и перемещение букв
- Замена буквы
- Слово-картинка
- Соединение букв
- Негативное пространство
- P. S. Универсальных рецептов нет
- LiveInternetLiveInternet
- —Цитатник
- —Рубрики
- —Метки
- —Музыка
- —Поиск по дневнику
- —Подписка по e-mail
- —Статистика
- Урок — Красивые надписи для творческих работ.
Как сделать надпись красивой и понятной: стилизация текста в дизайне
Стилизация текста похожа на добавление соли в кулинарии. Немного, аккуратно — получается вкусно. Переусердствуем — становится несъедобно.
Когда разрабатываете дизайн логотипа или креатив для рекламы, хочется сделать надписи красивыми и уникальными. Чтобы они выделялись на фоне других, привлекали внимание, радовали глаз. Но если переборщить — слова станет сложно читать, значит, текст станет хуже выполнять свою главную задачу — доносить информацию.
Поэтому важно знать основы стилизации в дизайне и уметь работать с ней.
Пишущий дизайнер. Пришла в профессию, получив второе образование, ранее занималась когнитивными исследованиями, SMM и копирайтингом. Пишет о визуальных трендах, делится наблюдениями из отрасли и техническими лайфхаками.
Что такое стилизация и зачем она нужна
Читатель быстро воспринимает текст, напечатанный классическим шрифтом, и легко улавливает его смысл. Но глаз за такие надписи не цепляется.
В борьбе за внимание приходится искажать форму, чтобы создать художественный образ — это и называется стилизацией. Её приёмы лежат в основе многих логотипов и рекламных креативов.
Стилизация — про поиск баланса между креативом и читабельностью.
Стилизация надписей в логотипе позволяет с первого взгляда понять, что за бренд перед нами. Визуальный образ может соответствовать названию или указывать на сферу деятельности компании.
Изменение формы букв хорошо работает в рекламных баннерах для привлечения дополнительного внимания.
Тренд на деформацию букв укрепился в диджитале с ростом популярности анимации. Чтобы печатные знаки в движении были нескучными, их собирают из кусочков, вертят в разных направлениях или меняют им форму.
Удачная стилизация в типографике — это ваше мощное оружие в борьбе за внимание аудитории. Но какой бы эстетичной ни была картинка, если в ней есть буквы, они должны быть понятными. Это главное. Лишняя загадочность только вызовет раздражение у потребителя.
Новичку может показаться, что это довольно лёгкая задача, но хорошая стилизация — настоящее искусство. Если вы напечатаете слово в графическом редакторе и начнёте двигать векторные кривые в буквах, то быстро обнаружите, как осмысленная надпись превратилась в симпатичную кракозябру.
Что делает буквы и слова узнаваемыми
Если не вдаваться в исключения из правил, всё самое важное у буквы расположено чуть выше её середины. Именно по этой области проще понять, что перед нами не просто картинка, а знак алфавита. А вот нижняя половина букв менее ценная, чем верхняя. Смотрите:
В верхней части букв больше всяких переломов формы, которые влияют на узнаваемость. Буквы «Г», «Т», «П» и многие другие в своей нижней половине напоминают одинаковые палки, а отличаются только верхушкой.
К тому же человеческий глаз ошибочно определяет середину чуть выше, чем она расположена на самом деле. Буквы в большинстве шрифтов построены с учётом этой особенности, и центральные элементы в них тяготеют к верхней половине.
Поэтому без особой необходимости её лучше не трогать. А вот искажать нижние части букв любят даже во многих декоративных шрифтах, это универсальный приём:
Второй популярный способ покреативить с типографикой — продлить концы букв в разных направлениях. Этим создают визуальный образ при минимальной деформации самого буквенного знака. Такое решение вы регулярно видите — в логотипе Subway:
Наконец, важнее всего — общая форма буквы, а не детали внутри неё. При взгляде на «М» мы ожидаем увидеть два треугольника, на букву «Е» — подобие широкой вилки. Штрихи могут быть толще и тоньше, короче или длиннее, выше или ниже — мы всё равно узнаём букву, благодаря этому и существует огромное многообразие шрифтов. И если один штрих из «Е» вообще убрать, никто сильно не огорчится:
Те части букв, которые не слишком важны для понимания формы, можно заменить на что-нибудь другое.
Но слова мы не читаем по отдельным буквам, а воспринимаем целиком как визуальную форму. Помните заезженный мем, где в словах перепутаны буквы, а читается всё равно без проблем? Это связано с тем, что глаза при чтении делают скачкообразные движения, и точек фиксации взгляда гораздо меньше, чем букв.
Давайте посмотрим на запись движений глаз с айтрекера :
Прибор для фиксации движений глаз.
Как видите, иногда из фокуса внимания выпадают не то что буквы, а целые короткие словечки. Их мы воспринимаем периферическим зрением и легко можем даже не заметить отсутствие, перестановку или искажение отдельных букв. А если и заметим, то без труда угадаем знакомое слово.
Это используется в дизайне — букву в слове можно изменить так, чтобы общее цветовое пятно не изменилось:
C каждым словом мы ассоциируем обобщённый, а не конкретный визуальный образ — именно эта способность позволяет нам без труда читать разные шрифты. Мы знаем, что в слове «ANIMAL» в начале будет что-то треугольное, потом много зигзагов, а затем — вертикальная палка с горизонталью внизу. Если общую форму не нарушать, с текстом можно всячески креативить.
Основные способы стилизации
Для хорошей стилизации важно не только продумать визуальные образы, но и учесть особенности восприятия букв и слов. Рассмотрим самые популярные приёмы, которые можно использовать в логотипах, вывесках и рекламе.
Поворот и перемещение букв
Это простой способ оживить надпись без ущерба узнаваемости слова. Мы уже рассмотрели поворот одной буквы в логотипе «Animal Planet». Но наклон надписей встречается очень часто, и иногда отдельные буквы вылезают за пределы строки. Например, как «La» в этом логотипе свешивается вниз:
Поворот слова — ещё один приём, который можно взять на вооружение. Часто и в наружной рекламе, и в интернете слово поворачивают на 90 градусов целиком:
Российскому жителю привычно и понятно, когда начало перевёрнутого слова внизу, потому что мы привыкли к такому написанию на торцах книг (в европейских книжках всё наоборот, начало вверху; впрочем, в дизайне используют оба направления).
Замена буквы
Узнаваемость каждой буквы особенно важна, если надпись коротенькая и незаезженная, например аббревиатура. Если слово длинное или просто у всех на слуху, можно убрать из него целую букву, заменив на что-то более интересное:
Слово-картинка
Иногда визуальный образ представляет собой не отдельные буквы, а целое слово. Это реже встречается, потому что читабельность в таком случае обеспечить трудно. Приём подходит для изображения простых предметов, в которых не придётся сильно ломать форму букв:
Если буквы нужно вписать в более сложные формы, для лучшей читаемости попробуйте добавить детализации и показать объём в пространстве. Было время, когда типографика с перспективными искажениями была моветоном и казалась устаревшей в рекламе и логотипах. Но уже несколько лет она держится в тренде:
Соединение букв
Ещё один популярный способ разнообразить типографику — это лигатуры, соединения между несколькими печатными знаками.
Негативное пространство
Другой относительно безопасный вариант креатива — это использование негативного пространства, когда фон становится буквой. Такой дизайн отличается от привычных надписей чёрным по белому, но не мешает восприятию смысла:
С помощью пустот между буквами даже можно создавать простые картинки. Возможно, вы не замечали, что в логотипе FedEx последние две буквы образуют белую стрелку:
Негативное пространство можно интересно обыграть и в фирменном стиле, и в рекламе. Оно позволяет креативить с надписями без ущерба лаконичности.
P. S. Универсальных рецептов нет
Существует бесконечное множество букв в алфавите, шрифтов, начертаний и способов стилизации. Поэтому нет единых инструкций на все случаи жизни.
Типографика — одна из самых сложных областей дизайна. Мы рассмотрели хорошие примеры, но зачастую надписи на вывесках, упаковках и логотипах всё же трудно прочесть. Даже если все буквы в наличии и на своих местах.
Несмотря на единые правила восприятия, в каждом отдельном случае на лёгкость чтения могут влиять разные факторы: специфика шрифта, длина и частота употребления слова, интервалы, цвет, размер букв. А читаемость названий — это главное, что важно сохранять, особенно в фирменном стиле.
Кстати, даже простые надписи в дизайне очень отличаются. Прежде всего это обусловлено разницей гарнитур и начертаний.
Бывают группы гарнитур с обычными засечками, с рублеными засечками, без засечек, а также декоративные шрифты, не подходящие ни под одно из описаний. В большинстве гарнитур есть разные варианты начертаний. Курсивные, жирные, жирные курсивные… Полужирные, полужирные курсивные… Тонкие, тонкие курсивные… В результате в нашем арсенале — бесконечное множество вариантов.
На восприятие текста также влияют пустоты между буквами. Их изменяют, варьируя интерлиньяж (расстояние между строчками), кернинг (расстояние между конкретной парой знаков) и трекинг (расстояние между всеми знаками).
Иногда этих незатейливых средств вполне хватает для выразительной надписи:
Источник
LiveInternetLiveInternet
—Цитатник
Зима — это такое время, … когда шубы выгуливают своих хозяек. | КЛИПАРТ ****** В новой норково.
Учимся делать кликабельную кнопку для постов «Понравилось» Всем Здравствуйте. Сегод.
Проект Екатерины Рождественской http://f23.ifotki.info/org/4aed7433f7624cff5a05c30c2036ae3555.
Как обновить или удалить Adobe Flash Player ? Как обновить Adobe Flash Player за 2 минуты ? .
Пропала языковая панель Здравствуйте. В 2012 году я уже писала урок по данной теме, но.
—Рубрики
- Литературно-музыкальная композиция (243)
- Мужской взгляд (8)
- Заговоры, гадание,карма (21)
- Интересные сайты (87)
- ТОП лучших материалов женского и мужского клубов (6)
- Фотопроект Екатерины Рождественской (14)
- 99 сайтов с бесплатными фотографиями (2)
- Flash материал. (167)
- Аватары Девушки (12)
- Альбомы на Яндексе (1)
- Анимации для сообщений (94)
- Пушистики (1)
- гифики (1)
- Надписи (9)
- Растущие цветочки (1)
- Антиквариат (4)
- АртБазар (1)
- Архитектура (31)
- Ах, Одесса (5)
- БЕНЕФИСЫ ЛЮБИМЫХ АКТЕРОВ (35)
- Артисты кино (28)
- Кабаре (2)
- Спектакли Онлайн (3)
- Бесплатные программы, ссылки (33)
- Windows 7 (3)
- Бродилки (67)
- Будильник (1)
- Видио (40)
- Города (3)
- Интересно (21)
- Мои работы (3)
- Море (1)
- Мудрости жизни (8)
- Природа (4)
- Виртуальные прогулки (35)
- Восточные танцы (1)
- Все для блога (48)
- Все для женщин и семьи (13)
- Все для Лиру/ Уроки (818)
- Уроки — Программа Corner-A ArtStudio v.1.3.3 Rus — (7)
- Уроки — по программе Abrosoft Fanta Morph (7)
- Как сделать из гифки флеш! (2)
- Как сделать скриншот (1)
- Редактор-фотошоп прямо в дневнике (1)
- Работа разных программ (1)
- Музыка и плейеры (21)
- Не хочу быть чайником (44)
- НТМЦ — шпаргалка, ФОРМУЛЫ (11)
- Пишем красиво (10)
- Программы для создания флэшколлажей (2)
- Сделать гифку из видео он-лайн (1)
- Уроки — анимации (30)
- Уроки — делаем плейкасты (2)
- Уроки — делаем рамку (3)
- Уроки — оформление дневника (22)
- Уроки — по стандартной компьютерной программе PAIN (8)
- Уроки — Программа Magic Particles 3D (14)
- Уроки — Программа для флеш-анимации Sothink_SWF_Ea (1)
- Уроки — Программа по флэш анимации IncrediFlash XT (1)
- Уроки — фотошоп (57)
- Уроки — фото (75)
- Уроки —музыки (35)
- Уроки от Ирины Novichok56 (1)
- Уроки от Любаши К (54)
- Уроки — программа Flash Intro Banner Maker V3.8 ру (51)
- Уроки по Мозилле (2)
- Уроки по созданию видео (28)
- Уроки по созданию поста (46)
- Уроки- по программе Adobe Flash Professional CS6 1 (3)
- Уроки—по программе SWiSH Max4[Ru+En] с русификато (1)
- фотоальбомы (2)
- Эдитор (54)
- Все для школьника и студентов (11)
- Декор (27)
- День рождения, праздники (75)
- Дети наше счастье (14)
- Детские песенки (2)
- Дизайн для блога (2)
- Домоводство (40)
- Жизнь Замечательных людей (13)
- Звуки природы -Пение утренних птиц (22)
- Здоровая пища,Диеты, Советы (25)
- Игры (25)
- Идеи дизайна (38)
- Изучаем компьютер (64)
- Безопасность компьютера (2)
- Иллюстрации (7)
- Интервью с блогерами (1)
- Интересно знать (75)
- Интересное кино (56)
- Интересный сайт для взрослых и детей (14)
- Искусство (21)
- Карта интернета (2)
- Картинки, открытки, анимация-флешки (248)
- Картины (124)
- КАТАЛОГ КАРТИННОЙ ГАЛЕРЕИ (2)
- Классическая музыка (13)
- Клипарт (400)
- Изображения разной тематики (15)
- Каталог клипарта (3)
- Хлеб да соль (1)
- Музыкальный (1)
- Ангелы (4)
- Беседки,арочки,фонтаны,лавочки (5)
- Девушки (49)
- Дети (16)
- Еда,торты, дары природы (3)
- Мебель (1)
- Морская тематика (4)
- Мужчины (2)
- Натюрморты (1)
- Пары (3)
- Пейзажи, города (17)
- праздничный (6)
- Птицы, животные (4)
- Разное (6)
- Религия, пасхальный (7)
- Световые эффекты (2)
- сердечки,любовь,парфюм (6)
- Статуэтки (1)
- Узоры, завитушки (1)
- Фужеры, бокалы (1)
- Цветы,травка, лето (18)
- Шляпки (1)
- Коллажи (184)
- Котоматрица (34)
- Красивый и оригинальный -СЛАЙД-ШОУ. (10)
- Красота со всего Света (202)
- Куклы (15)
- Кулинария (1043)
- Лазанья (6)
- Вторые блюда (26)
- Выпечка (215)
- Десерт (51)
- Закуски (83)
- Запеканка (13)
- Как декорировать блюда. Суперкнига! (8)
- Консервация (39)
- Мясные блюда (44)
- Напитки (36)
- Рецепты и многое другое (27)
- Рыбные блюда (32)
- Салаты (34)
- Соусы (8)
- Супы (17)
- Торты (56)
- Лица Лиру / полная версия/ (6)
- Лучшие посты друзей (4)
- Любимая музыка, душевные песни, (139)
- Любимые блоги и сайты- слушаем книги (13)
- Магазинчик Хенд — Мейд (1)
- Медицина, Лечение медом, Лечение травами (147)
- Миниатюры в бокалах (1)
- Мир ремонта (4)
- Мода, украшение, карнавал (39)
- Мои флэшки: (88)
- Любовь (53)
- Разное (17)
- С Днем рождения! Праздники (14)
- С Новым годом! (4)
- Музыкальные альбомы и сайты (54)
- Музыкальные сборники,видео (335)
- настроение (13)
- Натюрморты (27)
- Наша Дача, Сад, Огород, Цветы (137)
- Дизайн садового участка (7)
- Не забывайте своих матерей (7)
- О женщинах и для женщин (51)
- Обои для рабочего стола (10)
- Оформление дневника (61)
- Плеера, рамки под видео (96)
- Плэйкасты, музыкальные открытки (253)
- Поздравления в стихах на все случаи жизни (1)
- Поисковик (5)
- Полезно знать (26)
- Праздники (109)
- Приветствие (81)
- Приглашаю Вас в ресторан! (1)
- Прически для девочек и женщин (24)
- ПРОГРАММА XARA 3D6 (1)
- просто красиво и интересно (26)
- Психология, Практическая психология, медитация, (63)
- Разделители, уголки (61)
- Разное (55)
- Разные истории (11)
- Рамки для текста (734)
- Рамки для фото (6)
- Рамочка кулинарная (20)
- Рамочка любовь (4)
- Рамочка Новогодняя (27)
- Рамочка обводка (2)
- Рамочка от La_Perla (6)
- Рамочка для музыкального поста (34)
- Рамочка тонкая (22)
- Рамочки Gaviota-7 (3)
- Рамочки Margo29 (1)
- Рамочки без картинки (189)
- Рамочки Ольга-Мираж (11)
- Рамочки осенние (13)
- Рамочки от Franzuzhenki (1)
- Рамочки от Lady M Natali (21)
- Рамочки с картинкой (31)
- Рамочки чулочки (4)
- Рамочки- фоны (28)
- Религия (69)
- Романсы (14)
- Рукоделие, шьем, вяжем, вышиваем бисером, макрам (329)
- вязание крючком (51)
- вязание спицами (58)
- Дачные переделки. 80 мастер-классов (3)
- Крученные розы из гофрированной бумаги (3)
- Плетеные коврики из ткани (2)
- Украшение из бисера (1)
- шьем (4)
- Самый полный F A Q по ЛиРу Моничка (3)
- Световые эффекты (5)
- Сказки для детей (4)
- Смайлы, картинки анимированные (17)
- Стихи, Поэзия, Любовь (520)
- Любовные стихи (1)
- Стихия (17)
- Страна 360: Панорамы 360 (0)
- Телевидение онлайн (4)
- Тесты (6)
- Туризм (1)
- Украина (8)
- Успех, урок (1)
- Фитнес, Красота Здоровья (11)
- Флешки (157)
- Фоны, схемы (120)
- Фотографии (166)
- Футажи (9)
- Цитаты, притчи, афоризмы (138)
- Чувство и отношения (121)
- Шаблоны для творчества (10)
- Шансон (14)
- Энциклопедии и словари (16)
- Эпиграфы (66)
- Юмор , Смешные истории, Анекдоты, Наша Раша, Одес (321)
- Камеди вумен))) (1)
—Метки
—Музыка
—Поиск по дневнику
—Подписка по e-mail
—Статистика
Урок — Красивые надписи для творческих работ.
Наше предложение готово, кликаем по надписи правой кнопочкой мыши, откроется табличка и копируем ссылку на изображение.
Загружаем надпись в Эдитор.
На сайте очень много разных шрифтов, вы можете выбрать любой, жмите.
Вопросы будут, обращайтесь.
Успеха в творчестве.
Рубрики: | Все для Лиру/ Уроки/Эдитор |
Метки: уроки
Процитировано 120 раз
Понравилось: 19 пользователям
Источник