Как наложить фон на фон: Наложение фона на картинку с помощью CSS

Background-blend-mode • Про CSS

На этой неделе в Firefox 30 было включено по умолчанию свойство background-blend-mode. Таким образом, Firefox стал третьим браузером, поддерживающим это свойство (два других — Opera и Chrome). Safari будет поддерживать это свойство в следующей версии, про планы IE мне ничего найти не удалось.

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

Что делает это новое свойство и какие возможности оно нам дает?

background-blend-mode управляет режимами наложения слоев фона, заданного в CSS.

Пример:

Наведите курсор на картинку, чтобы увидеть исходное изображение.

background-blend-mode аналогичен режимам наложения слоев в фотошопе, и список возможных значений свойства вам, скорее всего, покажется знакомым:

• normal
• multiply
• screen
• overlay
• darken
• lighten
• color-dodge
• color-burn
• hard-light
• soft-light
• difference
• exclusion
• hue
• saturation
• color
• luminosity

Как это работает?

Возьмем, к примеру, картинку с котиком и зададим её фоном:

background: teal url(http://placekitten. com/250/200);

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

Теперь можно добавить режим наложения, например:

background: teal url(http://placekitten.com/250/200);
background-blend-mode: hard-light;
 

Результат:

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

Слоев фона может быть больше двух, и для каждого слоя можно отдельно задавать режим наложения:

background: teal url(http://placekitten.com/250/200);
background-blend-mode: hard-light, multiply, normal;

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

Как можно использовать background-blend-mode?

Предположим, есть сайт в определенной цветовой гамме, и в дизайне нужно разместить несколько картинок:

Так картинки не очень вписываются в цветовую схему.

background-blend-mode: luminosity;

Результат:

Способ имеет свои преимущества:

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

А если потом изменится цветовая схема сайта — не нужно будет заново перекрашивать картинки под новую схему — всё произойдет само собой:

Правда, мне не удалось сделать плавную смену режимов наложения. Насколько я понимаю, они не анимируются. Но это можно обойти используя псевдоэлементы: через :before создается дублирующий слой с той же картинкой, и ему по наведению меняется прозрачность — это можно сделать плавно (пример справа):

Ещё один способ покрасить картинку в дизайне — подложить полосатый градиент:

Приятный бонус background-blend-mode

Интересно, что в некоторых режимах результат различается в зависимости от того, наложена ли картинка на цвет или цвет поверх картинки (слева картинка поверх цвета, справа наоборот):

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

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

Уже есть первая галерея с примерами: bennettfeely.com/gradients/. Ниже на странице можно найти JS-фолбек и взвешивание одних и тех же градиентов, сделанных на CSS или в виде изображений различных форматов. CSS, конечно, выигрывает.

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

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

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

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

Ещё несколько градиентов:

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

background-blend-mode выглядит очень привлекательно, позволяя добавить немного магии фотошопа в привычный CSS.

Как в фотошопе наложить фон на фотографию

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

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

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

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

Откройте оба изображения в Фотошопе.

Перейдите в изображение в НЛО, выделите его, нажмите CTRL+C чтобы скопировать.

Перейдите в окно с фотографией города. Нажмите CTRL+V чтобы вставить. Тарелка наложится на это изображение сверху.

Причем изображение НЛО будет на отдельном слое, а значит мы с ним можем делать что угодно.

Нажмите CTRL+T чтобы вызвать функцию трансформирования.

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

Переместить можно изображение с помощью инструмента Перемещение (Move Tool) — найдите на панели инструментов справа.

Теперь уменьшим прозрачность для изображения с НЛО. Это делается на панели со слоями.

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

Наложение с прозрачностью

Я решил перенести утку на изображение с прудом.

1. Откройте картинку с фоном в фотошопе, а второе фото откройте следом. После этого картинки появятся в разных вкладках.
2. Далее, выбираем инструмент «Перемещение» , и зажав левую кнопку мыши на утке, переносим ее на вкладку с прудом. После этого, отпускаем кнопку мыши. У вас, естественно, будут свои фото.
3. Конечно, утка выглядит неестественно, так как она находится непонятно где, так еще и гигантская. Для начала нужно уменьшить ее. Для этого воспользуемся Свободным трансформированием, нажав на комбинацию клавиш CTRL+T. Только перед этим убедитесь, что вы находитесь на слое с уткой.
4. Теперь, начинайте уменьшать изображения, потянув за уголки с зажатой кнопкой мыши. И не забудьте в это время зажать клавишу SHIFT, чтобы картика уменьшалась равномерно. Когда вы уменьшите ее до нужного размера, нажмите Enter, чтобы применить трансформирование.
5. Теперь, снова возьмите инструмент «Перемещение» и потяните за утку, чтобы она находилась где-нибудь на берегу. Так будет выглядеть естественно.

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

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

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

1. Откроем две фотографии в разных вкладках. Я больше всего предпочитаю способ Drag and Drop, то есть, выделить нужные изображения и перенести их в фотошоп с зажатой левой клавишей мышки. После этого они по очереди откроются в разных вкладках.
2. Теперь берем любой инструмент выделения, например «Лассо», и начинаем выделять лицо Джона Траволты, захватывая лобную часть и подбородок. А вот волосы нам не понадобятся.
3. Теперь берем инструмент «Перемещение» , после чего зажимаем левую кнопку мыши внутри выделения, а затем переносим его на вкладку с Николасом Кейджем, пока она не откроется. После этого наводим нашу выделенную часть куда-нибудь на картинку и отпускаем копку мыши.
4. Когда фотография Траволты окажется на новом слое, уменьшите его не прозрачность хотя бы на 25-30 процентов. чтобы нам легче было работать.
5. Теперь начинаем заниматься подгоном. Как видите, фотография с Джоном была больше, кроме того, его голова была слегка наклонена. Поэтому, нам все нужно подогнать. Для начала вызовите Свободное трансформирование, нажав комбинацию клавиш CTRL+T, и после этого тяните за уголки, не забыв нажать клавишу SHIFT, чтобы примерно подогнать размер.
6. Теперь поставьте курсор чуть выше угла, чтобы он изменился на режим поворота. После этого зажмите левую кнопку мыши, и начинайте поворачивать перенесенный объект в ту сторону, чтобы лицо стояло также прямо, как и Кейджа.
7. Теперь перенесите полупрозрачное лицо Траволты, на Кейджа, чтобы посмотреть соответствие носа, рта и глаз нужного размера. Отлично, мы сделали все на одном уровне. после этого можно нажать Enter, чтоюы применить трансформирование.
8. Теперь нам нужно удалить или обрезатьостатки кожи, которые вылезают за пределы черепной коробки. Для этого можно воспользоваться инструментом ластик и просто стереть ненужную область. Только желательно нажать правую кнопку мыши и выставить жесткость на 0 процентов, чтобы границы были с максимально мягким переходом.
9. Нам удалось наложить одно фото на другое да и лицо вроде бы готово, но вот оттенок их немного не совпадает, поэтому придется немного изменить тон. Можно воспользоваться тем же способом, которым мы убирали красноту с лица в фотошопе, либо применить инструмент заплатка. Для этого выберите «Заплатку» и обведите лобную часть, которая принадлежит Николасу Кейджу. После это зажмите правцю кнопку мыши и перенесите ее на кусок кожи траволты, чтобы заменить ту часть.
10. В принципе всё. Можно только провести восстанавливающей кистью по лобной складке, чтобы она не дублировала уже имеющуюся.

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

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

Как наложить костюм в фотошопе

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

1. Откройте фотографию человека и картинку с костюмом на прозрачном фоне. После этого перенесите его на вкладку лицом, чтобы он встал на отдельном слое.
2. Теперь, выбираем функцию трансформации, нажав комбинацию CTRL+T. А дальше меняем размер костюма, чтобы он соответствовал размеру самого персонажа. Просто если этого не сделать, то у вас получится рахитоид. Для этого потяните за верхний уголок с зажатым SHIFT, чтобы сохранились все пропорции.
3. Когда размер будет подогнан, нажмите Enter, чтобы применить изменения. Скорее всего у вас не будет полного совпадения, и часть ворота не будет подходить шее человека, либо часть старой одежды будет выпирать. Ничего страшного.
4. Теперь выбираем в меню «Редактирование» — «Трансформирование» — «Деформация» , после чего наш костюм обрамится сеткой.
5. Далее, зажмите левой кнопкой мыши в области воротника, и начинайте погонять тянуть выше сначала с одной стороны, затем с другой, пока куски прошлой одежды не исчезнут, а ворот не не будет точно облигать шею. Подробнее о девормации в фотошопе вы можете прочитать здесь.

Теперь Джастина Тимберлейка можно вклеивать в документы. Точно также мы делаем и с другими костюмами, с прическами, усами, бородами или даже шрамами. Достаточно в интернете в любом поисковике найти задать что-нибудь типа «Костюм полицейского png» или «Мужские прически с прозрачным фоном» . Принцип работы такоей же: открываем, переносим, подгоняем размер и деформируем.

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

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

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

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

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

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

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

Для того что б вырезать рисунок в Фотошопе нужно сделать следующие, выбрать нужный нам слой и воспользоваться одним из инструментов выделения.
Отметив нужную нам область мы выбираем с «Меню» пункт «Редактирования» в котором выбираем операцию «Скопировать» (для копирования) и операцию «Вырезать» (чтобы часть изображения которое отметили вырезать из рисунка).

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

Запускаем любимую программу, а потом через команды Файл-Открыть (File-Open, если используете англоязычную версию) создаем чистый файл. Обратите внимание на те расширения, с которыми будете работать: лучше оставить в типах только тот, что принадлежит искомому файлу. Итак, нужное изображение открылось.

Задачи:
В наличии имеют два изображения. Фон на картинке с бегущей лошадью нас не устраивает, потому будет делать так, чтобы она оказалась на фоне морского пейзажа. Для этого:
1. Создаем новый файл для будущего изображения;
2. На разных слоях по отдельности размещаем коня и морские виды;
3. Вырезаем после выделения животное из первоначальной фотографии;
4. Придаем новой фотографии максимальную естественность.
А теперь пройдем подробно по пунктам.

Новый файл
Размеры нового файла будут заданы 500 Х 375, такие же, как у и фото с морем. Потом в нем требуется создать два слоя: «конь» и «море», причем «морской» слой должен располагаться под «слоем лошадки». Названия присваиваются по щелчку правой кнопкой мыши. В выпавшем контекстном меню в Параметрах слоя (Layer Properties) даем слоям понятные имена.

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

Море располагаем на одноименном слое путем переведение этого окна в активное состояние – щелкаем по нему, оно становится последним. Далее: выделяем все изображение (ведь нам нужен весь пейзаж) через Выделение -> Все (Select -> All) или Ctrl+A. Сигналом к тому, что окно выделено, станет появление рамки из «бегущих муравьев».

Потом копируем (Ctrl+C) и переносим его по щелчку в рабочую область, где лошадь будет уже на фоне моря. Теперь на одноименном слое мы и можем наблюдать пейзаж.
Те же самые операции проделываем со слоем Конь, а после две первоначальные картинки можно закрывать: так они не будут мешать дальнейшим действиям.

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

Допуску (Tolerance) можно придать значение от 0 до 255. При 0 палочка распознает только один оттенок, при 32 – в диапазоне 32 оттенка и т. д. Нам нужно выставить значение 100.

Потом следует выставить флажок на Сглаживании (Anto-aliased), чтобы границы фрагмента были гладкими. Обязательно выделите Смежные пикселы (Contigous), чтобы волшебная палочка захватывала пикселы в соседних с выбранной областях. Нужно убрать выделение Образца всех слоев (Sample All Layers), иначе эффект распространится на все, а нам нужно работать только со слоем коня.

После выделения самой лошадки вы увидите, что выделение не совсем идеально, но пока что нам важно получить контуры фигуры животного. Щелкайте Ctrl+Z или инструмент до тех пор, пока выделение вас не устроит.

Для удаления лишнего окружения следует выбрать Выделение – Инверсия (Select- Inverse). Потом жмем Del, и у нас для работы остается только вырезанный конь, но уже на фоне морских волн. Убираем выделение (Выделение – Убрать выделение), а потом пытаемся убрать траву, которую захватили вместе с лошадкой.

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

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

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

1. Выделение с помощью инструмента «Волшебная палочка»

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

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

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

Для этого просто щелкаем по белому фону, после чего волшебная палочка аккуратно выделяет его. Нам лишь остается инвертировать выделение, поэтому нажимаем сочетание клавиш Ctrl+Shift+I, после чего выделение переносится на цветок.

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

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

2. Выделение с помощью инструмента «Магнитное лассо»

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

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

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

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

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

3. Использование функции «Цветовой диапазон»

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

Чтобы воспользоваться данной функцией, щелкните по вкладке «Выделение» и откройте раздел «Цветовой диапазон».

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

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

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

Примените внесенные изменения, и на вашем изображение отобразится выделение.

4. Использование инструмента «Быстрое выделение» и функции «Утончить край»

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

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

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

Для более мелких объектов рекомендуется уменьшить размер кисти.

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

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

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

Как перенести выделенный объект на другое изображение?

1. Добавьте в Photoshop второе изображение, в которое будет вставлен выделенный объект.

2. Вернитесь к первому изображению и нажмите сочетание клавиш Ctrl+C, чтобы скопировать объект.

3. Перейдите ко второму изображению и вставьте в него объект сочетанием Ctrl+V.

4. Примените инструмент «Перемещение» и расположите объект в нужной для вас области картинки.

5. Нажмите сочетание клавиш Ctrl+T, чтобы, при необходимости, изменить размер объекта на изображении. Чтобы сохранить пропорции объекта, при изменении размера не забудьте зажать клавишу Ctrl.

Как убрать зелёный фон в видео бесплатно, используя Хромакей

Если вы увлекаетесь монтажом, вы наверняка уже сталкивались с необходимостью удалить зелёный фон в видео и заменить его статичной картинкой или другим видео. Технически, есть два способа выполнить эту задачу. Первый и наиболее популярный способ удаления фона на видео – это применение инструмента «Хромакей» (Chroma Key). Суть работы Хромакей в том, что он автоматически обнаруживает сплошной зелёный фон на видео и мгновенно удаляет его, оставляя пространство вокруг объекта съёмки прозрачным. Второй способ заключается в том, чтобы применять маску на видео, и он будет актуален в случаях, если фон, который вам необходимо удалить, заметно неоднороден по цвету и текстуре.

Наложение маски в видео производится вручную, требует навыка и дополнительных ресурсов ПК, поэтому фокус этой статьи будет на использовании Хромакея. В случаях, когда вы работаете с классическим зелёным фоном, это идеальный инструмент – простой, быстрый и эффективный. Ниже мы покажем как применять его в бесплатном видеоредакторе VSDC.

Как убрать зелёный фон в видео бесплатно, используя Хромакей

Сперва установите VSDC на свой компьютер, запустите программу и импортируйте видеофайл, в котором присутствует зелёный фон.

После того, как ролик появился на временной шкале, вы сможете применить эффект Хромакей. Для этого перейдите во вкладку Видеоэффекты (верхнее меню), выберите «Прозрачность» -> «Удаление фона». Обратите внимание, что во многих случаях зелёный фон не удаляется на этом этапе, поскольку цвет фона может варьироваться в разных видео. Однако вы также заметите, что на временной шкале появился новый слой под названием «Удаление фона 1». Кликните по нему правой кнопкой мыши, чтобы открыть Свойства. Окно свойств откроется справа, как и показано на иллюстрации ниже.

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

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

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

• Порог минимальной яркости (как правило, этот параметр требуется увеличить).
• Порог минимальной цветности U.
• Порог минимальной цветности V (как правило, этот параметр требуется увеличить).

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

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

Как убрать задний фон в видео и заменить его другим видео или изображением

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

Шаг 1: На временной шкале снова откройте вкладку под названием Scene 0.

Шаг 2: Затем кликните на зелёную круглую кнопку в верхнем меню «Вставить объект».

Шаг 3: Со своего ПК выберите изображение или видео, которое вы бы хотели видеть в качестве фона.

Шаг 4: Как только вы это сделаете, выбранный файл появится на рабочей области поверх сцены – это нормально. Просто щелкните по нему правой кнопкой мыши и выберите «Порядок» — «Опустить на слой вниз».

Шаг 5: При необходимости вы можете двигать и изменять размер как нового фона, так и объекта вручную.

Как полностью убрать фон на видео с минимальными усилиями – рекомендации

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

1. Не стоит изменять размер или разрешение исходного видео перед удалением фона. Когда вы модифицируете эти параметры, соседствующие цвета в кадре могут частично слиться. Применив Хромакей, вы не сможете равномерно удалить фон, не задев при этом объекты в кадре, если они содержат цвета соседствующие по гамме с зелёным.
2. Если вы снимаете видео на зелёном фоне самостоятельно, старайтесь выбирать качественное покрытие и освещение во время съёмки. Чем более однородный фон вы используете, тем легче будет программе мгновенно определить и полностью удалить его с первого раза. В то время как блики, тени и переходы цвета от неровностей сильно усложнят задачу.
3. В плане цветовой гаммы, объект съёмки должен максимально контрастировать с фоном. Другими словами, если фон, который вы планируете удалять, зелёного цвета, на объекте не должно быть зелёной одежды (если это человек). В противном случае, одежда удалится вместе с фоном, оставив прозрачные области на видео. Лучше всего в таких случаях работают темные цвета, а всё, что содержит в своей гамме зелёный, имеет риск оказаться «смазанным» или удалённым.

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

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

А также не забудьте подписаться на наш канал на YouTube, где мы еженедельно публикуем новые видеоинструкции по работе с бесплатным редактором VSDC.

You can get more information about the program on Free Video Editor’ description page.

Как наложить другой фон в фотошопе

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

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

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

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

Откройте оба изображения в Фотошопе.

Перейдите в изображение в НЛО, выделите его, нажмите CTRL+C чтобы скопировать.

Перейдите в окно с фотографией города. Нажмите CTRL+V чтобы вставить. Тарелка наложится на это изображение сверху.

Причем изображение НЛО будет на отдельном слое, а значит мы с ним можем делать что угодно.

Нажмите CTRL+T чтобы вызвать функцию трансформирования.

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

Переместить можно изображение с помощью инструмента Перемещение (Move Tool) — найдите на панели инструментов справа.

Теперь уменьшим прозрачность для изображения с НЛО. Это делается на панели со слоями.

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

Наложение с прозрачностью

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

Я решил перенести утку на изображение с прудом.

1. Откройте картинку с фоном в фотошопе, а второе фото откройте следом. После этого картинки появятся в разных вкладках.
2. Далее, выбираем инструмент «Перемещение» , и зажав левую кнопку мыши на утке, переносим ее на вкладку с прудом. После этого, отпускаем кнопку мыши. У вас, естественно, будут свои фото.
3. Конечно, утка выглядит неестественно, так как она находится непонятно где, так еще и гигантская. Для начала нужно уменьшить ее. Для этого воспользуемся Свободным трансформированием, нажав на комбинацию клавиш CTRL+T. Только перед этим убедитесь, что вы находитесь на слое с уткой.
4. Теперь, начинайте уменьшать изображения, потянув за уголки с зажатой кнопкой мыши. И не забудьте в это время зажать клавишу SHIFT, чтобы картика уменьшалась равномерно. Когда вы уменьшите ее до нужного размера, нажмите Enter, чтобы применить трансформирование.
5. Теперь, снова возьмите инструмент «Перемещение» и потяните за утку, чтобы она находилась где-нибудь на берегу. Так будет выглядеть естественно.

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

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

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

1. Откроем две фотографии в разных вкладках. Я больше всего предпочитаю способ Drag and Drop, то есть, выделить нужные изображения и перенести их в фотошоп с зажатой левой клавишей мышки. После этого они по очереди откроются в разных вкладках.
2. Теперь берем любой инструмент выделения, например «Лассо», и начинаем выделять лицо Джона Траволты, захватывая лобную часть и подбородок. А вот волосы нам не понадобятся.
3. Теперь берем инструмент «Перемещение» , после чего зажимаем левую кнопку мыши внутри выделения, а затем переносим его на вкладку с Николасом Кейджем, пока она не откроется. После этого наводим нашу выделенную часть куда-нибудь на картинку и отпускаем копку мыши.
4. Когда фотография Траволты окажется на новом слое, уменьшите его не прозрачность хотя бы на 25-30 процентов. чтобы нам легче было работать.
5. Теперь начинаем заниматься подгоном. Как видите, фотография с Джоном была больше, кроме того, его голова была слегка наклонена. Поэтому, нам все нужно подогнать. Для начала вызовите Свободное трансформирование, нажав комбинацию клавиш CTRL+T, и после этого тяните за уголки, не забыв нажать клавишу SHIFT, чтобы примерно подогнать размер.
6. Теперь поставьте курсор чуть выше угла, чтобы он изменился на режим поворота. После этого зажмите левую кнопку мыши, и начинайте поворачивать перенесенный объект в ту сторону, чтобы лицо стояло также прямо, как и Кейджа.
7. Теперь перенесите полупрозрачное лицо Траволты, на Кейджа, чтобы посмотреть соответствие носа, рта и глаз нужного размера. Отлично, мы сделали все на одном уровне. после этого можно нажать Enter, чтоюы применить трансформирование.
8. Теперь нам нужно удалить или обрезатьостатки кожи, которые вылезают за пределы черепной коробки. Для этого можно воспользоваться инструментом ластик и просто стереть ненужную область. Только желательно нажать правую кнопку мыши и выставить жесткость на 0 процентов, чтобы границы были с максимально мягким переходом.
9. Нам удалось наложить одно фото на другое да и лицо вроде бы готово, но вот оттенок их немного не совпадает, поэтому придется немного изменить тон. Можно воспользоваться тем же способом, которым мы убирали красноту с лица в фотошопе, либо применить инструмент заплатка. Для этого выберите «Заплатку» и обведите лобную часть, которая принадлежит Николасу Кейджу. После это зажмите правцю кнопку мыши и перенесите ее на кусок кожи траволты, чтобы заменить ту часть.
10. В принципе всё. Можно только провести восстанавливающей кистью по лобной складке, чтобы она не дублировала уже имеющуюся.

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

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

Как наложить костюм в фотошопе

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

1. Откройте фотографию человека и картинку с костюмом на прозрачном фоне. После этого перенесите его на вкладку лицом, чтобы он встал на отдельном слое.
2. Теперь, выбираем функцию трансформации, нажав комбинацию CTRL+T. А дальше меняем размер костюма, чтобы он соответствовал размеру самого персонажа. Просто если этого не сделать, то у вас получится рахитоид. Для этого потяните за верхний уголок с зажатым SHIFT, чтобы сохранились все пропорции.
3. Когда размер будет подогнан, нажмите Enter, чтобы применить изменения. Скорее всего у вас не будет полного совпадения, и часть ворота не будет подходить шее человека, либо часть старой одежды будет выпирать. Ничего страшного.
4. Теперь выбираем в меню «Редактирование» — «Трансформирование» — «Деформация» , после чего наш костюм обрамится сеткой.
5. Далее, зажмите левой кнопкой мыши в области воротника, и начинайте погонять тянуть выше сначала с одной стороны, затем с другой, пока куски прошлой одежды не исчезнут, а ворот не не будет точно облигать шею. Подробнее о девормации в фотошопе вы можете прочитать здесь.

Теперь Джастина Тимберлейка можно вклеивать в документы. Точно также мы делаем и с другими костюмами, с прическами, усами, бородами или даже шрамами. Достаточно в интернете в любом поисковике найти задать что-нибудь типа «Костюм полицейского png» или «Мужские прически с прозрачным фоном» . Принцип работы такоей же: открываем, переносим, подгоняем размер и деформируем.

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

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

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

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

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

В этом уроке я покажу вам три простых способа совмещения двух изображений в Фотошоп. Начнём мы с самого простого способа совмещения, используя параметр Opacity (Непрозрачность) на панели «Слои». Далее, рассмотрим способ получения более интересного и творческого результата с использованием режимов смешивания. И, наконец, вы узнаете, как легко скомбинировать два изображения при помощи маски слоя. В конце некоторых способов я дам вам полезные советы, как ускорить рабочий процесс и получить хорошие результаты. Я буду использовать Photoshop CC, но данный урок полностью совместим с версией SC6. Давайте приступим!

Способ 1: Использование опции Opacity (Непрозрачность)

Выбор изображений

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

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

Опция «Непрозрачность»

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

Значение непрозрачности контролирует уровень прозрачности слоя. Это очень просто, снижая значение, мы делаем слой более прозрачным, позволяя изображениям, расположенных ниже, проявляться. Чем больше мы уменьшаем непрозрачность, тем больше верхнее изображение будет растворяться в нижнем. Я изменил значение непрозрачности от 100% до 75%.

Это означает, что мы смешиваем 75% непрозрачности изображения на верхнем слое с 25% непрозрачности изображения на нижнем слое. Мы видим, что изображение девушки начинает смешиваться с изображением пляжа.

Здесь, я захотел сделать девушку ещё менее заметной и уменьшил значение непрозрачности до 30%.

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

Способ 2: Режимы наложения

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

Снова посмотрите на панель слоёв, каждое изображение располагается на отдельном слое. Портрет находится на фоновом слое, а текстура над ним.

Опция «Режимы наложения»

Режимы наложения в Фотошоп – это разные способы взаимодействия слоёв друг с другом. Расположена данная опция в верхнем левом углу панели «Слои», прямо напротив опции «Непрозрачность». По умолчанию установлен режим Normal (Обычный), это означает, что верхний слой вообще не смешивается со слоями, расположенными под ним.

Кликните по раскрывающейся вкладке «Режимы наложения», чтобы открыть меню со множеством различных режимов. Мы не будем рассматривать их все, но более подробно вы можете прочитать о них в этом уроке: «Режимы наложения в Фотошоп». Сегодня мы будем использовать три самых популярных и часто используемых режимов смешивания: Multiply (Умножение), Screen (Экран) и Overlay (Перекрытие). Режим «Умножение» создаёт эффект затемнения, «Экран» придаёт эффект яркости, а «Перекрытие» смешивает два слоя, увеличивая общий контраст.

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

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

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

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

«Режимы наложения» и «Непрозрачность»

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

И вот результат:

Совет: циклическое переключение режимов смешивания с клавиатуры

Хочу дать вам полезный совет, который поможет ускорить рабочий процесс и облегчит работу с режимами смешивания. Вы можете переключаться между различными режимами смешивания в Фотошоп непосредственно с клавиатуры. Нажмите V, чтобы выбрать инструмент Move Tool (Перемещение). Затем нажмите и удерживайте Shift, и используйте клавиши плюс (+) и минус (-) для перемещения вверх и вниз по списку. Это позволит вам быстро попробовать различные режимы смешивания, чтобы найти тот, который подойдёт лучше всего.

Способ 3: Использование маски слоя

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

Вот первое фото с девочкой , которое я буду использовать:

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

Добавление маски

Чтобы добавить маску слоя, сначала убедитесь, что выбран верхний слой. Затем нажмите на значок Add Layer Mask (Добавить слой-маску) в нижней части панели «Слои».

Рядом с миниатюрой слоя появится миниатюра маски.

Как работает маска слоя

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

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

Выбор инструмента Gradient Tool (G) (Градиент)

На панели инструментов выберите Градиент.

Выбор чёрно-белого градиента

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

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

Совмещение двух изображений

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

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

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

Просмотр маски слоя

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

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

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

Совет: включение и отключение маски слоя

Хочу дать вам совет для быстрой и удобной работы с маской. Вы можете включать и выключать маску слоя, нажимая и удерживая Shift и кликая по миниатюре маски на панели «Слои». Нажатием по миниатюре один раз вы временно отключите маску и просмотрите весь слой полностью. Красный значок «Х» появится на миниатюре, сообщив нам, что маска отключена. Удерживая Shift, снова кликните по миниатюре, чтобы включить маску снова.

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

Фон для сторис в Инстаграм: как сделать красивый, поменять цвет фона

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

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

Рекомендуем: Click.ru – маркетплейс рекламных платформ:

• Более 2000 рекламных агентств и фрилансеров уже работают с сервисом.
• Подключиться можно самому за 1 день.
• Зарабатывайте с первого потраченного рубля, без начальных ограничений, без входного барьера.
• Выплаты на WebMoney, на карту физическому лицу, реинвестирование в рекламу.
• У вас остаются прямые доступы в рекламные кабинеты, рай для бухгалтерии по документообороту и оплатам.

Читайте также: Как сделать свайп в сторис Инстаграм

Как изменить фон истории в Инстаграм

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

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

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

Лайфхаки по созданию фона для сторис

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

Однотонный фон

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

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

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

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

P.S. Если недостаточно предлагаемой палитры, то можно зажать любой цвет и появится более разнообразная.

Прямоугольники из текста

Этот трюк можно использовать, чтобы добавить элементы дизайна. Берем фотографию из галереи или делаем однотонный фон. Нажимаем на иконку добавления текста. Ставим точку (можно другой знак, главное, небольшой), потом 10-15 пробелов и еще одну точку. Добавляем задний фон к тексту — значок А.

Получается цветной прямоугольник.

Теперь растягиваем и перемещаем прямоугольник в угол.

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

P.S. Чем больше пробелов, тем меньше нужно растягивать прямоугольник, и тем уже получается полоска.

Градиент

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

Всего в редакторе 5 видов градиента.

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

Растягиваем эмоджи так, чтобы получился цвет.

Проделываем то же самое с другим эмоджи, а затем совмещаем их.

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

P.S. Можно использовать не только эмоджи, но и гифки или любую PNG картинку из интернета.

Другой способ — это использовать прямоугольники текста (предыдущий пункт). Делаем однотонный фон — выбираем основной цвет. Затем делаем прямоугольник из текста другого цвета. Цвет лучше выбирать из расширенной палитры.

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

Полупрозрачный фон

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

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

P.S. К сожалению, регулировать процент прозрачности нельзя, а еще иногда полупрозрачная заливка слетает и меняется на однотонную.

Это интересно: Как настроить рекламу в сторис Инстаграм

Узоры для фона из символов

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

Прокручиваем вниз и выбираем нужный символ. Нажимаем на символ, он сохраняется в буфер обмена.

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

Узор можно увеличить, размножить и перенести в нужное место.

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

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

Символы можно использовать, как рамки и узоры для фото, а еще из них можно сделать паттерн.

Стираем часть фона ластиком

Можно сделать интересный узор при помощи ластика — сначала выбираем фото и накладываем поверх него однотонный фон (самый первый лайфхак). Потом заходим на coolsymbol.com и выбираем нужный узор для рамки, например, квадрат (описано в предыдущем пункте). Накладываем квадрат в том месте, где нужно будет проявить часть фото, например, там, где лицо.

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

Паттерн (полоски, круги и другие узоры)

Здесь мы опять обратимся к сайту coolsymbol.com. Сначала делаем однотонный фон, потом идем на coolsymbol и выбираем подходящий узор для паттерна.  Копируем, вставляем как текст, выбираем нужный цвет.

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

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

Контур на фото

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

Выбираем толщину кисти (ползунок слева). Нужны тонкие штрихи. И начинаем рисовать.

Узоры при помощи кисти

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

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

Можно экспериментировать, тут все ограничивается вашей фантазией и умением рисовать. К инструменту рисования в сторис нужно привыкнуть.

Полупрозрачный градиент

Тайная функция сторис.

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

Эффекты

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

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

Слова на весь экран

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

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

Полезные ссылки:

Как добавить фон для широкоформатного видео в instagram

 06 Янв 2020

 Лилия Панарина

Любите снимать видео? Узнайте, как редактировать отображение видео и делать фон, чтобы размещать контент в социальных сетях.

Бывает такое, что вы хотите опубликовать в Instagram видео, но не знаете, как сделать его квадратным, чтобы оно гармонично вписывалось в ленту. Для этого вам понадобится приложение Inshot, которое быстро можно скачать в App Store. В нём вы сможете сделать видео квадратным с лёгким расфокусом, что будет круто смотреться в социальных сетях.

• Зайдите в Inshot.
• Нажмите «Видео» → «Новый проект».
• Добавьте желаемое видео и выберите размер. В этом разделе можно выбрать любой размер для всех современных форматов экранов.
• Если вы хотите сделать видео квадратным, то нажмите «пропорция» и выберите размер 1:1 для Instagram.

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

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

Остались вопросы?

Поделиться:

Сообщения не найдены

Использование нескольких фонов — CSS: каскадные таблицы стилей

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

Указать несколько фонов просто:

  .myclass {
  фон: фон1, фон2, ..., фонN;
}
  

Это можно сделать как с сокращенным свойством background , так и с его отдельными свойствами, за исключением background-color .То есть следующие свойства фона могут быть указаны в виде списка, по одному на фон: background , background-attachment , background-clip , background-image , background-origin , background-position , повторение фона , размер фона .

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

HTML

CSS

 .multi-bg-example {
  ширина: 100%;
  высота: 400 пикселей;
  фоновое изображение: url (firefox.png),
      url (пузыри.png),
      линейный градиент (вправо, rgba (30, 75, 115, 1), rgba (255, 255, 255, 0));
  фон-повтор: без повторения,
      нет повторения,
      нет повторения;
  background-position: нижний правый,
      левый,
      Правильно;
}
  

Результат

(Если изображение не отображается в CodePen, нажмите кнопку «Tidy» в разделе CSS)

Как вы можете видеть здесь, логотип Firefox (указанный первым в background-image ) находится сверху, непосредственно над изображением пузырьков, за которым следует градиент (указанный последним), расположенный под всеми предыдущими «изображениями».Каждое последующее подсвойство ( background-repeat и background-position ) применяется к соответствующим фонам. Таким образом, первое указанное значение для background-repeat применяется к первому (самому переднему) фону и так далее.

Как создать отличное фоновое наложение для вашего сайта | by Mouhamadou Diouf

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

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

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

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

Тем не менее, фоновые изображения сложно разместить. Особенно, если вы хотите правильно разместить его на своем сайте.

Есть много способов использовать фоновые изображения. Вот несколько примеров:

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

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

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

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

В этом разделе мы поговорим о свойствах, которые помогут вам создать свой фон в CSS. Есть много разных и стенограмма. Давайте их посмотрим:

Свойство background-image помогает добавить изображение на ваш сайт. Вы можете добавить фоновое изображение почти ко всем элементам HTML, но наиболее распространенным является применение его к div.

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

Свойство background-repeat помогает определить, будет ли ваш фон повторяться. Вы можете повторить фон по вертикали или горизонтали с помощью repeat-x или repeat-y.

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

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

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

top center, center right, bottom left, и т. Д.

Свойством background-size вы можете можно указать размер фонового изображения.Часто ваше изображение не соответствует размеру контейнера. Таким образом, это свойство может помочь вам решить проблему.

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

body {background: gray url («car.jpg») no-repeat fixed center;}

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

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

Создаем наш HTML файл с навигацией (с помощью bootswatch). Это поможет нам быстро настроить и сосредоточиться на разделе героев. Затем мы создаем div под навигацией и даем ему класс hero, например:

В этом случае у нас есть div с классом hero.Мы будем использовать этот div для создания фонового изображения с помощью CSS.

Ps: Я спрятал код между тегами

Это наш результат с этого момента:

Диван под навигацией имеет только заголовок. Но мы добавим к нему фоновое изображение. Теперь мы можем использовать свойство background-image, чтобы добавить фоновое изображение в этот div-герой.

Допустим, мы называем наш сайт «Компания Cactus».Итак, мы будем использовать это красивое изображение и добавить к нему текст. Используя свойства фона, мы получим эти правила в CSS:

И вот наш результат в браузере:

.

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

Есть много способов добавить красивое наложение к нашим фоновым изображениям. Но мы будем использовать свойство linear-gradient. Он предлагает большую гибкость и возможность настройки.

Фоновое изображение может быть связано со свойством linear-gradient. Это добавляет слой к фону. Используя свойство rgba, вы можете указать цвет и непрозрачность наложения фона. Линейный градиент в CSS — это функция, которая также может помочь вам создать переход между многими цветами (обычно двумя).

В нашем примере мы решили добавить простой серый фильтр. Итак, мы будем использовать свойство linear-gradient в фоновом изображении:

Это сделает наш фоновый пакет красивым слоем, например:

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

Какой из них вы предпочитаете? Я бы выбрал последний 🙂

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

Как установить фоновое изображение?

  
 
 
 
 
 
 
 Наложение по умолчанию 
 
  
 
 
 
 
 
 
 
 
 
 
 Первичный оверлей 
 
  
 
 
 
 
 
 
 
 
 
 
 Наложение градиента 
 
  
 
 
 
 
 
 
 
  

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

  

  
 Наложение по умолчанию 
  

  

  
 Наложение градиента по умолчанию 
  

  

  
 Первичный оверлей 



  
 Дополнительный оверлей 



  
 Светлый оверлей 
  

  

  
 Первичный оверлей 



  
 Дополнительный оверлей 



  
 Светлый оверлей 
  

  

  
 Наложение по умолчанию 



  
 Наложение по умолчанию 



  
 Наложение по умолчанию 
  

  

  
 Наложение по умолчанию 



  
 Наложение по умолчанию 



  
 Наложение по умолчанию 
  

 


  
 Наложение по умолчанию 



  
 Наложение по умолчанию 



  
 Наложение по умолчанию 





  
 Дополнительный оверлей 



  
 Дополнительный оверлей 



  
 Дополнительный оверлей 





  
 Светлый оверлей 



  
 Светлый оверлей 



  
 Светлый оверлей 
  

 


  
 Наложение по умолчанию 



  
 Наложение по умолчанию 



  
 Наложение по умолчанию 





  
 Дополнительный оверлей 



  
 Дополнительный оверлей 



  
 Дополнительный оверлей 





  
 Светлый оверлей 



  
 Светлый оверлей 



  
 Светлый оверлей 
  

  

  

    
 Наложение по умолчанию 
    
  
  

     
 Накладываемая карта 
 
     Дополнительно 
  



  

    
 Первичный оверлей 
    
  
  

     
 Накладываемая карта 
 
     Дополнительно 
  



  

    
 Светлый оверлей 
    
  
  

     
 Накладываемая карта 
 
     Дополнительно 
  
  

 

  
 ... 
  




  
 ... 
  
  
  

  

  
 Наложение по умолчанию 



  
 Первичный оверлей 



  
 Светлый оверлей 
  

  

  
 Наложение градиента по умолчанию 



  
 Наложение основного градиента 



  
 Наложение светлого градиента 
  

  
  
 Размытый фон при наведении 
  
  





  

    

      
 Отображение содержимого при наведении 
      
 Это скрытый контент, который открывается при наведении курсора 
    
  
  





  

     
 Пользовательский цвет наложения 
 
  
  





  

     
 Эффект раскрытия клипа 
 
    

       
 Эффект раскрытия клипа