Как сделать текст по кругу в фотошопе?

Добрый день, посетители Pixelbox.ru!

Фотошоп позволяет писать текст по кругу или по любой изогнутой линии. Этот прием можно использовать при создании поздравительных открыток или логотипов, написании статусов и т.п. Главное, понять принцип, а где и как использовать – пусть уже подскажет ваша фантазия. Например, мне это помогло создать печать в фотошопе.

Сам принцип довольно прост – в первую очередь нужно создать контур, используя инструменты фотошоп из векторной группы, далее при помощи инструмента Текст (Type Tool) написать текст.

Итак, давайте же узнаем, как написать текст по кругу в фотошоп.

Создание фона

Создаем в фотошоп новый документ (Ctrl+ N), у меня с размерами 800х600 пикселей:

image

Заливаем фон каким-либо цветом (Shift+ F5), например, #232323:

image

Создаем векторный круг

Переходим в группу векторных инструментов (горячая клавиша вызова группы – U) и выбираем инструмент Эллипс (Ellipse Tool):

Зажимая клавишуShift для сохранения пропорций, рисуем круг. При помощи инструмента Перемещение (Move Tool) размещаем круг в центре холста. Горячая клавиша вызова инструмента Перемещение (Move Tool) – V.

Пишем текст по кругу

Активируем инструмент Горизонтальный текст (Horizontal Type Tool), горячая клавиша вызова инструмента T:

В верхней панели настройки инструмента Текст (Type Tool) при необходимости выбираем шрифт (1) и цвет (2) текста. Я выбрала цвет #ff7e00:

Подводим курсор к кругу и щелкаем по контуру круга.

Курсор как бы «прилипает» к контуру круга. Теперь пишем текст.

В уже знакомой нам верхней панели настройки инструмента Текст (Type Tool) при желании меняем размер шрифта:

Для того, чтобы подкорректировать размер уже написанного текста, необходимо в панели слоев щелкнуть на текстовом слое на иконке с буквой «Т»:

Можно скрыть слой с эллипсом, если он не является частью композиции. Для этого нужно в панели слоев нажать на иконку «глазика» у слоя с эллипсом:

Текст внутри круга

Текст по кругу можно написать и внутри круга, для этого необходимо активировать инструмент Выделение контура (Path Selection Tool), горячая клавиша вызова инструмента – A:

Подводим курсор мышки к написанному тексту и как бы втягиваем текст внутрь, двигая курсор в направлении к центру круга. Когда текст расположится внутри круга, отпускаем клавишу мышки:

Используя данную технику, вы сможете написать текст по любой фигуре – прямоугольнику, квадрату, многоугольнику или по произвольному контуру.

Вот пример использования приема с написанием текста по кругу:

Теперь вы умеете писать в фотошопе текст по кругу. Успехов в творчестве!

Применение круговых надписей в Фотошопе довольно широко – от создания печатей до оформления различных открыток или буклетов.

Круговой текст

Сделать надпись по кругу в Фотошопе довольно несложно, причем достичь желаемого результата можно двумя способами: деформировать уже готовый текст или написать его по готовому контуру. Оба эти подхода имеют свои достоинства и недостатки.

Способ 1: Деформация

Начнем с деформации готового текста.

На верхней панели находим кнопку функции деформации текста.

В выпадающем списке ищем стиль, который называется «Дугой» и тянем ползунок, указанный на скриншоте, вправо.

Круговой текст готов.

Достоинства:

Можно расположить две надписи одинаковой длины друг под другом, описав полный круг. Нижняя надпись при этом будет ориентирована так же, как и верхняя (не вверх головой).

Читайте также:  Nokia 2018 в россии

Недостатки:

Налицо явное искажение текста.

Способ 2: Контур

Переходим к следующему способу – написание текста по готовому контуру. Контур… Где его взять? Можно самостоятельно нарисовать инструментом «Перо», либо воспользоваться теми, которые уже есть в программе. Самый простой вариант — воспользоваться одним из инструментов группы «Фигуры». Все создаваемые ими объекты состоят из контуров.

    Настройки на скриншоте. Цвет заливки значения не имеет, главное, чтобы наша фигура не сливалась с фоном.

    Далее зажимаем клавишу SHIFT и рисуем круг.

    Затем выбираем инструмент «Текст» (где его искать, вы знаете) и подводим курсор к границе нашего круга. Первоначально курсор имеет такую форму:

    Когда же курсор станет вот таким,

    инструмент «Текст» определит контур фигуры. Кликаем левой кнопкой мыши и видим, что курсор «прилип» к контуру и замигал. Можем писать.

    Текст готов. С фигурой можете делать что захотите, удалите, оформите как центральную часть логотипа или печати и т.д.

    Достоинства:

    Текст не искажается, все символы выглядят так же, как и при обычном написании.

    Недостатки:

    Текст пишется только снаружи контура. Нижняя часть надписи оказывается перевернутой. Если так и задумано, то все в порядке, но если необходимо сделать текст по кругу в Фотошопе из двух частей, придется немного повозиться.

      В списке фигур ищем «Тонкую круглую рамку» (есть в стандартном наборе).

      Рисуем фигуру и берем инструмент «Текст». Выбираем выравнивание по центру.

      Затем, как описано выше, подводим курсор к контуру. Внимание: кликать нужно по внутренней части кольца, если хотите написать текст сверху.

      Затем переходим на слой с фигурой и кликаем курсором по внешней части контура кольца.

      Готово. Фигура больше не нужна.

      Информация к размышлению: таким образом текстом можно обойти любой контур.

      На этом урок по написанию текста по кругу в Фотошопе окончен.

      Отблагодарите автора, поделитесь статьей в социальных сетях.

      Доброго времени суток, уважаемые читатели. Продолжаем постигать основы фотошопа для создания крутых элементов, которые помогут создавать невероятные сайты и получать на этом неплохую прибыль.

      Даже если вы не особенно хотите разбираться в такой вещи как дизайн, знать, на что способен фотошоп и видеть различные приемы нужно. Это поможет вам взглянуть на свой сайт другими глазами и предлагать исполнителям новые приемы.

      Сегодня я расскажу вам о трех способах как написать текст по кругу в фотошопе: два из них будут очень простыми, а еще один — интересный. Уверен, что большинство из вас сейчас даже не подозревает о таком видении задачи. Приступим?

      Простой способ нарисовать текст по кругу для новичков

      Не важно открыли ли вы Photoshop впервые или уже неоднократно выполняли проекты. Все три совета, которые я привожу в данной статье осилить не проблема. Вот только каждый из них подойдет для решения разных задач. Этим нередко пользуются при создании вывесок и логотипов. Чтобы сделать такую картинку у вас уйдет около двух минут.

      Все предельно просто, вот только дополнительных функций здесь поменьше. Сильно «поиграть» с рисунком не получится, но для новичков это идеальный вариант. Чем разнообразнее выбор, тем проще сделать ужасающее изображение. Со временем приходит опыт, особенно если вы не боитесь ставить перед собой сложные задачи, но и познакомиться с элементарными приемами тоже нужно.

      Для начала создайте новый документ. Размеры не так важны, я использовал 800х800. Естественно, вы можете открыть готовую фотографию и работать на ней.

      Возможно, некоторым эта информация покажется лишней, но, поверьте, некоторые читатели дословно пользуются инструкциями, это не плохо, но мне бы хотелось, чтобы максимальное число моих читателей экспериментировали. Не бойтесь этого даже в момент обучения. Ставьте перед собой интересные задачи, если есть какие-то проблемы – пишите в комментариях и я помогу разобраться.

      Читайте также:  Macbook air 13 дюймов середина 2013 г

      Первым делом я сделал заливку слоя, чтобы рисовать было удобнее. Думаю, проблем тут не возникнет. Инструмент заливка и выбираем цвет. Все как в Paint. Далее выбираем текст в панели инструментов справа.

      Если вы хотите создать надпись по кругу используя данный метод, то придется создавать два слоя. Берете фразу, например: «Сделал дело – гуляй смело» и делите ее на две части. Кликаете по фону изображения и вписываете первую часть. Затем нажимаете на готовый слой, снова кликаете по изображению и пишете вторую часть.

      В итоге получается два текстовых слоя.

      Кликаете на один изних, чтобы он подсветился. Затем на кнопку: «Деформировать текст» в верхней панели.

      Перед вами откроется дополнительное меню. Тут много всяких вариантов изменения, в данный момент нам нужна первая опция: «Дугой».

      Теперь передвигайте ползунок функции «Изгиб». Сохраняете изменения.

      Теперь кликаем по второму слою и снова трансформируем текст.

      Выгибаем уже в другую сторону.

      Увеличить текст, изменить цвет, шрифт и все остальное можно нажав на слой, а затем выбрав инструмент: «Текст». Дополнительная панель у вас располагается сверху.

      Более сложный вариант с большим количеством функций

      В фотошопе также можно сделать картинку в стиле печати, чтобы текст располагался четко по кругу. Такие изображения идеально подходят в качестве различных элементов сайтов, чаще всего этот прием используют для Landing Page.

      Итак, создаем новый документ. Мои размеры снова 800х800.

      Заливаю документ вот таким красивым цветом и выбираю инструмент «Эллипс» в панели справа. Если вы его не видите, то скорее всего он «прячется» под прямоугольником или линией. Просто в течение нескольких секунд зажимайте левую кнопку мыши на клавишах с инструментами.

      Очень важный момент. По умолчанию мы рисуем «фигуры», но сейчас вам надо выбрать в панели сверху «Контур».

      Чтобы нарисовать ровный круг удерживайте кнопку Shift.

      Теперь кликаем по инструменту «Текст».

      Поводите курсором рядом с окружностью внутри круга или снаружи. Пока курсор не изменится со стандартного в тот, который показан на рисунке ниже.

      Надеюсь, с этим у вас не возникло проблем. А на окружности появился вот такой курсор. Осталось только напечатать текст.

      Теперь выбираем инструмент «Стрелка по контуру» в панели слева, скорее всего, он там стоит по умолчанию. Захватываем точку на окружности и начинаем двигать по или против часовой стрелки. Это не важно, главное пока не лезьте курсором в центр. Двигайтесь по окружности. Сейчас вы поймете почему.

      Вот так у вас может получиться.

      Если вы переместите курсор внутрь круга, то и текст расположится по внутренней части фигуры.

      Кстати, обратите внимание что курсор тоже изменится и будет выглядеть так, как на рисунке внизу.

      Если вы заедете за предел, то некоторые слова исчезнут.

      Что делать в этом случае?

      Тащите курсором дальше. Видите, я случайно поводил курсором не по внешней части окружности, а через центр. Буквы разместились по внутренней части.

      Вы также можете переместить изображение, потянув его за ту же самую точку. Не обязательно использовать какие-то дополнительные кнопки.

      Ну, а чтобы избавиться от контура, просто кликните по любому слою, кроме текстового. Например, по фону.

      Еще один интересный способ размещения: «Солнце слов».

      Этот способ используется крайне редко, но он идеально подойдет для сайтов или картинок в советском стиле. Снова создаем новый документ.

      Читайте также:  Cve 2018 0886 2012 r2

      Теперь выбираем инструмент «Вертикальный текст».

      Выбираем цвет, которым будем писать.

      Кстати, если у вас есть проблемы с сочетаниями или вы еще новичок и тратите много времени на выбор палитры, то можете воспользоваться сервисом www.colorscheme.ru . Он поможет найти идеальные сочетания для любого проекта. Как-нибудь позже, я напишу про него отдельную статью, он многофункциональный, но основные опции предельно понятны. Можете и сами попробовать разобраться.

      Лучше всего этот метод создания использовать для отдельных слов или коротких фраз. Напишите каждый из них на отдельном слое. Как в первом методе, который я показывал в этой статье. Далее перейдите в раздел «Фильтры» и найдите «Искажение».

      Здесь вам понадобятся «Полярные координаты».

      Прежде чем применить этот фильтр придется растрировать фигуру. То есть перевести ее из текстового слоя в другой. Будьте внимательны. После этого уже будет невозможно поменять шрифт. Тем не менее, соглашаемся.

      Теперь щелкаем по «Прямоугольные в полярные» и жмем на «Ок».

      Так проделываем со всеми текстовыми слоями.

      Если все-таки хочется поменять цвет текста, то зажимаем CTRL на клавиатуре и жмем на эскиз слоя.

      Справа, на панели слоев, находим эту кнопку.

      Появляется вот такое меню. Выбирайте что захотите: градиент, цвет или узор.

      Если вы не умеете создавать градиенты или вам, как и мне, проще использовать готовые, то могу порекомендовать сервис www.photoshop-master.ru . Тут можно все скачать бесплатно.

      Вот здесь, в разделе «Дополнения» есть куча шрифтов, градиентов и так далее. Если не умеете их устанавливать, поищите статью в моем блоге на эту тему.

      Чтобы работать с текстом дальше, нужно объединить слои. Выберите первый, а затем зажмите CTRL и кликните по второму. Чтобы понять, что к чему относится можете щелкать по глазам, рядом с эскизами слоев, они будут исчезать и все прояснится.

      Правая кнопка мыши и «объединить слои».

      Проделайте так со всеми, затем выберите один из новых объединенных слоев и нажмите CTRL+T. Потяните за край нового, только что появившегося прямоугольника и текст увеличится.

      Теперь вы знаете как можно сделать вот такое солнце из слов.

      Если хотите, можете Скачать этот макет, открыть его в фотошопе и посмотреть более подробно.

      Если вам нравится работать в фотошопом, то на том же сайте, что я вам уже рекомендовал в качестве источника дополнительных материалов для вашей программы можете также найти множество курсов ( www.photoshop-master.org ). Они считаются одними из лучших во всем интернете.

      Этот курс идеально подойдет для тех, кто хочет разобраться в фотошопе в целом, но если вы мечтаете о карьере веб-дизайнера, то вам бы я мог посоветовать два варианта получше: « Основы коммерческого веб-дизайна » и « Веб-дизайнер: эффективный сайт от идеи до реализации ».

      Второй вариант подороже, но и преподаватели тут крутейшие. Профессионалы из крупных компаний, настоящие мастера своего дела, которые не только дадут информацию по конкретным инструментам, но и поделятся опытом. Это очень полезно, особенно для новичков. По окончанию вам выдадут диплом, который станет билетом в мир больших заработков.

      Если вам была полезна эта статья, подписывайтесь на рассылку и группу вконтакте , получайте информацию о новых интересных публикациях, которая обязательно поможет в вашей работе.

      Photoshop позволяет легко вращать, переворачивать и масштабировать целые слова или строки текста в документе, но что, если мы хотим преобразовать только одну букву в слове или преобразовать разные буквы по-разному, поворачивая одни, переворачивая другие по горизонтали или вертикали, и масштабировать других? Похоже, что это должно быть довольно простой задачей для команды Photoshop Free Transform, но если вы когда-либо пытались это сделать, вы знаете, что это не так просто, как может показаться. Давайте посмотрим на проблему.

      Вот документ, который я открыл на своем экране — простой дизайн со словом «буквы» перед градиентным фоном:

      Free Transform вращает все слово, потому что он выделил все содержимое текстового слоя.

      Я нажму клавишу Esc на клавиатуре, чтобы отменить вращение. Давайте попробуем перевернуть письмо с ног на голову. Когда Free Transform все еще активен, я щелкну правой кнопкой мыши (Win) / Control-click (Mac) в любом месте внутри документа и выберу Flip Vertical из появившегося меню:

      Выбор Flip Vertical из контекстного меню.

      Опять мы сталкиваемся с той же проблемой. Free Transform влияет на все слово, поэтому все слово переворачивается вверх ногами:

      Это интересно: Photoshop Черно-белые преобразования: руководство по цветным каналам

      Free Transform еще раз влияет на все слово.

      Я нажму клавишу Esc на клавиатуре, чтобы отменить команду Flip Vertical. Давайте попробуем масштабировать письмо. Я буду удерживать клавиши Shift + Alt (Победа) / Shift + Option (Mac), нажимая на одну из угловых ручек Free Transform, и буду тянуться внутрь к центру ограничительной рамки. Удерживая нажатой клавишу Shift при перетаскивании, исходные пропорции текста останутся неизменными при изменении его размера, в то время как клавиша Alt (Win) / Option (Mac) говорит Photoshop масштабировать текст от его центра. И неудивительно, мы сталкиваемся с той же проблемой, что и раньше. Все слово сокращается в целом:

      Без возможности выбрать конкретную букву все слово становится меньше.

      Может показаться, что проблема здесь заключается в свободном преобразовании, поскольку оно не дает нам никакого способа выбора отдельных букв в слове, но настоящая проблема — это сам текст. Или, более конкретно, проблема в том, что слово является текстом. Это может звучать странно. Я имею в виду, конечно, это текст, верно? Тем не менее, это проблема, потому что Photoshop не позволяет нам выделять отдельные буквы в строке текста. По крайней мере, пока текст остается текстом, это подводит нас к решению. Все, что нам нужно сделать, чтобы иметь возможность работать с отдельными буквами, это преобразовать текст во что-то еще!

      Так во что мы можем преобразовать это и все еще иметь это как текст? Ну, мы могли бы преобразовать его в пиксели , растеризовав его, но это не лучшее решение, потому что мы потеряем острые, четкие края букв, особенно когда мы начнем вращать и масштабировать их. Гораздо лучшим решением является преобразование текста в форму . Как фигура, он все равно будет выглядеть как текст, и он будет сохранять свои острые края, независимо от того, что мы с ним делаем. Единственный минус в том, что после того, как мы преобразовали текст в форму, он больше не будет редактироваться, поэтому сначала убедитесь, что все написано правильно.

      Чтобы преобразовать текст в форму, убедитесь, что слой «Тип» выбран на панели «Слои», затем перейдите в меню « Слой» в верхней части экрана, выберите « Тип» , затем выберите « Преобразовать в форму» :

      Перейдите в Слой> Тип> Преобразовать в форму.

      Ничего особенного не произойдет в окне документа, но если мы посмотрим на панель «Слои», то увидим, что слой «Тип» был преобразован в слой «Форма» , что означает, что наш текст был успешно преобразован в форму:

      Слой Type теперь является слоем Shape.

      Теперь, когда текст имеет форму, мы можем легко выбрать любую из отдельных букв. Чтобы выбрать букву, нам нужен инструмент Path Selection (черная стрелка), который вы можете получить с панели инструментов:

      Выберите инструмент выбора пути.

      Затем, с помощью инструмента выбора пути, просто нажмите на букву, которую вы хотите. Я нажму на первую букву «е» в слове, чтобы выбрать его. Вокруг буквы появятся точки привязки (маленькие квадраты), чтобы показать, что теперь они выбраны:

      Нажмите с помощью инструмента выбора пути на букву, которую вы хотите выбрать.

      С выбранной буквой я теперь могу преобразовать ее любым удобным способом. Я нажму Ctrl + T (Победа) / Command + T (Mac) на моей клавиатуре, чтобы быстро вызвать ограничивающий блок и маркеры Free Transform (это быстрее, чем выбрать Free Transform из меню Edit), и на этот раз появляются вокруг всего слова, они появляются вокруг буквы, которую я выбрал:

      Free Transform теперь может работать с отдельными буквами.

      Я поверну букву так же, как и все слово раньше, щелкнув в любом месте за пределами ограничительного поля «Свободное преобразование» и перетащив мышью. Я поверну его против часовой стрелки. Когда вы закончите преобразование письма, нажмите Enter (Win) / Return (Mac), чтобы принять изменение и выйти из Free Transform:

      Вращение буквы против часовой стрелки.

      Я сделаю то же самое со второй буквой «е» в слове. Сначала я выберу его, щелкнув по нему с помощью инструмента выбора пути, затем я нажму Ctrl + T (Win) / Command + T (Mac), чтобы открыть окно Free Transform и обвести его. Чтобы повернуть его, я щелкну за пределами ограничительной рамки и перетащу мышью На этот раз я поверну букву по часовой стрелке. Когда я закончу, я нажму Enter (Win) / Return (Mac) на моей клавиатуре, чтобы принять изменения и выйти из Free Transform:

      Вращая вторую букву «е», на этот раз по часовой стрелке.

      Что делать, если я хочу перевернуть письмо, по горизонтали или по вертикали? С текстом теперь форма, это просто! Опять же, мне просто нужно нажать на букву с помощью инструмента выбора пути, чтобы выбрать его. Я выберу вторую букву «т» в слове. Затем я нажму Ctrl + T (Победа) / Command + T (Mac), чтобы поместить поле Free Transform и обвести его. Чтобы перевернуть букву, я щелкну правой кнопкой мыши (Win) / Control-click (Mac) в любом месте внутри документа и выберу один из двух вариантов (Отразить по горизонтали или Отразить по вертикали) в нижней части появившегося меню. , Я выберу Flip Horizontal :

      Выбор Flip Horizontal из контекстного меню.

      Я нажму Enter (Win) / Return (Mac), чтобы принять изменение, и вот так письмо перевернется:

      Вторая буква «т» теперь является зеркальным отражением буквы перед ней.

      Чтобы масштабировать (изменить размер) букву, снова просто нажмите на нее с помощью инструмента выбора пути, затем нажмите Ctrl + T (Победа) / Command + T (Mac), чтобы вызвать Free Transform. Нажмите на любую из четырех угловых ручек, удерживайте нажатой клавишу « Shift», чтобы сохранить первоначальную форму буквы без изменений, а затем перетащите ручку, чтобы увеличить или уменьшить букву. Удерживая нажатой клавишу «Alt» («Победа») / « Option» (Mac), перетаскивайте ручку, чтобы изменить размер буквы в центре. Здесь я масштабирую букву «р» и делаю ее больше. Нажмите Enter (Win) / Return (Mac), когда вы закончите, чтобы принять изменения:

      Это интересно: Как вращать и выравнивать изображения в Photoshop CC

      Перетащите угловую ручку наружу, чтобы увеличить размер буквы.

      Поскольку буквы представляют собой фигуры, а не пиксели, вы можете продолжать вращать, переворачивать и масштабировать их сколько угодно без потери качества изображения, поэтому не стесняйтесь выбирать буквы и играть с Free Transform, пока вы не будете довольны Результаты. Вы также можете перемещать буквы внутри документа, если вам нужно, просто выбрав их с помощью инструмента «Выбор пути» и перетаскивая их мышью. Бесплатное преобразование не требуется, если все, что вы делаете, это перемещаете письмо.

      Когда вы закончите преобразование и перемещение букв, щелкните любой другой слой на панели «Слои», чтобы отменить выбор формы. Это удалит любые видимые контуры или точки привязки из букв. Поскольку в моем документе только два слоя, я нажму на фоновый слой, чтобы выбрать его:

      Нажмите на другой слой, чтобы скрыть контуры или точки привязки вокруг букв, когда вы закончите.

      Вот как теперь выглядит мое слово после того, как я немного перебрал буквы в Free Transform:

      Конечный результат.

      Куда пойти дальше …

      И там у нас это есть! Ознакомьтесь с нашими разделами « Текстовые эффекты» или « Фотоэффекты» для получения дополнительных уроков по Photoshop!

      Поделитесь в соц.сетях:

      Оцените статью:

      Разобравшись с стандартными возможностями инструмента Horisontal Type Tool в Фотошопе, перейдем к более продвинутым приемам работы. Как пустить надпись по кругу, как заполнить форму текстом, как создать абзац и выбить в нем место под фотографию? Для такой работы нам понадобится тесное содействие с векторными инструментами. Поэтому в дополнение к этой статье советую прочитать:

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

      Как в Фотошопе пустить текст по кругу?

      Как пустить текст по кругу? Специальных инструментов для этого не существует. Очевидно, что нам понадобится некий контур, за который сможет зацепиться векторный текст. Ну и далеко ходить не нужно. «Некий контур» тоже должен быть векторным.

      Выберите векторный примитив — инструмент Ellipse Tool. В настройках инструмента должен быть выбран режим Path. С этим режимом инструмент создает только векторные контуры. Далее рисуем сам круг.

      Теперь выбираем Horisontal Type Tool и подводим мышку к контуру. При наведении на контур курсор сменит иконку.  Теперь кликайте по контуру и пишите текст.

      Написать текст мало. Его ещё нужно настроить. Как это сделать? Инструменты управления текстом, который пустили по векторному пути, интуитивно не очень понятные. Давайте разбираться.

      Мы можем четко определить непонятные знаки, которые появились на контуре. Но сам инструмент Type Tool на них никак не реагирует. Инструмент Move Tool тоже не помощник. Он просто передвигает весь слой целиком.

      Дело в том что мы работаем с векторным контуром. Поэтому нам нужны инструменты управления векторными контурами, а не чем то другим. Подойдут оба инструмента по работе с векторными якорями — Path Direction Tool и Direct Selection Tool.

      Выберите любой из них и попробуйте подвигать надпись на контуре. Теперь мы видим что, что-то происходит. Но что именно?

      При создании текста на путях появляются 2 значка. Крестик и точка. Крестиком считается начало текста, а точкой, конец. Вы можете перемещать крестик и точку как угодно по окружности. Если ваши слова куда то пропали, скорее всего им не хватает места, между крестиком и точкой. Тогда эти элементы нужно расставить пошире друг от друга.

      Если выровнять текст по центру, появится третья точка. Выберите инструмент Type Tool и нажмите Centre Text на панели настроек. Теперь текст находится по центру. А боковые точки регулируют соотношения центра на оси. Это позволит разместить надпись 100% по центру оси, а не на глаз.

      Передвигать рычажки можно как инструментом Path Direction Tool так и Direct Selection Tool. Однако это не все. Кликните мышкой по одному из якорей сдвиньте его внутрь окружности.

      Допустим вы рисуете стикер и вам нужно 2 надписи. Одна по верху, другая по низу. Создаем 2 окружности, одна над другой. На каждой по своя надпись. Сверху и снизу. Именно таким способом я игрался со стикером для автубоса в своем блоге.

      Точно так же текст пускается по неполной кривой. Выберите инструмент Pen Tool и нарисуйте неполную кривую. Нажмите ESC на клавиатуре чтобы оборвать контур. Теперь проделайте все тоже самое с инструментом Type Tool.

      Использование подобных приемов очевидно. Стикеры, эмблемы, значки и прочая утварь. Мне понадобилось несколько минут, чтобы создать подобный значок. Скачать его можно будет в конце статьи.

      Теперь вы знаете как в Фотошопе пустить текст по кругу.

      Как заполнить векторный контур текстом?

      Между вектором и параграфом есть существенная разница. Параграф отделен от векторного контура. В иллюстраторе форму параграфа легко изменить, так как она состоит из тех же векторных кривых, из которых состоит все остальное. В Фотошопе нет. Однако это не значит, что в Фотошопе нельзя заполнить текстом окружность или векторное сердце.

      Я выбрал инструмент Custom Shape Tool. О нем я подробно рассказывал как в текстовом уроке для Custom Shape Tool как и в видео уроке. Из меню Custom Shape Tool я выбираю сердце. В настройках инструмента, конечно, режим Path. Просто наведите его на форму. Когда курсор изменится с обычного на «выпуглый», начинайте писать текст.

      Текст внутри векторной формы подчиняется всем законам параграфа. Его можно выравнять по левой, правой стороне или по центру. Но самое интересное другое. Нарисуйте прямоугольник с режимом Add to path Area (+) Затем переключите режим на Subtract path from Area (-) и вырежте из прямоугольника небольшой кусок.

      Теперь примените Horizontal Type Tool к внутненней части прямоугольника и у вас получится обтекаемый текст. В вырезанную часть можно вставить тумб. Величина обтекания легко контролируется при помощи дополнительного контура с режимом Subtract path from Area (-).

      Необходимость подобного применения текста можно найти везде, как в веб дизайне так и в иллюстрации. Что говорить, даже главная страница моего блога drivealienn.ru устроена именно таким образом. Посты тумба и обтекание текстом. Макет такого блога в Фотошопе делается вышеописанным образом.

      Идеальное выравнивание в меню

      Как добиться идеального расположения надписи для кнопки меню? Конечно на глаз тоже очень прикольно, но неплохо бы задействовать более точные инструменты. Выберите инструмент Rounded Rectangle Tool. На этот раз режим инструмента Shape Layer вместо Path. Я хочу создать элемент графики, а не пустой контур.

      Неплохо, осталось придумать дизайн. Добавим один из готовых стилей для веб графики, который идет с Фотошопом по умолчанию. Если вы не разбираетесь в стилях, прочитайте мою статью Как добавить стиль в Фотошопе. Ну а если нет на это времени вот быстрый экскурс. На панели настроек инструмента Custom Shape Tool выберите вкладку стилей. В ней выберете один из готовых стилей или кликните по маленькой круглой иконке и из появившегося меню выберите Web. Это загрузит готовую коллекцию стилей для веб. Я выбрал простой «стеклянный» веб стиль.

      Осталось только продублировать кнопки для нашего квази меню.

      Но вернемся к тексту. Просто выберите инструмент Horizontal Type Text и кликните по внутренней части кнопки. Это действие фактически продублирует уже созданный контур кнопки для текста. Остается только выровнять текст по центру и настроить нужный размер. О настройках тексты я подробно писал в статье Работа с текстом в Фотошопе.

      Кнопки созданы, текст написан. Но как выровнять их по центру? Дело в том что в Фотошопе нет вертикального выравнивания для текста. Нет его и в Иллюстраторе. Ни Фотошоп, ни Иллюстратор не являются программами верстки. Но не переживайте. Отсутствие вертикального выравнивания не конец жизни. Откройте панель Windows > Characters для работы с текстом. На этой панели измените параметр Set the Baseline Shift. Этот параметр сдвигает текст вверх или вниз относительно его основания. Просто сдвиньте текст вниз ближе к середине и все.

      Контур и текст

      Пожалуй теперь вы знаете все о работе текста вкупе с векторным контуром. Остались детали. При работе с текстом может случиться так, что векторный контур потерялся. Как его найти? Где реально проживает контур и куда он крепится. Панель слоев Layers никак не свидетельсвует о том, что текст с контурами как-то отличается от обычного текста. Слои выглядят совершенно одинакого.

      Кликните по надписи с контуром и посмотрите на панель Path. На панели Path появится спец контур, который будет виден столько, сколько будет выделен слой с текстом. Фактически векторный контур крепится к Тексту и у вас нет никакой возможности его открепить. Я очень долго эксперементировал с текстом и не нашел ни одного способа сделать это. Если я ошибаюсь, напишите об этом в комментариях.

      Пожалуй теперь, вместе с уроком Инструмент Type Tool в Фотошопе, вы знаете 50% всего, что можно знать о работе с текстом. В следующих уроках я подробно разберу панель Characters и приемы работы с параграфами и панелью Paragraph.

      Скачать фаил

      Чтобы скачать фаил кликните по кнопке Like для Facebook. После этого появится ссылка на PSD фаил с стилекром, контурами и текстом, пущенным по кругу, обтекаемыми параграфами и прочим. Все можно посмотреть и покрутить.

      Скачать фаил

      P.S. Пока я готовлю новые интересные статьи по фотошопу можно посетить отличный блог по дизайну и графике Наташи Клевер, где можно найти ещё больше интересных уроки фотошоп. А так же обзоры по веб дизайну, свежие макеты для вордпреса и многое другое.

      ГлавнаяКак сделать..Как написать текст по контуру в фотошопе

      Можно выполнять различные действия с текстом для изменения их внешнего вида, например деформировать,преобразовывать, добавлять и тому подобное. Сегодня мы рассмотрим Как сделать текст вдоль и внутри контура. Давайте научимся творить маленький хаос в последовательности букв.) Кому нибудь это пригодиться…

      image

      Для тех кто не в теме

      В программе Adobe Photoshop имеется инструмент «Горизонтальный/Вертикальный Текст», с помощью него мы пишем текст. Соответственно «Горизонтальный текст» пишется по горизонту (в линию), а вертикальный по вертикали (в столбик). Как же быть, если нужно сделать текст обтекающий фигуру? Об одном из методов как это сделать, я расскажу ниже.

      Контур — в общем случае, замкнутая линия, очертание некоторой геометрической фигуры, предмета.

      Начнем.

      Что бы, не создавать кашу в вашей голове я пропущу теорию, и покажу на практике основные моменты как это сделать.

      Что будем использовать?

      • Инструмент «Перо»
      • Инструмент «Горизонтальный текст»
      • Панель «Символ» (для более гибкой настройки текста)
      • Произвольную фигуру, предмет (в моем случае изображение)

      Создайте новый слой Файл → Создать (или нажмите сочетания клавиш Ctrl + N), я использовал следующие настройки:

      Ширина: 740px;

      Высота: 300px;

      Разрешение: 72 px;

      Содержимое фона: Белый;

      И закрасил слой таким цветом: #e5684b

      Шаг 1:  

      Поместите вашу фигуру или изображение на новый слой, для дальнейшей тренировки на нем. Я хочу написать текст над Лепреконом который будет его обтекать. Берем инструмент «Перо» (P) и рисуем контур в нужном нам месте. После чего у меня получилось, примерно так

      image

      Шаг 2: 

      Берем инструмент «Горизонтальный текст» (T), наводим на контур и один раз кликаем мышкой, что бы написать текст. Если текст получился ужасный, буквы не разборчивы, такое чувство, что прилипли друг к другу?. Откройте Окно → Символ, на данной панели нам необходимо увеличить расстояние между букв, в моем случае это около 200 (поле с расстоянием между букв, находится после поля Межстрочного интервала). И вот буквы стали более разборчивы и хорошо читаемы, в итоге получилось следующее

      image

      Извините, что так криво начертил контур, в последствии чего буквы получились немного смяты. Поэтому когда будете чертить контур, обязательно постарайтесь сделать переходы у углов более круглей, чтобы текст выглядел аккуратно. И так, как создать текст вдоль контура мы успешно разобрались. Идем дальше…

      Текст внутри контура

      В предыдущем методе, мы узнали как сделать текст вдоль контура. И так, что бы текст был внутри контура, нам нужна произвольная фигура или произвольный замкнутый контур.

      Если контур будет незамкнут, соответственно текст получится вдоль контура

      Шаг 1:

      Для наглядности я использовал инструмент «Эллипс», и у меня получился круглый, замкнутый контур. Теперь берем инструмент «Горизонтальный текст» (T) кликаем в цент замкнутого круга, и пишем текст. Как вы видите при написании текста, он остается внутри контура, не выходя за его рамки, в итоге получилось так 

      image

      Чему вы научились?

      Вы научились писать текст вдоль и внутри контура, а так же делать с помощью этого обтекание фигуры или предмета. Эти знания можно использовать совершенно в различных целях,  например создать анимацию, где текст будет плавно выезжать в форме змейки. 

      Краткий видеоурок

      image

      Не показывает онлайн? Тогда скачайте видеоурок по прямой ссылке, всего (33 mb).

      В заключении…

      Цель данной статьи заключается в том, чтобы донести до пользователя о не стандартном для всех методе, использования инструмента «Текст». После прочтения статьи к вашим навыкам прибавилось +1. Как распоряжаться этими знаниями решаете только вы и ваша фантазия. Пишите в комментарии, кто — как использовал данный метод даже выкладывайте скриншоты, нам будет очень интересно посмотреть!

      Оцените статью
      Рейтинг автора
      4,8
      Материал подготовил
      Максим Коновалов
      Наш эксперт
      Написано статей
      127
      А как считаете Вы?
      Напишите в комментариях, что вы думаете – согласны
      ли со статьей или есть что добавить?
      Добавить комментарий