Як зробити обведення тексту в фотошопі

Як швидко і дуже красиво обвести текст в програмі Photoshop

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

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

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

Як робити просту обведення тексту

відкриваємо фотошоп. Не забувайте, що у вас є можливість працювати в онлайн версії цієї програми ( https: // pixlr.com ). Вона не простіше, але деякі речі в ній можна виконати швидше, особливо якщо Photoshop на вашому комп’ютері пригальмовує. Однак, добре, коли у вас є своя власна програма.

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

Отже, я буду працювати в своїй версії, чого і вам бажаю. Відкриваємо і створюємо нову картинку.

Розмір не так важливий. Нехай буде 600х400. люблю прямокутники.

Зараз фон прозорий. Мені не дуже подобається ця шашка, тому спершу я заллю малюнок іншим кольором.

До речі, якщо ви користуєтеся великим спектром, то завжди можете повернути чорний і білий, клікнувши на мініатюру під використовуваними квітами. На скріншоті виділено прямокутником.

Ну, а для того щоб зробити рівну обведення, для початку треба щось написати. Вибираємо інструмент «Текст» в панелі справа. Його я помітив стрілкою.

Отже, ми написали текст.

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

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

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

Подивіться, ось так виглядає текстовий шар.

Натисніть правою кнопкою миші, щоб у вас з’явилося додаткове меню. Тут нам потрібні «Параметри накладання».

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

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

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

І знову додаткове меню. Вибирайте, поки не знайдете кращий.

Зараз колір слабо помітний. Тому збільште розмір обведення. Робити це краще за все не повзунком, а за допомогою клавіатури. Так воно акуратніше виходить.

Тепер виділення більш помітно.

Текст можна обвести по зовнішньому краю, внутрішнього або з центру. Експериментуйте, поки не вийде ідеально.

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

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

Трохи нижче ви знайдете непрозорість. Вона робить контур більш помітним або менш.

Ну а тепер давайте перейдемо до «фішечки».

Контур, тінь, а також градиентная і узорная обведення тексту

Ви можете обвести текст не тільки одним кольором, але і використовувати градієнти або візерунки. Просто змініть тип, як показано на моєму скріншоті.

Ось так може виглядати ваш малюнок.

Коли закінчите, витягніть приховану частину панелі, щоб зберегти зміни.

Також ви можете спробувати тиснення — контур.

Або додати в текст тінь, щоб букви були опуклими. Я не буду приділяти цьому багато уваги. Тут все зрозуміло і просто. Просто тикайте в різні штуки і пробуйте. Все, до чого ви доходите самі — запам’ятовується набагато краще.

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

Купа безкоштовних додатків можна знайти на сайті https: // photoshop-master.ru .

Тут є кисті, рамки, красиві шрифти, шаблони і текстури. Те, що нам зараз і потрібно.

Виберіть той візерунок, який вам подобається. До речі, зверніть увагу. Вам потрібен не тільки той розділ, який «візерунки». Підійде і метал, і квіткові, і асорті. Скачайте те, що сподобалося. Кнопка під описом.

Тепер повертаємося в фотошоп. Нагадаю шлях. Текстовий шар, права кнопка миші — «Режим накладання», «Виконати обведення», тип обведення: «Візерунок». Знайдіть ось таку гайку, як на скріншоті.

Тепер потрібно завантажити візерунки.

Знайдіть файл у папці, в яку у вас завантажуються викачані з інтернету документи. Якщо ви не бачите або не можете знайти, то спробуйте розпакувати те, що тільки що завантажили. Витягніть документи з архіву win rar.

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

Готово. Візерунків стало більше! Можете застосовувати до тексту.

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

Далі ви можете пройти [urlspan]курс для початківців веб-дизайнерів[/ Urlspan]. Перші три дні вам дозволяється дивитися відео з цього сайту безкоштовно. Відверто кажучи, якщо ви посидючіші, то цього часу вистачить, щоб захопити основу і багато чого зрозуміти. Найголовніше — чи хочете ви зв’язуватися з цим.

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

Кожному, як то кажуть, своє.

Однак мені, як керівнику проектів веб-студії необхідно розбиратися в дизайні і контролювати роботу своїх співробітників. Тому я не зміг пройти повз іншого курсу, на Нетологія — Веб-дизайнер: ефективний сайт від ідеї до реалізації .

Чекаю не дочекаюся коли зможу почути лекції співвласника компанії Red Keds. Компанія дуже крута. Божевільна команда, відома не менш, ніж студія Артемія Лебедєва.

Мені пощастило вже кілька разів бувати на виступах професіоналів, в тому числі з команди Red Keds, і це завжди свято. Ці історії просто неможливо забути! Наприклад, один з дизайнерів розповідав про те, як він за три хвилини придумав логотип. Це була точка.

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

Ну, щось я зовсім забув про час. Успіхів вам у ваших починаннях і до нових зустрічей. Зовсім скоро вас чекають нові статті про фотошопі. НЕ пропустіть.

Виконання обведення тексту в Фотошопі

У деяких випадках самий звичайний текст — це саме те, що потрібно. Але найчастіше його потрібно видозмінити, щоб зробити більш привабливим і помітним або, щоб привести до загального стилю оформлення, наприклад, в буклетах, банерах та т.д. Одним з найбільш поширених способів «прикраси» тексту є додавання обведення навколо нього. Давайте подивимося, як це можна зробити в Фотошопі.

• Робимо обведення тексту

• Спосіб 1: використання стандартного інструменту для виконання обведення
• Спосіб 2: ручне створення обведення

висновок

Робимо обведення тексту

Як приклад будемо виконувати дії щодо тексту / символів нижче:

Спосіб 1: використання стандартного інструменту для виконання обведення

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

1. Створивши текстовий шар за допомогою інструменту «Текст», двічі клацаємо по ньому в палітрі. Кликати, при цьому, потрібно по вільній області рядка шару, а не за його ім’ям або мініатюрі.
2. У вікні з настройками стилю шару натискаємо по пункту «Виконати обведення» (Після цього повинна з’явитися галочка навпроти нього). Тут можна вказати:
3. розмір обведення в пікс.;
4. становище (з центру, зовні або всередині);

режим накладення;

ступінь непрозорості у відсотках;

тип обведення (колір, градієнт або візерунок).

Примітка: щоб в реальному часі відстежувати всі внесені коригування, слід включити опцію «Перегляд» (Повинна бути активована автоматично).

Коли все налаштовано, залишається тільки натиснути кнопку OK, щоб отримати результат на полотні.

Спосіб 2: ручне створення обведення

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

1. утримуючи клавішу Ctrl на клавіатурі клацаємо по мініатюрі текстового шару.
2. На полотні навколо тексту має з’явитися виділення.
3. Розкриваємо вміст меню «Виділення», вибираємо пункт «Модифікація», потім — «Розширити».
4. У віконці вказуємо значення в пікселях, на яке потрібно розширити виділення, і тиснемо OK. У нашому випадку 15 пікс. буде достатньо.

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

На бічній панелі інструментів вибираємо будь-який з інструментів для виділення, наприклад, «Прямокутну область».

У з’явилися параметрах інструменту тиснемо кнопку «Виділення та маска» (В деяких версіях програми — «Уточнення краю»).

задаємо рівень «Згладжування». Чим більше розмір тексту, тим більше потрібно вказати значення. У нашому випадку зупинимося на 50. По готовності клацаємо OK.

Виділення на полотні злегка видозмінилася — його краю стали «м’якше».

повертаємося в палітру, де створюємо новий шар.

В меню «Редагування» вибираємо команду «Виконати заливку» (Або просто тиснемо комбінацію Shift + F5).

У віконці вказуємо значення «Непрозорість», рівне 100%. Потім для параметра «Зміст» вибираємо «Колір», після чого відкриється палітра, де вказуємо будь-який відтінок. Коли все готово, по черзі натискаємо OK в обох вікнах.

На полотні бачимо наступне.

Тиснемо гарячі клавіші Ctrl + D, щоб зняти виділення.

В палітрі розміщуємо створений шар під текстовим, потім двічі клацаємо по ньому (але не за назвою або мініатюрі), щоб відкрити настройки стилю.

Кількома по розділу «Накладення градієнта», розкриваємо список можливих варіантів (натисканням стрілки вниз поруч з поточним варіантом) і вибираємо той, який подобається.

Далі налаштовуємо градієнт відповідно до бачення того, якою має вийти підсумкова обведення. Щоб контролювати зміни на полотні в режимі реального часу, не забуваємо про галочку навпроти опції «Перегляд». У підсумку, ми зупинилися на стандартному градієнті від основного до фонового кольорів (їх потрібно задати заздалегідь) з лінійним стилем, звичайним режимом накладення, кутом 90 градусів і інверсій.При бажанні обраний градієнт можна детально налаштувати. Відповідний редактор відкривається клацанням по поточному варіанту.

Отримуємо ось такий результат на полотні.

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

Варіант 1

Перемикаємося на шар з текстом і міняємо його колір у властивостях (меню «Вікно» — пункт «Властивості»). Для цього клацаємо по поточному варіанту і в відкрилася палітрі вибираємо той, який сподобається. Або ж колір можна задати відразу при створенні текстового шару.

Ось, що виходить в результаті:

Варіант 2

Переключившись на текстовий шар для параметра «Заливка» виставляємо нульове значення. Потім подвійним клацанням відкриваємо налаштування стилю шару.

Тут пробуємо різні ефекти, наприклад:

1. Вибираємо і налаштовуємо «Внутрішнє світіння».Отримуємо наступне (з урахуванням виставлених нами параметрів):
2. Або зупиняємося на варіанті «Накладення візерунка«.І отримуємо такий результат.

Примітка: продемонстровані варіанти оформлення обведення не єдині. Більш того, при виконанні кроку 16 інструкції (і подальших залежних від нього дій), можна вибрати не накладення градієнта, а інший ефект.

висновок

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

Як зробити обведення тексту в фотошопі

Графічний редактор Adobe Photoshop має достатній вибір шрифтів. Але не завжди стандартні шрифти задовольняють бажання. Іноді хочеться додати тексту на зображенні оригінальності. У цій статті розглянемо, як зробити обведення тексту в Фотошопі і тим самим надати вашим роботам індивідуальність.

автоматичний спосіб

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

1. Перш за все на панелі інструментів виберемо інструмент «Горизонтальний текст». Поставимо курсор в тому місці на знімку, де хочемо написати текст, і один раз кликнемо мишкою. Щоб перенести напис в інше місце, використовуйте інструмент «Переміщення».
2. Напишемо необхідний текст. Наприклад, «Photoshop».

1. Далі переходимо в палітру «Шари» і двічі натискаємо по шару з текстом.

Зверніть увагу! Кількома по вільному місцю в рядку шару, а не по іконці.

1. У вікні налаштувань вибираємо «Виконати обведення» і ставимо «галочку».

1. Справа в вікні бачимо різні параметри налаштування (1):

• розмір;
• становище;
• режим накладення;
• непрозорість;
• колір.

важливо! Не забудьте включити «Перегляд», щоб спостерігати, як змінюється текст в реальному часі (2).

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

Ось, що вийшло у мене.

ручний спосіб

Тепер розглянемо, як зробити обведення тексту в Фотошопі другим способом. Безсумнівно, даний спосіб більш копітка, але саме він допоможе домогтися оригінального результату.

Спершу скасуємо всі попередні перетворення тексту, натиснувши комбінацію клавіш Ctrl + Z.

1. Утримуючи кнопку Ctrl на клавіатурі, натискаємо один раз лівою кнопкою миші по іконці текстового шару. Навколо тексту з’являється виділення у вигляді пунктирною лінії.

1. На верхній панелі фоторедактора Photoshop вибираємо: «Виділення» — «Модифікація» — «Розширити».

1. У вікні вибираємо кількість пікселів, на яке потрібно розширити виділення. Приймемо 10 пікселів. Натискаємо «ОК». Область обведення збільшилася в розмірах.

1. Зліва на панелі інструментів вибираємо «Прямокутна область». На панелі настройки інструменту знаходимо рядок «Виділення і маска» і натискаємо по ній лівою кнопкою миші.

1. Відкривається вікно налаштувань. Збільшимо згладжування і натискаємо «ОК». За рахунок даних маніпуляцій обведення навколо тексту стає більш плавною.
2. Створюємо новий шар вище текстового шару, натиснувши Ctrl + J.
3. У меню «Редагування», яке знаходиться на верхній панелі Фотошоп, вибираємо «Виконати заливку». Або натискаємо набір гарячих клавіш: Shift + F5.
4. У вікні налаштувань в графі «Зміст» вибираємо «Колір» (в палітрі знаходимо необхідний колір обведення). Непрозорість ставимо 100% і натискаємо «ОК».

1. На створеному раніше шарі з’явився залитий контур. Знімаємо виділення — Ctrl + D
2. Шар з обведенням перемещаем нижче текстового шару і двічі натискаємо лівою кнопкою миші по рядку з залитим контуром.
3. Відкривається вже відоме нам раніше вікно настройки. І тут вже дайте волю Вашої фантазії. Пограйте з настройками.

Мені сподобалася настройка «Накладення градієнта». Обираю райдужний варіант і натискаю «ОК». Щоб зняти виділення, натискаю Ctrl + D.

Ось, що вийшло в результаті.

висновок

Тепер Ви знаєте, як зробити обведення тексту в Фотошопі не тільки швидким і простим способом, але і більш довгим і копіткою. вибирати Вам! Експериментуйте, міняйте параметри налаштування тексту і обведення, і Ви обов’язково знайдете той самий неповторний стиль.