Как сделать изгиб текста
Деформация текста в фотошопе
Продолжаем знакомиться с инструментом Текст, о котором я подробно расписывал в одноименной статье. Поскольку инструмент достаточно гибкий и сложный, я решил не смешивать все в одну кучу и выделил в отдельную статью информацию о том, как можно деформировать текст (процесс напоминает работу команды Трансформация).
Деформация текста — это одна из ключевых особенностей инструмента. Одно дело делать его жирным, курсивом, менять размер и др элементарные задачи, другое — возможность сделать художественное размещение надписи на вашей работе.
Итак, выберите инструмент Текст, напишите какую-нибудь надпись и выберите на панели параметров Создать деформированный текст:
Появится диалоговое, в котором вы можете выбрать предустановленные стили искривления текста, а также настройки изгиба и искажения. Параметры Горизонтальный/Вертикальный влияют на размещения текста относительно плоскости.
Параметр Изгиб/Степень влияет на силу искривления.
Искажение по горизонтали и вертикали дополнительно меняют вашу надпись в горизонтальной и вертикальной плоскости соответственно.
Пример искажения в форме Волны:
Или вот избитая тема из Звездных Войн:
Все это легко и, можно сказать, детские игрушки. Вот по настоящему индивидуальный подход размещения надписей вам обеспечит Контур!
Текст по Контуру
Фотошоп — это программа, которая должна реализовать абсолютно все дизайнерские идеи, в том числе сложные и хитроумные. В нашем случае исключения не будет. Рассмотрим ключевой способ художественной деформации текста.
У меня пока нет урока по контурам (но я планирую это исправить), поэтому если испытываете сложность с таким инструментом, можно посмотреть на других сайтах, информации полно.
Итак, чтобы написать текст вдоль контура — выберите Перо и создайте произвольную кривую, которая будет будущей надписью.
Затем выберите инструмент Текст и наведите указатель на кривую. Дождитесь, когда указатель изменит свой внешний вид (вертикальная палочка с наклонной полоской внизу), затем нажмите левой кнопкой мыши на начало кривой.
Чтобы изменить место положение надписи, выберите инструмент Выделение контура (черная стрелочка) зажмите кнопкой и тащите в необходимое место.
Нажмите клавишу Enter, чтобы применить все настройки. После этого сам контур исчезнет, останется только текст.
В фотошопе есть предустановленные фигуры, которые вы также можете использовать как контур. Не забываете о том, что мы уже прошли палитру Символы, поэтому можем, например, поднимать текст повыше. Используйте эти знания в своих творениях.
Как изогнуть текст в PowerPoint
Создание привлекательной презентации PowerPoint может быть трудным, но вы можете сделать скучную презентацию более привлекательной, добавив некоторые базовые визуальные улучшения. Хороший способ сделать это — изогнуть любой текст на слайдах. Эта инструкция расскажет, как написать изогнутый текст в презентации PowerPoint.
Эти инструкции были написаны с учётом последних версий PowerPoint, но они должны работать и для более старых версий PowerPoint. Вы также можете изогнуть текст в Word, следуя аналогичному процессу.
Для начала вам нужно открыть презентацию PowerPoint и выбрать слайд. Затем вам нужно будет вставить новое текстовое поле или текстовый объект WordArt, в зависимости от стиля текста, который вы хотите создать.
Для этого нажмите вкладку «Вставка» на панели ленты.
Отсюда нажмите кнопку «Текстовое поле» или «WordArt» в разделе «Текст» на панели.
Если вы решите вставить WordArt, выберите стиль, который вы хотите использовать, из выпадающего меню, которое появится ниже.
Чтобы вставить текстовое поле, щёлкните соответствующую позицию на слайде, чтобы вставить его. Если вы решите использовать WordArt, автоматически появится окно в центре слайда с текстом-заполнителем, который вы затем сможете удалить или отредактировать.
Как только ваш WordArt или текстовое поле будет на месте, введите текст, который вы хотите видеть изогнутым. Чтобы начать изгибать текст, убедитесь, что выбран объект WordArt или текстовое поле, а затем выберите вкладку «Формат» на панели ленты. Отсюда, нажмите кнопку «Текстовые эффекты».
Это загрузит раскрывающееся меню, отображающее различные текстовые эффекты, которые поддерживает PowerPoint. Перейдите на вкладку «Преобразователь», чтобы просмотреть параметры изгиба текста.
Вы можете настроить свой текст так, чтобы он следовал пути, или применить предустановленный эффект «деформации», который изменит внешний вид вашего текста. Наведите указатель мыши на любой из предустановленных параметров, чтобы увидеть предварительный просмотр эффекта, применённого к вашему тексту.
Если вы довольны одним из вариантов, нажмите на него, чтобы применить его к текстовому полю или объекту WordArt.
После выбора эффект будет применён автоматически.
Затем вы можете отредактировать изогнутый путь вашего текста с помощью мыши или трекпада, чтобы переместить небольшую жёлтую точку, которая появляется, когда выбрано текстовое поле или объект WordArt.
Если вы недовольны эффектом, вы можете вернуть его к нормальному состоянию, щёлкнув «Формат» → «Текстовые эффекты» → «Преобразовать» и выбрав вверху опцию «Без преобразования».
Как только опция «Без преобразования» будет выбрана, любые эффекты, применённые к вашему текстовому полю или объекту WordArt, будут удалены, возвращая его в нормальное состояние.
Искривляем Текст в Photoshop
В этом коротком уроке я покажу вам, как быстро и профессионально искривить текст в Photoshop. Вначале я научу вас основному методу, а затем покажу, как использовать его для более сложных текстовых эффектов Photoshop.
Вы можете присоединиться к нам на нашем канале Envato Tuts+ в YouTube:
1. Искривляем Текст в Photoshop
Шаг 1
Выберите инструменте Перо (Pen Tool (P).
Шаг 2
Убедитесь, чтобы режим данного инструмента был установлен на Контур (Path).
Шаг 3
Щёлкните в любом месте холста, чтобы создать стартовую точку кривой.
Шаг 4
Найдите место, где вы хотите, чтобы кривая закончилась, а затем щёлкните и удерживайте кнопку мыши.
Шаг 5
Потяните точку, чтобы преобразовать данную линию в кривую.
Шаг 6
Если вас устраивает результат, далее, удерживая клавишу (Ctrl), щёлкните в любом месте холста, чтобы отменить выделение контура.
Шаг 7
Теперь выберите инструмент Текст (Type Tool (T).
Шаг 8
Наведите курсор на начало кривой. Когда курсор поменяется, просто щёлкните по холсту, чтобы преобразовать кривую с текстовую область.
Шаг 9
Теперь вы можете написать текст так же, как обычно.
Шаг 10
Когда выв завершите, удерживая клавишу (Ctrl), нажмите клавишу (Enter), чтобы отменить выделение текста.
2. Искривляем Текст Вдоль Фигуры в Photoshop
Шаг 1
Не смотря на то, что это была очень простая кривая. Photoshop способен на гораздо большее! Например, вам не нужно останавливаться после создания второй точки с помощью инструмента «Перо». Просто добавьте ещё несколько точек, чтобы создать более сложную кривую.
Вы можете узнать больше об инструменте Перо (Pen Tool) здесь:
Шаг 2
Это позволяет создавать текст вдоль линии эллипсов, многоугольников и даже пользовательских фигур, таких как сердце или стрелка.
Кривая делает текст более интересным, хотя он может выглядеть ещё более привлекательным, если вы добавите к нему некоторые текстовые эффекты.
Текстовые Эффекты Акварели
Например, вы можете использовать стили слоя, чтобы полностью изменить внешний вид текста одним щелчком мыши. Этот набор может превратить текст в произведение искусства, придав ему акварельный вид.
Текстовые Эффекты с Текстурой Позолоты
Этот набор может заставить ваш текст выглядеть так, как будто он создан из золота. Есть много разных эффектов на выбор. Просто используйте тёмный фон, чтобы текст засиял!
Текстовые Эффекты с Текстурой Ткани
Этот набор немного сложнее. Если вы комбинируете два стиля одновременно, то вы можете достичь ещё более продвинутых и реалистичных результатов. С помощью этого набора стилей слоя, вы можете легко превратить текст в джинсовую, кожаную и другие ткани.
Текстовые Эффекты с Текстурой Мела
Этот набор использует похожий двухслойный подход для создания реалистичного эффекта классной доски. Текст выглядит особенно убедительно, если вы используете правильный фон для этого. Есть много стилей на выбор, в зависимости от того, что вам нужно.
Отличная Работа, Мы Завершили Урок!
Теперь вы знаете, как искривить текст в Photoshop, как простым, так и более сложным способом! Если вы хотите узнать больше о создании различных текстовых эффектов в Photoshop, то вы можете попробовать один из следующих уроков:
Как сделать текст по кругу с помощью CSS или jQuery
Иногда на веб-страницу нужно добавить элемент с изогнутым или размещенным по кругу текстом. Например, логотип сайта. Но трансформация текста с помощью HTML и CSS может оказаться задачей не из легких. Благодаря возможностям CSS3 и jQuery это все-таки возможно.
Для реализации вам потребуется:
Как сделать текст по кругу с помощью CSS3 (сложный способ)
Рисунок, приведенный ниже, позволит понять, как реализовывать поставленную задачу с помощью CSS3.
Для позиционирования текста добавим в ширину и высоту. Получается следующее:
Для каждого класса внутри всех элементов span воспользуемся селектором >. С его помощью мы выделяем все дочерние элементы созданного span- класса w вместе с порядковыми номерами. Далее используем селектор nth-of-type(n + 0), которым помечаем все элементы-потомки.
После этого добавим базовые стили для элемента span :
В демоверсии присутствует три примера (простая дуга, обратная дуга и авторадиус). Они помогут лучше разобраться с исходным кодом. В этом разделе показано, как менять положение текста и выравнивать его внутри круга.
Как сделать надпись по кругу с помощью jQuery (простой способ)
Простая дуга
Создадим дугу с плавно изгибающимся текстом. Вот HTML код:
Обратите внимание, что ID равно simple_arc. Затем мы подключаем библиотеку jQuery и размещаем код, приведенный ниже, перед закрывающим тегом body. Значение радиуса равно 135. Благодаря чему текст изгибается вверх.
Обратная дуга
Попробуем изогнуть текст в обратную сторону. Вот HTML-код.
Авторадиус
Теперь давайте изогнем текст в круг. Для этого посмотрите на HTML-код, приведенный ниже:
Если не задавать значение радиуса, то CircleType.js самостоятельно подберет оптимальный радиус для выравнивания текста по кругу.
Изгиб текста, его вращение и выравнивание по кругу проще выполнять с помощью jQuery. С другой стороны, CSS дает полный контроль над положением текста на веб-странице. Надеемся, что данное руководство оказалось полезным!
Как написать текст по кругу в Фотошопе
Круговой текст
Сделать надпись по кругу в Фотошопе довольно несложно, причем достичь желаемого результата можно двумя способами: деформировать уже готовый текст или написать его по готовому контуру. Оба эти подхода имеют свои достоинства и недостатки.
Способ 1: Деформация
Начнем с деформации готового текста.
Круговой текст готов.
Достоинства:
Можно расположить две надписи одинаковой длины друг под другом, описав полный круг. Нижняя надпись при этом будет ориентирована так же, как и верхняя (не вверх головой).
Недостатки:
Налицо явное искажение текста.
Способ 2: Контур
Переходим к следующему способу – написание текста по готовому контуру. Контур… Где его взять? Можно самостоятельно нарисовать инструментом «Перо», либо воспользоваться теми, которые уже есть в программе. Самый простой вариант — воспользоваться одним из инструментов группы «Фигуры». Все создаваемые ими объекты состоят из контуров.
Настройки на скриншоте. Цвет заливки значения не имеет, главное, чтобы наша фигура не сливалась с фоном.
Когда же курсор станет вот таким,
инструмент «Текст» определит контур фигуры. Кликаем левой кнопкой мыши и видим, что курсор «прилип» к контуру и замигал. Можем писать.
Текст готов. С фигурой можете делать что захотите, удалите, оформите как центральную часть логотипа или печати и т.д.
Достоинства:
Текст не искажается, все символы выглядят так же, как и при обычном написании.
Недостатки:
Текст пишется только снаружи контура. Нижняя часть надписи оказывается перевернутой. Если так и задумано, то все в порядке, но если необходимо сделать текст по кругу в Фотошопе из двух частей, придется немного повозиться.
Готово. Фигура больше не нужна.
Информация к размышлению: таким образом текстом можно обойти любой контур.
На этом урок по написанию текста по кругу в Фотошопе окончен.