Пятница, 29 Март 2024
 

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




шрифт 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 (вставка скопированного объекта)

Fontawesome в Photoshop

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

fontAwesome+Photoshop

Похожие темы

Комментарии к статьям