Как добавить контур к тексту в фотошопе: Как сделать контур в Фотошопе: вокруг текста, объекта

Содержание

Как сделать контур в Фотошопе: вокруг текста, объекта

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

Создаем контур

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

Создание контура в Фотошопе

Примечание: если мы имеем дело не с текстовым, а обычным слоем с каким-либо объектом (в т.ч. в виде надписи), он должен быть на прозрачном слое. В противном случае, сначала необходимо вырезать объект, и только потом приступить к созданию контура вокруг него.

Метод 1: растрируем текст

Этот метод предполагает растрирование текстового слоя с последующим удалением лишних частей.

  1. В Палитре слоев правой кнопкой мыши щелкаем по слою с текстом (но не по его миниатюре) и в открывшемся контекстном меню выбираем команду “Растрировать текст”.Растрирование текста в Фотошопе
  2. Зажав клавишу Ctrl на клавиатуре щелкаем по видоизмененной миниатюре слоя.Выделение слоя в Фотошопе
  3. В итоге, вокруг текста на холсте должно повиться выделение.Выделенный текст в Фотошопе
  4. Раскрываем содержимое меню “Выделение” и выбираем в нем пункт “Модификация”, затем – “Сжать”.Сжатие выделения в Photoshop
  5. В появившемся окошке указываем размер сжатия в пикселях, после чего жмем OK. Значение задаем исходя из того, контур какой толщины требуется сделать – чем выше число, тем толще получится контур. В нашем случае укажем
    2 пикс
    .Сжатие выделенной области в Фотошопе
  6. Выделение на холсте изменилось. Удаляем ненужную часть текста, нажав клавишу Del на клавиатуре.Сжатое выделение в Photoshop
  7. Получаем такой результат. Остается только нажать сочетание Ctrl+D, чтобы убрать выделение.Выделенный контур текста в Photoshop
  8. На этом работа по созданию контура завершена.Контур текста в Photoshop

Растрировать текст можно и на новом слое. Вот как это делается:

  1. Выбрав текстовый слой в Палитре выделяем его содержимое полностью, нажав комбинацию клавиш Ctrl+A.Выбор текстового слоя в Фотошопе
  2. В меню “Редактирование” выбираем команду “Копировать” (или жмем сочетание Ctrl+C).Копирование в Фотошопе
  3. Снова идем в это же меню и кликаем по пункту “Вставить” (или жмем Ctrl+V).Вставка в Фотошопе
  4. В итоге получаем новый слой с текстом в виде изображения на прозрачном фоне. Дальнейшие действия аналогичны описанным выше (с шага 2).Результат вставки скопированного текстового слоя в Фотошопе

Метод 2: создаем конутр на новом слое

На этот раз мы создадим контур на отдельном, специально созданном для этого слое.

  1. Аналогично первому методу, зажав клавишу Ctrl на клавиатуре щелкаем по миниатюре слоя с текстом, чтобы выделить его.Выделение слоя в Photoshop
  2. Далее выполняем сжатие через меню “Выделение” – “Модификация” – “Сжать”. В качестве примера мы указали 3 пикс.Сжатие выделения в Фотошопе
  3. В Палитре
    создаем новый слой.Создание нового слоя в Photoshop
  4. Жмем комбинацию клавиш Shift+F5, чтобы вызвать окно “Заполнить”. Для параметра “Содержание” выбираем вариант “Цвет”. После этого появится еще одно окошко, в котором задаем цвет, идентичный фону созданного слоя (т.е. белый в нашем случае). Теперь можно закрыть оба окна нажатием кнопок OK.Заполнение выделенной области в Фотошопе
  5. Все готово, остается только убрать выделение, нажав комбинацию Ctrl+D.Контур текста в PhotoshopПримечание: в данном случае контур состоит из сочетания двух слоев: текстового и созданного. Чтобы объединить их в один (создать отпечаток), жмем горячие клавиши
    Ctrl+Shift+Alt+E
    .Объединение всех слоев в один в Фотошопе

Метод 3: настраиваем параметры стиля слоя

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

  1. Дважды щелкаем левой кнопкой мыши по текстовому слою (не по имени или миниатюре, а именно по свободной области).Переход к настройкам стиля слоя в Photoshop
  2. В открывшихся “Стилях слоя” переключаемся в раздел “Выполнить обводку” (ставим напротив нее галочку). После этого в правой части окна указываем размер в пикселях, выбираем положение (снаружи, внутри или из центра) и задаем цвет контура. Остальные настройки можно оставить без изменений. По готовности жмем
    OK
    .Настройка обводки в параметрах стиля слоя в PhotoshopПримечание: если напротив пункта “Просмотр” установить галочку, можно в реальном времени отслеживать вносимые изменения до их подтверждения.
  3. Видим на холсте следующий результат.Обводка текста в Фотошопе
  4. Остается только убрать заливку слоя, указав значение – 0%.Управление заливкой слоя в Фотошопе
  5. Все готово, мы успешно создали контур вокруг текста.Контур текста в Фотошопе
    При необходимости, как и в методах выше, можно создать отпечаток слоя или растрировать его.

Заключение

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

Как сделать обводку текста в Фотошопе

kak-sdelat-obvodku-teksta-v-fotoshope


Хотите сделать свой текст привлекательным и оригинальным? Появилась необходимость оформить какую-либо надпись красивым стилем? Тогда читайте эту статью, в ней будет представлен один из приемов оформления текста, а конкретно – обводка.

Обводка текста в Фотошопе

Для того чтобы сделать обводку в Фотошопе, нам понадобится непосредственно «пациент». В данном случае это будет одна большая буква «А».

delaem-obvodku-teksta-v-fotoshope

Сделать обводку текста можно стандартными средствами Фотошопа. То есть дважды кликнуть по слою, вызвав стили и выбрав пункт «Обводка». Здесь можно настроить цвет, расположение, тип и толщину обводки. Это путь дилетантов, а мы с вами настоящие профи, поэтому и действовать будем по-другому. Почему так? При помощи стилей слоя можно создать только линейную или градиентную обводку, а способ, который мы изучим в этом уроке, позволит создать борд любой конфигурации.

delaem-obvodku-teksta-v-fotoshope-2

Итак, текст у нас есть, приступаем.

  1. Зажимаем клавишу CTRL и кликаем по миниатюре слоя с текстом, тем самым получив выделение, повторяющее его форму.

    delaem-obvodku-teksta-v-fotoshope-3

  2. Теперь нужно определиться, чего же мы хотим добиться. Сделаем довольно толстую обводку со скругленными краями. Идем в меню «Выделение – Модификация – Расширить».

    delaem-obvodku-teksta-v-fotoshope-4

    Здесь настройка только одна. Пропишем значение в 10 пикселей (размер шрифта 550 пикс).

    delaem-obvodku-teksta-v-fotoshope-5

    Получаем вот такое выделение:

    delaem-obvodku-teksta-v-fotoshope-6

  3. Чтобы произвести дальнейшее редактирование, необходимо активировать один из инструментов группы «Выделение».

    delaem-obvodku-teksta-v-fotoshope-7

    Ищем на верхней панели инструментов кнопку с названием «Уточнить край».

    delaem-obvodku-teksta-v-fotoshope-8

    Здесь нам необходимо изменить только один параметр –

    «Сглаживание». Поскольку размер текста у нас огромный, значение также будет довольно большим.

    delaem-obvodku-teksta-v-fotoshope-9

  4. Выделение готово. Далее нужно создать новый слой, нажав на значок в нижней части палитры слоев (горячие клавиши здесь не сработают).

    delaem-obvodku-teksta-v-fotoshope-10

  5. Находясь на этом слое, нажимаем сочетание клавиш SHIFT+F5. Появится окно с параметрами заливки. Здесь выбираем «Цвет», он может быть любой.

    delaem-obvodku-teksta-v-fotoshope-11

    Получаем следующее:

    delaem-obvodku-teksta-v-fotoshope-12

  6. Снимаем выделение сочетанием клавиш CTRL+D и продолжаем. Помещаем слой с обводкой под слой с текстом.

    delaem-obvodku-teksta-v-fotoshope-13

  7. Далее дважды кликаем по слою с обводкой, вызвав стили. Здесь выбираем пункт «Наложение градиента» и нажимаем на значок, который указан на скриншоте, открывая палитру градиентов. Вы можете выбрать любой градиент. Набор, который вы сейчас видите, называется «Черно-белое тонирование» и входит в стандартную комплектацию Фотошопа.

    delaem-obvodku-teksta-v-fotoshope-14

    Затем выберем тип градиента «Зеркальный» и инвертируем его.

    delaem-obvodku-teksta-v-fotoshope-15

  8. Жмем ОК и любуемся…

    delaem-obvodku-teksta-v-fotoshope-16

  9. Переходим на слой с текстом и изменяем непрозрачность заливки на 0%.

    delaem-obvodku-teksta-v-fotoshope-17

  10. Дважды кликаем по слою, появляются стили. Выбираем пункт «Тиснение» и настраиваем примерно, как на скриншоте.

    delaem-obvodku-teksta-v-fotoshope-18

Итоговый результат у нас получился вот такой:

delaem-obvodku-teksta-v-fotoshope-19

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

delaem-obvodku-teksta-v-fotoshope-19 Мы рады, что смогли помочь Вам в решении проблемы.
delaem-obvodku-teksta-v-fotoshope-19 Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.
Помогла ли вам эта статья?
ДА НЕТ
Поделиться статьей в социальных сетях:

«Как сделать обводку в Photoshop?» – Яндекс.Кью

Лично я училась методом «тыкай на все кнопки») а вообще, если хотите научиться годно рисовать, да, именно, рисовать, как это круто делают в спидпэйнтах, то советую приобрести графический планшет, ибо поверьте многие плачут на форумах, что все делают как в туториале, но выходит фигня кривая, а дело именно в нем. С мышкой, увы, далеко не уйдешь, да, и многие забывают о кистях. К сожалению, стандартный набор кистей в фш беден, советую качать годные наборы на сайте deviantart.com (введите в поиске «brush»). Ну, и, конечно, чтоб рисовать хорошо нужно учить анатомию(посмотрите туториалы в интернете, купили специальную литературу по этому), но что я ни в коем случае не советую делать, так это заниматься обмазками/обводками поверх фото, так нарисовать никогда не научишься, ибо это низкосортная халтура(честно, оторвала бы лично этим обводятлам руки, что орут «ето у меня глазомер хороший, а ви завидуити», и дала бы им учебник по анатомии).

Хех, это было только начало) а теперь суть)

  1. Слои. Наверное, все художники без исключения просто молятся на слои. Без них нарисовать что-то сложное будет нереально. Допустим, если взять цельную картинку(на одном слое) и закосячить, то стереть это, не задев остальное будет сложно, а вот с работой на слоях все проще. Например, на одном слое у нас фон, на другом, допустим, травка, на третьем солнышко. Эдакая аппликация выходит) стираешь травку и при этом не задеваешь задний фон ластиком) perfect, baby!

  2. Цветокоррекция. Нужно не только для ретуши, но и для рисования. Вы рисуете пейзаж, но под конец понимаете, что свет какой-то блеклый, и вуаля функция «цветовой тон/насыщенность»(там есть и другие функции, это пример) все решит.

  3. Советую еще на счет слоев про «наложение слоев» поискать в интернете, очееень полеезно) описывать не буду, очень большая тема)

  4. Горячие клавиши в фш. Их масса, чаще всего они подписаны сбоку(справа), когда наводишь курсор на какую-нибудь функцию. Чем это хорошо, немного, но ускоряет работу художника. Не нужно бегать глазами по монитору, чтоб найти что-то, а просто, зная комбинацию кнопок, вызвать эту команду. Так, кстати, часто на стримах художников бывает вопрос «а вот вы в фш ничего не водили курсором, а действие само сделалась, это как?», а это все горячие клавиши)

  5. Скачайте 1-2 набора кистей для фш по вкусу) в основном они сильно влияют на то, как будет выглядеть работа. Очень сильно.

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

Удачи) спрашивайте, если что)

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

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

Размер документа и фон выбираете любой, в зависимости от того, какой вам нужен. В этом уроке использованы такие параметры как ширина в 577 пикселей, высота – 412 пикселей. Затем дважды щелкаем по фону, что бы разблокировать его и работать с текстом.

Название слоя с «фон» переименуется в  «слой 0», исчезнет значок замка. Значит можно работать. Выбираем цвет текста и пишем его (ТЕКСТ).

Затем создаем копию этого слоя. Нажимаем правой кнопкой и в открывшемся меню выбираем «создать дубликат слоя».

Дважды щелкаем по копии слоя. Появится окно свойств слоя, где выбираем пункт «обводка«. В параметрах выбираем все показанные на рисунке варианты. Т.е, ставим размер обводки, положение, режим наложения, непрозрачность, выбираем цвет. Методом эксперимента подбираем нужное и после жмем ОК.

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

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

Зажимаем клавишу CTRL и кликаем по миниатюре слоя с текстом, в результате получим выделение текста.

Оно будет видно в виде плавающей пунктирной линии вокруг букв. Теперь необходимо будет сделать толстую обводку со скругленными краями. Для этого выбираем в меню «Выделение» раздел «Модификация – Расширить».

В открывшемся окне ставим размер  к примеру в 10 пикселей.

В результате получаем такое выделение:

Выделение отодвинулось от текста на заданное значение. Если оно не устраивает, можно изменить пиксели. Но при этом выбираем уже не «расширить«, а «сжать» и ставим размер для сжатия.

Затем проверяем, что на панели инструментов активен инструмент «выделение«. В принципе, он будет уже активным по умолчанию, поскольку вы работаете с выделением. На верхней панели находим пункт «уточнить край».

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

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

Далее, работаем с этим новым слоем. Нажимаем сочетание клавиш SHIFT+F5. Откроется окно «заполнить». Здесь выбираем параметр «использовать» и в выплывающем меню – «цвет…». Откроется новое окно палитры цветов, где выбираем нужный цвет. Например, серый.

Жмем ОК и получаем такую вот заливку:

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

Выделяем слой с обводкой (он теперь под слоем с текстом) и дважды кликаем по нему. Появится окно свойств слоя. Кликаем по центру полоски «градиент» и появится новое окно, где выбираем нужный стиль или создаем свой из палитры цветов. Например, такой, как показан на рисунке.

В окне стилей ставим «зеркальный» и отмечаем галочку в поле «инверсия». Жмем ОК.

Теперь выделяем слой текст и прозрачность заливки устанавливаем на 0.

Затем дважды щелкаем по слою и вызываем окно свойств слоя. Ставим настройки или как на рисунке, или устанавливаем свои. Все зависит от изначального текста, цвета и пр.

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

Примерно так. Если поэкспериментировать, можно получить совершенно различные варианты. Удачи!

Автор публикации

0 Комментарии: 1Публикации: 179Регистрация: 02-12-2017

Как в фотошопе сделать контур изображения или текста

Здравствуйте, уважаемые читатели. Продолжаем изучать программу Photoshop и ее возможности. Сегодняшний урок относится к базовому разделу. Все будет легко и просто. Однако, благодаря этому навыку вы уже сможете выполнять интересные действия к примеру, создавать неплохие коллажи, делать красивые надписи и даже научитесь рисовать силуэты.

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

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

Контур текста, рамка для фотографии и обводка силуэта просто и быстро - инструкция

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

Обрамление фото

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

Почему я поступаю именно так? Благодаря этому способу пиксели не сбиваются, подробности об этом моменте можете узнать из статьи «Как растянуть изображение в Photoshop — без потери качества и пропорционально».

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

Контур текста, рамка для фотографии и обводка силуэта просто и быстро - инструкция

Многие новички, в принципе, не могут ничего сделать с картинкой, которую только что залили в Photoshop. Они ищут в чем проблема, почему набор функций слишком ограничен. Вся проблема заключается в том, что нижний слой по умолчанию блокируется от редактирования. Достаточно снять замок с картинки, ситуация мгновенно изменится в лучшую сторону. Вам будет доступно больше опций.

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

Контур текста, рамка для фотографии и обводка силуэта просто и быстро - инструкция

Как только вы это сделали, отыщите в меню справа раздел «Параметры наложения». Он скрывается под иконкой функции fx. В этом разделе откройте категорию «Обводка».

Контур текста, рамка для фотографии и обводка силуэта просто и быстро - инструкция

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

Теперь определитесь с размером рамки. Можете при помощи мыши оттащить меню. Зацепите его сверху, там где написано «Стиль слоя» и перенесите в нужное место.

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

Еще одна важная настройка – «Цвет». Щелкните по этой плашке и получите доступ к спектру, чтобы изменить оттенок.

Контур текста, рамка для фотографии и обводка силуэта просто и быстро - инструкция

Вот такой результат получился у меня после того, как я все сделал и кликнул на «Ок».

Контур текста, рамка для фотографии и обводка силуэта просто и быстро - инструкция

Сложный контур

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

Контур текста, рамка для фотографии и обводка силуэта просто и быстро - инструкция

Итак, я буду пользоваться волшебной палочкой. Она находится в инструментах слева. Помимо нее есть и другие – быстрое выделение, магнитное и прямолинейное лассо. Ссылку на статьи о них, я уже давал, так что вкратце расскажу о палочке. Вы просто щелкаете по объекту и он определяет все цвета, близкие к тому оттенку, на котором вы применяли палочку. В данном случае – это желтый.

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

Контур текста, рамка для фотографии и обводка силуэта просто и быстро - инструкция

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

Контур текста, рамка для фотографии и обводка силуэта просто и быстро - инструкция

Контур текста, рамка для фотографии и обводка силуэта просто и быстро - инструкция

*Реклама

Перейдите в раздел правого меню «Контуры».

Контур текста, рамка для фотографии и обводка силуэта просто и быстро - инструкция

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

Контур текста, рамка для фотографии и обводка силуэта просто и быстро - инструкция

Теперь в разделе «Контуры» нажмите на правую кнопку мыши и щелкните «Выполнить обводку».

Контур текста, рамка для фотографии и обводка силуэта просто и быстро - инструкция

Готово. Жмете «Ок».

Контур текста, рамка для фотографии и обводка силуэта просто и быстро - инструкция

Альтернативный более простой вариант

В этот раз я поступлю мудрее и выберу объект, который состоит только из одного цвета. Так его будет проще выделять палочкой. Щелкаю ей по женщине, а затем выношу этот объект на новый слой при помощи клавиш Ctrl+J.

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

Контур текста, рамка для фотографии и обводка силуэта просто и быстро - инструкция

Теперь выбираете обводку, как делали это ранее, через параметры наложения (fx).

Контур текста, рамка для фотографии и обводка силуэта просто и быстро - инструкция

И снова работаете с контуром. Уже привычным образом, как и в первой главе про обрамлении фото. В этот раз можно использовать положение «Снаружи» и «По центру».

Контур текста, рамка для фотографии и обводка силуэта просто и быстро - инструкция

Надписи

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

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

Контур текста, рамка для фотографии и обводка силуэта просто и быстро - инструкция

В этот раз не думаю что будет сложно найти обводку.

Контур текста, рамка для фотографии и обводка силуэта просто и быстро - инструкция

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

Контур текста, рамка для фотографии и обводка силуэта просто и быстро - инструкция

Видео инструкция

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

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

Если у вас появилось необъяснимое желание узнать о программе максимум, хоть владеете вы ей недостаточно, могу предложить курс «Фотошоп для начинающих в видеоформате». Из него вы сможете узнать много полезного о инструментах и возможностях Adobe Photoshop.

Фотошоп для начинающих

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

Многослойная обводка текста в Фотошоп / Фотошоп-мастер

В этом уроке мы с вами научимся создавать многослойные обводки для текста при помощи такого инструмента Фотошоп, как смарт-объект.  Для работы я использую версию Photoshop CS5, но вы можете воспользоваться любой версией это программы, начиная с CS2.

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

Итак, приступим!

Шаг 1

Напишем текст, с которым будем работать в дальнейшем. Создадим новый слой, при помощи инструмента Текст ( Text Tool) напишем слово «style». Цвет заднего плана чёрный.

Вот так выглядит панель слоёв на данном этапе нашей работы:

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

Из выпадающего списка выберите стиль Обводка (Stroke).

В открывшемся диалоговом окне выберите цвет нашей будущей обводки в подменю Цвет (Color):

В открывшейся палитре цветов выбираем понравившийся нам цвет. Я подобрал светло-голубой оттенок, так как мой текст изначально тёмно-синего цвета.

После того, как вы подобрали цвет, нажмите ОК.

Дальше я увеличил размер обводки до 21 пикс., выставив необходимое мне значение в окошке Размер (Size).

Нажимаем ОК. Вот что получается у нас после добавления первой обводки к нашему тексту:

Шаг 2

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

Тогда я преобразовал текстовый слой в Смарт-объект. Смарт-объект работает как виртуальный контейнер, поместив в него наш текст с первым слоем обводки, мы сможем добавить вторую линию!

Чтобы это сделать, нажмите на значок в верхней части панели слоёв, как показано на скриншоте:

В выпадающем меню выберите опцию Преобразовать в Смарт-объект (Convert To Smart-Object)/

После преобразования слоя в Смарт-объект, в нижнем правом углу предварительного просмотра слоя появится такой значок:

Шаг 3

Добавим вторую линию обводки. Для этого снова щёлкнем  на значок Стилей слоя в нижней части панели слоёв, выберем параметр Обводка (Stroke).

Снова откроется диалоговое окно стиля слоя Обводка (Stroke). Как и в предыдущем шаге с добавлением обводки, выберите подходящий вам цвет и размер обводки. Я выбрал синий цвет и размер обводки 10 пикс.

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

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

Шаг 4

Повторите предыдущие два шага, чтобы добавить необходимое количество линий обводки к вашему тексту.  Перед  добавление новой линии обводки не забывайте преобразовывать ваш слой в Смарт-объект и всё у вас получится.

Я добавил третью линию обводки к своему тексту. Цвет я подобрал светло-голубой, как в первой линии обводки, размер установил 10 пикс.

Нажимаем ОК,  чтобы закрыть диалоговое окно стиля слоя.  И теперь у меня получается три линии обводки вокруг текста. Выглядит всё так, как будто я добавил тройную обводку к тексту, хотя на самом деле я использовал только одну обводку непосредственно к самому тексту, средняя линия обводки приходится на первый смарт-обект, а верхняя линия обводки – на второй смарт объект.

Вот так легко и очень просто можно добавить любое количество обводок к тексту, используя всего лишь стиль слоя Обводка (Stroke) и Смарт-объекты (Smart-Object) программы Фотошоп.

Надеюсь, урок вам понравился, удачи в творчестве!

Автор: Steve Patterson

 

Как выделить текст в Фотошопе или сделать обводку

Одним из самых используемых инструментов при работе в Фотошопе является “Текст”. И разработчики программы постарались наделить его широкими возможностями.

Выделение и обводка текста в Фотошопе

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

Этот урок будет целиком посвящен тому, как выделить текст в Фотошопе. Начнем!

Способов выделить надпись в программе немало, но мы потрудились и выбрали самые “ходовые” для работы, которыми и сами пользуемся.

Способ №1: Создаем слой с подложкой

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

логотип в белом цвете

и яркую фотографию. В нашем случае это будет прекрасное фото пляжа с белоснежным песком:

фото пляжа с белоснежным песком

Логотип нужно будет разместить в правом нижнем углу. Выглядит это пока таким вот образом:

Выделение и обводка текста в Фотошопе

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

  1. На панели слоев создаем новый слой и размещаем его между текстовым и фоновым слоями.создаем новый слой
  2. Затем необходимо взять инструмент “Выделение” -> “Прямоугольная область”.инструмент Выделение
  3. На созданном слое (между слоями с текстом и фоном) выделяем прямоугольную область вокруг текста. Перед тем, как это делать, мы убрали рамки вокруг логотип. Смотрите скриншот ниже:
    выделяем прямоугольную область вокруг текста
  4. Остается только залить выделенную область желаемым цветом. Обычно для подложки используют черный цвет. Чтобы не прибегать к панели инструментов, воспользуемся комбинацией горячих клавиш SHIFT+F5. В появившемся окне выбираем в пункте “Содержание” -> “Черный” или любой другой подходящий вариант:
    SHIFT+F5заливаем выделенную область желаемым цветомПосле того, как подложка закрашена, снимите выделение горячими клавишами CTRL+D, или кликнув инструментом выделение по любому месту на холсте.
  5. Чтобы подложка не смотрелась так “грубо”, нужно поиграть со значением “Непрозрачность” на слое. В нашем случае мы установили ползунок на отметке 50%.
    непрозрачность 50 процентов
  6. Почти готово. Остался последний штрих – добавление тени. Да, переходим в параметры наложения слоя, на котором находится текст. Для этого кликните правой кнопкой мыши на слой и выберите “Параметры наложения”.
    Параметры наложения - теньАльтернативный способ вызова – двойной клик по нужному слою. Перед нами откроется окно с множеством настроек. Выбираем “Тень” и настраиваем, как у нас или на свой вкус:
    Параметры наложения - тень: настройкиКликаем “ОК” и получаем неплохой результат, который является одним из самых распространенных.
    Как выделить текст в Фотошопе или сделать обводку

Экспериментируйте с подложкой, ведь главное в этом деле – практика. Идем дальше.

Способ №2: Обводка текста

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

логотип и фото леса

Как видите, логотип практически незаметен. Приступим к выделению текста.

  1. В этот раз нам не понадобится создавать дополнительный слой, как в первом случае. Все куда проще. Кликаем на слой с логотипом/текстом ПКМ и выбираем “Параметры наложения”.
    Параметры наложения
  2. После, устанавливаем галочку в пункте “Выполнить обводку”. Появятся настройки обводки. В нашем случае нам достаточно установить размер обводки в 3 пикс. и выбрать белый цвет, т.к. лого у нас черного.
    как сделать обводку текста
  3. После настройки обводки, не закрывая окно, переходим к пункту “Тень”. Здесь все параметры тоже индивидуальны, но в нашем случае они таковы:
    Параметры наложения: тень
  4. После того, как мы ввели все необходимые параметры в пунктах “Выполнить обводку” и “Тень”, кликаем ОК и получаем результат:
    Выполнить обводку и Тень

Способ №3: Выделение текста при резкой смене цветов

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

Выделение текста при резкой смене цветов

А теперь давайте разбираться, как выйти из подобной ситуации.

  1. Для начала нужно зажать клавишу CTRL и кликнуть на панели слоев по миниатюре слоя с надписью. Таким образом Фотошоп автоматически создаст выделенную область вокруг лого:
    выделенная область вокруг текста
  2. Затем необходимо перейти на слой с нашим фоновым изображением, кликнув ЛКМ по нему и, используя горячие клавиши CTRL+J, cкопировать выделение. Программа автоматически создаст новый слой с нашим текстом в цветах фонового изображения:
    новый слой с текстом в цветах фонового изображения
  3. Переходим к волшебству. Убираем видимость (галочку) с самого верхнего слоя, где расположена наша надпись. Теперь нужно инвертировать цвета слоя благодаря комбинации клавиш CTRL+I. Должно получиться примерно так:
    CTRL+I
  4. Получилось недурно, но еще есть над чем поработать. Давайте добавим нашему тексту немного обводки белого цвета в пункте “Выполнить обводку” в “Параметрах наложения”.
    обводка белого цветаЗатем “приправим” надпись немного тенями:
    тень в параметрах наложения

Вот и все! Кликаем “ОК” и получаем шикарный вариант выделенного текста на очень сложном фоне:

Как выделить текст в Фотошопе или сделать обводку

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

На этом все. Если остались вопросы, пишите об этом в комментариях. До встречи в наших следующих уроках.

Контурный текст в Photoshop Учебное пособие по Photoshop

outline


Более новый метод для Photoshop CC здесь outline


(ТОЛЬКО ДОБАВЛЕНО: см. Внизу этого урока PSD и стиль слоя, который работает в Photoshop CS6 и CC )

Шаг 1

Начните с пустого слоя и текста, это также подойдет для фигур.

Шаг 2

Щелкните правой кнопкой мыши / Cmd щелкните имя слоя в палитре слоев.Выберите растеризованный слой. Ctrl / Cmd щелкните миниатюру слоя, чтобы выбрать тип.

Шаг 3

Создайте новый пустой слой.

Правка> обводка. Я добавил сюда обводку в 6 пикселей. Сделайте центр локации.

Нажмите ОК.

Ctrl / Cmd щелкните миниатюру слоя, чтобы выбрать новую обводку.

Шаг 4

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

Шаг 5

Теперь снова примените обводку, на этот раз 1 пиксель и установите наружу.

Шаг 6

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

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

Шаг 7

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

Step 8

Для небольшой дополнительной глубины примените стиль слоя к контуру, используйте тени.

Шаг 9

Вот результат.

Step 10

Другой вариант — скрыть заливку и просто использовать контур с падающей тенью.

Step 11

Вот еще один вариант. Это просто перевернутое предыдущее изображение.Ctrl / Cmd + I Обратите внимание, чтобы это сработало, вы должны сначала сгладить изображение.

Шаг 12

Вот еще один вариант. Поиграйте с этим эффектом и получайте удовольствие.

Увидимся через неделю с еще одним новым руководством.

Загрузите PSD

(Photoshop CS-CC)

Вот новые версии эффекта, который я создал со стилем слоя

outline

Загрузите стиль слоя здесь

install-layer-style

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

wireframetext11

CS6 Superguide

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


.

Как набросать текст в Photoshop, учебник


Есть 2 варианта контурных шрифтов. Первый — это эффект, при котором вы создаете контур шрифта, например обводку или фаску.

эффект контура. для Photoshop CC здесь


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

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

Преобразование текста в контур произвольной формы (Боевой ангел Алита)

Давайте начнем с недавно сделанной фотографии модели / косплеера Джесси Прайдмор (косплей Раффлбатта).Я скомпоновал Джесси в роли боевого ангела Алиты в качестве фона. Мы собираемся добавить текст.

outline-text-photoshop-tutorial_01

Шаг 1

Выберите тип инструмента. Вот выбор шрифта, который я использовал.

outline-text-photoshop-tutorial_02

Шаг 2

Щелкните свой документ и начните вводить

outline-text-photoshop-tutorial_03

Шаг 3

Давайте добавим вторую строку текста, вот выбор шрифта для этого.

outline-text-photoshop-tutorial_04

Step 4

Здесь вы можете увидеть 2 фрагмента текста на странице, довольно простой материал.

outline-text-photoshop-tutorial_05

Шаг 5

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

outline-text-photoshop-tutorial_06

Преобразование текста в векторный контур

Шаг 6

Щелкните правой кнопкой мыши тип на панели слоев. Выберите «Преобразовать в форму» в меню.

outline-text-photoshop-tutorial_07

Шаг 7

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

outline-text-photoshop-tutorial_08

Преобразование текста в Photoshop

Шаг 8

Выбрав текстовый слой на панели «Слои», нажмите Cmd / Ctrl + T

Это переведет вас в режим свободного преобразования, и вы увидите рамку вокруг текст (это называется ограничивающей рамкой).

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

Выберите искажение.

outline-text-photoshop-tutorial_09

Шаг 9

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

outline-text-photoshop-tutorial_10

Шаг 10

Выберите другой текстовый слой и нажмите cmd / ctrl + T

outline-text-photoshop-tutorial_11

Шаг 11

Щелкните правой кнопкой мыши для параметров и выберите Искажение

outline-text-photoshop-tutorial_12

Шаг 12

Перетащите углы для изменения формы текстового блока. (Совет: вы можете перетаскивать каждый угол, удерживая нажатой клавишу Control, в режиме свободного преобразования, не щелкая правой кнопкой мыши и не выбирая «Искажение»).

outline-text-photoshop-tutorial_13

Изменение цвета заливки текста.

Step 13

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

Выберите типовой слой на панели слоев

outline-text-photoshop-tutorial_14

Шаг 14

Выберите инструмент прямого выбора (он отличается от инструмента перемещения)

outline-text-photoshop-tutorial_15

Шаг 15

Перейдите к верхней части панели параметров инструмента и щелкните поле «Заливка».

outline-text-photoshop-tutorial_16

Шаг 16

Выберите новый цвет (или узор, или градиент, если хотите). Мы сохраняем его красивым и чистым и выбираем черный в качестве цвета, щелкая образец черного цвета. Обратите внимание, что шрифт меняет цвет, когда вы выбираете новый цвет.

outline-text-photoshop-tutorial_17

Шаг 17

Повторите для второго текстового слоя.

how to outline text in photoshop vector tutorial

Другие слова

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

Спасибо за просмотр учебного курса PhotoshopCAFE на этой неделе. Не забудьте ознакомиться со всеми другими уроками здесь, в PhotoshopCAFE. У нас есть много оригинальных руководств (здесь нет перепечаток!). Также посетите наши Instagram, Twitter, Facebook и Youtube (photoshopCAFE)

Увидимся в CAFE

Колин

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


.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *