Как в фотошопе изменить цвет линии: Изменить цвет линии, которая обозначает границы текстового блока

Как изменить цвет линий на рисунке фотошоп. Описание инструмента «Замена цвета» в фотошопе

Существует десятки способов изменения цвета в программе Adobe Photoshop. Самый легких и быстрый – воспользоваться специальной командой Replace color или “Заменить цвет”. Этой функцией удобно пользоваться при работе с любым объектом на фотографии. Также эта команда полезна при замене цвета нескольких мелких деталей, хаотично разбросанных по всему изображению. В этой статье описывается подробная пошаговая инструкция по выполнению этой несложной задачи.

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

Первый способ. Замена цвета

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

1. Итак, загрузите фотографию, картинку или рисунок в наш редактор и теперь идите в знакомое нам меню «Изображение» . Далее выберете пункт «Коррекция» , а потом уже «Заменить цвет» .
   
2. Перед нами открылось окно замены цвета. Что мы здесь делаем? Во-первых давайте убедимся, что в этом окне активным инструментом является обычная пипетка (без знаков). Теперь просто кликните левой кнопкой мыши где-нибудь на капоте автомобиля.
   
3. Как видите, в окне у нас появилась небольшая прорисовочка. То, что окрашено светлым показывает нам какая область подвергнется замене цвета. Теперь начинайте тянуть ползунок «Цветовой тон» . Видите? Часть цвета начинает меняться, когда вы двигаете этот тон. Не расстраиваетесь, что закрасилась не вся машина. Мы это исправим.
   
4. Для начала зажмите левую кнопку мыши на ползунке «Разброс» и тяните его в большую сторону. Только старайтесь сделать так, чтобы машина закрасилась максимально, а фон при этом остался бы нетронутым. В данном случае на фоне нет желтых оттенков, что позволяет мне поставить максимальный разброс 200.
   
5. Нужный объект поменял почти весь цвет, но не полностью? Опять же не беда. Активируем внутренний инструмент «Пипетка+» и нажимаем левой кнопкой мыши на тех участках автомобиля, где остались непрокрашенные области на рисунке.
   
6. Вуаля!) Как видите, всё получилось и даже наш фон не пострадал. И кстати вы можете еще подвигать ползунки «Цветовой тон», «Насыщенность» , «Яркость» для достижения нужного оттенка.
   

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

Исправление недоразумений

Давайте посмотрим случай чуточку сложнее. Допустим, я опять же хочу сменить цвет машины, но уже другой. Как видите, цвет авто такой же как и на заднем плане. Ну что ж? Давайте проделаем все также как наверху и посмотрим, что у нас получится.

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

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

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

Второй способ. Режим наложения

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

Давайте я загружу тот же самый автомобиль, что и выше.

1. Берем и , каким бы мы хотели закрасить эту машинку. Ну допустим я хочу ее видеть зеленой, тогда этот конкретный цвет я и выберу.
2. Теперь создайте новый слой, нажав комбинацию клавиш SHIFT+CTRL+N. А затем взгляните на панель слоев. Видите там есть режимы наложения? По умолчанию стоит обычный, но вы раскройте выпадающий список и выберете пункт «Цветность» (Кстати режим «Цветовой тон» тоже подойдет, так что можете выбирать и его). Отлично. Молодцы.
   
3. А вот теперь выберете размер, форму и жесткость кисти, и вперёд! Красим машинку. Только аккуратно, чтобы лишнего не задеть. Ну а если задели, то ластиком поправите, ничего страшного.
   
4. А теперь, если захотите изменить тот цвет, который вы наваяли, вам нужно зайти в наше опять же знакомое меню «Изображение» и там выбрать «Коррекция» — «Цветовой тон/насыщенность» . Но я советую сразу воспользоваться несложной комбинацией клавиш CTRL+U.
   
5. Ну а во вновь открывшемся окне вы также можете двигать ползунки цветового тона, насыщенности и яркости, дабы изменить оттенок. Всё просто.
   

Ну как вам урок? Всё было понятно и интересно? Я надеюсь, что да. Лично я, когда узнал о замене цвета предмета в Adobe Photoshop, был просто в восторге. Если, конечно, что-то будет непонятно, то вы всегда можете уточнить или спросить. Буду рад помочь по мере возможностей.

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

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

С уважением, Дмитрий Костин.

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

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

Заменить цвет

«Поколдовать» над цветом в Фотошопе можно несколькими способами, и в этом материале я расскажу о двух наиболее популярных. В первом способе используется инструмент «Заменить цвет», и вот, как он реализовывается на практике:

Цветовой тон/насыщенность

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

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

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

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

Надо отметить, что я пользусь Photoshop CC, но ничего специфического мы делать не будем, так что можете смело начинать читать даже если у вас более простая версия этой программы. Не онлайн сервис, конечно, он слаб и нефункционален, но в случаях с CS3, 5 или 6 расхождений вы не заметите.

Приступим?

Простая цветокоррекция

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

Кстати, если вас интересует – читайте статью, уже опубликованную в Start-Luck. Я же возьму заранее подготовленную картинку, чтобы приступить к рассказу о простой коррекции цвета и перейду к работе.

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

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

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

Цветовой баланс меняет цвета сильнее, настройка более тонкая и интересная.

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

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

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

Меняете направление кривой и цвет становится другим.

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

Снимаются бегающие муравьи при помощи сочетания клавиш Ctrl+D.

Замена на контрасте

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

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

Возвращаюсь в раздел «Коррекция» и выбираю здесь инструмент «Замена цвета». При помощи инструмента «Пипетка», появляющемся автоматически, выбираю оттенок, который должен будет поменяться. В данном случае щелкаю по занавеске. Затем двигаю ползунок «Разброс», чтобы девушка стала почти черной, а все остальные объекты имели очертания (о том как нарисовать черный фон я написал целую статью ).

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

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

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

Сам же воспользуюсь инструментом «Магнитное лассо».

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

Мы же возвращаемся в «Замену цвета» раздела «Коррекция». В данном случае оттенок придется менять при помощи ползунков «Цветовой тон», «Насыщенность», «Яркость». Если я щелкаю по плашке «Результат, то получается крайне отвратительно и неправдоподобно.

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

Одеяние стало менее четким, зато оттенок несколько выровнялся.

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

Быстрый инструмент для сложных случаев и кардинальных изменений

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

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

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

Можно поставить зеленый.

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

Могу также предложить обучающее видео по этой теме.

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

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

До новых встреч и удачи.

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

Первый способ заменить цвет это воспользоваться готовой функцией в фотошопе «Заменить цвет» или «Replace Color» на английском.

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

Возьмем иконку и откроем её в фотошопе.

Мы заменим цвет на любой другой интересующий нас. Для этого заходим в меню «Изображение — Коррекция — Заменить цвет (Image — Adjustments — Replace Color)» .

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

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

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

Я сделал зеленый, задав параметры «Цветовой тон» , «Насыщенность» и «Яркость» .

Когда будете готовы заменить цвет — нажмите «ОК» .

Так мы поменяли один цвет на другой.

2 способ

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

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

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

Заходим в меню «Выделение — Цветовой диапазон (Select — Color Range)»

Далее остается кликнуть по красному цвету машины и мы увидим, что функция его определила — окрасила белым цветом в окне предпросмотра. Белый цвет показывает какая часть изображения выделена. Разброс в данном случае можно настроить на максимальную величину. Нажмите «ОК» .

После того как вы нажмете «ОК» , вы увидите как создалось выделение.

Теперь можно менять цвет выделенному изображению. Для этого воспользуйтесь функцией – «Изображение — Коррекция — Цветовой тон/Насыщенность (Image — Adjustments — Hue/Saturation)» .

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

Сразу поставьте галочку на параметр «Тонирование» (внизу справа). Теперь используя параметры «Цветовой тон, Насыщенность и Яркость» можно настроить цвет. Я настроил синий.

Все. Цвет заменился.

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

3 способ

Изменить цвет волос в Фотошопе можно еще одним способом.

Facebook

Twitter

Вконтакте

Одноклассники

Google+

Как сделать цветокоррекцию в Adobe Photoshop

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

Давайте начнем 🙂

Что такое цветокоррекция?

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

Цветокоррекция применяется и для творческих экспериментов. С помощью изменения оттенков можно придать фотографии определенную атмосферу – все зависит только от вашей концепции.

Итак, давайте посмотрим, какие инструменты нам предлагает великий и ужасный Adobe Photoshop.

Цветокоррекция с кривыми (Curves)

Свет и тень

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

В левой нижней части кривых находятся тени. Посередине – средние тона. А правая верхняя часть демонстрирует светлые участки. Теперь попробуйте сделать фото более контрастным: просто щелкайте по линии и перетаскивайте точку.

Используем пипетки

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

1. Выберите верхнюю пипетку. Она отвечает за точку черного – то есть за тень. Щелкните по самому темному участку фотографии. На фотографии с котом этот участок находится под лапами.
2. Теперь выберите нижнюю и щелкните по самому светлому участку. Здесь это небо.

Наверное, вы заметили, что рядом с нашей кривой появились новые линии. Так отображаются каналы – RGB (красный, зеленый и синий). О них читайте в следующем пункте.

Щелкните по стрелочке возле строки RGB. Вы увидите все три канала по отдельности.

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

А вот если опустить в правую нижнюю часть – все окрасится в голубой.

Таким образом, уменьшая влияние какого-либо из каналов, вы можете изменять оттенок фотографии.

Автоматическая цветокоррекция

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

Помимо кнопки «Авто», можно воспользоваться готовыми настройками. Вот так можно в один клик поднять контрастность фотографии.

Используем уровни (Levels)

Перейдите по вкладкам «Изображение» – «Коррекция» – «Уровни».

Здесь мы видим гистограмму уровней. Этот инструмент позволяет менять уровни интенсивности света, средних тонов и теней.

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

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

Цветовой баланс (Color Balance)

Работая в Фотошопе с этим инструментом, вы можете легко изменять баланс оттенков фотографии.

1. Создайте корректирующий слой «Цветовой баланс». 
2. Выберите, какой тон вы хотите откорректировать. 
3. Перемещайте ползунки в нужный диапазон. 

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

Цветовой тон и насыщенность (Hue/Saturation)

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

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

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

Коррекция цвета с помощью фильтров

Конечно же, в Фотошопе есть множество фотофильтров. И все можно настраивать самостоятельно!

Откройте фотографию для цветокоррекции. В верхнем меню пройдите по пути «Изображение» – «Коррекция» – «Фотофильтр».

Здесь можно подобрать готовые цветные фильтры или просто щелкнуть по окошку «Цвет» и выбрать собственный.

Выбирайте абсолютно любой цвет из палитры.

Чтобы добиться наиболее сильного фильтра, выкручивайте «Плотность» на все сто. А для добавления легкого оттенка достаточно примерно 30-40% плотности.

Сочность и насыщенность (Vibrance)

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

1. Добавьте слой «Сочность». 
2. Что получается, если выкрутить тумблер «Сочности» на 100%:
3. С этим инструментом тоже можно поиграть и добиться разнообразных эффектов. Попробуйте покрутить ползунки сочности и насыщенности, чтобы найти идеальный баланс.

Постарайтесь не переусердствовать – слишком большая насыщенность может испортить впечатление. Если, конечно, у вас не было изначальной идеи вывернуть все цвета по максимуму 🙂

Цветокоррекция с картой градиента (Gradient Map)

Цветокоррекцию можно выполнить инструментом «Карта градиента». Подробный материал о градиентах в Фотошопе я как раз делала недавно. Итак, как же сделать цветокоррекцию с их помощью?

1. Создайте слой «Карта градиента». 
2. Теперь, выбрав слой с градиентом, поставьте режим наложения «Мягкий свет». 
3. Щелкните вот сюда, чтобы увидеть редактор, в котором можно создать градиент. Или выберите его из существующих. 
4. Открылся редактор градиентов. У меня просто тьма сохраненных, и я могу выбрать любой, который придется по вкусу. Вы можете создать свой градиент, который наиболее подходит вашей фотографии.  
5. Вот, что получилось с фотографией леса, если сделать градиент из трех цветов – зеленого, красного и оранжевого. 

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

Бонус: цветокоррекция как в кино

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

1. Подготовьте кадр из фильма и откройте его в Фотошопе. Я выбрала знаменитую сцену из «Матрицы». 
2. В другом окне я открыла фотографию, которую буду превращать в кадр. Не забудьте растрировать слой (щелкните правой кнопкой мыши по слою и выберите нужный пункт). 
3. Перейдите по вкладкам меню «Изображение» – «Коррекция» – «Подобрать цвет» (Match color).  
4. В пункте «Источник» выберите ваш кадр. Он обязательно должен быть открыт в другом окне.
5. Покрутите параметры изображения, чтобы сделать наиболее похожий эффект. 
6. Уточните оттенки, используя настройки кривых или уровней, как я показывала выше. Я чуть-чуть добавила контраста, чтобы темные участки были еще темнее. Добиваться совершенства можно целую вечность, а меня этот результат вполне устроил. Таким же способом можно брать за основу не только кадры из кино, а любые фото, которые вам нравятся.

Только посмотрите, кот в кино вместе с Нео!

Заключение

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

Применение стилей и цветов — Интерфейсы веб API

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

До сих пор мы видели только методы рисования контекста. Если мы хотим применить цвета к фигуре, то есть два важных свойства, которые мы можем использовать: fillStyle и strokeStyle.

fillStyle = color

Устанавливает стиль для фона фигур.

strokeStyle = color

Устанавливает стиль контура фигуры. 

color может быть цветом, (строка, представленная в CSS <color>), градиентом или паттерном. Градиенты и паттерны мы рассмотрим позже. По умолчанию цвет фона и контура  — чёрный (значение CSS цвета  #000000).

На заметку: Когда вы устанавливаете  значения strokeStyle и/или fillStyle, то новое значение становится стандартным для всех фигур, которые будут нарисованы с этого момента. Когда вам нужен другой цвет, вы должны перезаписать значение в fillStyle или в strokeStyle для каждой фигуры.

Чтобы строка color считалась валидной, она должна соответствовать CSS <color>. Далее приведены примеры того, как можно по-разному задать один и тот же цвет. 

ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

Пример

В этом примере мы опять воспользуемся двойным циклом, чтобы нарисовать сетку из прямоугольников, каждый из которых имеет свой цвет. Окончательное изображение должно иметь вид, как показано на скриншоте. Здесь не происходит ничего сверхъестественного. Мы используем две переменные i и j для генерации уникального RGB цвета для каждого квадрата и изменяем только красные и зелёные значения. Синий канал представляет собой фиксированное значение. Путём изменения каналов вы можете генерировать всю палитру. Увеличив количество шагов вы можете достигнуть такого вида палитры, какая используется в Photoshop.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (var i=0;i<6;i++){
    for (var j=0;j<6;j++){
      ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
                       Math.floor(255-42.5*j) + ',0)';
      ctx.fillRect(j*25,i*25,25,25);
    }
  }
}

Результат выглядит так:

Пример

Этот пример похож на предыдущий, но мы используем свойство strokeStyle чтобы изменить цвета очертаний фигур. Так же мы используем метод arc() для рисования окружностей вместо квадратов.

  function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    for (var i=0;i<6;i++){
      for (var j=0;j<6;j++){
        ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
                         Math.floor(255-42.5*j) + ')';
        ctx.beginPath();
        ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
        ctx.stroke();
      }
    }
  }

Результат выглядит так:

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

globalAlpha = transparencyValue

Для применения, указывается значения прозрачности для всех будущих фигур, что будут нарисованы на canvas. Значение полупрозрачности могут быть между 0.0 (полная прозрачность) и 1.0 (полная непрозрачность). Значение 1.0 (полная непрозрачность) установлено по умолчанию.

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

Так как свойства strokeStyle и fillStyle принимают цветовые значения rgba через CSS, мы можем использовать следующее обозначение  для назначения прозрачных цветов.

ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.fillStyle = "rgba(255,0,0,0.5)";

Функция rgba() похожа на функцию rgb(), но имеет один дополнительный параметр. Последний параметр устанавливает значение прозрачности для конкретного цвета. Действующий диапазон значений находится между 0.0 (полная прозрачность) и 1.0 (полная непрозрачность).

Пример

В данном примере мы нарисуем фон и четыре квадрата с различными цветами.  Сверху изображения будет выведен набор полупрозрачных кругов. Установим свойство globalAlpha значением 0.2, которое будет использовано для всех последующих форм. Каждый шаг цикла рисует круг с большим радиусом. По окончанию получим радиальный градиент. Накладывая ещё больше кругов друг на друга, мы фактически сможем уменьшить прозрачность ранее нарисованных кругов. Увеличив счётчик итераций, при этом рисуя ещё круги, мы сможем добиться исчезновение центра изображения.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  
  ctx.fillStyle = '#FD0';
  ctx.fillRect(0,0,75,75);
  ctx.fillStyle = '#6C0';
  ctx.fillRect(75,0,75,75);
  ctx.fillStyle = '#09F';
  ctx.fillRect(0,75,75,75);
  ctx.fillStyle = '#F30';
  ctx.fillRect(75,75,75,75);
  ctx.fillStyle = '#FFF';

  
  ctx.globalAlpha = 0.2;

  
  for (i=0;i<7;i++){
    ctx.beginPath();
    ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
    ctx.fill();
  }
}

Пример использования

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

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  
  ctx.fillStyle = 'rgb(255,221,0)';
  ctx.fillRect(0,0,150,37.5);
  ctx.fillStyle = 'rgb(102,204,0)';
  ctx.fillRect(0,37.5,150,37.5);
  ctx.fillStyle = 'rgb(0,153,255)';
  ctx.fillRect(0,75,150,37.5);
  ctx.fillStyle = 'rgb(255,51,0)';
  ctx.fillRect(0,112.5,150,37.5);

  
  for (var i=0;i<10;i++){
    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
    for (var j=0;j<4;j++){
      ctx.fillRect(5+i*14,5+j*37.5,14,27.5);
    }
  }
}

Есть несколько свойств, которые позволяют нам стилизовать линии.

lineWidth = value

Устанавливает ширину линий, рисуемых в будущем.

lineCap = type

Устанавливает внешний вид концов линий.

lineJoin = type

Устанавливает внешний вид «углов», где встречаются линии.

miterLimit = value

Устанавливает ограничение на митру, когда две линии соединяются под острым углом, чтобы вы могли контролировать её толщину.

getLineDash()

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

setLineDash(segments) (en-US)

Устанавливает текущий пунктир линии.

lineDashOffset = value

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

Вы лучше поймёте, что они делают, глядя на приведённые ниже примеры.

Пример

Это свойство задаёт толщину текущей строки. Значения должны быть положительными. По умолчанию для этого значения установлено 1.0 единицы.

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

В приведённом ниже примере 10 прямых линий рисуются с увеличением ширины линий. Линия в крайнем левом углу — 1.0 единицы. Тем не менее, толщина левой и всех других линий нечётной ширины не выглядят чёткими из-за позиционирования пути.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (var i = 0; i < 10; i++){
    ctx.lineWidth = 1+i;
    ctx.beginPath();
    ctx.moveTo(5+i*14,5);
    ctx.lineTo(5+i*14,140);
    ctx.stroke();
  }
}

Получение чётких строк требует понимания путей сглаживания. На рисунках ниже представлена сетка координат холста. Квадраты между сетками являются фактическими экранными пикселями. В первом изображении сетки ниже прямоугольник от (2, 1) до (5, 5) заполняется. Вся область между ними (светло-красный) падает на границы пикселей, поэтому полученный заполненный прямоугольник будет иметь чёткие края.

Если вы рассмотрите путь от (3, 1) до (3, 5) с толщиной строки 1.0, вы получите ситуацию во втором изображении. Фактическая заполняемая область, (синяя), распространяется только наполовину в пикселях по обе стороны пути. Приблизительно это означает, что частично затенённые пиксели приводят к заполнению всей области (светло-голубой и синей) цветом, только наполовину темным, чем фактический цвет штриха. Это то, что происходит с линией шириной 1.0 в предыдущем примере кода.

Чтобы исправить это, вы должны быть более точными при создании пути. Зная, что линия шириной 1.0 занимает половину единицы по обе стороны пути, создание пути от (3.5, 1) до (3.5, 5) приведёт к ситуации в третьем изображении — ширина линии 1.0 закончится верно, точно заполняя вертикальную линию с одним пикселем.

Примечание: Имейте в виду, что в нашем примере с вертикальной линией позиция Y по-прежнему ссылается на целочисленную позицию сетки — иначе мы увидели бы пиксели с половинным охватом в конечных точках (также обратите внимание, что это поведение зависит от текущего стиля lineCap,  значение по умолчанию — butt; вы можете вычислить согласованные штрихи с полупиксельными координатами для линий с нечётной шириной, установив стиль lineCap в square, чтобы внешняя граница вокруг конечной точки линии автоматически расширялась, охватывая весь пиксель в точку).

Также обратите внимание, что затронуты только начальные и конечные  точки пути: если путь закрыт с помощью closePath(), — нет начальной и конечной точки; вместо этого все конечные точки в пути подключены к их прикреплённому предыдущему и следующему сегментам и при текущей настройке стиля lineJoin в значении по умолчанию — miter, с эффектом автоматического расширения внешних границ подключённых сегментов до их точки пересечения — обработанный ход будет точно покрывать полные пиксели с центром в каждой конечной точке, если эти связанные сегменты горизонтальны и/или вертикальны). См. следующие два раздела, демонстрирующие эти дополнительные стили.

Для линий с чётной шириной каждая половина заканчивается как целое количество пикселей, поэтому вам нужен путь, который находится между пикселями (то есть (3,1) — (3,5)), вместо середины пикселей.

Хотя это и необычно, когда изначально работаешь с масштабируемой 2D-графикой, обращая внимание на сетку пикселей и положение путей, но вы убедитесь, что ваши рисунки будут выглядеть правильно, независимо от масштабирования или любых других преобразований. Вертикальная линия ширины 1,0, построенная таким образом, станет чёткой 2-пиксельной линией при увеличении на 2 и появится в правильном положении.

Пример

Свойство lineCap определяет, как выводятся конечные точки каждой строки. Для этого свойства есть три возможных значения: butt, round и square. По умолчанию для этого свойства установлено значение butt.

butt

Концы линий соответствуют крайним точкам.

round

Концы линий округлены.

square

Концы линий описаны квадратом с равной шириной и половиной высоты толщины линии.

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

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

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var lineCap = ['butt','round','square'];

  
  ctx.strokeStyle = '#09f';
  ctx.beginPath();
  ctx.moveTo(10,10);
  ctx.lineTo(140,10);
  ctx.moveTo(10,140);
  ctx.lineTo(140,140);
  ctx.stroke();

  
  ctx.strokeStyle = 'black';
  for (var i=0;i<lineCap.length;i++){
    ctx.lineWidth = 15;
    ctx.lineCap = lineCap[i];
    ctx.beginPath();
    ctx.moveTo(25+i*50,10);
    ctx.lineTo(25+i*50,140);
    ctx.stroke();
  }
}

Пример

Свойство lineJoin определяет, как соединяются два сегмента (линий, дуг или кривых) с ненулевой длиной в форме (вырожденные сегменты с нулевой длиной, заданные конечные точки и контрольные точки находятся точно в том же положении — пропущены).

Для этого свойства есть три возможных значения: round, bevel и miter. По умолчанию для этого свойства установлено значение miter. Обратите внимание, что настройка lineJoin не действует, если два связанных сегмента имеют одно и то же направление, потому что в этом случае не будет добавлена ​​область соединения.

round

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

bevel

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

miter

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

В приведённом ниже примере показаны три разных пути, демонстрирующие каждый из этих трёх свойств lineJoin; результат — выше. 

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var lineJoin = ['round','bevel','miter'];
  ctx.lineWidth = 10;
  for (var i=0;i<lineJoin.length;i++){
    ctx.lineJoin = lineJoin[i];
    ctx.beginPath();
    ctx.moveTo(-5,5+i*40);
    ctx.lineTo(35,45+i*40);
    ctx.lineTo(75,5+i*40);
    ctx.lineTo(115,45+i*40);
    ctx.lineTo(155,5+i*40);
    ctx.stroke();
  }
}

Демонстрация свойства

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

Свойство miterLimit определяет, как далеко можно установить внешнюю точку соединения из внутренней точки подключения. Если две линии превышают это значение, вместо этого получается привязка конуса. Обратите внимание, что максимальная длина митра является произведением ширины линии, измеренной в текущей системе координат, значением этого свойства miterLimit (значение по умолчанию 10,0 в HTML <canvas>), поэтому miterLimit может устанавливаться независимо от текущей шкалы дисплея или любых аффинных преобразований путей: она влияет только на эффективно визуализированную форму рёбер линии.

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

• miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )
• Предел митры по умолчанию, равный 10,0, разделит все митры углов, острее примерно 11 градусов.
• Предел митры, равный √2 ≈ 1.4142136 (rounded up) сгладит миты для всех острых углов, поддерживая митры только для тупых или прямых углов.
• Предел митры, равный 1,0, действителен, но отключит все миты.
• Значения ниже 1.0 являются недопустимыми для предела митры.

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

Если вы укажете в этой демонстрации значение miterLimit ниже 4.2, ни один из видимых углов не присоединится к расширению митры, но только с небольшим скосом рядом с синими линиями; с отметкой miterLimit выше 10, большинство углов в этой демонстрации должны соединяться с митрой, удалённой от синих линий, высота которой уменьшается между углами слева направо, потому что они соединяются с растущими углами; с промежуточными значениями углы с левой стороны будут соединяться только с скосом рядом с синими линиями, а углы с правой стороны с удлинителем митры (также с уменьшающейся высотой).

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  
  ctx.clearRect(0,0,150,150);

  
  ctx.strokeStyle = '#09f';
  ctx.lineWidth   = 2;
  ctx.strokeRect(-5,50,160,50);

  
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 10;

  
  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
  } else {
    alert('Value must be a positive number');
  }

  
  ctx.beginPath();
  ctx.moveTo(0,100);
  for (i=0;i<24;i++){
    var dy = i%2==0 ? 25 : -25 ;
    ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
  }
  ctx.stroke();
  return false;
}

Использование штрихов

Метод setLineDash и свойство lineDashOffset задают шаблон штрихов для линий. Метод setLineDash принимает список чисел, который определяет расстояния для попеременного рисования линии и разрыва, а свойство lineDashOffset устанавливает смещение, с которого начинается шаблон.

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

var ctx = document.getElementById('canvas').getContext('2d');
var offset = 0;

function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ctx.setLineDash([4, 2]);
  ctx.lineDashOffset = -offset;
  ctx.strokeRect(10,10, 100, 100);
}

function march() {
  offset++;
  if (offset > 16) {
    offset = 0;
  }
  draw();
  setTimeout(march, 20);
}

march();

Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a CanvasGradient object by using one of the following methods. We can then assign this object to the fillStyle or strokeStyle properties.

createLinearGradient(x1, y1, x2, y2)

Creates a linear gradient object with a starting point of (x1, y1) and an end point of (x2, y2).

createRadialGradient(x1, y1, r1, x2, y2, r2) (en-US)

Creates a radial gradient. The parameters represent two circles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2, y2) with a radius of r2.

For example:

var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);

Once we’ve created a CanvasGradient object we can assign colors to it by using the addColorStop() method.

gradient.addColorStop(position, color) (en-US)

Creates a new color stop on the gradient object. The position is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the color argument must be a string representing a CSS <color>, indicating the color the gradient should reach at that offset into the transition.

You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.

var lineargradient = ctx.createLinearGradient(0,0,150,150);
lineargradient.addColorStop(0, 'white');
lineargradient.addColorStop(1, 'black');

Пример

In this example, we’ll create two different gradients. As you can see here, both the strokeStyle and fillStyle properties can accept a canvasGradient object as valid input.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  
  var lingrad = ctx.createLinearGradient(0,0,0,150);
  lingrad.addColorStop(0, '#00ABEB');
  lingrad.addColorStop(0.5, '#fff');
  lingrad.addColorStop(0.5, '#26C000');
  lingrad.addColorStop(1, '#fff');

  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
  lingrad2.addColorStop(0.5, '#000');
  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');

  
  ctx.fillStyle = lingrad;
  ctx.strokeStyle = lingrad2;

  
  ctx.fillRect(10,10,130,130);
  ctx.strokeRect(50,50,50,50);

}

The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn’t matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won’t be a problem.

In the second gradient, we didn’t assign the starting color (at position 0.0) since it wasn’t strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.

Пример

In this example, we’ll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the «classic» radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  
  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
  radgrad.addColorStop(0, '#A7D30C');
  radgrad.addColorStop(0.9, '#019F62');
  radgrad.addColorStop(1, 'rgba(1,159,98,0)');

  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
  radgrad2.addColorStop(0, '#FF5F98');
  radgrad2.addColorStop(0.75, '#FF0188');
  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');

  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
  radgrad3.addColorStop(0, '#00C9FF');
  radgrad3.addColorStop(0.8, '#00B5E2');
  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');

  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
  radgrad4.addColorStop(0, '#F4F201');
  radgrad4.addColorStop(0.8, '#E4C700');
  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');

  
  ctx.fillStyle = radgrad4;
  ctx.fillRect(0,0,150,150);
  ctx.fillStyle = radgrad3;
  ctx.fillRect(0,0,150,150);
  ctx.fillStyle = radgrad2;
  ctx.fillRect(0,0,150,150);
  ctx.fillStyle = radgrad;
  ctx.fillRect(0,0,150,150);
}

In this case, we’ve offset the starting point slightly from the end point to achieve a spherical 3D effect. It’s best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.

The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn’t very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient #019F62 = rgba(1,159,98,1).

В одном из предыдущих примеров мы использовали несколько циклов, чтобы создать шаблон из повторяющихся изображений. Однако, есть более простой способ сделать подобное — метод createPattern().

createPattern(image, type) (en-US)

Создаёт и возвращает новый canvas объект — шаблон (pattern). image — CanvasImageSource (en-US) (то есть HTMLImageElement, другой холст, элемент <video> или подобный  объект. type — строка, указывающая, как использовать image.

Тип указывает, как использовать image для создания шаблона и должен быть одним из следующих значений:

repeat

Повторяет изображение в вертикальном и горизонтальном направлениях.

repeat-x

Повторяет изображение по горизонтали, но не по вертикали.

repeat-y

Повторяет изображение по вертикали, но не по горизонтали.

no-repeat

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

Мы используем этот метод, чтобы создать CanvasPattern объект, который очень похож на методы градиента, рассмотренные ранее. Как только мы создали шаблон, мы можем назначить ему свойства fillStyle или strokeStyle. Например:

var img = new Image();
img.src = 'someimage.png';
var ptrn = ctx.createPattern(img,'repeat');

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

Пример

In this last example, we’ll create a pattern to assign to the fillStyle property. The only thing worth noting is the use of the image’s onload handler. This is to make sure the image is loaded before it is assigned to the pattern.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  
  var img = new Image();
  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
  img.onload = function(){

    
    var ptrn = ctx.createPattern(img,'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0,0,150,150);

  }
}

Using shadows involves just four properties:

shadowOffsetX = float (en-US)

Indicates the horizontal distance the shadow should extend from the object. This value isn’t affected by the transformation matrix. The default is 0.

shadowOffsetY = float (en-US)

Indicates the vertical distance the shadow should extend from the object. This value isn’t affected by the transformation matrix. The default is 0.

shadowBlur = float (en-US)

Indicates the size of the blurring effect; this value doesn’t correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

shadowColor = color (en-US)

A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.

The properties shadowOffsetX and shadowOffsetY indicate how far the shadow should extend from the object in the X and Y directions; these values aren’t affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.

The shadowBlur property indicates the size of the blurring effect; this value doesn’t correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

The shadowColor property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.

Пример текста с тенью

This example draws a text string with a shadowing effect.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.shadowOffsetX = 2;
  ctx.shadowOffsetY = 2;
  ctx.shadowBlur = 2;
  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

  ctx.font = "20px Times New Roman";
  ctx.fillStyle = "Black";
  ctx.fillText("Sample String", 5, 30);
}

We will look at the font property and fillText method in the next chapter about drawing text.

When using fill (or clip (en-US) and isPointinPath (en-US)) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersetcs itself or is nested.

Two values are possible:

In this example we are using the evenodd rule.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.beginPath();
  ctx.arc(50, 50, 30, 0, Math.PI*2, true);
  ctx.arc(50, 50, 15, 0, Math.PI*2, true);
  ctx.fill("evenodd");
}

Как изменить цвет освещения в фотошопе. Как добавить интересное освещение в фотошоп

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

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

Идем через меню в (Изображение — Коррекция — Тени/Света).

Щелкнем на квадратике возле Show More Options (Дополнительные параметры), палитра откроет скрытые функции.

Ставим следующие настройки:

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

Палитра Shadow/Heights (Света/Тени)

Секция Shadows (Тени)

Amount (Количество) – количество света в тенях. Движение регуляторов: больше – меньше.

Total Width (Ширина тонового диапазона) – движение регуляторов изменяет ширину охвата теней.

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

Radius (Радиус) – эта функция контролирует контрастность теней и плавность их переходов.

Секция Highlight (Света)

Amount (Количество) — функция затемнения светлых участков.

Total Width (Ширина тонового диапазона) — параметр, определяющий диапазон пикселей, подвергающихся воздействию команды.

Следующая секция Adjustments (Цветокоррекция)

Midtone Contrast (Контрастность средних тонов) — Чем больше его значение, тем выше контраст изображения средних оттенков.

Black Clip и White Clip (Усечение теней, Усечение светов) – параметры, которые задают максимальные значения, определяющие насколько темными (или светлыми) должны быть пиксели на изображении.

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

Возвращаемся к уроку

Создадим дубликат слоя.

Поставим верхнему слою режим наложения Soft Light (Мягкий свет). Затем идем в (Фильтр — Размытие — Размытие по Гауссу) и ставим такие настройки:

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

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

Финальное изображение

Шаг 1. Подготовка фона

Давайте начнем с создания нового документа в Photoshop. Перейдите в меню File> New (Файл>Новый). Установите Width (Ширина) 600px, Height (Высота) 900px и Resolution (Разрешение) 72Pixels /inch. Нажмите OK.

Возьмите Paint Bucket Tool (Заливка) (G) и залейте фоновый слой темно-синим цветом. Я использовала #2b2b32.

Шаг 2. Размещение библиотеки

Загрузите изображение библиотеки, указанное в начале урока и перетащите его на ваш рабочий холст. Поместите его выше фонового слоя и назовите этот слой Библиотека Free Transformation (Свободная трансформация) и подгоните изображение под размер холста. Для сохранения пропорций удерживайте клавишу Shift. Нажмите клавишу Enter после того, как закончите, чтобы применить изменения.

Шаг 3. Снижение насыщенности

Hue / Saturation Saturation (Насыщенность) -40. Чтобы эффект воздействовал только на слой Библиотека , создайте обтравочную маску из корректирующего слоя, нажав на значок в нижней части палитры корректирующего слоя (см. ниже).

Давайте взглянем на порядок слоев

Шаг 4. Добавление пола

В следующих шагах мы добавим изображение модели в нижний левый угол. Поэтому вам не нужно размещать там пол, но остается пустое пространство в правом нижнем углу. Исправим это. Возьмите Lasso Tool (Лассо) (L) и выделите пол (см рисунок ниже).

Нажмите Ctrl + J, чтобы скопировать и вставить выделение. Поместите этот новый слой поверх всех остальных слоев и назовите его Пол . Возьмите инструмент Move Tool (Перемещение) (V) и переместите его на то место, которое указано на следующем рисунке.

Шаг 5. Насыщенность пола

Вам нужно понизить насыщенность пола точно так же, как вы делали это с библиотекой. Добавьте новый корректирующий слой Hue/Saturation (Цветовой тон/Насыщенность) и установите значение
Saturation (Насыщенность) -40. Создайте обтравочную маску из этого слоя, чтобы он влиял только на слой, расположенный ниже него (= Пол). После того как вы закончите, ваша композиция должна выглядеть следующим образом.

Шаг 6. Затемнение комнаты

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

Шаг 7. Добавление модели

Загрузите изображение модели. Поместите его поверх всех слоев и назовите слой Модель . Нажмите Ctrl+T, чтобы активировать Free Transformation (Свободная трансформация) и измените размер на соответствующий. Для сохранения пропорций не забывайте удерживать клавишу Shift. Нажмите клавишу Enter после того, как закончите, чтобы применить изменения.

Шаг 8. Коррекция модели

Нам нужно, чтобы модель лучше сочеталась с остальным изображением. Добавьте слой-маску к слою Модель . Возьмите Brush Tool (Кисть) (B). Установите Hardness (Жесткость) кисти на 50%, а Opacity (Непрозрачность) 100%. Выберите черный цвет и начинайте рисовать на сером фоне, заставляя его исчезнуть (Убедитесь, что маска слоя активна, щелкнув по нему). Вы должны получить что-то похожее на рисунке ниже. Вам не нужно быть точным в области женских волос. Эта область будет покрыта другими волосами в следующих шагах.

Шаг 9. Добавление юбки

Загрузите изображение юбки на рабочий холст, расположите его поверх всех слоев и назовите Юбка . К счастью это изображение уже отделено от фона. Нажмите Ctrl+T, чтобы активировать Free Transformation (Свободная трансформация) и поверните юбку так, как показано на следующем изображении.

Шаг 10 — Создание прически

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

Шаг 11. Коррекция прически

Теперь пришло время аккуратно соединить каждую часть волос с остальной частью прически. Переходя от слоя к слою, добавьте слой-маску каждому слою, а затем черной кистью закрасьте края волос, которые вы хотите скрыть. Используйте те же настройки кисти, как и раньше: Hardness (Жесткость) 50%, Opacity (Непрозрачность) 100%. Взгляните на следующий рисунок, чтобы понять, как нужно работать.

Шаг 12. Коррекция платья

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

Нажмите Ctrl+A на клавиатуре, чтобы выделить все изображение. Нажмите Ctrl + Shift + C, чтобы скопировать его объединение и затем нажмите Ctrl + V, чтобы вставить его. Поместите этот новый слой поверх всех слоев и назовите его Ретушь платья . Добавьте слой-маску к этому новому слою и заполните его черным цветом, чтобы сделать его невидимым. Возьмите Brush Tool (Кисть) (B). Установите Hardness (Жесткость) 0% и Opacity (Непрозрачность) 10%. Выберите белый цвет и тщательно закрасьте полупрозрачные области платья. Посмотрите на рисунок ниже, чтобы получить представление, как вы должны рисовать. Эти области выделены красным цветом.

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

Шаг 13. Добавление тумана

На этом этапе мы добавим немного тумана позади модели, чтобы создать более волшебную атмосферу. Загрузите кисти Туман и установите их в Photoshop. Добавьте новый пустой слой под слоем Модель . Возьмите Brush Tool (Кисть) (B), выберите одну из кистей, которые вы только что установили, установите Opacity (Непрозрачность) 30% и укажите светло-желтый цвет (#e4e1c9). Теперь нарисуйте очень нежный туман. Взгляните на изображение ниже, чтобы получить представление, как все должно выглядеть.

Шаг 14. Свет позади прически

Чтобы отделить прическу от фона, в этом шаге сделайте область светлее. Добавьте новый корректирующий слой Curves (Кривые) под слоем Модель и установите настройки, как показано ниже.

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

Шаг 15. Окрашивание

Добавьте новый корректирующий слой Gradient Map (Карта градиента) поверх всех слоев и установите градиент, как показано ниже.

Чтобы соединить этот слой аккуратно с остальной частью изображения, поменяйте режим наложения на Color (Цветность) и уменьшите Opacity (Непрозрачность) до 20%.

Шаг 16. Добавление пластичности

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

Возьмите Brush Tool (Кисть) (B), выберите мягкую круглую кисть, укажите черный цвет и установите Opacity (Непрозрачность) 10%. Закрасьте тени на картине, чтобы сделать их темнее. После того как вы закончили, переключитесь на белый цвет и закрасьте блики. Чтобы получить более полное представление о том, где вы должны закрашивать, давайте взглянем на следующий рисунок. Вы должны закрасить черным цветом область выделенную красным цветом и пройтись белым поверх синих областей.

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

Шаг 17. Создание интересного освещения

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

Измените режим наложения слоя Освещение на Color Dodge (Осветление основы). Возьмите мягкую круглую Brush Tool (Кисть) (B) и установите Opacity (Непрозрачность) 10%. Выберите апельсиновый цвет (# b68854) и пройдитесь по краям волос модели, лицу и платью. Пройдитесь также вокруг источника света позади модели. Не торопитесь с рисованием и создавайте световой эффект медленно, чтобы получить наиболее реалистичный результат. Взгляните на изображение ниже, чтобы понять, где нужно рисовать. Эти области выделены красным цветом.

Шаг 18. Ретуширование

Есть еще некоторые области изображения, которые должны быть светлее или темнее, чтобы получить более сбалансированную атмосферу. В этом шаге мы завершим с этим. Добавьте новый пустой слой поверх всех слоев и назовите его Ретушь Soft Light (Мягкий свет). Возьмите Brush Tool (Кисть) (B). Используйте те же настройки, что и в предыдущем шаге, только переключитесь на черный цвет. Закрашивайте области, выделенные на следующем рисунке. Как можете видеть, вы должны сделать нижнюю часть изображения и нижний правый угол немного темнее, чтобы привлечь внимание к модели. Также есть несколько слишком ярких деталей в волосах, которые должны быть немного темнее.

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

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

Шаг 19. Больше света

На этом этапе мы добавим еще больше света за моделью, чтобы создать более магическую атмосферу. Загрузите кисти Солнечные лучи и установите их в Photoshop. Добавьте новый пустой слой поверх всех слоев и назовите его Солнечные лучи . Измените режим наложения на Color Dodge (Осетление основы). Возьмите Brush Tool (Кисть) (B) из набора кистей Солнечные лучи, которые вы только что установили, укажите Opacity (Непрозрачность) 25% и ярко-оранжевый цвет (# b9a587). На изображении ниже вы можете увидеть, где должны рисовать.

Солнечные лучи не должны быть видны на лице и теле модели. Чтобы скрыть это, добавьте новую маску к этому слою. Возьмите Brush Tool (Кисть) (B), возьмите мягкую круглую кисть, выберите черный цвет и установите Opacity (Непрозрачность) 100%. Закрасьте лицо и тело, чтобы скрыть свет. После этого шага ваша композиция должна быть похожа на изображение, показанное ниже.

Шаг 20. Свет на волосах

Для того, чтобы световой эффект на волосах модели выглядел более реалистичным вам нужно прокрасить левую сторону чуть больше. Добавьте новый пустой слой поверх всех слоев и назовите его Свет на волосах . Измените режим наложения на Color Dodge (Затемнение основы). Возьмите Brush Tool (Кисть) (B), выберите мягкую круглую кисть, установите Opacity (Непрозрачность) 20% и укажите ярко-оранжевый цвет. Пройдитесь по краю левой стороны волос и лицу модели. На следующем рисунке вы можете увидеть, где должны рисовать.

Шаг 21. Добавление пыли

На этом этапе мы добавим больше деталей к картинке, добавив текстуру Пыль за моделью. Это также поможет создать атмосферу старой, забытой библиотеки. Загрузите текстуру Пыль . Поместите ее в верхней части всех слоев и назовите новый слой Пыль . Нажмите Ctrl + T, чтобы активировать Free Transform (Свободная трансформация) и поверните текстуру влево (см. рисунок ниже). Нажмите Enter, чтобы применить изменения. Кликните правой кнопкой мыши по слою Пыль и выберите опцию Duplicate Layer (Дублировать слой). Нажмите на только что скопированный слой, нажмите Ctrl + T на клавиатуре и поверните его вправо.

Поменяйте режим обоих слоев на Screen (Экран), чтобы соединить их еще лучше с остальной частью изображения. Понизьте Opacity (Непрозрачность) текстуры слева до 40%, а Opacity (Непрозрачность) текстуры справа до 20%. Для лучшего их сочетания с остальной композицией добавьте маску слоя для них обоих. Возьмите Brush Tool (Кисть) (B), выберите черный цвет и установите Opacity (Непрозрачность) 40%. Закрасьте модель и ее платье, чтобы скрыть там текстуру. Прокрасьте также края текстуры, чтобы создать плавные переходы.

Шаг 22. Финальное затемнение и осветление

На этом этапе вы будете использовать одну текстуру, чтобы затемнить и осветлить ваше изображение. Скачайте текстуру Освещение . Поместите ее поверх всех слоев и назовите его Затемнение . Поменяйте режим наложения на Subtract (Вычитание) с Opacity (Непрозрачность) 15%. Правой кнопкой мыши кликните по слою и выберите опцию Duplicate Layer (Дублировать слой). Поместите этот новый слой поверх всех слоев и назовите его Осветление . Измените режим наложения на Subtract (Вычитание), чтобы осветлить. Установите Opacity (Непрозрачность) 5%.

Эффект света на изображении

В прошлом видео уроке мы познакомились с фильтром «Lightning Effects» — «Эффекты освещения» и рассмотрели его параметры. В этом уроке мы рассмотрим применение данного фильтра на практике, создав несколько типов освещения на изображении .

Откройте диалоговое окно настроек фильтра «Lightning Effects» — «Эффекты освещения» , перейдя на вкладку «Filter» — «Фильтр» и выбрав соответствующую команду в списке «Render» — «Рендеринг».

Для начала попробуем воссоздать освещение лампой накаливания. Для этого раскройте выпадающий список в группе «Light Type» «Omni» — «Лампочка».

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

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

После чего установите параметр «Intensity» — «Интенсивность» в соответствии с необходимой вам интенсивность света лампы.

В качестве цвета выберите ненасыщенный оттенок желтого цвета и нажмите «ОК».

После чего примените эффект освещения к изображению также нажав «ОК» в диалоговом окне настроек фильтра.

Как вы можете заметить, желаемый эффект был достигнут.

Теперь настроим параметры дневного света, применив его к другому изображению. Для этого также откройте окно настройки фильтра «Lightning Effects» — «Эффекты освещения» .

Для начала раскройте выпадающий список в группе «Light Type» — «Источник» и выберите параметр «Directional» — «Дневной свет» .

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

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

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

Как вы видите, создался эффект яркого солнечного дня.

Теперь рассмотрим, как настроить эффект света прожектора. Для этого в диалоговом окне настроек фильтра выберите из выпадающего списка в группе «Light Type» — «Источник» параметр «Spotlight» — «Прожектор».

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

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

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

Чтобы установить интенсивность света прожектора и отрегулировать степень заполнения эллипса светом, изменяйте параметр «Intecity» — «Интенсивность». Для контроля над тем, какая часть эллипса заполняется светом, используйте ползунок параметра «Focus» — «Фокус».

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

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

Таким образом, с помощью фильтра «Lightning Effects» — «Эффекты освещения» вы сможете задавать различные источники освещения, что позволит создавать правильные экспозицию и профессионально обрабатывать фотографии.

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

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

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

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

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

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

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

На оригинале изображения нет дорожного знака, я добавил его в Photoshop. Предположив, что у меня нет отправной точки, которая помогла бы мне решить, где расположен основной источник света (в данном случае, солнце), я создал тень дорожного знака, ориентируясь на тени от мужчины и девочки. Я создал ее под таким же углом и с такой же непрозрачностью. Если оригинальная тень, которую вы используете в качестве ориентира, размыта, вы можете применить к тени Размытие по Гауссу (Gaussian Blur) , чтобы сделать ее максимально похожей на оригинальную тень.

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

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

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

Способ, с помощью которого я создаю тени, которые вы видите на изображении ниже, таков: я беру Кисть (Brush) среднего размера (зависит от размера коллажа), устанавливаю ее Нажим (Flow) в районе 30%, а Непрозрачность (Opacity) кисти — в районе 25%. Затем я начинаю закрашивать края объекта в местах, где он соприкасается с поверхностью. Закрашиваю края, так сказать, изнутри. Посмотрите на изображение ниже для получения лучшего представления.

Это так называемая мной соприкасающаяся тень «до и после». Я не знаю ее формального названия.

Мягкая тень
Этот тип тени, возможно, даже более важный, нежели соприкасающаяся тень, поскольку она более заметна и, если вы ее создадите правильно, возможно, вам и не понадобится соприкасающаяся тень, о которой мы говорили выше.
В данном случае вы можете быть чуточку свободнее, поскольку здесь не нужно быть слишком точным. Просто возьмите мягкую кисть, установите значение Жесткость (Hardness) в районе 20-45% и закрашивайте участки вокруг объекта, с которым вы работаете. Не забывайте про то, что чем дальше вы перемещаетесь от объекта, тем менее непрозрачной будет тень, поскольку она увядает.

Посмотрите на изображение ниже. Я нарисовал тени с помощью большой мягкой кисти с низким значением Непрозрачности (Opacity) (20% или около того). Как видите, невозможно четко определить фигуру девушки в тени, поскольку она слишком размыта, но определенно добавляет реалистичности к общей сцене. Также обратите внимание на то, как тень теряет интенсивность по мере отдаления от объекта. Это все было создано с помощью мыши, а не планшета.

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

Способ 1
Один из способов сделать это — дублировать слой, затем уменьшить его Яркость (Lightness) до 0. Затем, поместите дублированный слой под слоем с оригиналом и переименуйте его в Shadow (Тень), если хотите.
Я уже сделал небольшой демо ролик о том, как создавать тени такого рода. Вы можете посмотреть его . После этого, воспользуйтесь инструментом Искажение (Distort), чтобы скорректировать тень на свой вкус. Вы можете применить Размытие по Гауссу (Gaussian Blur), если захотите размыть тень, а также можете скорректировать Непрозрачность (Opacity) слоя.

Затем я применил немного Размытие по Гауссу (Gaussian Blur), уменьшил Непрозрачность (Opacity) слоя и использовал Маску слоя (Layer Mask) и Градиент (Gradient), чтобы сделать тень увядающей. Затем, с помощью Искажения (Distort) (Ctrl+T или меню Редактирование (Edit) — Трансформация (Transform) — Искажение (Distort)) я немного ее наклонил.

Способ 2
Второй способ достижения того же результата, что на изображении выше, заключается в использовании Стилей слоя (Layer Style s).Я полагаю, что он более легкий и более быстрый. Я покажу вам реально классный способ, который многие не знают.

Просто откройте окно Стилей слоя (Layer Styles) (в моем примере слой Tower (Башня)) и добавьте Тень (Drop Shadow). Наиболее важный параметр здесь — Размер (Size) тени. С помощью этого параметра вы контролируете степень размытия вашей тени.
Увеличьте Непрозрачность (Opacity) до 100%, поскольку потом вы сможете по желанию уменьшить ее с помощью слайдера Непрозрачности (Opacity) в палитре слоев. Я использовал высокое значение Смещения (Distance) в данном примере, таким образом, чтобы можно было видеть лучше создаваемую тень, но этот параметр не важен.

Теперь самое интересное. Вы можете превратить эту тень в отдельный слой. Кликните правой кнопкой мыши по названию эффекта тени для слоя в палитре слоев и выберите Создать слой (Create Layer).

Это действие создает новый слой с теми же настройками Режима смешивания (Blend Mode) и Непрозрачности (Opacity). Вы можете проделывать это с любым эффектом. После чего, Отразите (Flip) слой и при необходимости уменьшите его Непрозрачность (Opacity). Повторите действия для наклона тени, изложенные выше.

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

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

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

Затем я создал заключительное свечение, используя фильтр Блик (Lens Flare) в меню Фильтр (Filter) — Рендеринг (Rendering) — Блик (Lens Flare). Я создал квадратное выделение, залил его черным цветом на новом слое и добавил блик в центре этого черного квадрата. Затем изменил его цвет на желтый с помощью Корректирующего слоя (Adjustment Layer) Цветовой тон/ Насыщенность (Hue/ Saturation) и изменил режим смешивания слоя на Экран/Осветление (Screen), чтобы скрыть черные участки квадрата.

Когда источник света готов, необходимо воспроизвести падающий от него свет на других объектах, таких как земля или стены. Наиболее распространенный способ для этого — использование мягкой кисти и, в данном случае, желтого цвета.
Я нашел, что режимы смешивания Осветление Основы (Color Dodge), Яркий свет (Vivid Light) и Линейный осветлитель (Добавить) (Linear Dodge (Add)) лучше всего подходят для создания световых эффектов, но, как я уже сказал, это зависит от цветов и уровней яркости вашего фона. Реалистичность освещения зависит от того, где вы его расположите.

Как видите на изображении выше, добавление света на земле придает коллажу даже большей реалистичности. Он был сделан с помощью большой мягкой кисти желтого цвета и режима смешивания Осветление Основы (Color Dodge), затем я использовал инструмент Искажение (Distort) (Ctrl+T) и сжал его по горизонтали. Благодаря добавлению освещения на стене слева, оно стало еще более реалистичным. Поэтому, как я сказал выше, все зависит от того, где вы разместите освещение. Чтобы создать освещение на стене, я просто дублировал освещение земли и отразил его.

Освещение поверхности
Еще один способ создания различного вида освещения — использование Стилей слоя (Layer Styles). Эта техника используется, когда объект освещается сбоку или сзади.
Данная техника состоит из добавления Внутреннего свечения (Inner Shadow) и использования режима смешивания, который больше подходит в той или иной ситуации.
Использование одного и того же режима смешивания не всегда работает, вам придется подбирать его. Наша цель — воссоздание света на краях объекта.

Цвет освещения зависит от того, работаете ли вы над коллажем с дневным освещением или ночной сценой. Если вы используете режимы Осветление (Dodge) или Яркий свет (Vivid Light), то вам следует использовать темные цвета, поскольку эти режимы смешивания сделают их ярче. Вам придется пробовать и ошибаться много раз прежде, чем вы найдете подходящее значение яркости. Также не обязательно, чтобы эффект был очень заметным. Даже едва уловимый эффект изменит вид вашего объекта.
Я набросал иллюстрацию того, что только что объяснил. Это грубый вариант, но он нам подходит. Посмотрите на изображение ниже. Я применил к нему Внутреннюю тень (Inner Shadow) с настройками, представленными на изображении выше.

Вот еще один пример коллажа VinternnV с сайта deviantART.

Этот способ имеет свои недостатки. Когда мы применяем настройки Внутренней тени (Inner Shadow), то он часто создает эффект освещения на нежелательных участках.
Я обычно увеличиваю значение параметра Смещение (Distance) и изменяю Угол (Angle), чтобы подстроиться под направление источника света, но даже в этом случае вы можете получить нежелательные результаты. Увеличивая настройки Размера (Size), вы получаете более размытый эффект, но обычно достаточно только тонкой линии света для того, чтобы он смотрелся хорошо. Посмотрите на изображение ниже для наглядности. Я сделал эффект очень сильным, чтобы вы могли разглядеть его лучше.

Как видите на изображении выше, результатом применения Внутреннего свечения (Inner Shadow) для создания освещения стали некоторые нежелательные эффекты. В данном примере они не смотрятся ужасно, но представим, что я не хочу, чтобы на обведенном мной участке на изображении выше был такой эффект освещения.
Как же избавиться от этого, не затрагивая участки, которые у нас в порядке? Вы не можете воспользоваться ластиком, поскольку это Стиль слоя (Layer Style). Было время, когда я имел с этим большие трудности, но в итоге я нашел решение этой проблемы.

Решение заключается в преобразовании стиля (в данном случае Внутренняя тень (Inner Shadow) в отдельный слой, как я рассказывал ранее, когда мы говорили о тенях). Держу пари, не многие люди используют этот прием в Photoshop, но он реально полезен, например, когда вы хотите использовать эффект, который уже использовался. Например, если вы хотите использовать два разных эффекта тени.

Итак, чтобы расширить возможности эффектов слоя, кликните правой кнопкой мыши по нужному эффекту и выберите Создать слой (Create Layer). Этим действием вы автоматически создаете новую обтравочную маску (clipping mask) слоя с Непрозрачностью (Opacity) и режимом смешивания, которые вы остановили для этого стиля слоя. После этого, вы можете создать маску слоя и замаскировать нежелательные участки.

Глобальное освещение
Последний вид эффекта освещения — глобальное освещение, которое я создаю с помощью фильтра Эффект освещения (Lighting Effect). Я применяю данный фильтр почти во всех своих коллажах на заключительных шагах. Этот эффект сделают ваш коллаж на 99% лучше. Это разрушающий фильтр, иными словами, как только вы примените его, он тут же изменит ваше изображение, и этот эффект нельзя будет отменить. Вы можете найти этот световой фильтр в меню Фильтр (Filter) — Рендеринг (Render) — Эффекты освещения (Lighting Effects).

Но есть неразрушающий способ применения этого фильтра, если вы конвертируете слой в Смарт-объект (Smart Object). Вы можете конвертировать обычный слой в Смарт-объект (Smart Object) в палитре слоев. Кликните правой кнопкой мыши по слою и выберите Преобразовать в Смарт-объект (Smart object). Ниже вы можете увидеть несколько примеров эффекта глобального освещения.

Пример 1

Пример 2

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

Как изменить детали линий в Photoshop | Small Business

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

Переключитесь на инструмент Adobe Photoshop Line, вложенный с прямоугольником и другими инструментами формы. На панели параметров убедитесь, что в раскрывающемся меню переключателя «Режим инструмента» в качестве текущего параметра отображается «Форма», а не «Путь» или «Пиксели». Чтобы изменить настройки существующей линии, щелкните изображение с помощью инструмента «Выбор контура».

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

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

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

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

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

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

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

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

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

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

Ссылки

Ресурсы

• Adobe Photoshop CS6 Класс в книге; Adobe Creative Team

Советы

• Когда вы вводите толщину штриха для инструмента «Линия», вы можете переопределить текущую единицу измерения, отображаемую линейками Photoshop, введя значение, за которым следует имя единицы. Ввод «1 дюйм» или «1 дюйм» дает тот же результат. Вы также можете использовать сантиметры, миллиметры, точки, картинки и пиксели. Вы можете настроить линейки для отображения процентов размеров файла, но вы не можете использовать эту единицу для ввода веса штриха.
• Ширина и высота линии изменяются при добавлении к ней обводки.
• Значок слоя для каждой фигуры, которую вы рисуете с помощью инструмента «Линия», отображает внешний вид вашей линии, включая ее цвета заливки и обводки, а не общий значок, указывающий тип содержимого на слое.
• Удерживайте клавишу «Shift», чтобы ограничить вывод инструмента «Линия» углами с шагом 45 градусов. Откройте панель «Информация», чтобы увидеть, под каким углом вы рисуете.

Предупреждения

• Нельзя добавлять стрелки к существующей строке.

Писатель Биография

Элизабет Мотт — писатель с 1983 года. Мотт имеет большой опыт написания рекламных текстов для всего, от кухонной техники и финансовых услуг до образования и туризма. Она имеет степень бакалавра искусств и магистра искусств по английскому языку в Университете штата Индиана.

Как изменить цвет формы в Photoshop — Креатив Брендана Уильямса

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

Чтобы изменить цвет формы в Photoshop, выберите слой с фигурой на панели слоев, затем нажмите U, чтобы активировать инструмент формы. На верхней панели настроек появится опция «Заливка». Щелкнув параметр «Заливка», выберите новый цвет из предоставленных образцов цвета, который будет применяться к вашей форме.

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

Как изменить цвет формы в Photoshop

Шаг 1. Создайте новый слой-фигуру

Давайте не будем забегать вперед и начнем менять цвета, прежде чем у вас появится форма!

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

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

Кроме того, вы можете нажать Shift + U , чтобы просмотреть различные параметры инструмента формы.

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

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

Шаг 2. Выберите слой-фигуру на панели слоев

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

Шаг 3. Выберите инструмент «Форма»

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

Шаг 4. Щелкните параметр «Заливка» на верхней панели настроек.

Теперь вы увидите настройки «Заливка» и «Обводка» на верхней панели настроек. Пока ваш слой-фигура выбран, вы увидите здесь отображаемые активные цвета.

Чтобы изменить общий цвет вашей формы, щелкните опцию «Заливка».

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

Если вы не видите нужный цвет, нажмите на палитру цветов в верхнем правом углу этой панели.

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

После изменения цвета заливки к вашей фигуре будет применен новый цвет!

Шаг 5. Нажмите «Обводка» на верхней панели настроек.

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

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

Шаг 6: Полюбуйтесь своими формами, новый цвет!

С помощью этих простых шагов вы теперь успешно изменили цвет вашей фигуры в Photoshop.

Как изменить цвет растрированной формы в Photoshop

Чтобы изменить цвет растеризованной формы, создайте новый слой цветовой заливки, выбрав «Слой»> «Новый слой заливки»> «Сплошной цвет» и установите желаемый цвет. Поместив слой заливки над слоем формы, добавьте обтравочную маску к слою цветовой заливки, чтобы заполнить форму новым цветом.

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

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

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

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

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

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

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

Это еще один простой способ изменить цвет фигуры в Photoshop, который пригодится при работе с растрированными формами!

Как заполнить форму градиентом в Photoshop

Чтобы залить форму градиентом в Photoshop, создайте новый слой градиентной заливки, выбрав «Слой»> «Новый слой заливки»> «Градиент».После создания градиентной заливки поместите ее над слоем с фигурой, затем щелкните правой кнопкой мыши слой с градиентом и выберите «Создать обтравочную маску», чтобы залить форму градиентом.

Давайте разберем это подробнее.

Сначала создайте слой-фигуру, используя шаги, упомянутые ранее в этой статье, если вы еще этого не сделали. Затем перейдите к Слой > Новый слой заливки> Градиент , чтобы создать новый слой градиентной заливки.

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

Сначала щелкните Редактор градиента.

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

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

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

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

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

Теперь градиент захватит весь холст, но не беспокойтесь! Обтравочные маски здесь, чтобы спасти положение. Просто щелкните правой кнопкой мыши слой градиентной заливки и выберите «Создать обтравочную маску».”

Теперь градиент будет виден только внутри слоя формы, к которому он привязан, эффективно заполняя вашу форму градиентом в Photoshop!

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

Как сделать цвет фигуры прозрачным в Photoshop

Чтобы сделать цвет заливки фигуры прозрачным в Photoshop, выберите слой-фигуру на панели «Слои», затем выберите инструмент «Фигура» (U).На верхней панели настроек нажмите на опцию «Заливка» и выберите образец белого цвета с красной линией через него. Теперь цвет заливки вашей фигуры прозрачный.

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

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

Сначала выберите слой-фигуру на панели «Слои» или создайте новую фигуру, если вы еще этого не сделали.

Теперь откройте инструмент Shape Tool, чтобы отобразить настройки формы на верхней панели.Из предложенных здесь вариантов нажмите «Заливка».

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

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

Теперь у вас остался только контур вашей фигуры, который идеально подходит для стилизации ваших изображений!

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

Счастливого редактирования,

Брендан 🙂

Применение стилей и цветов — веб-API

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

До сих пор мы видели только методы контекста рисования. Если мы хотим применить цвета к форме, мы можем использовать два важных свойства: fillStyle и strokeStyle .

fillStyle = цвет

Задает стиль заливки фигур.

strokeStyle = цвет

Задает стиль контуров фигур.

color — это строка, представляющая CSS , объект градиента или объект шаблона. Позже мы рассмотрим объекты градиента и узора. По умолчанию цвет обводки и заливки установлен на черный (значение цвета CSS # 000000 ).

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

Допустимые строки, которые вы можете ввести, должны, в соответствии со спецификацией, быть значениями CSS <цвет> . Каждый из следующих примеров описывает один и тот же цвет.

 

ctx.fillStyle = 'апельсин';
ctx.fillStyle = '# FFA500';
ctx.fillStyle = 'rgb (255, 165, 0)';
ctx.fillStyle = 'rgba (255, 165, 0, 1)';
  

A

В этом примере мы снова используем два для циклов, чтобы нарисовать сетку прямоугольников, каждый разного цвета.Полученное изображение должно выглядеть примерно так, как на скриншоте. Ничего особенного здесь не происходит. Мы используем две переменные i и j для генерации уникального цвета RGB для каждого квадрата и изменяем только значения красного и зеленого. Синий канал имеет фиксированное значение. Изменяя каналы, вы можете создавать все виды палитр. Увеличивая количество шагов, вы можете добиться чего-то похожего на цветовые палитры, которые использует Photoshop.

  function draw () {
  var ctx = документ.getElementById ('холст'). getContext ('2d');
  for (var i = 0; i <6; i ++) {
    for (var j = 0; j <6; j ++) {
      ctx.fillStyle = 'rgb (' + Math.floor (255 - 42,5 * i) + ',' +
                       Math.floor (255 - 42,5 * j) + ', 0)';
      ctx.fillRect (j * 25, i * 25, 25, 25);
    }
  }
}
  

Результат выглядит так:

A

Этот пример аналогичен приведенному выше штриху , но использует штрих для изменения цвета контуров фигур.Мы используем метод arc () , чтобы рисовать круги вместо квадратов.

  function draw () {
    var ctx = document.getElementById ('холст'). getContext ('2d');
    for (var i = 0; i <6; i ++) {
      for (var j = 0; j <6; j ++) {
        ctx.strokeStyle = 'rgb (0,' + Math.floor (255 - 42,5 * i) + ',' +
                         Math.floor (255 - 42,5 * j) + ')';
        ctx.beginPath ();
        ctx.arc (12,5 + j * 25, 12,5 + i * 25, 10, 0, Math.PI * 2, истина);
        ctx.Инсульт();
      }
    }
  }
  

Результат выглядит так:

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

globalAlpha = transparentValue

Применяет указанное значение прозрачности ко всем будущим фигурам, нарисованным на холсте. Значение должно быть от 0,0 (полная прозрачность) до 1,0 (полная непрозрачность). По умолчанию это значение равно 1.0 (полностью непрозрачно).

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

Поскольку свойства strokeStyle и fillStyle принимают значения цвета CSS rgba, мы можем использовать следующую нотацию, чтобы назначить им прозрачный цвет.

 

ctx.strokeStyle = 'rgba (255, 0, 0, 0,5)';
ctx.fillStyle = 'rgba (255, 0, 0, 0,5)';
  

Функция rgba () аналогична функции rgb () , но имеет один дополнительный параметр. Последний параметр устанавливает значение прозрачности этого конкретного цвета.Допустимый диапазон снова составляет от 0,0 (полная прозрачность) до 1,0 (полная непрозрачность).

A

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

  function draw () {
  var ctx = document.getElementById ('холст'). getContext ('2d');
  
  ctx.fillStyle = '# FD0';
  ctx.fillRect (0, 0, 75, 75);
  ctx.fillStyle = '# 6C0';
  ctx.fillRect (75, 0, 75, 75);
  ctx.fillStyle = '# 09F';
  ctx.fillRect (0, 75, 75, 75);
  ctx.fillStyle = '# F30';
  ctx.fillRect (75, 75, 75, 75);
  ctx.fillStyle = '#FFF';

  
  ctx.globalAlpha = 0,2;

  
  for (var i = 0; i <7; i ++) {
    ctx.beginPath ();
    ctx.arc (75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
    ctx.fill ();
  }
}
  

Пример использования

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

  function draw () {
  var ctx = document.getElementById ('холст'). getContext ('2d');

  
  ctx.fillStyle = 'rgb (255, 221, 0)';
  ctx.fillRect (0, 0, 150, 37,5);
  ctx.fillStyle = 'rgb (102, 204, 0)';
  ctx.fillRect (0, 37,5, 150, 37,5);
  ctx.fillStyle = 'rgb (0, 153, 255)';
  ctx.fillRect (0, 75, 150, 37,5);
  ctx.fillStyle = 'rgb (255, 51, 0)';
  ctx.fillRect (0, 112,5, 150, 37,5);

  
  for (var i = 0; i <10; i ++) {
    ctx.fillStyle = 'rgba (255, 255, 255,' + (я + 1) / 10 + ')';
    for (var j = 0; j <4; j ++) {
      ctx.fillRect (5 + я * 14, 5 + j * 37,5, 14, 27,5);
    }
  }
}
  

Есть несколько свойств, которые позволяют нам стилизовать линии.

lineWidth = значение

Устанавливает толщину линий, рисуемых в будущем.

lineCap = тип

Устанавливает внешний вид концов линий.

lineJoin = type

Задает внешний вид «углов» в местах пересечения линий.

miterLimit = значение

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

getLineDash ()

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

setLineDash (сегменты)

Устанавливает текущий образец штриховки.

lineDashOffset = значение

Указывает, где начать штриховой массив в строке.

Вы лучше поймете, что они делают, посмотрев на приведенные ниже примеры.

A

Это свойство устанавливает текущую толщину линии. Значения должны быть положительными числами. По умолчанию это значение установлено на 1.0 единиц.

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

В приведенном ниже примере нарисовано 10 прямых линий с увеличивающейся шириной. Линия в крайнем левом углу имеет ширину 1,0 единицы. Однако крайняя левая и все остальные линии толщины с нечетной целочисленной шириной не кажутся четкими из-за расположения контура.

  function draw () {
  var ctx = document.getElementById ('холст'). getContext ('2d');
  for (var i = 0; i <10; i ++) {
    ctx.lineWidth = 1 + я;
    ctx.beginPath ();
    ctx.moveTo (5 + я * 14, 5);
    ctx.lineTo (5 + я * 14, 140);
    ctx.Инсульт();
  }
}
  

Для получения четких линий необходимо понимать, как обводятся контуры. На изображениях ниже сетка представляет собой координатную сетку холста. Квадраты между линиями сетки - это фактические пиксели на экране. На первом изображении сетки ниже прямоугольник от (2,1) до (5,5) заполнен.Вся область между ними (светло-красная) попадает на границы пикселей, поэтому полученный прямоугольник с заливкой будет иметь четкие края.

Если вы рассмотрите путь от (3,1) до (3,5) с толщиной линии 1,0 , вы получите ситуацию на втором изображении. Фактическая область для заливки (темно-синий) распространяется только на половину пикселей по обе стороны от контура. Это должно быть приближенно, что означает, что эти пиксели только частично затеняются, и в результате вся область (светло-синий и темно-синий) заполняется цветом, который только наполовину темнее, чем фактический цвет штриха.Это то, что происходит с линией ширины 1.0 в предыдущем примере кода.

Чтобы исправить это, вы должны быть очень точными при создании пути. Зная, что линия шириной 1,0 будет расширяться на половину единицы по обе стороны от пути, создавая путь от (3.5,1) до (3.5,5), получается ситуация на третьем изображении - ширина линии 1,0 заканчивается полностью и точно заполняя вертикальную линию в один пиксель.

Примечание: Имейте в виду, что в нашем примере с вертикальной линией позиция Y по-прежнему ссылается на целочисленную позицию линии сетки - если бы это было не так, мы бы увидели пиксели с половинным покрытием в конечных точках (но также обратите внимание, что это поведение зависит от текущий стиль lineCap , значение по умолчанию - стык ; вы можете вычислить согласованные штрихи с координатами полпикселя для линий нечетной ширины, установив для стиля lineCap значение квадрат , чтобы внешняя граница Обводка вокруг конечной точки будет автоматически расширена, чтобы точно покрыть весь пиксель).

Также обратите внимание, что затрагиваются только начальная и конечная конечные точки пути: если путь закрыт с помощью closePath () , нет начальной и конечной конечных точек; вместо этого все конечные точки в пути соединяются с присоединенными к ним предыдущим и следующим сегментом, используя текущую настройку стиля lineJoin , значение по умолчанию - miter , с эффектом автоматического расширения внешних границ соединенных сегментов до их точка пересечения, так что визуализированный штрих будет точно покрывать полные пиксели с центром в каждой конечной точке, если эти соединенные сегменты являются горизонтальными и / или вертикальными.См. Следующие два раздела для демонстрации этих дополнительных стилей линий.

Для линий четной ширины каждая половина оказывается целым числом пикселей, поэтому вам нужен путь между пикселями (то есть от (3,1) до (3,5)), а не по середине пикселей.

Хотя при первоначальной работе с масштабируемой 2D-графикой это немного болезненно, внимание к пиксельной сетке и положению контуров гарантирует, что ваши рисунки будут выглядеть правильно независимо от масштабирования или любых других задействованных преобразований.Вертикальная линия шириной 1,0, нарисованная в правильном положении, станет четкой линией размером 2 пикселя при увеличении на 2 и появится в правильном положении.

A

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

стык

Концы линий скруглены в конечных точках.

круглый

Концы линий закруглены.

квадрат

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

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

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

  function draw () {
  var ctx = документ.getElementById ('холст'). getContext ('2d');
  var lineCap = ['стык', 'круглый', 'квадратный'];

  
  ctx.strokeStyle = '# 09f';
  ctx.beginPath ();
  ctx.moveTo (10, 10);
  ctx.lineTo (140, 10);
  ctx.moveTo (10, 140);
  ctx.lineTo (140, 140);
  ctx.stroke ();

  
  ctx.strokeStyle = 'черный';
  for (var i = 0; i  

A

  function draw () {
  var ctx = document.getElementById ('холст'). getContext ('2d');
  var lineJoin = ['круглый', 'скос', 'митра'];
  ctx.lineWidth = 10;
  for (var i = 0; i  

  function draw () {
  var ctx = document.getElementById ('холст'). getContext ('2d');

  
  ctx.clearRect (0, 0, 150, 150);

  
  ctx.strokeStyle = '# 09f';
  ctx.lineWidth = 2;
  ctx.strokeRect (-5, 50, 160, 50);

  
  ctx.strokeStyle = '# 000';
  ctx.lineWidth = 10;

  
  if (document.getElementById ('miterLimit'). value.match (/ \ d + (\. \ d +)? /)) {
    ctx.miterLimit = parseFloat (document.getElementById ('miterLimit'). значение);
  } еще {
    alert ('Значение должно быть положительным числом');
  }

  
  ctx.beginPath ();
  ctx.moveTo (0, 100);
  for (i = 0; i <24; i ++) {
    var dy = i% 2 == 0? 25: -25;
    ctx.lineTo (Math.pow (i, 1.5) * 2, 75 + dy);
  }
  ctx.stroke ();
  вернуть ложь;
}
  

  <таблица>
  
       
     Измените  miterLimit , введя новое значение ниже и нажав кнопку перерисовки. 
 

      

         Предел митры 
        
        
      
    
  

  

  документ.getElementById ('miterLimit'). value = document.getElementById ('холст'). getContext ('2d'). miterLimit;
рисовать();
  

  var ctx = document.getElementById ('холст'). GetContext ('2d');
var offset = 0;

function draw () {
  ctx.clearRect (0, 0, canvas.width, canvas.height);
  ctx.setLineDash ([4, 2]);
  ctx.lineDashOffset = -offset;
  ctx.strokeRect (10, 10, 100, 100);
}

function march () {
  смещение ++;
  if (offset> 16) {
    смещение = 0;
  }
  рисовать();
  setTimeout (20 марта);
}

Март();
  

  var lineargradient = ctx.createLinearGradient (0, 0, 150, 150);
var radialgradient = ctx.createRadialGradient (75, 75, 0, 75, 75, 100);
  

  var lineargradient = ctx.createLinearGradient (0, 0, 150, 150);
lineargradient.addColorStop (0, «белый»);
lineargradient.addColorStop (1, «черный»);
  

  function draw () {
  var ctx = document.getElementById ('холст'). getContext ('2d');

  
  var lingrad = ctx.createLinearGradient (0, 0, 0, 150);
  lingrad.addColorStop (0, '# 00ABEB');
  lingrad.addColorStop (0.5, '#fff');
  lingrad.addColorStop (0.5, '# 26C000');
  lingrad.addColorStop (1, '#fff');

  var lingrad2 = ctx.createLinearGradient (0, 50, 0, 95);
  lingrad2.addColorStop (0.5, '# 000');
  lingrad2.addColorStop (1, 'rgba (0, 0, 0, 0)');

  
  ctx.fillStyle = lingrad;
  ctx.strokeStyle = lingrad2;

  
  ctx.fillRect (10, 10, 130, 130);
  ctx.strokeRect (50, 50, 50, 50);

}
  

  function draw () {
  var ctx = document.getElementById ('холст'). getContext ('2d');

  
  var radgrad = ctx.createRadialGradient (45, 45, 10, 52, 50, 30);
  radgrad.addColorStop (0, '# A7D30C');
  радград.addColorStop (0.9, '# 019F62');
  radgrad.addColorStop (1, 'rgba (1, 159, 98, 0)');

  var radgrad2 = ctx.createRadialGradient (105, 105, 20, 112, 120, 50);
  radgrad2.addColorStop (0, '# FF5F98');
  radgrad2.addColorStop (0.75, '# FF0188');
  radgrad2.addColorStop (1, 'rgba (255, 1, 136, 0)');

  var radgrad3 = ctx.createRadialGradient (95, 15, 15, 102, 20, 40);
  radgrad3.addColorStop (0, '# 00C9FF');
  radgrad3.addColorStop (0.8, '# 00B5E2');
  radgrad3.addColorStop (1, 'rgba (0, 201, 255, 0)');

  var radgrad4 = ctx.createRadialGradient (0, 150, 50, 0, 140, 90);
  radgrad4.addColorStop (0, '# F4F201');
  radgrad4.addColorStop (0.8, '# E4C700');
  radgrad4.addColorStop (1, 'rgba (228, 199, 0, 0)');

  
  ctx.fillStyle = radgrad4;
  ctx.fillRect (0, 0, 150, 150);
  ctx.fillStyle = radgrad3;
  ctx.fillRect (0, 0, 150, 150);
  ctx.fillStyle = radgrad2;
  ctx.fillRect (0, 0, 150, 150);
  ctx.fillStyle = radgrad;
  ctx.fillRect (0, 0, 150, 150);
}
  

  function draw () {
  var ctx = document.getElementById ('холст'). getContext ('2d');

  
  var conicGrad1 = ctx.createConicGradient (2, 62, 75);
  conicGrad1.addColorStop (0, '# A7D30C');
  conicGrad1.addColorStop (1, '#fff');

  var conicGrad2 = ctx.createConicGradient (0, 187, 75);
  
  conicGrad2.addColorStop (0, «черный»);
  conicGrad2.addColorStop (0,25, «черный»);
  conicGrad2.addColorStop (0,25, «белый»);
  conicGrad2.addColorStop (0,5, «белый»);
  conicGrad2.addColorStop (0,5, «черный»);
  conicGrad2.addColorStop (0,75, «черный»);
  conicGrad2.addColorStop (0,75, «белый»);
  conicGrad2.addColorStop (1, 'белый');

  
  ctx.fillStyle = conicGrad1;
  ctx.fillRect (12, 25, 100, 100);
  ctx.fillStyle = conicGrad2;
  ctx.fillRect (137, 25, 100, 100);
}
  

  var img = новое изображение ();
img.src = 'someimage.png';
var ptrn = ctx.createPattern (img, 'повторять');
  

  function draw () {
  var ctx = document.getElementById ('холст'). getContext ('2d');

  
  var img = новое изображение ();
  img.src = 'canvas_createpattern.png';
  img.onload = function () {

    
    var ptrn = ctx.createPattern (img, 'повторять');
    ctx.fillStyle = ptrn;
    ctx.fillRect (0, 0, 150, 150);

  }
}
  

  function draw () {
  var ctx = document.getElementById ('холст'). getContext ('2d');

  ctx.shadowOffsetX = 2;
  ctx.shadowOffsetY = 2;
  ctx.shadowBlur = 2;
  ctx.shadowColor = 'rgba (0, 0, 0, 0.5)';

  ctx.font = '20px Times New Roman';
  ctx.fillStyle = 'Черный';
  ctx.fillText ('Пример строки', 5, 30);
}
  

  function draw () {
  var ctx = document.getElementById ('холст').getContext ('2d');
  ctx.beginPath ();
  ctx.arc (50, 50, 30, 0, Math.PI * 2, истина);
  ctx.arc (50, 50, 15, 0, Math.PI * 2, истина);
  ctx.fill ('evenodd');
}