що вийде в результаті

У цьому уроці ми створимо набір іконок у Фотошопі. Набір іконок повинен мати однаковий фон та одну тему. Для тренування ми створимо іконки із сонцем, сніжинкою та значком RSS. Давайте почнемо.

1. Підготовка робочої області

Крок 1

Почнемо зі створення нового документа розміром 350 px на 350 px. Клацніть у білому квадраті біля налаштування Вміст фону(Background Contents), щоб вибрати новий колір фону робочої області.

Крок 2

У діалоговому вікні Палітра кольорів(Color Picker) виберіть сірий колір фону робочої області (#e0e0e2).

Крок 3

Завжди добре, коли робота із самого початку структурована. Створіть групу шарів та назвіть її "Сонце"(Sun). Там будуть розміщуватись всі шари, що стосуються створення іконки з сонцем.

2. Створюємо основу

Крок 1

За допомогою інструменту "Прямокутник із закругленими кутами"(Rounded Rectangle Tool) Намалюйте прямокутник з розмірами 83 x 64 px і встановіть радіус 8 px. Для більш точного результату скористайтесь панеллю Властивості(Properties). Тут ви можете просто ввести точні розміри.

Крок 2

Утримуйте Shift, а потім намалюйте ще один прямокутник із закругленими кутами. Ця нова фігура буде додана до попередньої. Встановіть її розмір 36 x 36 px з радіусом 3 px.

Крок 3

Натисніть сполучення ctrl+T для трансформування фігури, а потім натисніть та перетягніть за межі обмежувальної рамки, щоб повернути її на 45°.

Крок 4

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

Крок 5

Натисніть клавішу Enter, щоб зберегти результат. Ви можете виявити, що у діалоговому вікні підтвердження вас інформують про те, що фігура перетвориться на звичайний контур. Це означає, що ви не зможете редагувати її за допомогою панелі «Властивості». Просто натисніть «Так»(Yes).

Крок 6

Розташуйте фігуру як показано на малюнку нижче.

Ось результат у масштабі 100%.

Крок 7

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

Крок 8

Встановіть колір #57adf8.

Крок 9

Двічі клацніть на фігурі, а потім застосуйте Обведення(Stroke) та Накладання градієнта(Gradient Overlay), використовуючи наступні налаштування.

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

Крок 10

Зменште рівень заливки(Fill) – до 11%. Вміст шару буде прозорим і залишиться незмінним.

Ось результат.

3. Тінь

Крок 1

Створіть новий шарпід основою. Активуйте інструмент "Пензлик"(Brush Tool) (B) і потім під іконкою намалюйте тінь.

Крок 2

Як і раніше використовуючи інструмент "Пензлик"(Brush Tool) (В), додайте сильнішу тінь прямо під кінчиком іконки.

Крок 3

Затиснувши CTRL, натисніть на меншу за розміром піктограму, щоб виділити меншу фігуру. Створіть новий шар і використовуйте білий колір поверх виділення. Переконайтеся, що ви використовуєте м'яку кисть Жорсткість(Hardness) – 0%.

Крок 4

Коли закінчите, зніміть виділення (Ctrl+D) та зменшіть непрозорість(Opacity) шару.

Крок 5

Створіть новий шар та знову виділіть меншу основу іконки. Заповніть виділення градієнтом від білого до чорного. Змініть режим накладання(Blend Mode) шару на Перекриття(Overlay), а потім зменшіть його непрозорість(Opacity).

Крок 6

Додайте ще один шар. Створіть велике еліптичне виділення у нижній частині іконки, а потім натисніть Ctrl на шарі основи, щоб перетнути його. Заповніть виділення градієнтом від білого до чорного. Змініть режим змішування(Blend Mode) шару на "Екран" Screen та зменшіть його непрозорість(Opacity).

Такий результат у масштабі 100%.

Крок 7

Затиснувши Ctrl, клацніть по мініатюрі шару-основи. Створіть зверху новий шар, а потім виберіть Редагування > Обведення(Edit> Stroke). Встановіть світло-блакитний колір та ширину(Width) 1 px.

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

Крок 8

Додайте маску до шару з обведенням. Залийте її чорним, щоб сховати всі контури. Проведіть деякі ділянки лінії білим кольором, щоб показати їх. Таким чином, тепер у нас виділено край іконки.

На зображенні нижче можна детально розглянути виділення краю.

Крок 9

Додати коригуючий шар Колірний баланс (Color Balance) вище ікон. Ми використовуємо його, щоб змінити колір тла.

Щоб спростити керування шарами, давайте змінимо ім'я шару на Зміна кольору(Color changer).

Крок 10

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

Крок 11

Дублюйте всі шари основи іконки та поміняйте параметри в коригуючому шарі Колірний баланс(Color Balance) окремо.

4. Додаємо значки до іконок

Крок 1

Для нашої першої іконки ми додамо сонце значок. Почніть із малювання жовтого кола.

Крок 2

Застосуйте стилі шару Внутрішня тінь(Inner Shadow) та Внутрішнє світіння(Inner Glow), використовуючи такі настройки. Використовуйте колір #7b6708 та встановіть обидва режими накладання Розмноження(Multiply).

Крок 3

Використовуйте світліший жовтий колір у центрі сонця.

Крок 4

Додайте еліпс яскравішого жовтого кольору у верхню частину сонця.

Крок 5

Намалюйте тонку, світлу фігуру на верхньому правому боці сонця, щоб виділити її. Видаліть зайве за допомогою м'якої гумки, щоб надати природності.

Крок 6

Крок 7

Виділіть обидві векторні фігуриі потім продублюйте їх: Ctrl+C, а потім Ctrl+V. Поверніть нові фігури на 45°.

Крок 8

Продовжуйте дублювати та обертати фігури, доки у нас не буде достатньо променів.

Крок 9

Застосуйте Внутрішню тінь(Inner Shadow) з кольором #b48f0b та Зовнішнє світіння(Outer Glow) із кольором #f9dc7e.

Крок 10

Сховати сонце, натиснувши значок ока біля шару. Намалюйте більше жовтих трикутників, як показано нижче.

Додайте кругову фігуру до центру трикутників та встановіть режим траєкторії Відняти передню фігуру(Subtract).

Ми закінчили, тому повернемо спалах і форми сонця.

Крок 12

Щоб отримати реалістичне сонце, нам потрібно намалювати розмиту жовту круглу форму за сонцем. Ви можете зробити це вручну, використовуючи м'яку кисть, або спочатку намалюйте коло, а потім пом'якшіть його, використовуючи фільтр Розмиття по гаусу(Gaussian Blur).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рис.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. Панель Абзац

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

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

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

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

Дуже часто ставлять питання про те, як же перебуваючи у Windows (чи то в Ворді, Блокноті або Photoshop - не важливо) вставляти спец. символи?

Для непосвячених поясню про всяк випадок: спец. символи – це різноманітні значки та символи, на кшталт копірайту (©), або ступеня (5²) або дробу (¼). Все це спец. символи.

Так ось. Допустимо, Вам треба поставити дріб ¼. Як це зробити? А це робиться дуже просто!

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

І так, для початку переглянемо: а які взагалі існують символи і спецсимволи. І тому відкриваємо таблицю символів.

Знаходиться вона тут: Пуск -> Усі програми -> Стандартні -> Службові -> Таблиця символів

Перед вами відкривається наступне вікно: У якому ви можете бачити різні символи. Виберіть символ, який вас цікавить і в правому нижньому кутку (у нас позначений синім кружечком) з'явиться поєднання клавіш для вставки цього символу.

На даний момент вибрано символ копірайту © і відповідно щоб його вставити треба зробити наступне: Натиснути клавішу Alt і тримаючи її на цифровій клавіатурі (та що зі стрілками, дивись картинку нижче) набрати число 0169, потім відпустити alt. От і все!

Пам'ятайте, що не стандартні шрифти можуть не підтримувати спецсимволи. Також у вікні перегляду спецсимволів можна переглянути які Шрифти — які символи підтримують. Для цього просто виберіть, який ви хочете шрифт у верхній частині вікна!

Для більшості користувачів програми Word це питання вирішується дуже просто. В текстовому редакторі Word натиснути "Вставка" -> "Символ". Випаде вікно, в якому можна вибрати символи. При натисканні кнопки «Вставити» вони автоматично з'являтимуться переважно текстового редактора.

Я тільки-но купив шрифт, і тепер вони кажуть, що мені потрібно піти в 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

Всім відомо, що стандартна комп'ютерна клавіатурамає трохи більше
сотні клавіш, а значить, вона не може відображати всі ті символи, які
використовуються людиною у повсякденному житті. Але не всі знають, що
крім введення символів, які ми бачимо на
У своїй клавіатурі, у Windows існує можливість використовувати також інші символи. Наприклад:

Але
незважаючи на те, що цих (і багатьох інших) символів немає на
клавіатурі, ми дуже просто можемо використовувати їх при наборі своїх
текстів. Давайте спробуємо це зробити.
Допустимо найпростіший варіант - ми набираємо текст у Блокноті ( Запуск - Всі програми - Стандартні - Блокнот) і нам треба вставити в текст символ копірайту:

Для того, щоб це зробити нам необхідно відкрити так звану Таблиця символів, яка існує в операційній системі Windows. Зробити це дуже просто: Запуск - Всі програми - Стандартні - Службові - Таблиця символів.
Перед нами відкриється таблиця символів Unicode, у якій треба знайти необхідний нам символ:

Після цього треба клацнути цей символ лівою кнопкою миші, потім натиснути кнопку Вибратита кнопку Копіювати:

Тим самим ми скопіюємо вибраний символ у буфер обміну.

Після цього потрібний нам символ з'явиться у тексті:

Як бачите, нічого складно у цьому немає! Це найпростіший і зрозуміліший (на
мій погляд) спосіб, хоча можна дещо змінити порядок дій та
вводити символи, не відкриваючи Таблиця символів. Для цього треба просто знати певну комбінацію кнопок.
Справа в тому, що в Windows дуже багатьом символам надано унікальний код, введення якого здійснюється за допомогою клавіші Alt.
Наприклад, щоб ввести той самий символ копірайту, необхідно натиснути комбінацію клавіш Alt+0169, тобто. натиснути (і утримувати) клавішу Altпісля чого натиснути клавіші з цифрами 0 , 1 , 6 і 9 .
Майте на увазі, що при натиснутій клавіші Alt
цифри на основному полі клавіатури можуть блокуватися, і тому, для
введення цифр можна використовувати додаткове поле клавіатури
(попередньо ввімкнувши його клавішею NumLock

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

Якщо деякі символи ви будете використовувати постійно, то я
рекомендую створити собі пам'ятку (таблицю з описом часто
використовуваних кодів) та роздрукувати її на принтері. Наприклад, таку:

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

Або, наприклад, можна відобразити лише зручне для нас кодування Windows «кирилиця»:

Ну і насамкінець хочеться відзначити, що деякі програми мають вбудовану можливість для вставки спеціальних символів.
Наприклад, у меню програми Wordможна вибрати Вставити - Символ(Фото з Word 2010):

Це дуже прискорює роботу за наборі тексту, т.к. не потрібно вдаватися до таблиці символів Windows.