Font awesome как использовать в фотошопе
Привет, друзья. Все мы время от времени пользуемся шрифтовыми иконками 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 и любых других сайтов и интерфейсов. А какими плагинами для Фотошоп пользуетесь вы? Напишите, пожалуйста, в комментариях, что вам помогает ускорить процесс разработки макета? 1525761179604 -->
- Как подключить 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 и выставить необходимые параметры. Полученный код вставляем в тег вашего сайта, на тех страницах где вы собираетесь использовать иконки.
Скриншот №1
На скриншоте №1 изображены настройки, которые я использую.
- Выбираем версию, которая нам нужна. Free — бесплатная версия. Pro — платная и имеет дополнительные стили и наборы иконок.
- Начертание шрифта, которое мы будем использовать в своем проекте.
- Что мы будем использовать. Webfont — иконочный шрифт. SVG — иконки в формате .svg
- Сгенерированный код для подключения 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, а именно о том как работать с ним в фотошопе. Ведь мы – армия дизингеров и должны помогать друг-другу. Ну еще и качественно делать свою работу… ну вы поняли.
Для понимания Font Awesome — это иконочный шрифт, который можно использовать с практически любыми элементами веб-страниц(и не только) для повышения наглядности и улучшения дизайна в целом. Все мы знаем что иконочки мы считываем быстрей, чем текст, поэтому владение такими инструментами сделают жизнь как нам, так и пользователям проще. Этот замечательный шрифт разработал человечек с именем Дэйв Ганди, собрав коллекцию иконок, которые удовлетворят даже самые необычные потребности в таких символах.
Когда вы собираете макет какого-нибудь сайтика, помните, что после того как вы его передадите в производство, его нужно будет кому-то сверстать. И этот человек, увидев ваши «жопеги» схватится за голову и будет проклянать вас до конца сдачи проекта(с его стороны).
Чтобы избежать недоразумений и наличия вашей куклы-вуду у кого-то в офисе, да и просто показать свой профессионализм, рекомендую вам установить этот замечательный пакет. Да и чтобы вы не били меня палками за то, что я попусту расхваливаю эту штуку, давайте посмотрим на преимущества и недостатки:
Преимущества Font Awesome
1. Каждая из иконок является векторной и может быть изменена до любого размера без потери качества.
2. Иконка является текстовым символом, а значит вы можете применить к ней любое стилевое свойство, доступное для шрифтов. Это может быть цвет, фон, тень и так далее.
3. Иконки прекрасно функционируют и отображаются во всех браузерах, даже в старом IE8 (удивительно да?)
4. Хорошо сочетаются с кучей фреймворков, например Bootstrap
5. Это не только шрифт, но еще и стилевой файл, в котором обозначены несколько типовых решений, например размеры иконок, поворот, выравнивание. Достаточно подключить стиль и назначить класс для элемента.
6. Можно накладывать иконки друг на друга, анимировать, сочетать меж собой. Всё это расширяет возможности.
7. Вкусный пункт! Шрифт свободен для коммерческого использования. Никто к вам с повесткой не придёт.
Недостатки Font Awesome
1. Символы могут иметь только один цвет, однако, это можно обойти использовав объединение иконок или при помощи эффектов CSS.
2. Библиотека слишком избыточна, собственно, как и большинство других. Если вам нужна лишь дюжина иконок, то придётся подключить несколько сотен.
На втором экране выбираем «Free for Desktop» и сохраняем архив в любое удобное место.
Этот шрифт Font awesome я публикую в рамках будущей статьи (уже готово короткое видео подпишись и поставь лайк на прозрачном фоне), готовлю почву, так сказать. Данный векторный иконочный шрифт font awesome предназначен для использования на сайтах, дабы при их проектировании не перегружать страницы относительно тяжелыми графическими элементами, коими являются смайлики, вставки картинок и прочие элементы.
Стандарты для веб-сайтов ужесточаются, в плане скорости загрузки для увеличения ранжирования в поисковиках, и для пользователей поэтому появление различного рода шрифтов-иконок было неизбежно.
Наибольшую популярность из всех известных иконочных шрифтов получил - шрифт Font Аwesome:
- Во-первых, он имеет огромную библиотеку иконокАwesome более 1500, разбитых по категориям;
- Во-вторых, шрифт awesome можно скачать БЕСПЛАТНО с официального сайта - версию 4 🔗;
- В-третьих, шрифт постоянно обновляется и расширяется. Уже появился font awesome 5 версии 🔗 (на момент написания статьи). Так вы найдете начертания иконок solid, regular, Light и duotone виде 🔗;
- В-четвертых, имеется возможность подключить на сайте используя запросы к родительскому серверу, либо на прямую на вашем ресурсе
- В-пятых, у шрифта иконки awesome есть и стандартное начертание для Виндовс ( TrueType ), соответственно, прочитав статью "Как установить шрифт в Photoshop, Windows 10, Word"🔗 вы без проблем подключите шрифт font awesome к упомянутому софту. Понятно, что это позволит использовать иконки awesome для вставки в различные видеоролики и статьи. Удобно не так-ли?
Поэтому всячески рекомендую этот прекрасный набор иконок awesome. Вы можете его скачать прямо из этого блога.
⚠️ 3 Способа как установить скачанные, новые шрифты в windows 10, Photoshop, Microsoft Office
Если Вам понравилась статья оцените ❤️, напишите Ваши комментарии и поделитесь статьёй.
Whenever I’m commissioned a new project, the first thing I do after listening to my client’s story, is to make sketches on paper. After that is done, I launch Photoshop and make something visual before writing a single line of code.
Prior to knowing that I can use font awesome in Photoshop, the old fashioned technique I use for creating icons was simply to crop images to work as icons and provide the same image quality for all sizes.
Font Awesome is a popular font icon used by developers and it’s a more sophisticated alternative.
You can use Font Awesome in any website by loading the font and CSS files, but you can also integrate it into your Photoshop designs. In this article, I will show you how.
- Go to Font Awesome page and press the Download button.
- Decompress the file.
- Find this folder: /font-awesome-4.7.0/fonts/
- Copy the file FontAwesome.otf to your Fonts folder. The location of this folder depends on your operating system. In Windows 8.1 the folder is located in: C:\Windows\Fonts\
- Open your browser and go to the icons page.
- From the list of available icons select one >>right click >> Copy.
Open Photoshop and start a new file by going to File >> New >> OK.
- Choose the Text tool
- Click on work space >>right click >> Paste.
- Select the text (which at this point is just a square with diagonal lines).
- Navigate to Photoshop’s “control panel” and select Font Awesome to get the icon look.
Congratulation! now you’ve learned how to use font awesome icons in your Photoshop design
Читайте также: