webdonsk.ruКак сделать шрифтовой логотип в фигме
Добавил пользователь Валентин П. Обновлено: 06.09.2024
Иногда лучше меньше да лучше. Эта простая поговорка как нельзя хорошо подходит для создания логотипа для сайта. Можно отказаться от форм, символов, талисманов и создать шрифтовое решение. Чтобы продемонстрировать, что шрифтовые логотипы не всегда скучны, мы подобрали несколько креативных примеров и направлений для работы со шрифтовым логотипом.
Хорошие примеры шрифтового логотипа
Есть много примеров минималистичных логотипов, созданных исключительно при помощи шрифтов. При создании важно сочетать выбор шрифта с общей стилистикой сайта.
Manchester Craft Mafia
Логотип Manchester Craft Mafia создан благодаря совмещению геометрических плоскостей. Этот способ напомнил мне сразу же о китайских танграмах*. Благодаря свежим, пестрым цветам логотип выглядит дружественно и креативно.
*игра-головоломка, в которой нужно составлять различные фигуры из семи пластинок.
Finch
Image Mechanics
Brand New Conference
Infin Vision
Логотип Infin Vision интересен сочетанием различных типов шрифтов и размеров. Неяркие цвета делаю логотип еще более особенным.
Tokyo Digital
Логотип Tokyo Digita минималистичен, создан при помощи геометрического шрифта без засечек, и является прекрасным примером отточенного, креативного шрифтового логотипа.
I am Tiago
Airside
Для логотипа Airside выбран прямолинейный шрифт без засечек, срезанный наискось. В верхней и нижней части логотипа буквы срезаны. Логотип применяется как на светлом, так и на темном фоне.
Grandpeople
У Grandpeople буквы логотипа стоят одна над другой, таким образом интересное графическое изображение состоит только из шрифта. Шрифт анимирован и плавно меняет цвет с черного на серый.
nGen Works
.
Креативное агентство nGen Works применяет доминантный брусковый шрифт в качестве логотипа. Красный , наклонный фон логотипа отлично дополняет логотип. Особенность – срезанные элементы между ge и rk.
Typejockeys
Typejockeys использует гибкий шрифт, напоминающий каллиграфию. В комбинации со сдержанным дизайном страниц логотип выглядит все же современно, создавая чувство освежающего контраста.
DANZK
Zachary Pulman
Классический и в то же время современный логотип состоит из инициалов Zachary Pulman — ZP. Обе буквы сливаются создавая самостоятельную, новую форму.
Советы по креативному осмыслению шрифтовых логотипов
При создании логотипа, который должен быть исключительно шрифтовым, часто сложно найти креативное решение. Тем не менее есть некоторые советы и идеи, которые помогут вам работать со шрифтом логотипа.
Используйте различные размеры шрифта
Играть с различными размерами шрифтов особенно уместно, если слов несколько или вы имеете дело с лого-слоганом. Таким образом, вес можно сместить на одно слово, создавая при этом интересный оптический контраст.
Разбивайте на несколько строк
Еще одно стилизующее средство – разделите текст логотипа на несколько строк. Таким образом можно скомпоновать длинный текст и создать увлекательный лого.
Используйте шрифты с засечками и без них
Использую комбинацию различных шрифтов, вы создадите интересный контраст для логотипа. Например, если ты выбираете один классический шрифт с засечками для логотипа, слоган может быть написан шрифтом без засечек, более мелкого масштаба. Это придаст логотипу современный вид.
Применяйте написание заглавными и строчными буквами
Интересный контраст создается при использовании комбинации заглавных и строчных букв. Чаще всего лого-слоган пишется более мелким шрифтом, но используются все заглавные буквы.
Применяйте цвет
Конечно шрифтовой логотипа не должен быть черно-белым. Придать лоск логотипу можно используя нужное цветовое сочетание и сигнальный цвет.
Работайте с отдельными буквами
Если подойти к шрифтам творчески, можно открыть в шрифте новые формы или рисунки. Иногда просится обработка отдельных букв, например, слияние, или создание новой формы из буквы или слова. По моему мнению, важно при работе со шрифтом, почувствовать меру. Нужно сохранить характер шрифта. Мягкая обработка, как правило, обладает более сильным эффектом.
Способы размещение логотипа на сайте
Конечно, вы можете использовать для логотипа только шрифты, предлагаемые в web. Но если этого не достаточно, есть множество способов установить логотип на сайте.
Используйте картинку
Если вы обработали шрифты и использовали при этом нетрадиционные шрифты для web – нет ничего проще, чем использовать картинку. Шрифт не будет читаться в коде, но название сайта можно указать в атрибутах: title или alt.
Google Webfonts
Есть возможность использовать шрифты из Google Font Directory. Выбор из 30 шрифтов, некоторые позволяют создать неплохой логотип.
Еще одна возможность использовать интересные шрифты для сайта – метод @font-face. На сайте Fontsquirrel можно загрузить уже готовые для интреграции бесплатные шрифты.
В Фигме есть хорошие возможности для работы с текстом через специальный тип слоёв. Чтобы создать текстовый слой, нажимаем T и кликаем в нужное место, либо растягиваем блок как прямоугольник или фрейм и в нем уже можно писать.
Шрифты из Google Web Fonts
Круто: в Фигме по умолчанию доступна вся библиотека шрифтов Google Fonts,
Не круто: нельзя динамически просматривать как будут выглядеть эти шрифты. Чтобы увидеть, как будет выглядеть шрифт в проекте его обязательно нужно применить. не удобно — факт. Лично я просматриваю шрифты на самом сайте гуглфонтс, копирую название подходящего и применяю его в Figma.
Режимы текстового слоя в Figma
• Horizontally — Текстовый блок обволакивает текст по горизонтали( если нет перехода на новую строку — текст выстроится в линию)
• Vertical — обводка текста по вертикали
• Fixed -фиксированный размер текстового блока вне зависимости от количества текста.
Так же ты можешь всегда уменьшить размер текстового блока до размера самого текста дважды кликнув по обводке
Основные настройки текста
Если выделен текстовый слой, справа мы увидим панель работы с текстом.
Справа вверху блока иконка Text Styles — всплывающее меню стилей текста. Подробнее о создании стилей для текста читай в отдельной статье.
Далее идут поля:
• Typeface — само название шрифта
• Weight – выбор начертания
• Size не знаю что это такое))
• Line Height – межстрочное расстояние. В мае 2019 пофиксили баги этой настройки и теперь она работает, как нужно.
• Letter Spacing — трекинг, межбуквенное расстояние или разрядка.
• Paragraph Spacing — отступ между параграфами, разделёнными обрывом строки, Enter
• Paragraph Indentation — красная строка, абзац.
Так же тут у нас есть возможность выравнивать текст по левому краю, центру и по правому краю. Но что более примечательно — есть настройки по вертикальному выравниваю, что просто невероятно круто и полезно.
В доп меню за тремя точками скрывается более подробная настройка выравнивания текста внутри блока по вертикали и горизонтали
Красным выделен блок в котором можно настроить все буквы заглавные, строчные, каждое слово с большой буквы, подчеркнутый и зачеркнутый текст.
Блок Font Features
Содержит дополнительные возможности шрифта для…. блин, я не знаю для кого)) Это супер редко используемые фишки.
Discretionary and historical ligatures — использовать ли дискретные и исторические лигатуры.
Fractions – дроби. Соединять ли такие значения как 1/2 в один глиф с дробью.
Выставление степеней и числовых подписей
Numbers
Тут можно выбрать размеры ячейки для каждой буквы. Например, сделать так, чтобы каждая буква занимала определенную ширину или чтобы занимала ширину равную своему размеру. полезно для табличек и перфекционистов, имхо.
Как создать стиль текста в фигме
В начале тебе нужно выставить все настройки текста(выбрать шрифт, его размер, начертание и тд). После этого кликаешь на вот эту иконку (выделена красным) после кликаешь на плюсик и даешь название своему стилю текста в Figma.
Создать стиль текста в фигма
Полезные статьи по типографике для новичков
Горячие клавиши в работе с текстом в Фигма
В начале ответы на популярные вопросы:
Как вставить текст в Фигма? — CTRL+v (удивительно)
Как растянуть текст в Фигме? — выбирай scale tool (K) и растягивай текст, как нужно. Он будет растягиваться пропорционально.
ctrl+с копировать
ctrl+v вставить
ctrl+d сделать дубль (дубль появляется мгновенно поверх копируемого элемента)
ctrl+alt+c копировать свойства текста(цвет, тени, обводку, для шрифта — размер, начертание, керлинг и тд.)
ctrl+alt+v вставить свойства
ctrl+shift+v вставить текст со свойствами текстового блока, в который ты вставляешь сам текст
ctrl+b текст станет жирным
ctrl+i текст станет наклонным
ctrl+u текст станет подчеркнутым
Читайте также: