Обтекание текстом в Photoshop

Пример обтекания текстомМеня одно время мучил вопрос, как сделать обтекание текстом (text wrapping) какого-либо объекта в Photoshop,так как при разработке эскизов дизайна для сайтов этой возможности ой как не хватало. Потом решение нашлось (с помощью метода «проб и ошибок» 🙂 ), несмотря на то, что достаточно часто на некоторых форумах упоминается, что это просто невозможно сделать.

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

В общем, рецепт прост.

Подготавливаем контур (Patch) нужной формыС помощью инструмента Pen Tool (Pen Tool) или других инструментов нужно нарисовать Patch (контур) требуемой формы (в нашем случае это будет прямоугольник с «дыркой» для картинки). Затем делаем текущим инструментом ввод текста. Наводим курсор на готовый контур (Patch), курсор должен принять бочкообразную форму (Иллюстрация того как должен выглядеть курсор). Когда форма курсора приняла нужный вид, кликаем и пишем желаемый текст.

Финальная стадияГотово! Также автоматически создается дубликат контура (Patch), но уже привязанный к вашему тексту (в палитре Patchs он отображается только тогда, когда будет выделен слой с только что созданным текстом), после чего изначальный Patch уже никак не участвует в процессе и его можно удалить (на рисунке у него имя «Work Patch»).

Пример обтекания текстом

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

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

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

Автор

  • Suok

    Ух ты! интересно 🙂 сама бы никогда не додумалась!!! Большое спасибо! счас попробую… потом расскажу как получилось :))

  • Slam

    Отличная статья. Очень полезна для начинающих web-дизайнеров, да и вообще для людей работающих с графикой. Спасибо. 😀

  • Feel

    Искал. Нашел. Коротко и ясно. Спасибо.

  • Kolia

    Просто ОГРОМНОЕ Спасибо!!!
    Целый день искал как этого добиться…

  • дом

    Так в эскизах обязательно реальный текст вводить?) Можно было просто два блока текста использовать =))

  • Fatuk

    🙂 спасибо большое

  • исторический

    В 7-й версии Photoshope не работает.

  • pypenonry

    добавил в ридер

  • Спасибо огромное! Очень помог этот урок. Часто приходится делать макеты в Фотошопе и подобная промлема очень затрудняла жизнь.

  • Julec

    Спасибо большое! все получилось)) коротко и ясно))

  • Благодарю! Очень важная мелочь!

  • О, прикольно! Я удивляюсь почему еще разработчики фотошопа не добавили эту функцию в свою программу, ведь очень нужная вещь.

  • наконец нашел решение 🙂 когда-то читал о подбном, но подробности забыл. спасибо!

  • Очень ценный совет, спасибо

  • Руслан

    Большое спасибо за совет! Очень помогло! :)))

  • iGoRRR

    !!!спс огромное!!! оказывается всё гениальное просто + интернету тоже спс, но автору ОГРОМНОЕ спс!!!

  • Олег

    Ещё можно ткнуть инструментом Текст прямо на контур и строка будет извиваться вдоль этого контура!

    Спасибо за урок!

  • Андрей

    Спасибо, очень нужная вещь

  • Flar

    спасибо большое, ценно!

  • Anatoly

    Благодарствую 🙂

  • Elizaveta Vetluzhskikh

    Спасибо! Спасли от предстоящих мучений с программой. Вы делаете мир легче!

  • Karina Kaluga

    Спасибо, чувак. Помог)