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

Метод 1. Наложение всего изображения

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

Вот модное изображение-заставка с темным наложением.

Если вы перейдете в Firebug и удалите наложение, вы увидите, что исходное изображение было слишком ярким и слишком контрастным, чтобы текст был разборчивым. А вот с темной накладкой проблем нет!

Этот метод также отлично подходит для эскизов или небольших изображений.

И хотя черный оверлей является самым простым и универсальным, вы, безусловно, можете найти и цветные оверлеи.

Метод 2: Текст в поле

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

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

Метод 3. Размытие изображения

Удивительно хороший способ сделать наложенный текст разборчивым — это размыть часть нижележащего изображения.

iOS 7 в последнее время действительно сделала размытие фона, хотя Vista также использовала это с большим эффектом.

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

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

Метод 4: обесцвечивание пола

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

Случайному наблюдателю кажется, что эти коллекции Medium отображаются путем наложения белого текста на изображение — но в ответ на это я говорю false! Есть очень тонкий градиент от середины (черный с непрозрачностью 0%) к низу (черный с непрозрачностью, может быть, около 20%).

Трудно увидеть, но определенно есть, и разборчивость определенно улучшается.

Также обратите внимание, что эскизы коллекции Medium используют небольшую текстовую тень для дальнейшего улучшения читаемости. Ребята молодцы!

Чистый эффект: Medium может накладывать практически любой текст на любое изображение и иметь читаемый результат.

Да, и еще один момент — почему изображение становится черным внизу ? Чтобы узнать ответ на этот вопрос, см. Правило 1 — свет всегда исходит сверху.Чтобы наш глаз выглядел наиболее естественно, изображение должно быть немного темнее внизу, как и все остальное, что мы когда-либо видели.

Продвинутый ход: смешайте размытие с отливом пола… представляем The Floor Blur .

Бонусный метод: Scrim

Как в блоге Elastica каждый раз появляется читаемый заголовок поверх динамического изображения? Изображения:

• Не особенно темный
• Вид контрастности

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

Ответ: сетка .

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

Если в браузере уменьшить масштаб блога Elastica, мы сможем более четко увидеть, что происходит.

Вокруг заголовка «145 000 пользователей Salesforce выходят, чтобы отпраздновать…» есть рамка с градацией непрозрачности. Его легче заметить на сплошном синем фоне, чем на контрастных фотографиях над ним.

Это, наверное, самый тонкий способ надежного наложения текста на изображения, и я нигде больше его не видел (но он довольно хитрый). Однако отметьте это. Никогда не знаешь, когда это понадобится.

Правило 5. Сделайте текст всплывающим и отключающим

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

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

• Размер (больше или меньше)
• Цвет (больше или меньше контрастности; яркие цвета привлекают внимание)
• Плотность шрифта (жирнее или тоньше)
• Использование прописных букв (строчные, прописные и заглавные буквы)
• Курсив
• Межбуквенный интервал (или — причудливый термин — предупреждение — отслеживание!)
• Поля (технически не является свойством самого текста, но может использоваться для привлечения внимания, поэтому входит в список)

Есть несколько других вариантов, которые могут привлечь ваше внимание, но не используются и не рекомендуются особо:

• Подчеркнутый. Подчеркнутый сегодня означает ссылки, и не стоит пытаться заставить его означать что-то еще, если вы спросите меня
• Цвет фона текста. Не так часто, но на веб-сайте 37signals это какое-то время использовалось как стиль ссылки, и IDEO анимирует его при наведении курсора
• Зачеркнутый. Отойди, мастер CSS 90-х, ты!

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

Up-pop и down-pop

Все способы стилизации текста можно разделить на две группы:

• Стили, которые увеличивают видимость текста . Большой, жирный, заглавные буквы и т. Д.
• Стили, уменьшающие видимость текста . Маленький, менее контрастный, без полей и т. Д.

Мы будем называть эти стили «up-pop» и «down-pop» в честь любимого прилагательного дизайнеров. Мы не будем называть это «визуальным весом», потому что это скучно.

Заголовок «Материальный дизайн» вызывает много интересного. Оно большое; он высококонтрастный; это очень смело.

С другой стороны, элементы в нижнем колонтитуле того же сайта раскрываются вниз. Они маленькие, с меньшей контрастностью и менее жирным шрифтом.

Теперь важная часть.

Заголовки страниц — единственный элемент, который позволяет оформить всплывающее окно.

Для всего остального вам понадобится up- и down-pop.

Если элемент сайта нуждается в выделении, примените ОБЕИХ стили up-pop и down-pop, но чуть БОЛЬШЕ up-pop.Это предотвратит перегруженность объектов, но придаст разным элементам визуальный вес, который они должны иметь.

На веб-сайте Blu Homes с безупречным дизайном есть несколько крупных заголовков, но подчеркнуто слово в нижнем регистре, — слишком много внимания будет выглядеть подавляющим.

Эти числа на сайте Blu Homes привлекают внимание своим большим размером — но обратите внимание, что они одновременно преуменьшены очень легким шрифтом и менее контрастным цветом , чем темно-серый.

Маленькие метки под номерами , однако, хотя и серые и маленькие, они также прописные и очень жирные.

Все дело в балансе.

Contents Magazine — хороший пример использования up / down pop.

Заголовки статей в основном только не выделенные курсивом элементы страницы . В этом случае отсутствие курсива более эффективно привлекает внимание (особенно в сочетании с жирным шрифтом-жирностью)

Имя автора выделено полужирным шрифтом в подписи, что позволяет отличить его от обычного «на»

Маленький, малоконтрастный текст «УЖЕ ВЫШЕЛ» не мешает — но с его прописными буквами, большим межбуквенным интервалом и большими полями вы можете увидеть его момент вы его ищете

Выбранные и зависшие стили

Стилизация выбранных элементов и эффекты наведения — еще один этап в той же игре, но более сложный.

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

С чем это вам остается?

• Цвет текста
• Цвет фона
• Тени
• Подчеркивание
• Небольшая анимация — подъем, опускание и т. Д.

Один надежный вариант: попробуйте сделать белые элементы цветными или сделать цветные элементы белыми, но затемняя фон за ними.

Я оставляю вас с этим: стилизовать текст сложно.

Но каждый раз, когда я думал: «Может, этот текст просто не может выглядеть правильно?», Я ошибался. Мне просто нужно было поправиться. И чтобы поправиться, мне просто нужно было продолжать попытки.

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

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

Правило 6. Используйте только хорошие шрифты

Некоторые шрифты хороши. Используй их.

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

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

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

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

В произвольном порядке:

1. Work Sans

Иногда вы разрабатываете что-то, для чего нужен современный чистый шрифт, но с juuuust немного fun . Work Sans идеально отвечает этим требованиям. Немного причудливый; полностью не используется.

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

Work Sans означают, что он работает даже с очень маленькими размерами — отличное свойство для любого шрифта мобильного приложения.

Получить по адресу: Google Fonts (без курсива), Font Squirrel (с курсивом)

2. Робото

Невероятный, чистый, универсальный шрифт. Хотя это шрифт Android по умолчанию, он все еще недостаточно используется (и бесплатный!) Для iPhone и веб-приложений.

Beautiful, работает везде, весит гадзиллион .

Увидеть это в дикой природе : Google Maps

Получить на : Google Fonts

3. Метрополис

С тех пор, как web 2.0, такие шрифты, как Gotham и Proxima Nova, набрали , а их популярность взлетела на . И, как и многие тенденции дизайна, на это была причина — они фантастические . Я имею в виду, что использование Proxima Nova будет похоже на обман в дизайне, это так приятно.

К сожалению, эти шрифты также очень дорогие (ну, один вроде как бесплатный с Adobe Fonts), и Metropolis, вероятно, является единственной лучшей бесплатной альтернативой .

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

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

Получите на : Font Squirrel

4. Source Sans Pro

Одна вещь, которая мне нравится в Source Sans, — это то, что он делает отличным выбором , когда вы испытываете искушение пойти с с невероятно часто используемым Open Sans или Lato . Сопротивляйтесь желанию !

Source Sans имеет те же сильные стороны, что и Open Sans или Lato — нейтральный характер, просто немного человечности (а не холодные, строгие геометрические формы букв), и он отлично работает для пользовательских интерфейсов.

Для легкого сопряжения обратите внимание на его сестер: Source Serif и Source Code Pro.

Получить на : Google Fonts

5. IBM Plex Sans

После десятилетий использования Helvetica IBM наконец выпустила собственное семейство шрифтов, Plex .

Мне нравится Plex за то, что он немного необычный и техничный. Я так понимаю, это бренд IBM? Прикол, ребята.

Ах да — и Plex Sans прекрасно сочетается с Plex Serif и Plex Mono. Это все, что вам нужно.

Получить на : Google Fonts

6. Иконы с перьями

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

Создатель не упаковал его как иконочный шрифт (пока 🤞), но кто-то разместил на Github версию шрифта, которая прилично хорошо отслеживает исходный набор (и если вы используете только 10 или 20 иконок из набора, нет в любом случае имеет смысл загружать весь шрифт).

Получить на : набор SVG, частичный шрифт значков

Я оставлю вам несколько ресурсов:

• Красивые веб-шрифты Google. Это потрясающая демонстрация того, насколько хорошо могут выглядеть шрифты Google.Я возвращался к этой простой странице за вдохновением как минимум дюжину раз.
• FontSquirrel. Коллекция лучших шрифтов, доступных для коммерческого использования, причем совершенно бесплатно. Приятно, что кто-то собрал хорошую бесплатную подборку помимо Google Fonts.
• Adobe Fonts. Если вы используете Adobe Creative Cloud (то есть подписку на Photoshop или Illustrator и т. Д.), То у вас есть бесплатный доступ к тонне потрясающих шрифтов. Даже лучше, чем я рекомендовал выше: Proxima Nova, Adelle Sans, DIN, Freight Text и другие.

• Изучите дизайн пользовательского интерфейса . Ищете другие отличные шрифты? В моем курсе дизайна пользовательского интерфейса есть рекомендуемых шрифтов, с более чем 60 фантастическими бесплатными (или бесплатными шрифтами Creative Cloud), охватывающими всех типов шрифтов (засечки, плоские, моноширинные, рукописные и т. Д.), В том числе отмечает, где каждый шрифт работает лучше всего.

Правило 7: Укради, как художник

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

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

А где вишенку сорвать? Вот ресурсы, которые я нашел самых полезных при проектировании для клиентов. В списке в порядке убывания:

1. Дриббл

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

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

• Джейми Сайк . Публикация нового пользовательского интерфейса практически ВСЕГДА. Постоянно первоклассный материал. Огромный опыт и дизайн. Что я могу сказать? Легко следовать .

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

• Элегантные чайки . Если вы когда-нибудь задумывались «чувак, как мне сделать что-то более интересное, чем стандартная сетка Bootstrap?», Просто просмотрите несколько их снимков. Вот ваш ответ .

• Cosmin Capitanu. Замечательный шаблон. Он делает вещи, которые выглядят безумно-футуристично, но не кричащими. Действительно хорошо с цветами. Однако на самом деле он не фокусируется на UX, что также является критикой дриблинга в целом.

2. Плоская доска пользовательского интерфейса

Я не имею ни малейшего представления, кто такой «wararc», но его доска пользовательского интерфейса телефона была до смешного полезна для меня, пытаясь найти разрозненные примеры красивого пользовательского интерфейса.

3. Pttrns

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

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

А пока давайте сделаемся как воры.

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

Заключение

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

Во всяком случае, это именно то, чему я научился до сих пор, и я всегда новичок.

Если вы все еще со мной, вы прочитали две статьи общим объемом , более 5000 слов, и , просмотрели множество иллюстраций и скриншотов. Но я еще не умер, так что это еще не конец.

Если вам понравилось, просмотрите Learn UI Design, полный видеокурс для разработчиков и дизайнеров UX, которые хотят изучить дизайн интерфейса. Контент в том же стиле, что вы читали выше — практических стратегий и анализа, — не бесполезная теория, которая доминирует в написании статей о дизайне в Интернете.

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

Посмотрите, как я делаю проект пользовательского интерфейса

Я проведу вас по каждой части UI-проекта — точно так же, как я проделал для всех, от компаний Fortune 100 до стартапов Y-Combinator .

Эксклюзивные руководства по дизайну. Подписано более 40 000 человек. Отказ от подписки в один клик.

11 советов по дизайну, чтобы сделать текст поверх изображений более читабельным

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

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

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

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

Самый простой способ выделить текст — это добавить за ним прозрачный слой. Многие из вас, возможно, уже знают это и ищут способы получше; вы найдете больше дальше.Это может быть простой взлом, но очень эффективный.

Посмотрите этот слайд, где мы столкнулись с проблемой текста. Дональд Трамп занимает все место на слайде!
ПЕРЕД:

Однако не могу дать высокую оценку этому слайду! Средняя читаемость, но плохой эстетический вид. Нет смысла обвинять во всем Дональда Трампа. Это проблема дизайна, требующая простого решения. Просто вставьте прямоугольник из меню Shapes (перейдите на вкладку Insert), щелкните правой кнопкой мыши и выберите опцию Format Shape .Теперь дайте прямоугольнику сплошную заливку черного цвета и установите прозрачность около 25%, чтобы содержимое выделялось, а Трамп тоже не блокировался. Посмотрите после слайда:

ПОСЛЕ:

Есть 2 вещи, которые мы сделали больше, чем просто добавили форму:

• Выбрал более толстый шрифт — шрифт Century Gothic 72 и сделал полужирный
• Добавлена ​​красная линия выше и ниже фигуры (ширина 2 балла)

стр. S. Убедитесь, что если на изображении изображена личность, вы не закрываете лицо человека. Не только Дональду Трампу, никому это не понравится.

Насколько Дональд Трамп оставался в заголовках газет, так и Брексит: шокирующий выход Великобритании из Европейского Союза. Результат имел глобальные последствия; не только для экономики Великобритании. Но при создании открывающего слайда мы столкнулись с той же проблемой.

ДО:

Часто, когда вы пробуете взлом №1, вам может показаться, что он выглядит натянутым и неудобным. Это не так хорошо, как выглядит на слайде Дональда Трампа. Изображение на заднем плане таково, что если какая-то его часть заблокирована текстом и прозрачной формой, слайд превращается в беспорядок. То же самое и со слайдом выше. В таком случае возьмите прямоугольник из меню «Фигуры» в PowerPoint и закройте им весь визуальный элемент. Теперь отформатируйте фигуру, измените цвет фигуры, установите уровень прозрачности и удалите контур. Вот как теперь выглядит открывающий слайд Брексита после применения хака №2-

ПОСЛЕ:

Когда символы в вашем визуальном изображении покрывают все пространство, оставляя вам место для написания текста, у вас не остается другого выбора, кроме как поместить его поверх этого центрального символа.Очень похоже на слайд Дональда Трампа. Но некоторые изображения слишком драгоценны и замечательны, чтобы их можно было подделать. Как изображение из космоса. Полет Юноны на Марс — замечательное достижение. Но выглядит ли этот слайд примечательным после того, как текст насильно вставлен по планете?

ДО:

Кажется, что на Юпитер вторглась скучная купель. К счастью, справа на изображении есть белое пространство. Что-то лучше, чем ничего. Возьмите крутой шрифт, достойный изображения галактики. Посмотрите слайд:

ПОСЛЕ:

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

Проблема та же — текст, кажется, лишает красоту потрясающего изображения.

ДО:

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

ПОСЛЕ:

Вот как создать эффект маскировки: возьмите прямоугольную форму и залейте ее градиентной заливкой. Выберите цвет, который вы хотите использовать, и сохраните 3-4 ступени градиента. Продолжайте увеличивать прозрачность каждой ступени градиента, пока последняя ступень градиента не станет прозрачной на 100%. Посмотрите на снимок экрана ниже, чтобы увидеть, как мы создали маскирующий эффект:

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

ДО:

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

ПОСЛЕ:

Мы изменили шрифты, но даже если бы мы этого не сделали, любой шрифт без засечек выглядел бы хорошо читаемым и впечатляющим по форме. Мы мало что сделали, кроме двух кругов — удалили заливку внутреннего круга и придали ему белый контур. Мы добавили фигуру Chevron позади круга (доступную в PowerPoint в меню Фигуры). Цвета были выбраны из самого изображения, чтобы дополнить и создать гармоничный внешний вид.

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

ДО:

На изображении выше маскировка или прозрачность не подходят. Благодаря тому, что фитнес-тренер выдувает пыль, прозрачности уже достаточно. Итак, мы взяли базовую форму прямоугольника из категории по умолчанию Фигуры в PowerPoint, использовали цвета из фона изображения и наклонили форму, чтобы придать ей видимость. Смотрите финальный эффект ниже:

ПОСЛЕ:

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

ДО:

Обратите внимание на тему — Депрессия. Чувство себя маленьким и жалким по отношению к миру. Вам не нужен крупный шрифт, чтобы привлечь внимание. Небольшой, но читаемый шрифт добавит смысла сообщению.Посмотрите после слайда сейчас:

ПОСЛЕ:

Хотя мы использовали сплошную заливку для раскрашивания текстовых полей в последнем приеме, мы будем использовать здесь заливку узором. PowerPoint предлагает несколько вариантов заливки узором, которые можно использовать для фона или фигур. Однако одно предостережение. Этот прием следует использовать только для легких тем для презентаций. Теперь, на изображении ниже, есть серьезная проблема читабельности контента:

ДО:

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

ПОСЛЕ:

Давайте рассмотрим очень простой и часто используемый дизайнерский трюк, который профессионалы используют, чтобы выделить свой контент, не возясь с изображением.Допустим, у вас есть потрясающая визуальная тема, например, слайд в Instagram ниже:

ДО:

Текст читается, но его можно улучшить, просто добавив линию или прямоугольник поверх и под текстом. Вы даже можете придать тексту легкий эффект свечения Glow Effect. Выделите текст, перейдите на вкладку «Формат» на ленте, нажмите Text Effects и в разделе Glow выберите цвет свечения, который вы хотите придать. Мы дали эффект серого свечения.Посмотрите после слайда сейчас:

ПОСЛЕ:

Часто изображение, которое вы используете на слайде, дает вам несколько творческих возможностей для размещения вашего контента. Вы поймете это лучше, когда посмотрите этот слайд ниже:

ДО:

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

ПОСЛЕ:

Фильтры предназначены не только для Instagram. Вы также можете применить их к изображениям презентации. PowerPoint может не иметь расширенных фильтров, как в программах для редактирования фотографий, но достаточно приличных, чтобы изменить внешний вид и сделать ваш контент читабельным, если это не так.Скажем, у вас есть обложка вроде этого:

ДО:

Текст сливается с фоном. Вы можете добавить прозрачную фигуру за текстом, но это не лучший вариант для этого слайда. Как насчет добавления цветного наложения! Выберите изображение, перейдите на вкладку Формат на ленте и проверьте параметры цвета в меню Цвет . Вы можете перекрасить изображение и изменить насыщенность цвета и тон с помощью простых щелчков мышью.Ваше изображение не только станет более профессиональным и художественным, но и улучшится читаемость текста не по дням, а по часам:

ПОСЛЕ:

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

ДО:

Стеллаж для книг задает идеальный тон слайду и вполне совершенен сам по себе, за исключением того факта, что это сказывается на читаемости заголовка.Почему бы не размыть изображение? Как бы то ни было, вы же не хотите, чтобы аудитория начала угадывать книги на этой стойке. PowerPoint предлагает эффект размытия в меню Художественные эффекты (вкладка Формат). Вы можете настроить интенсивность размытия дальше в меню «Художественные эффекты» (щелкните «Параметры художественных эффектов») и увеличить радиус размытия. Когда вы это сделаете, также не забудьте сделать заголовок заглавным, с жирным шрифтом и тенями, чтобы он выделялся на фоне.Разве слайд ниже не намного лучше:

ПОСЛЕ:

Может быть много других способов улучшить читаемость содержимого поверх загруженного изображения. Все это не потребовалось бы, если бы на изображении было достаточно свободного места для ввода вашего контента. Однако это идеальная ситуация. Часто вам придется обходиться изображениями, подобными приведенным выше. Вот где вам пригодятся эти хитрости.

БОНУСНЫЙ СОВЕТ: объедините один или несколько приемов для создания мощных, визуально потрясающих и разборчивых слайдов.

Например, вы можете объединить приемы «Цветная прозрачность» и «Разделитель строк», чтобы создать звездный открывающий слайд, как показано ниже:

Мы не учли какие-либо дизайнерские приемы для повышения разборчивости текста? А какой взлом понравился больше всего? Введите его в комментариях ниже.

Приемы дизайна для отображения текста поверх фоновых изображений

Стало популярным накладывать текстовые метки на фоновые изображения.Но изображение могло быть любым. Как дизайн вашего пользовательского интерфейса это учитывает? Может ли наложение текста всегда оставаться читаемым?

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

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

Во-первых, позвольте мне показать вам несколько макетов дизайна, в которых используется наложение текста.

Вот еще один.

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

Позвольте мне попытаться воссоздать для вас этот дизайн.

Насколько читаем теперь текст?

Хорошо, это не та картинка.Но это все еще океанские волны.

Фоновое изображение откровенно тревожное. Но имидж не виноват. В конце концов, когда вы решите наложить текст, вы должны быть готовы к ЛЮБОМУ изображению. Значит, изображение может быть любым.

Хороший дизайн — это когда мы учитываем все возможные сценарии.

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

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

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

Проблема 2-в-1 с наложением текста

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

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

1. Четкость изображения
2. Читаемость текста

Читаемость — это легкость, с которой читатель может понять написанный текст. Это мера того, насколько легко читатель может отличить отдельные буквы или символы друг от друга.- Википедия

Наложение текста полностью препятствует просмотру изображения. Более того, ваш текст может быть нечитабельным.

Изображение может быть любым

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

Теперь мы знаем, в какой бардак мы попадаем.Итак, давайте посмотрим, что мы можем с этим поделать.

Решения для наложения текста

Есть разные подходы к тому, чтобы сделать наш оверлейный текст читабельным. Я хочу, чтобы вы поняли, что это разные решения одной проблемы. Нет единого решения.

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

1. Использование холста

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

Холст — это градиент от твердого до прозрачного, который находится за текстовой меткой. Так, например, ваша текстовая метка может быть постоянного белого цвета. Тогда ваша сетка будет иметь градиент, скажем, от 40% черного до прозрачного.

Я оставляю вам процент непрозрачности. Опять же, это дело личного вкуса.

Но очень хорошо работает 40% -ый переход от черного к прозрачному. Это не слишком заметно и не портит изображение. Он плавно исчезает, придавая текстовой метке необходимый контраст, что делает ее удобочитаемой.

Рекомендуемые руководства по холсту:

• 40% непрозрачности
• настройки градиента
• высота: 50% высоты изображения

Это несложные правила. Но, как видно из приведенного выше дизайна, эти настройки работают хорошо.

Вы можете прочитать об этом в руководстве Material Design Imagery.

Преимущества:

• Самое простое и распространенное решение
• Увеличивает контраст для лучшей читаемости текста
• Незаметное изменение дизайна, которое едва заметно

Недостатки:

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

Безусловно, использование сетки является наиболее популярным решением проблемы наложения текста на изображения.

Но подожди, пока не уходи! Есть и другие решения, которые могут вам больше подойти.

2. Наложение всего изображения

Как и решение для холста, и вместо градиента вы применили бы 40% черного ко всему изображению.

Верно. Возможно, изображение для вас не важно. Текстовая метка — ваш приоритет. Или, может быть, текст покрывает весь размер изображения.

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

Итак, поскольку текст покрывает все изображение, решение состоит в том, чтобы затемнить все изображение.

Короче говоря, это 40% -ная непрозрачность черного на изображении.

Преимущества:

• Полезно для крупного текста (заголовков?), Который покрывает все изображение
• Когда приоритетом является текст, а не изображение

Недостатки:

• Может скрыть все изображение
• Может принести в жертву видимость изображения
• Может уменьшить фоновое изображение, как будто оно существует только для эстетики

Вот несколько популярных приложений, которые используют этот подход:

3.Цветное наложение

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

Установка наложения цвета на изображение — идеальный способ нейтрализовать загруженное изображение. Он блокирует все разные цвета, делая изображение монотонным.

Вот пример.

Обычно выбирается цвет бренда.

Если у вас возникли проблемы с выбором цвета, воспользуйтесь инструментом Canva Color Wheel Tool.Он использует теорию цвета и цветовые комбинации в дизайне, чтобы помочь вам найти цвета, которые хорошо смотрятся вместе!

4. Мягкие градиенты

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

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

Вы можете использовать такие веб-инструменты, как Coolors и Kuler от Adobe. Это может помочь вам создать цветовые пары, которые хорошо сочетаются друг с другом.

Вот пример.

Преимущества:

• Лучшее выделение бренда (если используется цвет бренда)
• Одноцветный тон позволяет улучшить контраст текста

Недостатки:

• Не подходит для фотографий людей, так как их нельзя распознать

5. Полупрозрачное изображение

Этот метод предполагает использование полупрозрачного изображения на сплошном цветном фоне.Это помогает «успокоить» шумный фон и выделить текст.

Техника состоит из 3-х слоев (снизу):

1. Низ — сплошной цвет
2. Посередине — полупрозрачное изображение (непрозрачность 40%)
3. Верх — текстовый слой

Преимущества:

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

Недостатки:

• На изображении могут быть потеряны важные детали
• Подходит только для изображений, предназначенных для приятного просмотра

6.Размытие

Применение размытия по Гауссу смягчает изображение, делая текст более читаемым.

Сглаживание изображений за счет уменьшения шума и деталей изображения — Размытие по Гауссу

iOS знакомы с этой техникой. Принципы дизайна iOS используют размытие для обозначения глубины. В то время как Android (Material Design) использует тени для обозначения глубины (высоты).

Вот размытие на 16 пикселей слева и размытие на 4 пикселей справа. Убедитесь, что вы не слишком размываете изображение, чтобы основное изображение было полностью неузнаваемым!

Преимущества:

• Помогает уменьшить «загруженность» изображений
• Смягченные изображения позволяют выделять текст

Недостатки:

• Полностью жертвует изображением ради текста
• По-прежнему не решает проблему наложения одного цвета
• Может не соответствовать стилю вашего продукта.Используете размытие в мире материального дизайна?

7. Выделение текста

Здесь мы применяем цвет фона к самому тексту. Этот эффект имитирует традиционный способ выделения текста на бумаге.

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

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

Преимущества:

• Хорошая четкость текста на любом фоне
• Хорошая контрастность

Недостатки:

• При выборе цвета выделения текст может казаться отделенным от изображения
• Может полностью блокировать нижележащее изображение

8. Перейти в оттенки серого

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

С помощью изображения в оттенках серого.

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

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

Обратите внимание, как холст естественно очень хорошо сочетается с изображением. Изображение в оттенках серого, а наша сетка имеет градиент от черного к прозрачному. Следовательно, эти две техники очень хорошо идут рука об руку.

9. Игра с цветом и позиционирование

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

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

Обратите внимание на умное расположение текста вдали от изображений. Также не отвлекают спокойные пастельные тона фона. Оба работают в пользу выделения текста в дополнение к графике.

TL; DR — Используйте достаточный контраст

Состояние разительно отличаться от чего-то еще в тесном общении.- Контраст

Вы заметили? Все описанные выше техники — это способы увеличения контраста текста. Контраст — это то, что заставляет элементы казаться отличными друг от друга. Между текстом и изображением должен быть высокий контраст. Это позволяет читать текст.

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

Как правило, хорошо работают оттенки серого. Это означает, что белый текст на темном фоне. Или черный (темно-серый) текст на светлом фоне всегда работает лучше всего.

Заключение

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

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

Вы даже можете смешивать и сочетать две техники. Ваше воображение — предел. Наложение цвета на холст?

Так какую технику вы собираетесь использовать? Пропустил ли я какой-нибудь популярный метод? Я хотел бы услышать твои мысли.Поговорим в комментариях ниже.

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

Как добавить текст и наложения заголовков в Adobe Premiere | Малый бизнес

Зак Лаццари Обновлено 12 марта 2019 г.

Adobe Premier — это мощная программа для редактирования видео и создания фильмов. Добавление текста Premier Pro наложений — это обычный инструмент для настройки уникального видео.К счастью, добавить эти элементы в Premier просто. В большинстве случаев добавление текста и наложения заголовка занимает несколько секунд. Вы также можете добавить собственные шрифты и стили для текста.

Причины использования наложения текста

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

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

Творческое использование Adobe Premier текста и заголовков также широко распространено. Подумайте о старом телешоу B atman , в котором текст использовался для подчеркивания действий и эмоций. Любой творческий продюсер, использующий Adobe Premier, выиграет, просто имея доступную опцию.

Adobe Premier Функции текста и заголовков

С помощью Legacy Titler Tool можно создать заголовок в простом текстовом стиле или полное изображение заголовка.Просто щелкните на опции Title в верхней части окна Premier. Далее_, щелкните_ Новый заголовок и вариант «По умолчанию» .

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

На панели Заголовок настройте заголовок по своему усмотрению.Вы можете набрать основного текста и настроить стиль шрифта и размер . У вас также есть возможность загрузить графику и мультимедиа для вашего заголовка. Инструмент предлагает предустановленные параметры формата, но также имеет возможность полностью настроить все. Также добавьте любой дополнительный текст к заголовку. Вы можете только добавить текст и по-прежнему накладывать его на свое видео.

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

Чтобы наложить заголовок на существующее видео, поместите его над слайдом, где вы хотите наложить заголовок или текст. Откройте этот сегмент видео и дважды щелкните, чтобы перетащить заголовок в нужное положение. Ваши заголовки Premier Pro сохраняются на вкладке Titles для дальнейшего использования.

Заголовки с расширенной графикой

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

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

Добавление текста в свои проекты — Справка Snapfish

Вы можете легко добавлять текст или подписи к большинству проектов, и у нас есть много шрифтов и цветов на выбор.У вас есть два варианта добавления текста. Каждый из них зависит от макета вашей страницы:

Если на вашей странице нет текстового поля

1. Откройте текстовое меню слева (см. Пример).
2. Щелкните значок «Добавить текст» в нижней части меню.
3. В центре страницы откроется текстовое поле с синей рамкой (см. Ниже). Сначала введите текст, так как это проще сделать, прежде чем перемещать текстовое поле или вносить другие изменения.
   
   Примечание : вы можете включать большинство специальных символов (например,грамм. ñ, ®, ½, µ и т. д.), скопировав их из Интернета или текстового редактора и вставив в текстовое поле. Вы не можете ввести их напрямую в поле.
   
4. Затем вы можете изменить шрифт, цвет или выравнивание текста в меню «Текст». Изменения применяются ко всему тексту в поле. Это изменит цвет границы вашего текстового поля с синего (режим вставки) на белый (режим перемещения), как показано ниже.
   
5. В режиме движения вы можете
   • удалить ящик
   • перетащите нижний «маркер» влево или вправо, чтобы повернуть текстовое поле
   • перетащите текстовое поле в другое место на странице или
   • перетащите один из углов или середин текстового поля наружу, чтобы увеличить размер текстового поля и оставить больше места для ввода или более крупные шрифты.

Если на вашей странице уже есть текстовое поле

1. Для макетов страниц, которые уже включают текстовую область, включая корешок текста в книгах, щелкните область Добавить текст, чтобы выбрать текстовое поле. Граница поля изменится на белые пунктирные линии с кружками по углам и ромбиками в середине. с каждой стороны (см. ниже).
   
   Примечание : На лицевой стороне многих карточек вместо сообщения «Добавить текст» есть образец текста для имени, адреса и т. Д., Но они работают одинаково.Просто щелкните один, чтобы отредактировать текст.
2. Щелкните внутри поля, и когда граница станет синей (см. Ниже), печатайте!
   
   Как и выше, вы можете добавить специальные символы, скопировав их из Интернета или файла текстового редактора и вставив в текстовое поле.
3. Затем вы можете изменить шрифт, цвет или выравнивание текста в меню. Изменения применяются ко всему тексту в поле.
4. Для большинства текстовых полей, кроме текста на корешке в книгах и текстовых областей на лицевой стороне многих дизайнов карточек, вы можете войти в режим перемещения, щелкнув край поля, чтобы:
   • удалить коробку,
   • перетащите текстовое поле в другое место на странице или
   • перетащите один из углов или середин текстового поля наружу, чтобы увеличить размер или форму текстового поля, чтобы оставить больше места для ввода или более крупные шрифты.

Подсказки

• Не размещайте темный текст на темном фото или фоне или светлый текст на светлом фото или фоне, потому что вы не сможете увидеть свой текст !.
• Максимальный размер шрифта, который вы можете выбрать, зависит от высоты и ширины текстового поля. Если вам нужен более крупный шрифт, сначала увеличьте размер текстового поля, перетащив один из углов наружу. Затем выберите в меню больший размер шрифта (см. Пример справа).
• Если вам нужно больше места для текста, увеличьте текстовое поле, как показано и описано выше.
• Если вы перетащите текстовое поле по странице, вы увидите розовые линии, которые появятся, когда поле выровнено с фотографиями, украшениями или другими текстовыми полями. Например, в углу страницы вы можете увидеть направляющие выравнивания по горизонтали и вертикали (см. Ниже).
  

9 малоизвестных советов по использованию шрифтов для историй в Instagram

Обновлено 31 августа 2020 г.

Без сомнения, Stories были самым умным изобретением Instagram. На самом деле платформу без историй сложно представить.Запущенный три года назад в этом месяце, более 500 миллионов пользователей теперь делятся историями каждый божий день.

Это отличные новости, если вы заядлый пользователь историй (а вы должны им быть), и плохие новости, если вы — бренд, пытающийся выделиться из толпы.

Я поделился семью свежими идеями Instagram Stories. Сегодня я предлагаю девять малоизвестных хаков для шрифтов Instagram, ориентированных на дизайн, которые, вероятно, не используют ваши конкуренты и которые могут помочь вашим историям стать более заметными. Читай дальше.

1.Добавьте шрифт своего бренда в Stories

Недавно Instagram выпустил новые шрифты для историй, с которыми мы все можем играть. Это правда: они классные. Но знаете, что еще круче? Добавление собственного шрифта. В конце концов, ничто не может сравниться с использованием шрифтов вашего бренда.

Вот как «брендировать» свой контент без особых усилий:

Загрузите приложение Over на свой телефон. Затем используйте AirDrop на устройстве Apple или используйте настройки общего доступа в Google на вашем устройстве Android, чтобы подключить свой шрифт.OFT файл.

Появится всплывающее меню. Выберите «Больше»:

Вот и все. Теперь, когда вы создаете свои истории в Over (кстати, отличное приложение для различных шаблонов), вы можете использовать шрифты своего бренда.

ПОДБОРКА СВЯЗАННОГО СОДЕРЖАНИЯ:

2. Создайте сплошной фон, чтобы текст выделялся

Если вы разместите серию историй, вы, вероятно, соедините их с той же эстетикой.Однако что происходит, когда вам нужно прервать последовательность призывом к действию? Создайте сплошной фон на основе цветовой палитры серии Stories и сделайте свой текст ярким.

Вот как:

• Сделайте или выберите изображение из своей библиотеки фотографий.
• Щелкните значок карандаша для рисования.
• Наведите курсор на свой выбор цвета.
• Коснитесь и удерживайте палец на нем. Фон изменится на сплошной монохромный цвет.
• Напишите призыв к действию или краткую заметку.

3. Выберите дополнительные цвета из цветовой гаммы

Instagram Stories предлагает 27-цветную палитру. Но у вас могут быть все цвета мира.

Вот как:

• Щелкните значок пера для рисования.
• Коснитесь любого цвета и удерживайте палец. Через секунду появится большая палитра.
• Держа пальцы на экране, двигайте им из стороны в сторону, пока не выберете нужный цвет.

СОВЕТ: Этот трюк с цветовым кругом также можно использовать для изменения фона за шрифтами.

3.Используйте цветовую палитру вашего изображения для забавного фона письма

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

Вот как:

• Выберите изображение для публикации и определите слово, которое хотите использовать.
• Щелкните значок текста («Aa») в правом верхнем углу.
• Введите первую букву слова.(Только строгие, классические шрифты и шрифты для пишущей машинки позволяют добавлять фон.)
• Добавьте этот фон к письму, щелкнув значок в верхнем левом углу.
• Щелкните значок пера для рисования, чтобы отобразить инструмент.
• Переместите инструмент по фотографии, чтобы увидеть, как изменился фон буквы.
• После выбора цвета фона для первой буквы переходите к следующей и следующей, пока слово не будет завершено.

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

4. Используйте разные шрифты

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

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

Вот как:

• Убедитесь, что ваш интернет-браузер открыт на вкладке.
• Откройте приложение Instagram, перейдите в Stories.
• Выберите (но не загрузите) фотографию для публикации.
• Зайдите в браузер и откройте веб-сайт CoolSymbol.com.
• Выберите вариант «Необычный текст» и введите текст. Он автоматически преобразуется в несколько шрифтов.
• Прокрутите вниз, чтобы выбрать один.
• Нажмите «Копировать», чтобы сохранить текст в буфер обмена.
• Вернитесь в свое приложение Instagram — найдите черновик Stories.
• Выберите значок текста («Aa»), нажмите и удерживайте экран, на котором находится мигающий курсор, и нажмите «вставить».”

Теперь у вас есть история с текстовым шрифтом, который есть у немногих, если у кого-то еще.

Это небольшой изящный трюк для персонализации шрифтов в биографии Instagram и подписях.

5. Используйте анимированные шрифты в Stories

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

Вот как:

• Загрузите и откройте HypeType.
• Выберите изображение из вашей библиотеки фотографий.
• Дважды коснитесь анимированного фрагмента текста, который нужно отредактировать.
• Введите текст в открывшемся окне.
• Переместите текст по экрану.
• Щелкните синий значок «Готово» в правом верхнем углу.
• Чтобы добавить другие шрифты и поиграть с анимацией, щелкните значок «T».
• Щелкните «Сохранить» (тот же синий значок) и выберите загрузку изображения в телефон.
• Откройте Instagram.Нажмите «Истории» и загрузите свой анимированный контент

HypeType бесплатен с небольшим водяным знаком в правом нижнем углу с надписью «Сделано с HypeType». Вы также можете подписаться (примерно за 20 долларов в год) и публиковать без водяного знака.

8. Создайте текстовый эффект омбре / радуги.

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

Вот как:

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

Хотя для этого сначала нужно освоить гимнастику для пальцев, создание этого текстового эффекта станет проще простого.

9. Сделайте свои хэштеги невидимыми

Хотя добавление хэштегов в ваши истории в Instagram увеличивает их шансы быть размещенными на странице историй, многие люди воздерживаются от их использования, потому что считают, что они выглядят как спам. Однако что, если бы вы могли сделать их невидимыми? Вы бы всегда использовали хэштеги?

Так и думал.

Вот как:

• Выберите фотографию.
• Введите хэштег.
• Разместите его в углу со сплошным фоном.
• Выделите хэштег как текст.
• Коснитесь значка пера для рисования.
• Проведите пером по экрану как можно ближе к фону хэштега, пока хэштег не совпадет с этим фоном.

Вот и все! Ваш хэштег есть, но его не видно.

Расскажите свои истории лучше

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