Font awesome для photoshop: Как установить Font Awesome в Фотошоп

Иконочный шрифт FontAwesome: использование в Фотошопе

Иконочный шрифт Font Awesome — не единственный подобный шрифт, но весьма добротный по набору иконок в нем на все случаи жизни)

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

Но иконочный шрифт можно использовать не только на сайтах, его можно установить и на компьютер, например на ОС Windows) Что мне недавно и потребовалось.

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

В общем, задача выполнимая, но потребовалось разобраться.

Как установить Font Awesome на компьютер

Для начала зайдем на официальный сайт шрифта http://fontawesome. io/cheatsheet/ и скачаем архив с файлами шрифта, шрифт бесплатный, скачивается без проблем. Находим архив для загрузки, скачиваем, открываем архив и устанавливаем файлы с расширением .otf

Шрифт FontAwesome в данный момент подразделили на Solid (жирный) и regular (обычный).

Устанавливаем все предложенные шрифты, нажимая поочередно на файлы .otf — откроется установка шрифта на windows, нажмем на кнопочку «Установить» в левом верхнем углу — шрифт установится на компьютер. (Рис. ниже)

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

Откроем фотошоп, затем откроем или создадим новое окно-изображение. Выберем инструмент «Текст», выберем в раскрывающемся списке шрифтов уже установленный FontAwesome. Затем нам снова потребуется перейти на официальный сайт шрифта, на ту самую страницу где представлены все иконки шрифта http://fontawesome.io/cheatsheet.

Там мы выбираем любую иконку.

Теперь внимание: обратим внимание на раздел SOLID или REGULAR. Если иконку выбрали из раздела Solid, то копируем саму иконку (выделяем саму иконку, изображение, не название и не юникод, и копируем в буфер).

Далее возвращаемся в фотошоп -> выбираем инструмент «Текст», ставим курсор в нужное место — > в окне шрифтов выбираем один из имеющихся у вас шрифов FontAwesome (free, brand).

И снова ВНИМАНИЕ: если иконку копировали на сайте из раздела Solid, то рядом с названием шрифта устанавливаем жирность вместо regular -> solid ! Это важно, иначе у вас отобразится просто прямоугольник. Если копировали значок из раздела Regular (там прозрачные контурные иконки), то проследим чтобы жирность шрифта была так же Regular. 

После этих предварительных действий на месте курсора вставляем иконку через «вставка»: меню-edit (редактирование) -paste (вставка) или правой кнопкой мыши выводим контекстное меню и «Встивить» (paste), либо просто используем сочетание клавиш CTRL+V (вставка скопированного объекта)

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

• < Назад
• Вперёд >

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

​​Приветствую, коллеги! Сегодня нам стоит поговорить о такой замечательной штуке, под именем Font Awesome, а именно о том как работать с ним в фотошопе. Ведь мы – армия дизингеров и должны помогать друг-другу. Ну еще и качественно делать свою работу… ну вы поняли.

Для понимания Font Awesome — это иконочный шрифт, который можно использовать с практически любыми элементами веб-страниц(и не только) для повышения наглядности и улучшения дизайна в целом. Все мы знаем что иконочки мы считываем быстрей, чем текст, поэтому владение такими инструментами сделают жизнь как нам, так и пользователям проще. Этот замечательный шрифт разработал человечек с именем Дэйв Ганди, собрав коллекцию иконок, которые удовлетворят даже самые необычные потребности в таких символах.  

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

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

Преимущества Font Awesome

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

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

3. Иконки прекрасно функционируют и отображаются во всех браузерах, даже в старом IE8 (удивительно да?) 

4. Хорошо сочетаются с кучей фреймворков, например Bootstrap 

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

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

7. Вкусный пункт! Шрифт свободен для коммерческого использования. Никто к вам с повесткой не придёт.

Недостатки Font Awesome

1. Символы могут иметь только один цвет, однако, это можно обойти использовав объединение иконок или при помощи эффектов CSS. 

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

Как мы видим, недостатков совсем не много и они не критичны, поэтому перейдём к установке шрифта в систему, потому что речь идет о локальной работе в фотошопе. Рассмотрим установку для Windows. Первым делом переходим по ссылке – http://fontawesome.io и тыкаем «Download»

На втором экране выбираем «Free for Desktop» и сохраняем архив в любое удобное место.

Открываем архив и находим файлы шрифтов с расширением «.otf». В моём случае случае они располагаются по пути: /fontawesome-free-5.9.0-desktop/otfs. Извлекаем их в любую папку, после чего выделяем все и нажатием правой кнопки мыши устанавливаем в систему. Все остальные файлы в архиве используются для CSS и препроцессоров – грубо говоря, все это для верстки сайта.

Congratulation! Font Awesome успешно установлен!

Теперь пару слов о том как это дело использовать. Для вставки нужной иконки нам понадобится шпаргалка. Найти ее можно по сыллке https://fontawesome.com/cheatsheet?from=io или https://fontawesome.ru/cheatsheet/ Лично мне вторая нравится больше, она более компактная. Выбираем оттуда любую понравившуюся иконку, и просто выделяем её, после чего копируем, как обычный текст. В открытом макете, создаем текстовое поле и вставляем иконку аналогичным способом. Если иконка будет выглядеть как пречеркнутый квадратик, то пугаться и бросать дизайн не стоит. Нужно лишь выделить весь текст и выбрать в меню шрифтов FontAwesome. 

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

Тэги:

Шрифт Font фотошоп photoshop Fontawesome

Топ-30 бесплатных фотостоков

Портфолио / Дизайн

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

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

Это заняло очень много времени. Иконки Font Awesome от Google решают эту проблему.

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

В этом уроке мы будем работать с Font Awesome Free. Мы будем использовать его с Photoshop CC 2018, установленным в Windows 10.

Вы также можете применить эти инструкции к платной версии Google Font Awesome Icons. И бесплатные, и платные наборы значков также можно установить на Mac.

Шаг №1. Загрузите бесплатные иконки Font Awesome

• Перейдите на веб-сайт Font Awesome и загрузите Font Awesome Free.

• Разархивируйте загруженный файл на жесткий диск. Теперь вы должны увидеть две папки:
  • fontawesome-free-x.y.z Папка с файлами
  • fontawesome-free-x.y.z Сжатая (заархивированная) папка

• Перейдите в папку с файлами fontawesome-free-x.y.z . Вы увидите еще одну папку fontawesome-free-xyz . Откройте его.
• Вы увидите несколько папок и файлов. Найдите папку для использования на рабочем столе :

• Нажмите на эту папку. Теперь вы должны увидеть файлы шрифтов Font Awesome:
.

• Щелкните правой кнопкой мыши любой из трех типов шрифта.
  Чтобы узнать больше о том, как каждый из них отображает значки, посетите галерею значков Font Awesome:
.

• Вы увидите всплывающее контекстное меню. Нажмите Установить:

• Ваш шрифт будет установлен почти мгновенно. Повторите шаги, описанные выше, чтобы установить остальные два типа шрифта, если хотите.

Молодец! Теперь у вас есть файлы шрифтов Font Awesome, установленные в вашей Windows. Давайте просто дважды проверим, чтобы убедиться, что они были установлены в нашей Windows и готовы к использованию в нашем Photoshop.

• В Windows запустите диспетчер шрифтов. Вы должны увидеть, что ваш шрифт (шрифты) отображается счастливо. Я установил все три из них. Итак, мой диспетчер шрифтов отображает для меня все три:

• Запустите Photoshop. Откройте список доступных вам шрифтов. Теперь вы должны увидеть список шрифтов Font Awesome с одной записью Font Awesome Free для типов шрифтов Free Regular и Free Solid Regular:
.

Шаг №2. Найдите имя значка Font Awesome

Иконки Font Awesome теперь доступны в Photoshop как типы шрифтов. Прежде чем вы сможете использовать значок в новом или существующем документе Photoshop, вам нужно найти имя значка.

1. Перейдите к «Шпаргалке Font Awesome Free». Выберите необходимый тип шрифта. Для целей этого урока я выбрал «Solid».

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

Отлично! Теперь все готово для добавления выбранного значка Google Font Awesome в новый или существующий документ Photoshop.

Шаг №3. Добавьте значок в документ Photoshop Image

Теперь вы готовы добавить значок «адресная карточка» в новый или существующий документ Photoshop. В моем примере я буду добавлять его в новый документ.

1. Запустите Photoshop и создайте новый документ. Щелкните инструмент Horizontal Type .
2. Нарисуйте прямоугольник.
3. Выберите Font Awesome Free :

• Введите адресную карту внутри прямоугольника:

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

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

Дополнительная литература

• Руководство по Font Awesome для начинающих
• Вставка значков Font Awesome в сообщения и страницы WordPress
• Использование значков Font Awesome в пунктах меню WordPress
• Добавление значков Font Awesome в меню Drupal
• Добавление значков Font Awesome или Bootstrap в меню Joomla

Инструктор

• Алексей Смирнов

  Родившийся от матери-украинки и отца-русского, Алекс эмигрировал в Великобританию в 19 лет. 99. Он самоучка, сертифицированный специалист Microsoft. Ему нравится изучать системы управления контентом и помогать разработчикам веб-сайтов максимально использовать их.

Быстрый и простой способ использования Font Awesome в Photoshop

Итак, что такое Font Awesome? Я понятия не имел, когда впервые увидел этот термин, поэтому я провел небольшое исследование, и о! Это очень круто. Бьюсь об заклад, вы все используете смайлики, когда пишете сообщения на своем телефоне, верно? Font Awesome похож на эмодзи в Photoshop.

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

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

Итак, та-да! Я создал пакет пользовательских форм Font Awesome для использования непосредственно с панели инструментов Photoshop Custom Shapes. Хотите попробовать? И да! Это бесплатно!

Вы можете скачать этот файл .csh ниже и загрузить прекрасный шрифт Font Awesome в Photoshop.

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

4 быстрых шага по использованию Font Awesome в Photoshop

Несмотря на то, что Font Awesome — это шрифт, в данном случае вы будете использовать его как фигуру, потому что файл .csh, который вы загружаете отсюда, представляет собой набор значков, которые я преобразовал из Шрифт классный. Поверьте мне, его очень легко использовать и редактировать после загрузки файла в Photoshop.

Примечание: скриншоты взяты из версии Adobe Photoshop CC 2021 для Mac. Windows и другие версии могут выглядеть по-разному.

Шаг 1: Выберите Custom Shape Tool на панели инструментов. Обычно он находится в том же меню, что и инструмент «Прямоугольник».

Шаг 2: Перейдите на панель инструментов в верхней части документа и щелкните параметр пользовательской формы.

Вы должны увидеть значок настроек. Щелкните значок и выберите Import Shapes .

Шаг 3: Найдите файл .csh, который вы только что загрузили на свой компьютер, и нажмите Открыть .

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

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

Цвет по умолчанию — это исходный цвет переднего плана.