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

Я тільки-но купив шрифт, і тепер вони кажуть, що мені потрібно піти в Illustrator і перейти до моїх "гліфів", щоб отримати "додаткові" шрифти.... ну, у мене немає Illustrator ... і при цьому я не знаю з гліфами знаходяться?

Хто знає, якщо у PS6 є гліфи? куплено шрифт був: https://creativemarket.com/L_Worthington/12122-Charcuterie-Cursive

b1nary.atr0phy

CC має гліф-панель, CS6 не має.

Відповіді

Скотт

"Гліф" - це просто термін для конкретного символу у файлі шрифту.

Photoshop, на відміну від інших програм Adobe, не має панелі Glyph. Хоча він може відображати та використовувати гліфи, якщо вони присутні, немає способу отримати доступ до певного гліфу з Photoshop.

І в Illustrator, і в InDesign є панелі гліфів, які дозволяють бачити та використовувати всі гліфи, які є у шрифті.

Отже, коротка відповідь. Фотошоп не має доступу до гліфів.

Є також багато безкоштовних / умовно-безкоштовних програм, які можуть відображати гліфи у файлі шрифту.Щоб використовувати певний гліф у Photoshop, вам потрібно знайти програму, будь-яку програму, яка дозволяє вам бачити гліфи. Потім просто скопіюйте / вставте гліф із цієї програми у Photoshop.

Можливо, у вас вже є програма, здатна відображати гліфи. Наприклад, ви можете використовувати Insert > Symbol в MicrosoftWord,щоб переглянути гліфи в шрифті. Слово просто називає їх "символами". Потім скопіюйте/вставте потрібний файлу Photoshop.

Phlume

Як уже говорилося, у Photoshop немає меню "Гліфи".
Однак є системні інструменти ОС, які можна використовувати для вилучення цих символів з файлу шрифту.

У Windows є утиліта "Карта символів", яку можна використовувати для копіювання прямо з цієї програми в текстове поле Photoshop. Щоб отримати доступ до карти персонажа, ви йдете на...
Пуск> Всі програми> Стандартні> Системні інструменти:

netpraxis

Якщо ви використовуєте Mac, найпростіший спосіб знайти потрібний вам гліф - це використовувати програму Font Book(входить в стандартне встановлення OSX)

Виберіть " Перегляд»> «Репертуар»у меню програми та виберіть шрифт, щоб відобразити всі увімкнені символи.

Натисніть, щоб вибрати будь-який з гліфів, що відображаються, і скопіювати / вставити назад у Photoshop

Основи роботи з інструментами групи Текст у Photoshop: панель керування, налаштування, функції та можливості.

Знаходиться група на панелі інструментів під кнопкою із літерою «Т». Відкриваємо її будь-яким способом:

• натисканням на чорний нижній правий куточок іконки;
• натисканням на іконку правою кнопкою миші

Можна активувати текст натисканням клавіші Т (російська Е) на клавіатурі. Причому неважливо, яка розкладка клавіатури в Наразі. При затиснутій клавіші Shift натискання клавіші «Т» кілька разів поперемінно активуватиме всі чотири інструменти цієї групи.

Рис.1. Група інструментів Текст

Тут все інтуїтивно зрозуміло.

1. Горизонтальний – для створення звичного нам запису у горизонтальному положенні.
2. Вертикальний - має напис зверху вниз.
3. і 4. Створюють швидкі маски з горизонтальним та вертикальним виділенням.

Найчастіше використовується горизонтальний напрямок.

Панель керування групи інструментів

При активному інструменті верхня панель керування набуває такого вигляду:

Рис.2. Верхня панель керування інструментами Текст

У версії Photoshop CS6 введено меню Шрифт, що містить кілька варіантів налаштувань. Про це буде в іншій статті. Тепер розглянемо налаштування верхній панеліуправління.

Увага! Усі налаштування верхньої панелі інструментів Текст у фотошопі краще задавати до набору напису. Але можна буде пізніше внести зміни, попередньо виділивши текст або його частину, яку потрібно змінити.

• Над цифрою 1 рис.2 – збереження параметрів. Дуже зручна функція, щоб зберегти встановлені налаштування(Назва шрифту, його розміру і т.д.), якщо до них періодично доводиться повертатися або перед раструванням текстового шару.

Натискаємо на маленьку стрілку, щоб відкрити вікно. Вибираємо «Новий набір параметрів для інструментів. Відкривається друге віконце, де можна задати назву параметру. Натискаємо ОК. Редактор запам'ятовує налаштування.

Рис.3. Збереження параметрів тексту у Фотошоп

У списку з'являється новий рядок. Для наочності на попередньому кроці була введена назва "Приклад нового збереження".

Рис.4. Збережені параметри

Тепер щоб виставити на панелі всі значення, які були збережені, потрібно натиснути на цей рядок.

Щоб видалити рядок, натискаємо на нього правою кнопкою миші та вибираємо видалення.

• Над цифрою 2 рис.2 - зміна орієнтації тексту. Натискання кнопки з літерою Т і стрілками — напрямок напису змінюється з горизонтального на вертикальний і назад. Не забувайте, що на панелі шарів активним має бути цей текстовий шар.
• Над цифрою 3 рис.2 - гарнітура шрифту. Натискання кнопки зі стрілкою відкриває весь список наявних на комп'ютері шрифтів. Можна вибрати зі списку потрібний або ввести його у вікно вручну, потім натиснути Enter.
• Над цифрою 4 рис.2 - зображення шрифту. Клавіша зі стрілкою відкриває список стилів, які підтримує вибраний шрифт. Якщо кнопка неактивна, вибраний шрифт підтримує лише один запропонований стиль.
• Над кнопкою 5 рис.2 - розмір шрифтувін же Кегль. Випадаючий список пропонує варіанти від 6 до 72 пікс. Будь-яке значення можна ввести у вікно вручну, потім натиснути Enter. Достатньо ввести лише цифри, а букви «пт» редактор поставить автоматично.

Підбирати розмір можна так: підвести курсор ліворуч від віконця, коли він набуде вигляду пальця зі стрілочками, затиснути лівою мишкою і перетягнути вправо для збільшення розміру або вліво для зменшення. У вікні цифрове значення змінюватиметься. Щойно відпустіть мишку, розмір тексту зміниться.

• Над цифрою 6 рис.2 - зображення шрифту. Натискання цієї кнопки відкриває список стилів, які підтримує обраний шрифт: курсив, жирний, напівжирний… Не всі шрифти підтримують повний списокстилів, тому там може бути різна кількість варіантів. Якщо кнопка не активна, вибраний шрифт підтримує лише один запропонований стиль.
• Над цифрою 7 рис.2 - вирівнювання текступо одній із сторін або по центру. Працюють кнопки так само, як у Документ Word. Установки знаходяться на панелі Абзац. Про це читайте нижче.
• Над цифрою 8 рис.2 - вибір кольору. У вікні показано колір, який буде застосовано до тексту. Змінити його можна натиснувши на це віконце і у палітрі, що відкрилася, вибрати будь-який інший. Якщо текст уже введено, його попередньо треба виділити.
• Над цифрою 9 рис.2 – деформування тексту. Натискаємо на цю кнопку, потім відкриваємо стилі та перед нами різні варіанти деформації. Поекспериментуйте.

Рис.5. Деформування тексту

• Над цифрою 10 рис.2 – відкриває/закриває панелі Символ, Абзац. Про це докладніше.

Панелі Символ, Абзац

Відкриваються панелі Символ та Абзац у Фотошоп кнопкою на верхній панелі керування або правою панеллю. Якщо їх не виявилося на правій панелі, вмикаємо по меню Вікно – вибрати Символ або Абзац. На правій панелі з'являються іконки. Якщо вони вибрані обидві, з'являться дві іконки однієї групи, але при відкритті будь-якої з них у вікні будуть дві вкладки для зручного перемикання між цими панелями.

Увага! Панель Символ, що працює з інструментами групи Текст, має пріоритет над панеллю Абзац.

Рис.6. Панелі Символ, Абзац

Панель Символ

Деякі з налаштувань цієї вкладки дублюють функції верхньої панелі керування і про них вже йшлося. Не повторюватимемо. Значення в них будуть виставлені ті самі, які ви задали у верхній панелі – шрифт, його розмір тощо.

Інші позначені малюнку 6 вище:

1. Міжрядковий інтервал. Визначає інтервал між рядками.
2. Кернінг для виправлення відстані між двома символами. Наприклад, з усього тексту лише два символи потрібно зблизити або віддалити один від одного. Ставимо між ними курсор, відкриваємо список і вибираємо потрібний варіант, або вводимо його у віконце вручну.
3. Міжсимвольний інтервал для встановлення відстані між текстовими символами.
4. Масштаб по вертикалі для збільшення/зменшення висоти знаків визначається у відсотках. Вводиться число у віконце вручну. Знак % можна не ставити, Фотошоп поставить його автоматично, як тільки ви натиснете Enter.
5. Масштаб по горизонталі розтягує/стискає рядок. Як і попередній параметр вводиться у відсотках.
6. Зміщення базової лінії. Зручна функція при введенні математичних формул та інших позначень з надіндексом та підіндексом. Вона дозволяє підняти/опустити частину рядка чи слова. Попередньо цю частину слід виділити. Вводиться значення у віконце вручну. Аналогічні можливості дає і наступний рядок – псевдопараметри.
7. Псевдопараметри. Налаштування шрифту в цьому рядку видно наочно жирний шрифт, курсив, текст великими і т.д.
8. Лігатури, тобто символи, що виходять злиттям кількох літер чи знаків, тобто об'єднанням їх у один знак. Використовується вкрай рідко. Активними будуть лише ті, які підтримують вибраний шрифт.
9. Відкриває список мов для перевірки орфографії.

Панель Абзац

Налаштування параметрів абзаців, таких як відступ, перенесення тощо.

Рис.7. Панель Абзац

У першому рядку три перші кнопки дублюються з верхньої панелі керування. Про них уже йшлося. Інші кнопки, швидше за все, будуть неактивні. Три наступні кнопки цього рядка призначені для вирівнювання нижнього рядка тексту, а остання вирівнювання по всій ширині.

У другому блоці три віконця, де можна задати в пікселях відступи від правого або лівого країв та відступ першого рядка.

У третьому блоці зазначаються відступи перед або після абзацу

У наступному блоці вмикається/вимикається автоматичне розміщення перенесення рядка.

04.07.2016 27.01.2018

У цьому уроці ви дізнаєтесь, як створити плоскі флет іконки соціальних мереж.

Те, що ви створюватимете:

Створювати плоскі іконки ми почнемо з фону, потім додамо ефекти іконкам, щоб надати їм оригінальність, далі намалюємо довгі тіні. Для повторення уроку вам знадобиться Photoshop CS3 або пізніша версія.

Ресурси:

• Шрифт 1 - http://fontawesome.io/cheatsheet/
• Шрифт 2 - http://fontawesome.io/

Крок 1

Створіть новий файл (Ctrl + N)розміром 500 × 400 пікселів.

Створіть нову групу (CTRL+G)та назвіть її "Фон".

Крок 2

Заповніть тло кольором # e7e9eaза допомогою інструменту Заливка (Bucket Tool).

Крок 3

Щоб додати більше ефектів на задній план, ми додамо градієнт. Натисніть на іконку Коригуючий шар (Adjustment Layer)та виберіть Градієнт (Gradient), використовуйте такі настройки:

Режим накладання шару М'яке світло (Soft Light) | Непрозорість: 25%

Крок 4

Створіть нову групу та назвіть її «symbols».

Крок 5

Перш ніж розпочати роботу, нам потрібно налаштувати меню Лінійки і Сітки (Rulers and Grids). Перейдіть до меню Вид Лінійки (View- Rulers) і Вид-Показати-Сітки (View— Show— Grids) . Ось мої налаштування для Лінійок та Сіток(їх можна відкрити, перейшовши в Редагування-Налаштування (Edit-Preference):

Щоб створити Напрямну лініюпотрібно просто клацнути і перетягнути її з лінійки. Для створення вертикальної напрямної перетягуйте з вертикальної лінійки і навпаки. Ось як я розділив полотно (кожен значок дорівнює 50 × 50 пікселівта відстань між кожним значком 25 пікселів):

Крок 6

У цьому уроці ми працюємо за допомогою шрифту Awesome, ви можете додати іконки, що настроюються для вашого сайту. Як правило, це робиться шляхом розміщення CSS шрифту на ваш сайт, але так як ми працюємо з Photoshop, нам потрібно скопіювати кожен значок, який ви хочете використовувати зі шпаргалки. Зайдіть на сторінку, виберіть значок, який ви бажаєте намалювати. Я використав іконки для наступних (соціальні мережі) сайтів: Twitter; facebook; Tumblr; Google+;Instagram; YouTube; Twitch; Dropbox; Deviantart; Pinterest; Skype; Feed.

Крок 7

Після того, як ви знайшли значок, який хотіли б використовувати, скопіюйте його ( Виділіть її потім клацніть правою кнопкою миші-Копіювати)

Потім поверніться до Photoshop і виберіть інструмент Текст (TextTool)на панелі інструментів. Змініть налаштування шрифту, як показано на малюнку:

Тепер вставте значок, який ви скопіювали. ( Клацніть правою кнопкою миші-Вставити)

Крок 8

Повторіть попередній крок, доки не вставте всі піктограми, які ви бажаєте використати.

Крок 9

Створіть нову групу і перейменуйте її в icon bg, помістіть групу нижче групи symbols.

Крок 10

Створіть новий шарі помістіть його до групи, створеної на попередньому кроці. Я перейменував шар в icon bg.

Крок 11

Використовуючи інструмент Прямокутник із заокругленими кутами (RectangularCircle Shape Tool)(розташований на панелі інструментів нижче інструмента Текст (Text Tool)я створив фон ікон,

Ось усі кольори, які я використав:
Twitter: # 6bd1f4;
Facebook: # 5a93cb;
Tumblr: # 3c6a9c;
Google +:# e44940;
Instagram:# 9bd29d;
Youtube:# f4504c;
Twitch:# a96db6;
Dropbox:# 81d5ed;
Deviantart:# 6e8e61;
Pinterest:# f25f5f;
Skype:# 67d5f4;
Feed:# e9951d;

Ви можете використовувати ці кольори, а можете використовувати кольори на власний розсуд - так робота набуде оригінальності.

Якщо вам не подобається, як виглядають прямокутники із заокругленими краями, ви можете вибрати іншу форму, наприклад, квадрат або коло. Щоб зробити ідеальне коло або квадрат, не забудьте утримувати клавішу SHIFTу момент їх створення.

Крок 12

Якщо ви задоволені результатом на даному етапі, ви можете йти далі, але якщо хочете надати жвавості іконкам, продовжимо покращення. Почнемо зі стилю шару Тінь (Drop Shadow).Відкрийте групу «symbols», виберіть одну з іконок та клацніть піктограму Fx-Тінь ​​(Fx-Drop Shadow)

Крок 13

Повторіть попередній крок з іншими піктограмами. Щоб зробити вашу роботу набагато простіше, клацніть правою кнопкою миші на шарі-Копіювати стиль стоячи (-Copy Layer Style). Потім виберіть решту шарів з іконками, клацніть правою кнопкою миші-Вставити стиль шару (-Paste Layer Style).

Крок 14

Тепер додамо внутрішню тіньна задньому плані кожного значка. Відкриваємо групу icons bg, вибираємо шар з іконкою, натискаємо на значок Fx-Внутрішня тінь (Fx-InnerShadow) . Використовуйте такі параметри:

Крок 15

Створіть новий шар та назвіть його «Gloss Effect». Змініть колір переднього плану на # ffffff; та за допомогою інструмента Прямокутна область (Rectangular Marquee Tool)створіть кілька прямокутників, наполовину менше розміру іконок (приблизно 50×25 пікселів). Зробіть це для всіх ікон.

Потім змініть режим накладання на М'яке світло (Soft Ligh),понизьте непрозорість (Opacity)шару до 20% , а заливку (Fill)до 80% .

Крок 16

Вимкніть видимість шару Gloss Effect. Створіть новий шар та назвіть його «Long Shadow». Цей крок є трохи складнішим у порівнянні з іншими ефектами. Помістіть новий шар нижче шару Gloss Effect.

Крок 17

Візьміть інструмент Полігональне ласо (Polygonal Lasso Tool)і почніть створювати прямокутну тінь, торкаючись ребра іконки тільки з правої нижньої сторони, потім зробіть діагональну лінію, доки вона не досягне нижнього правого краю фону значка, зробіть пряму лінію, доки вона не досягне центру фону, потім з'єднайте лінії. На зображенні ви можете розглянути наочніше, як малювати довгу тінь.

Крок 18

Останній крок! Зменшіть непрозорість (Opacity)шару з тінню до 10% , і заливку (Fill) до 0% .

Тепер натисніть на іконку Fx і виберіть Накладеннякольори (ColorOverlay). Використовуйте такі параметри:

Тепер виберіть Накладенняградієнта (GradientOverlay)та використовуйте ці налаштування:

Фінальні результати:

Ці чотири опції є панелями параметрів і дублюються на панелі символів. Не має значення, на якій панелі Ви зміните ці опції, значення будуть продубльовані:

Метод згладжування (Anti-aliasing) для літер

Згладжування літер (Anti-aliasing) - технологія, що застосовується для покращення візуалізації літер тексту з метою згладити різкі краї та усунути "зубці", що виникають на краях літер.

Ця опція також дубльована на двох панелях:

На даний момент у Photoshop є сім методів згладжування тексту, включаючи режим "без згладжування" (none), на малюнку я навів російськомовний і англомовний інтерфейси Photoshop:

Кожен із методів згладжування справляє власний ефект на літери, і до кожного окремого випадку метод треба підбирати досвідченим шляхом, але це в ідеалі, а на практиці в основному я користуюся методом згладжування, встановленим у Photoshop за замовчуванням - "Різке" (Sharp).

На малюнку я навів приклад двох видів згладжування Photoshop:

Міжрядковий інтервал (інтерліньяж, Leading)

Цей параметр тексту доступний лише з панелі Символ, як відомо з назви, він задає вертикально відстань між рядками. За замовчуванням параметр встановлено на "Авто":

В основному використання Міжрядкового інтервалу Auto дає непогані результати, але ви можете задати Міжрядковий інтервалсамостійно перед введенням тексту або після введення, виділивши весь текст. Ви можете вибрати одне з встановлених значень (від 6 pt до 72 pt), або ввести власне одним із фотошопівських методів введення параметрів, тобто. зміна перетягуванням миші або прокручуванням коліщатка або введенням значення у вікно з клавіатури.

Трекінг (Міжлітерний інтервал, Tracking)

Параметр "Трекінг"також доступний тільки з панелі Character, він керує відстанню між буквами або символами. Він розташований безпосередньо під Міжрядковим інтервалом і за замовчуванням встановлено в 0:

Щоб налаштувати значення міжлітерного інтервалу, Ви можете натиснути на трикутник праворуч від поля введення та вибрати зі списку заданих значень, можна ввести значення з клавіатури, або змінити параметр за допомогою перетягування курсору або обертання коліщатка миші. Введене негативне значення Трекінгубуде зрушувати літери або символи ближче один до одного, тоді як позитивне значення буде відсувати їх один від одного.

Щоб змінити Трекінг, слід виділити потрібну ділянку тексту та ввести значення у полі введення. На прикладі я збільшив трекінг у слові "ділянка", не торкаючись решти тексту:

Кернінг (Kerning)

Цей параметр також доступний лише з панелі Символ і розташований ліворуч Трекінгу. За замовчуванням він встановлений на значення "Метричний" (Metrics), що це означає, що я поясню трохи нижче. Кернінгрегулює проміжок між двома конкретними літерами або символами:

Кернінгчасто плутають з Трекінгомтому, що вони здаються схожими, але вони насправді це зовсім різні речі. В той час як Трекінгзадає діапазон між всіма символами, Кернінгрегулює відстань між двома конкретними символами. Можна провести аналогію, якщо Трекінг- глобальне налаштування, то Кернінг- "Місцева".

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

Як я вже казав, за замовчуванням опція Кернінгвстановлений на "Метричний", що означає, що Photoshop використовує міжлітерну відстань, задану дизайном шрифту. Це часто варіант у більшості випадків дає кращі результати, хоча і залежить від властивостей шрифту, що використовується. Якщо ви натиснете на маленький трикутник праворуч від поля введення значення Кернінга, Ви побачите, що безпосередньо під значенням "Метричний" знаходиться значення "Оптичний" (Optical). При цьому варіанті Photoshop самостійно встановлює міжлітерний інтервал, ґрунтуючись на формі букв. Знову ж таки, залежить від самого шрифту, який із цих двох варіантів, "Метричний" або "Оптичний", дасть найкращий результат.

Змінити значення Кернінгаможна, як і інших опціях, з клавіатури чи мишею.

Масштаб по вертикалі та горизонталі (Vertical та Horizontal Scale)

Ці дві опції розташовані безпосередньо під Кернінгомі Трекінгом.
Їхнє призначення зрозуміле з назви, опції масштабують вибраний текст вертикально або горизонтально.
Обидва параметри за замовчуванням встановлені на 100%

Зміщення базової лінії (Baseline Shift)

Нижче розташована опція Зміщення базової лінії. Базове зсув дозволяє перемістити вибрані ділянки тексту або окремі літери вище або нижче базової лінії шрифту. За замовчуванням значення опції встановлено 0 пунктів. Позитивні значення змістять виділений текст над базовою лінією, а негативні значення опустять виділене нижче базової лінії. Опція не має встановлених значень, так що значення необхідно вводити вручну:

Додаткові текстові опції

Нижче наведені кнопки додаткових опцій.
Зліва направо: псевдонапівжирний, псевдопохилий, всі великі, капітелі (зменшені великі), надіндекс, підіндекс, підкреслені, закреслені. На прикладі я показав дію опцій у тексті, починаючи з другого рядка:

Вибір мови

У лівому нижньому кутку розташована опція "Вибір мови", покликана перевіряти правопис і розміщення переносів, але, на даний момент, для російської, та й, втім, для англійської, вона є малоефективною, тому опцію не використовується.