Как в Фотошопе выделить контур? Выделяем контур в фотошоп.

Обтравка контура пером. Урок для новичков в Photoshop.

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

Мы будем вырезать из нее этот цветок:

Совсем подробно:-) Кликаем по превью первой картинки, скачиваем ее и открываем эту картину в photoshop.
Нажимаем сочетание клавиш Ctrl+0 (ноль), или так:

Берем инструмент "Pen" - "Перо" для чего нажимаем клавишу "P" (Расклад клавиатуры английский). Или так:

Настройки пера такие:

Ставим первую точку:

Теперь внимательно:-). Сначала читаем, потом делаем, - ибо это - единственное, что надо понять, - остальное просто. :-)
Ставим вторую точку (красная стрелка), не отпускаем левую клавишу мышки, немного отводим (не отпуская клавишу мыши) перо в сторону - около точки появятся две стрелочки (направляющие - синяя стрелка), тянем за направляющую (синяя стрелка), поворачиваем ее, выгибая контур (зеленая стрелка), чтобы он лег четко по контуру цветка. НЕ ОТПУСКАЕМ МЫШКУ!

Теперь зажимаем клавишу Alt (мышку мы не отпускаем!) и загоняем направляющую (синяя стрелка) обратно в нашу вторую точку, так (красная стрелка):

Загнали. Отпускаем клавишу мышки! :-)

Прочитали? Теперь можно делать. :-))))
Для того чтобы обтравить весь цветок, нам остается провести сию операцию несколько раз. Кнопка Alt и загон направляющей помогают как бы зафиксировать перо, чтобы с каждой новой точкой контур гнулся куда нам надо. На самом деле и без Alt контур гнется в строго определенном направлении, а не беспорядочно. Но здесь надо потренироваться, понять логику Пера. Поэтому понимать сию логику мы начнем, работая с использованием Alt:-)
Вы заметили - пока мы тянем за направляющие, - перо приобретает вид такого примерно треугольничка:

Ставим третью точку (красная стрелка), не отпускаем клавишу мыши, выгибаем контур (зеленая стрелка), зажимаем Alt и загоняем направляющую в эту самую третью точку(черная стрелка):

Отпускаем мышку.

Ставим четвертую точку и т.д. Вот все мои точки, - осталось только замкнуть контур, т.е. поставить последнюю точку в первую (строго в нее! :-)):


Кстати, подумалось.... Вы можете скачать именно эту картинку и для начала ставить точки строго туда, куда я ставила. Ибо - если у меня контур выгнулся, - значит и у вас он выгнется:-)

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

У нас все еще включен инструмент Pen - Перо. :-) Клацаем правой клавишей мыши по файлу в любой точке и в выпавшем окне выбираем "Make Selection"- "Сделать выделение":

В открывшемся окне ставим Feather Radius - Радиус пера, радиус растушевки. Я ставлю 2 пкс (т.к. картинка у нас не слишком маленькая, и эта растушевка не будет резать глаз. Чем больше картина, тем большую растушевку можно ставить, и, соответственно, чем меньше - тем меньшую). Итак у меня 2 пкс, и жму ОК:

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

Теперь нажимаем сочетание клавиш Ctrl+C или так:

Нажимаем Ctrl+N или так (открываем новый файл, короче:-)))):

Умный фотошоп сразу ставит нужные параметры открываемого файла, чтобы вставить скопированное. Нам остается нажать кнопку ОК. Но, на всякий случай..., (доверяй, но проверяй) проверяем, чтобы все у нас было, как на скрине. Зеленая стрелка - фон прозрачный. Если у вас другой - выбираем прозрачный. Синяя стрелка - можем поменять название. Ну и жмем ОК:

Файл открылся:

Нажимаем сочетание клавиш Ctrl +V, или так:

Все, мы всю работу выполнили. У нас вырезанный цветок на прозрачном фоне:

Сохраняем файл в Png. Так:

Дополнительно:-)
Перед сохранением файла можно проверить, все ли у нас хорошо. Открываем палитру слоев (нажимаем клавишу F7) или так:

В палитре слоев с зажатой клавишей Ctrl щелкаем сюда (клавишу Ctrl зажимаем, чтобы новый слой у нас был ПОД слоем с цветком):

Вот у нас появился новый слой:

Мы стоим на этом новом пустом слое (видите - он выделен синим?), нажимаем сочетание клавиш Shift + F5 или так:

В открывшемся окне нажимаем на галочку (красная стрелка) и в выпавшем списке выбираем Black - черный (синяя стрелка):

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

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

Встаем в открытой палитре истории на пункт Close Path (красная стрелка). И наш мы возвращаемся к тому моменту, где мы замкнули путь (синяя стрелка):

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

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

Собственно, пока все. У этого метода преимущество - простота. Но есть недостатки - у нас остается одна направляющая, что сокращает возможности редактирования. И, если мало опыта работы с пером, контур может получиться не слишком плавным. Но начнем все же с этого, чтобы научиться гнуть контур:-)
По этому же методу можно отрисовывать картинки
Урок . Здесь конкретно - отрисовка контура. Весь урок
Именно по этому уроку я и училась:-)

P.s. После того как мы проверили обтравку картинки, вынеся ее на черный фон, - этот слой с фоном удаляем и сохраняем в png.

Мне кажется, что каждый из нас хоть раз в своей жизни обводил карандашом кисть своей руки, положив её на лист бумаги. А может быть это происходило на пляже. Кисть руки лежала на песке и мы обводили её какой-нибудь палочкой или длинным камушком. И в том и другом случае у нас получался контур. А давайте сделаем что-то подобное, но теперь в программе Фотошоп.

Помогать нам будет фото кисти руки:

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

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

С этой целью, наведём курсор мыши на слой в палитре слоёв (синие выделение), и сделаем щелчок правой кнопкой мыши. Этими действиями мы откроем окошко опций, в котором выберем пункт «Создать дубликат слоя»:

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

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

Я просто нажал кнопку «Ок»:

Готово! Слой-дубликат появился в палитре (окне) слоёв.

Теперь нужно изменить режим наложения слоя-дубликата, и сделать нам это нужно для затемнения кисти руки, ну или усиления контраста с белым общим фоном фото.

Обратимся к перечню режимов наложения в верхней менюшке окна слоёв, раскрыв список режимов обычным щелчком мыши по кнопке-стрелке:

Перед нашими глазами появился перечень режимов наложения слоя:

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

И вот что мы получили в результате:

Ну вот, для работы инструментом «Быстрое выделение» всё готово. Наводим курсор мыши на нужный нам в данный момент инструмент «Быстрое выделение» в окошке инструментов:

И щелчком левой кнопки мыши выбираем его. Курсор мыши превратился в кружок с перекрестием внутри.

Теперь уделим внимание техническим настройкам инструмента. Переведём свой взгляд на блок управления этими самыми техническими настройками:

Инструмент должен работать в режиме «Добавить к выделенной области». Чтобы так и было, нажмём на значок инструмента с плюсиком. Если значок подсвечивается синим цветом, то тогда щёлкать мышкой по нему не нужно, - режим уже активизирован:

Если установить значение 3 или 5, то выделение будет более чётким. Если выбрать значение значительно больше видимого нам сейчас, а видим мы значение 18, то начав выделять ладонь, мы будем захватывать белый фон, так как с большим диаметром инструмента уменьшится его чувствительность.

Пожалуй «золотой серединой» можно считать значение, при котором кружок-курсор инструмента будет немного меньше какого-нибудь пальца кисти руки. Для меня удобен диаметр инструмента в пределах 15-22. Я остановил выбор на значении 18. Пожалуй, лучше ориентироваться на свои ощущения и на сам процесс выделения. В зависимости от того, насколько удобно и качественно (нет захвата белого фона) мы осуществляем выделение, нам и нужно двигать ползунок регулировки диаметра инструмента, подбирая оптимальное значение.

Чтобы инструмент работал, как говорится, «на полную катушку», жёсткость нужно установить 100%. Ну вот у нас всё готово к выделению кисти руки. Предлагаю начать выделение с запястья:

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

Ну что же, начнём. Подводим курсор инструмента к запястью. Нажав и удерживая левую кнопку мыши, начинаем вести инструмент вверх по направлению к кончикам пальцев:

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

Если такого самостоятельного выделения не произошло, то мы плавно ведём курсор инструмента по всем пальцам до полного выделения руки.

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

Что же делать, если в область выделения всё же попал белый фон? Можно отменить выделение вообще, нажав сочетание клавиш Ctrl+D и начать выделять ладонь заново. А можно обратиться к блоку технических настроек инструмента и переключить режим его работы щелчком мыши, но теперь уже по значку инструмента с минусом:

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

Такое переключение режима даёт нам возможность удалить «захват» выделением белого фона:

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

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

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

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

Кисть выделена - «муравьи» выделения активно бегут по её контуру, а мы производим смену инструмента и создаём новый слой в окошке слоёв.

Давайте начнём с создания нового слоя. Нажмём в нижней менюшке окна слоёв, значок создания нового слоя. Готово:

Этот новый слой через несколько секунд превратится в слой-контур ладони, а точнее будущий контур. У нас есть пока только выделенная область, а создание контура впереди.

Теперь произведём смену инструментов или режимов выделения. Обычным щелчком мыши выберем инструмент обычного (не быстрого) выделения. И какой именно инструмент из перечня мы выберем, в нашем данном случае, не имеет значение:

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

Итак, новый пока ещё пустой слой создан, смена инструмента произведена и теперь, мы заводим курсор инструмента на область ладони и оказываемся курсором внутри выделения. Курсор инструмента имеет вид двух крестиков. Один большой, а другой маленький. Делаем щелчок правой кнопкой мыши. Появилось окошко опций, в котором нам в данный момент интересна опция «Выполнить обводку»:

Выберем её. И вот появилось следующее окошко настроек:

В этом окошке мы можем по своему желанию отрегулировать толщину (ширину) линии контура, её цвет, а также выбрать расположение обводки, а затем нажать кнопку «Ок». Я не буду менять настройки и просто нажму кнопку «Ок». И вот что получилось:

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

Ну вот, другое дело:

Чтобы быть уверенными в том, что созданный нами контур без изъянов и дефектов, увеличим масштаб видимости (версия Фотошоп CS5):

К сожалению надо признать, что контур получился «так-себе». Линия контура имеет много неровностей, которые были заметны уже в самом начале его создания и при 100% масштабе видимости.

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

Кроме этого, само изображение может не являться оригиналом. Так, изображение ладони, с которой мы только что работали, уже подвергалось не очень качественной обработке в каком-то редакторе изображений, что и отразилось на созданном нами контуре из выделения. Именно размещение изображений на белом фоне позволяет скрывать шероховатость контура с одновременным уменьшения контраста объекта (осветление).

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

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

1 голос

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Надписи

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

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

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

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

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

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

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

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


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

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

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

Первый способ:

  1. Выберите часть изображения (рис. 16.5).

Рис. 16.5. Исходная выделенная область

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

Рис. 16.7. Ввод значения параметра Tolerance

Рис. 16.8 . Вид рабочего контура при значении параметра Tolerance равном 2

Рис. 16.9 . Вид рабочего контура при значении параметра Tolerance равном 6

При невысоком значении параметра Tolerance программа создаст много узловых точек, и контур будет точно соответствовать выделенной области (рис. 16.8). При большом же значении данного параметра получится меньше узловых точек, и контур окажется более сглаженным, но будет менее точно соответствовать исходной выделенной области (рис. 16.9). Попробуйте ввести значение указанного параметра равным 4 или 5 .

  1. Щелкните по кнопке ОК .

Имя нового рабочего контура появится на палитре Paths . Это имя, предложенное программой, надо обязательно изменить! Дважды щелкните по нему, а затем в появившемся окне Save Path (Сохранить контур) введите новое имя контура и щелкните по кнопке ОК .

Для наименования контуров нельзя использовать кириллицу.

Во втором способе преобразования границы выбранной области в контур используется текущее значение параметра Tolerance . Щелкните по кнопке Make work path from selection в нижней части палитры Paths . Сохраните контур: дважды щелкните по его имени, введите новое имя, затем нажмите кнопку ОК .