Font awesome как использовать в фотошопе

Обновлено: 06.07.2024

Привет, друзья. Все мы время от времени пользуемся шрифтовыми иконками Font Awesome при создании landing apge.

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

Интерфейс плагина

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

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

Если идея подключить плагин с иконками от Font Awesome для Photoshop вас заинтересовала, то давайте перейдем к скачиванию и установке.

Как установить

Для начала давайте скачаем архив с о сайта разработчиков Creativedo.co.

В архиве есть версия для MAC, Windows и инструкция по установке. На самом деле есть несколько способов, но давайте воспользуемся тем, который описан в архиве. Так как версия плагина в формате ZXP, то нам понадобится инструмент для установки. Как и написано в инструкции, давайте скачаем установщик ZXPinstaller

ZXP представляет собой пакет с расширением для программ Adobe, например для Фотошоп, Illustrator, Premiere Pro или Dreamweaver.

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

Теперь запустите Photoshop, перейдите в меню "Окно" - "Расширения" и поставьте галочку, напротив FontAwesomePS

В панель инструментов (справа) выведется иконка плагина, открыв которую вы увидите набор иконок, как и было показано на первом скриншоте.

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

Как подключить Font Awesome
- Подключение с помощью CDN
- Подключение Font Awesome 5 с хранением файлов на своем хостинге (CSS)
- Как использовать Font Awesome в HTML
- Как использовать Font Awesome в псевдоэлементах after и before CSS. Параметр content.
- Как использовать шрифт Font Awesome в Photoshop
Как подключить Font Awesome

В этой главе мы подробно разберемся как подключить Font Awesome 5 всеми возможными способами. И какой из них лучше выбрать.

Подключение с помощью CDN

Чтобы подключить иконочный шрифт Font Awesome 5 с помощью CDN необходимо перейти на страницу: Font Awesome Start и выставить необходимые параметры. Полученный код вставляем в тег <head> вашего сайта, на тех страницах где вы собираетесь использовать иконки.

Скриншот №1

На скриншоте №1 изображены настройки, которые я использую.
1. Выбираем версию, которая нам нужна. Free — бесплатная версия. Pro — платная и имеет дополнительные стили и наборы иконок.
2. Начертание шрифта, которое мы будем использовать в своем проекте.
3. Что мы будем использовать. Webfont — иконочный шрифт. SVG — иконки в формате .svg
4. Сгенерированный код для подключения Font Awesome с помощью CDN.
Чтобы не переходить на сайт, я размещу код со стандартными настройками здесь.

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

Подключение Font Awesome 5 с хранением файлов на своем хостинге (CSS)

После скачивания получаем архив с файлами, как на скриншоте №2:

Скриншот №2

Для работы иконочного шрифта необходимы только папки выделенные красным. И то в паке /CSS нам нужен только один файл css/all.min.css (Смотрите скриншот №3)

Скриншот №3

Файл all.min.css хранит все стили шрифта Font Awesome, я использую именно этот файл. На это есть много причин связанные с моим личным удобством. Вы же можете использовать тот файл, стили которого вы будете использовать. Например, если вы хотите использовать только бесплатный иконочный шрифт, достаточно подключить файл fontawesome.min.css.

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

Переносим папку webfont и файл all.min.css на свой хостинг.

Очень важно! Папка webfont нужно располагать на директорию выше чем файл all.min.css, иначе шрифт Font Awesome не подключится, так как в стилях прописан именно такой путь для файлов со шрифтами. Если такой способ противоречит структуре вашего проекта, тогда просто пропишите в файле all.min.css новый путь до папки webfont.

У меня это выглядит так:

Скриншот №4

В папке fontawesome хранится один файл all.min.css

Теперь нам нужно подключить Font Awesome к своему сайту, для этого подключаем стили all.min.css, так как вы обычно подключаете файлы со стилями. Этот процесс я описывать не буду, так как он имеет огромное количество вариантов и каждый делает это по-своему. Но если вы новичок и не знаете, как подключать файлы со стилями, то Google вам в помощь. При возникновении трудностей пишите в комментариях, и я обязательно вам помогу.

Как использовать Font Awesome

В этой части статьи мы разберем как правильно использовать Font Awesome в веб-разработке или дизайне на примере Photoshop.

Как использовать Font Awesome в HTML

Это самый простой способ использования иконочного шрифта. Достаточно выбрать из каталога иконок Font Awesome нужную иконку и вставить ее код в нужное место вашего html документа. На скриншоте № 5 под цифрой 1 изображено место откуда можно узнать код иконки.

Скриншот №5

Как использовать Font Awesome в псевдоэлементах after и before CSS. Параметр content.

Чтобы использовать иконочный шрифт для его отображение в псевдоэлементах after или before, нужно использовать Unicode иконки. Который можно взять на странице с нужной иконкой (на скриншоте №5 цифра 2)

Теперь пишем стили css для элемента before или after:

Разберем главные моменты в коде.

3. В свойстве content указываем Unicode.

4. Обязательно задаем семейства шрифта. Обратите внимание у Font Awesome 5 используется 2 шрифта «Font Awesome 5 Brands» и «Font Awesome 5 Free». В избежании ошибки указывайте оба.

5. Font-weight — обязательно нужно указывать 900, иначе иконки будут отображаться в виде квадратиков. Другая толщина доступна только в PRO версии.

Как использовать шрифт Font Awesome в Photoshop

Для того, чтобы использовать иконочный шрифт в фотошопе необходимо установить шрифт на свой компьютер. Они находятся в папке webfont в архиве Font Awesome. Для установки нужно кликнуть правой кнопкой мыши на нужный шрифт и нажать «Установить».

Смотрите на скриншоте №6:

Скриншот №6

После установки можно использовать Font Awesome в фотошопе, для этого мы копируем необходимую нам иконку с каталога (цифра 3 на скриншоте №5) и вставляем в photoshop как текст. Незабываем выбрать в настройках семейство шрифта Font Awesome.

Скриншот №7

Стилизация иконок FontAwesome

Для стилизации иконок используются стандартные стили CSS для шрифтов. Например, чтобы поменять цвет иконки нужно использовать свойство CSS color, а поменять размер иконок Font Awesome нужно использовать свойство font-size.

Вот и вся информация, которая необходима для использования иконок от Font Awesome, как для разработки сайтов, так и для проектирования дизайн-макетов в Photoshop. Надеюсь статья вам понравилась и решила все ваши проблемы. А если нет, посмотрите мое видео на эту тему, там я показываю все на примере.

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

Всего несколько простых шагов и в ваших макетах, презентациях и документах появятся замечательные иконки из шрифта Font Awesome, которых там, кстати, аж 479 штук.

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

Практически любой программист знает, как подгрузить Font Awesome на сайт и использовать необходимые иконки там, но как же нарисовать сайт с иконками Font Awesome, скажем, в Adobe Photoshop?

Сделать это на самом деле несложно:

1. Забираем шрифт с GitHub — для этого идем на сайт шрифта и нажимаем большую кнопку Download. В скачанном архиве находится все необходимое для различных вариантов использования Font Awesome. Нам будет нужна десктопная версия шрифта в формате OTF, которая находится в папке «fonts».
2. Устанавливаем шрифт на компьютер — просто кликнете на файл OTF и нажмите кнопочку «Установить шрифт».

3. Итак, у нас все готово к работе, открываем Adobe Photoshop, выбираем Type Tool и шрифт Font Awesome Regular, который уже установлен в системе. Теперь осталось вставить нужную иконку в наш дизайн.

А теперь самое приятное — таким образом замечательные иконки из Font Awesome можно использовать не только в Photoshop, но и в любом другом приложении, например, в документе Pages или презентации Keynote. Просто скопируйте иконку в текстовое поле, где уже выбран шрифт Font Awesome, и в вашей презентации появятся великолепные иконки, которым можно задавать нужный цвет, менять их прозрачность и производить с ними любые другие манипуляции.

Привет, Хабр! Представляю вашему вниманию перевод статьи "Font (More) Awesome — an iconic invention" автора Pubudu Dodangoda.

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

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

Тем не менее, есть ситуации, когда набор предлагаемых Font Awesome иконок недостаточен. Например, недавно я хотел использовать логотипы Facebook, Twitter и Airbnb на своём сайте. Однако я был крайне удивлён — иконка Airbnb не включена в Font Awesome. Оказалось, что сообщество просило эту иконку около 3 лет назад. И её нет в официальном наборе до сих пор.

Также, если вы хотите добавить не самую популярную иконку, самым простым способом будет использование тега img . По сравнению с использованием Font Awesome это требует слишком больших усилий. С другой стороны, команда Font Awesome не может обслужить все запросы на иконки.

Поэтому я занялся поиском простого способа подключения необходимых мне иконок. К счастью, я нашёл инструмент под названием Calligraphr. Я объясню, как использовал этот инструмент (потребуются небольшие познания в CSS), и покажу несколько несложных хитростей, которые позволят делать в вашем коде что-то вроде следующего:

Выглядит неплохо, правда? Тогда давайте сделаем Font ещё более Awesome!

Создание шрифта

Первый этап в нашем приключении заключается в создании шрифта Font More Awesome, что можно сделать используя инструкцию на их веб-сайте. Сперва нужна скачать шаблон. Вот пример:

Теперь мы должны заполнить секции желаемыми изображениями. Вы можете распечатать шаблон и нарисовать в нём иконки от руки, или использовать инструмент вроде Adobe Photoshop, GIMP с изображениями, которые вы скачаете из интернета.

Прим. переводчика. Не пытайтесь использовать на Calligraphr цветные и даже серые изображения — вероятность удачного преобразования будет крайне мала. Используйте только чёрно-белые изображения.

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

Следующая вещь, которую вы должны сделать, достаточно проста. Загрузите заполненный шаблон на calligraphr, и нажмите на кнопку “build font” — и БУМ! Вы можете скачать ваш персональный шрифт. Давайте назовём его FontMoreAwesome.otf .

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

Интеграция с Font Awesome

Конечно, вы можете рассматривать новый шрифт как отдельный набор иконок. Но разве не было бы круто расширить сам набор Font Awesome? Давайте сделаем это!

Единственная вещь, которую нужно понять, заключается в том, что мы будем наследовать CSS стили, определённые Font Awesome CSS файлом. Например, он будет содержать примерно такую запись:

Это значит, что когда мы следующим образом определяем элемент иконки, она будет наследовать стили display , font-size и text-rendering из кода выше:

Теперь давайте определим наш собственный CSS файл. Назовём файл font-more-awesome.css .

Первой записью в этом файле должно идти объявление правила font-face. Может быть сделано как ниже. Это несложно. Лишь немного базового CSS.

Далее мы можем определить желаемые иконки:

Обратите внимание, что мы определяем иконки как псевдо-элементы, используя селектор before . Таким образом, мы можем внедрить нужный нам контент внутрь элемента, который использует объявленные классы.

В созданном нами шрифте FontMoreAwesome “A”, “B” и “C” обозначаются иконками для Troll, Lol и Like-a-boss соответственно. Хотя это не лучший способ сделать это.

Font Awesome использует области для частного использования (Unicode Private Use Area, PUA), чтобы застраховать экранные читалки от зачитывания случайных символов, которые и представляют собой иконки.

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

Ещё один момент, достойный упоминания — в примере выше, при внедрении на страницу своего контента, мы перезаписываем правило font-family, определённое Font Awesome.

Font More Awesome в действии

Наконец, загрузим этот CSS файл в наш index.html .

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

Читайте также: