Как поменять задний фон у видео (аналогично, как это делается с картинками в Photoshop)
Всем доброго времени!
Наверное, всех удивляли фильмы, в которых актеры плавали среди опасных аллигаторов и акул, перебирались по канату над пропастью, выходили в открытый космос и т.д. и т.п.
На самом деле, в большинстве таких захватывающих эпизодов применялся один «фокус»: с помощью спец. ПО задний фон у видео менялся на нужный режиссеру. Именно благодаря этому сейчас удается снимать такие впечатляющие сцены!
Так вот, к чему это всё я… Дело в том, что сегодня у любого из нас на домашнем ПК есть возможность применять подобные эффекты. Например, можно записать себя стоящим в комнате (дома), а потом с помощью замены фона сделать такое видео, будто бы вы находитесь в пустыне или на необитаемом острове…✔
В этой заметке приведу пошаговый пример решения подобной задачи — мы из обычного интервью сделаем «интервью из средневековья» (согласитесь, это существенно может оживить ролик). В качестве примера — см. скриншот ниже, на нем показано, о чем идет речь…
Пример (превью)
*
Меняем задний фон у видео
❶
Выбор и подготовка основного видео
Во-первых, основное видео (у которого мы будем менять фон) необходимо записать специальным образом: задний фон должен быть однотонным (например, зеленым, синим, белым и т.д.).
Во-вторых, крайне желательно, чтобы фон не пересекался с цветами одежды и волос того, кто записан на этом видео. Чтобы было наглядно видно, что нужно получить — я привел один кадр из видео ниже. 👇
Скрин из интервью
Длина видео, формат сжатия, и пр. моменты — не так важны (в большинстве случаев, программе-редактору все равно, что кодировать).
❷
Выбор ПО, создание проекта
Для решения текущей задачи я буду использовать видеоредактор для начинающих — 👉 Видео-Монтаж (ссылка на офиц. сайт). Кстати, не смотря на свой простой интерфейс, этот редактор позволяет делать удивительные вещи!
Установка видео-редактора стандартная (как и у любой другой программы), поэтому ее не рассматриваю.
Собственно, после запуска редактора — выберите в меню задачу «Хромакей». См. пример ниже на картинке.
Удобная замена одноцветного фона
❸
Выбор основного видео и нового фона
В первом же шаге программа попросит указать основное видео (с однотонным фоном). Просто укажите его и нажмите «Далее».
Выбираем нужное видео
После, нужно указать новый фон: т.е. тот фон, который заменит наше однотонное полотно. В качестве такого фона можно взять либо какую-нибудь картинку, либо другое видео (в нашем примере указана картинка со средневековым замком).
Выбираем новый фон (может быть картинкой или видео)
❹
Замена фона: смешивание, растворение
Теперь видео-редактор попросит вручную указать фон, который будет заменен (на основном видео). В нашем примере это зеленое полотно, именно его и указываем.
Указываем цвет фона
Далее программа автоматически удалит тот цвет, который вы указали и подставит новый фон. Нам же в этом шаге нужно:
- задать размер и положение главного действующего лица;
- «до-настроить» параметры смешивания и допуска (от этого зависит резкость, яркость, качество совмещения и пр. параметры).
Когда всё будет размещено идеально (так, как требуется) нажмите «Далее».
Настраиваем смешивание и растворение одного объекта над другим
❺
Обрезка видео (опционально)
Теперь можно обрезать видео по длине. Например, это часто требуется для начала и концовки ролика (когда в кадр попадают какие-нибудь приготовления или посторонние люди…). В общем-то, шаг не обязательный — можно и не выполнять…
Обрезаем видео при необходимости
❻
Добавление музыки (при необходимости)
Если вы хотите наложить доп. тематическую музыку — просто нажмите на «Плюсик» в левом меню окна и выберите нужную композицию. Кстати, несколько заготовок под разные проекты уже есть в самом редакторе, возможно они вас устроят…
Накладываем музыку (при необходимости)
❼
Сохранение полученного видео
Ну и последний штрих — сохранение полученного видео. Если вы делаете видео для просмотра на ПК, ТВ и пр. — рекомендуется выбрать формат AVI или MP4 (HD-видео).
Кстати, «Видео-Монтаж» на этапе сохранения позволяет указать не только кодек и разрешение кадра, но и вручную задать битрейт (причем, заранее сообщая вам итоговый размер видео!). Согласитесь, это весьма удобно, если вам видео нужно уместить на флешку или компакт-диск…
Выбор формата и качества ролика
❽
Результат
В общем-то, после кодирования видео — его можно открыть в любом плеере (я использовал стандартный, встроенный в Windows). Как видите, изображение в целом получилось достаточно яркое, сочное, и на первый взгляд для неискушенного пользователя всё выглядит вполне реалистично — как будто сняли на самом деле в замке… ✌
Было — стало
*
На этом у меня сегодня всё…
Ни пуха ни пера!..
👋
Первая публикация: 09.11.2019
Корректировка: 19.11.2020
Полезный софт:
- Видео-Монтаж
Отличное ПО для начала создания своих собственных видеороликов (все действия идут по шагам!).
Видео сделает даже новичок!
- Ускоритель компьютера
Программа для очистки Windows от мусора (ускоряет систему, удаляет мусор, оптимизирует реестр).
Другие записи:
Как заменить фон на видео
Как изменить фон в видео
Представляем Movavi Видеоредактор Плюс! С этой программой для монтажа вы сможете своими руками вырезать и поменять фон в видео и сделать ролик, не уступающий современным голливудским фильмам. Снимите видео на однотонном фоне, примените эффект Хромакей, и программа сделает фон видео прозрачным. Теперь вставьте вместо него симпатичный пейзаж, футуристическое видео или что-нибудь еще. Сменить фон видео в Movavi Видеоредакторе Плюс – дело нескольких минут.
Скачать бесплатно Скачать бесплатноЧитайте нашу инструкцию, и вы узнаете, как сделать фон в видео прозрачным и применить эффект Хромакей.
Установите Movavi Видеоредактор Плюс
Скачайте программу Movavi Видеоредактор Плюс для Windows или для Mac и установите ее на свой компьютер.
Добавьте видео в программу для хромакея
Запустите видеоредактор и в открывшемся окне выберите Создать проект в расширенном режиме. Затем нажмите кнопку Добавить файлы и загрузите два файла: видеоклип с однотонным фоном и видео или изображение, которое станет новым фоном для первого клипа.
Нужно готовое видео, снятое на зеленом фоне? Ищете красивый задний фон для видео? Множество интересных клипов для создания хромакея в домашних условиях вы найдете на страницах сервиса VideoBlocks. Чтобы узнать подробнее о VideoBlocks, перейдите в раздел Коллекция видео в окне Movavi Видеоредактора Плюс.
Замените фон видео
Как же заменить фон в видео? Для начала выберите ваше видео с однотонным или прозрачным фоном и перетащите его вверх по Шкале времени. На Шкале времени появится Трек дополнительного видео. Поместите свое видео на этот трек. Другой видеоклип, который вы собираетесь использовать в качестве фона, оставьте снизу, на основном Видеотреке.
Чтобы наложить основное видео на фоновое, дважды щелкните по верхнему видеоклипу на шкале времени, выберите опцию Поверх клипа из списка, расположенного над окном предпросмотра и нажмите Применить. Затем откройте опцию Хромакей в меню Инструменты и щелкните по однотонному фону видео в окне предпросмотра.
Вы увидите, что цвет маленького квадрата в меню Хромакей стал идентичным цвету фона вашего видео. Наконец, отрегулируйте настройки Допуск, Шумы, Края и Непрозрачность таким образом, чтобы фоновый клип было хорошо видно. Когда вы будете удовлетворены результатом, нажмите Применить. Фон верхнего клипа как будто вырезали: он стал полностью прозрачным, а вместо него появилось изображение или видео, которое вы разместили на нижней дорожке.
Сохраните клип
Нажмите кнопку Сохранить и выберите подходящую опцию. Хотите сохранить клип для просмотра на компьютере, сделать видеоролик для мобильного устройства, или подготовить видео к загрузке в интернет? Просто решите, где и как вы будете использовать получившееся видео, а Movavi Видеоредактор Плюс сделает все остальное! Чтобы начать экспорт видео, нажмите Старт. Вот и всё, теперь вы знаете как работать с хромакеем при помощи нашей удобной программы для замены фона в видео!
Movavi Видеоредактор Плюс
Шаг вперед в создании видео
Редактируйте видео, фото и аудио на монтажном столе
Добавляйте переходы, фильтры и титры
Анимируйте объекты, пользуйтесь расширенной коллекцией медиа
Сохраняйте видео в любом популярном формате
Другие полезные инструкции
Остались вопросы?
Мы также рекомендуем
Как быстро сделать красивый фон в фотошопе на фотографии
Здравствуйте! Наверняка у каждого наберется пара-тройка, а может и с десяток фотографий, которые хороши сами по себе, но хотелось бы их украсить — изменить фон. В интернете есть миллионы красивых фонов, при желании их можно скачать, но собственноручно сделанный фон намного интереснее, тем более этот фон будет в единственном экземпляре. Давайте научимся делать красивый фон в фотошопе на фотографии.
Открою вам маленькую хитрость: чтобы сделать красивый фон в фотошопе, можно взять несколько фонов и текстур и поэкспериментировать с режимами наложения — может получиться довольно симпатично. Но мы пойдем другим путем, более оригинальным и творческим и научимся создавать фон с нуля, при помощи стандартных инструментов фотошоп, градиентов и кистей, скачанных из интернета.
Используемые в уроке материалы:
Девушка – https://cloud.mail.ru/public/9aMq/VJckPyBtw
Градиенты – https://cloud.mail.ru/public/G4Tw/heBD73MGk
Кисти — https://cloud.mail.ru/public/8VxE/eESkvLKWd
Открываем в фотошопе фото с девушкой, Файл-Открыть (File—Open):
На панели слоев нажмите на замочек чтобы разблокировать слой с девушкой для возможности дальнейшего редактирования:
В палитре инструментов выбираем инструмент Волшебная палочка (Magic Wand),горячая клавиша вызова инструмента W. Чтобы выбрать инструмент с подгруппы, при активной подгруппе сделайте длительный щелчок по иконке подгруппы или же щелкните по иконке подгруппы с зажатой клавишейShift:
Наше фото на белом фоне, имеет четкие границы, поэтому в этом случае подойдет инструмент Волшебная палочка (Magic Wand), вы же можете отделить человека от фона любым удобным для вас инструментом.
Для выделения белого фона просто щелкните по самому большому участку белого фона, далее с зажатой клавишей Shift пощелкайте ещё в области рук и головы.
На клавиатуре нажимаем клавишу Delete либо переходим в меню Редактирование-Очистить (Edit—Clear)для удаления белого фона с фото:
Нажимаем Ctrl+D или переходим в Выделение-Отменить выделение (Select—Deselect),чтобы снять выделение:
Активируем инструмент Градиент (Gradient), горячая клавиша вызова инструмента –G:
Откроется окно настроек градиента, в котором мы можем самостоятельно подобрать цвета, кликнув по миниатюре градиента:
Раскроется меню редактирования стиля градиента, выбрать цвет можно кликнув понижним ползункам (контрольным точкам),контрольные точки можно перетаскивать и добавлять новые:
Верхние контрольные точки отвечают за непрозрачность градиента, их мы трогать не будем.
Стили градиента можно как создавать самому, так и использовать скачанные из интернета, изменяя настройки под себя.
Чтобы загрузить стили градиента, нужно при активном окне градиента нажать кнопку «Загрузить»и выбрать в проводнике скачанные из интернета градиенты:
Я выбрала голубо-желто-зеленый градиенти немного, изменила его настройки, отмеченные на скриншоте:
После достижения удовлетворительного результата нажала два раза «Ок». Вот как выглядит наш фон:
Сейчас фон перекрывает девушку, перейдите в палитру слоев
Изображение уже и так значительно изменилось в лучшую сторону, но продолжим создавать красивый фон для фотографии. Создайте новый слой выше слоя с фоном, но ниже слоя с девушкой,Слои-Новый-Слой (Layer—New—Layer) или нажмите на иконку создания нового слоя в палитре слоев:
Активируем инструмент Кисть (Brush), горячая клавиша выбора инструмента B:
Загружаем кисти «Блестки», для этого нажимаем на иконку размера кисти, далее – на «шестеренку» справа, а потом «загрузить кисти»:
Выбираем понравившеюся кисть, у меня это:
Выбираем белый цвет:
Можно выбрать любой другой, но в нашем случае больше подойдет белый. Ставим хаотичные отпечатки кистью на ранее созданном слое:
Можно поиграть с режимами наложения слоя и изменить его, к примеру, на Перекрытие (Overlay) или Мягкий свет (SoftLight):
Если вас устраивает результат, можно остановиться на этом, а можно создать новые слои и добавить мазков других кистей. Тут нет определенных правил, все зависит от вас, вашей фантазии и желаемого результата. Регулируйте непрозрачность слоя для смягчения эффекта.
Вот ещё один вариант фона, созданный тем же методом с использованием тех же градиентов и кистей:
Вот вы и узнали, как сделать красивый фон в фотошопе на фотографии, теперь можете применять полученные знания на своих фотографиях. Творческих успехов!
Автор урока: Ольга Максимчук (Princypessa)
Как сделать фон в Скайпе для видеозвонков
Практически все общения в Скайпе проходит в аудиоформате. Причины просты. Основные из них, это внешний вид тех, кто общается. Как правило, мы думаем, что выглядим не очень хорошо и не хочется причесываться или пойти побриться. И, конечно же, задний фон, который заполняет пространство за спиной. Изменение внешнего вида полностью в ваших руках, а Skype дает возможность сделать задний фон привлекательным.
Содержание статьи
Обновление программы
Перед началом настройки программы Скайп, необходимо проверить и установить новую версию.
Если мессенджер не просит обновлений, то переходите на официальный сайт по ссылке: https://www.skype.com.
Выбираете операционную систему, например: Windows 10.
Скачивайте и устанавливаете новую версию, в которой вы сможете настраивать изменения заднего плана при видеозвонке.
Установка размытого фона
Шаг 1. Запустить программу Skype.
Шаг 2. Находите раздел “Параметры” (Настройки). С правой стороны от аватара находятся три вертикальные точки. Нажимаете на них.
Шаг 3. В открывшемся меню выберете настройки “Звук и видео“.
Шаг 4. Под экраном камеры находится эффекты, которые можно применить. Выбираете эффект Blur (размытость) и применяйте его.
Добавление дополнительных фонов для видеозвонков
Подготовьте изображения или фотографии, которые планируете установить на задний план.
Если вы решили загрузить текстовую информацию, предупреждаю. Текст будет отображаться в зеркальном виде, а значит для получения нормального эффекта нужно подготовить соответствующую картинку.
Функция подмены фона работает на распознавании человека фокусировка на нем. Все остальное вне фокуса будет заменено на загруженное изображение. Немалую роль в этом процессе играет освещенность объекта.
Для загрузки изображения находите кнопку “Добавить“. Загружаете столько, сколько вам необходимо. При загрузке очередного фона картинка в окне будет меняться.
Замену изображений фона можно производить во время видеозвонка.
Удаление загруженных изображений для фона
Для удаления загруженных фонов на каждом из них имеется соответствующая кнопка. Нажимая на нее, изображение будет удалено.
Отмена всех изменений заднего плана в Скайп
Размытие и замена заднего изображения, во время видеозвонка значительно нагружает персональный компьютер, как и сам Скайп. Для более слабых машин рекомендуется отключать данные функции.
Для этого в настройках “Звуки и видео” под экраном камеры есть кнопка “None“. Ее активация отменит все изменения связанные с фоном и вернет к первоначальным настройкам.
Заключение
Функция подключения виртуального фона пока не работает на телефоне. Вероятно, разработчики работают над этим и мы получим ее в ближайшем будущем.
Как видите, теперь довольно просто изменить задний фон в видеозвонках без хромакея (специальной программы). Скайп, в этом плане, немного опередил Zoom.
Как создать пользовательский виртуальный фон с масштабированием
Zoom Video Communications (или Zoom) быстро зарекомендовал себя как необходимое цифровое место встречи для друзей, семьи и коллег. В условиях глобальной пандемии COVID-19 приложению для видеоконференцсвязи удалось дать некоторую передышку от одиночества и изоляции, которые сопровождают жизнь в карантине.
tl; dr: используйте этот бесплатный инструмент для создания виртуального фона Zoom , чтобы обрезать и обрезать пользовательский фон видео для вашего видеозвонка.
Хотя Zoom рекламируется как готовое решение для конференц-связи для школ и предприятий, есть несколько менее известная функция, которая превращает его в одно из самых интересных приложений. Конечно, мы говорим о виртуальном фоне. Этот видеоэффект позволяет пользователям с новым оборудованием удалить цифровой фон на камере и заменить его любым изображением или видео без использования зеленого экрана.
Virtual Backgrounds обеспечивает дополнительную конфиденциальность для ваших звонков, скрывая за собой комнату, и может привести к действительно веселому общению с вашими друзьями и коллегами.Один из моих любимых виртуальных фонов помещает выступающего в мгновенно узнаваемую сцену интервью из The Office, в то время как другие помещают вас в классические мемы или моменты фильма.
Вот краткое изложение того, как создать свой собственный Zoom Virtual Background для видеоконференций.
- Загрузите Zoom и проверьте системные требования
- Найдите изображение или видео, которое вы хотите использовать в качестве виртуального фона
- Загрузите и отредактируйте свой фон в Kapwing
- Загрузите свой фон и добавьте его в Zoom
Шаг 1: Загрузите Zoom и проверьте системные требования
Чтобы начать работу с виртуальным фоном, загрузите настольное или мобильное приложение Zoom.Виртуальные фоны в настоящее время не поддерживаются в приложении браузера Zoom.
Важно отметить, что некоторые старые устройства и машины не могут запускать виртуальные фоны — вам нужно проверить официальные системные требования Zoom, чтобы убедиться, что ваше оборудование готово для этой функции. У Zoom разные системные требования для использования изображения в качестве виртуального фона и видео. Это различие позволяет большему количеству пользователей получить доступ к функции.
На многих ПК и Mac можно запускать виртуальный фон, но на мобильных устройствах вам понадобится iPhone 8 или новее, чтобы заменить фон.
При первом открытии вкладки «Виртуальные фоны» в настольном приложении Zoom вам будет предложено включить пакет интеллектуального виртуального фона. Это не отрывочная вредоносная программа; это быстро, надежно и реально. Просто нажмите синюю кнопку «Загрузить», чтобы продолжить.
Как скрыть свой фон в видеоконференцсвязи
Работать из дома или в удаленном месте достаточно просто, но важно оставаться профессиональным, даже если ваше окружение выглядит иначе.Для любого, кто работает в отдельной спальне, за кухонным столом или даже сидит на диване, видеоконференцсвязь — это сценарий, когда вы, вероятно, предпочитаете, чтобы все происходило в фоновом режиме хорошо и по-настоящему скрыто. Затем введите способность скрыть указанный фон с помощью более сдержанного и разумного оттенка синего или зеленого.
Множественный выбор
Фактически, многие программы видеоконференцсвязи позволяют полностью изменить фон на что-то другое. Так что, если вы думаете, что пришло время для чего-то более расслабляющего, чем простой синий или зеленый фон, то, возможно, лучше всего подойдет лесной пейзаж или фон Лейкленда.Очевидно, это зависит от контекста вашей встречи, но возможность придать вашей встрече что-то дополнительное по теме может быть изящным штрихом.
Рекомендации по зрению
И наоборот, также стоит помнить, что у некоторых из ваших коллег по видеоконференцсвязи может быть нарушение зрения, поэтому легкий для просмотра оттенок может быть лучшим решением. Это означает, что что-то вроде прохладного оттенка синего или зеленого часто может быть лучшим вариантом, чтобы понравиться всем людям, присутствующим на вашей встрече.Сохранение визуальной нейтральности также означает, что вас будет легче увидеть, поскольку загруженный фон может быть немного чрезмерным для глаз тех, кто наблюдает за вами.
Программное обеспечение Zoom
Существует множество вариантов программного обеспечения для видеоконференцсвязи. Но одним из основных игроков и часто незаменимым решением для офисных работников, которые работают вне поля или просто дома, является Zoom. Теперь Zoom оснащен отличными инструментами, позволяющими сделать работу по видеоконференцсвязи простой и профессиональной.Он также может изменить фон, так что даже ваше неопрятное рабочее место дома может больше походить на профессионала, который работает в «подходящем» месте офиса.
На странице поддержки Zoom есть множество инструкций о том, как это сделать, в зависимости от того, с каким ноутбуком, настольным компьютером или мобильным устройством, например смартфоном или планшетом, вы работаете. Стоит отметить, что эта процедура работает лучше всего, если вы находитесь в достаточно хорошо освещенном помещении, поэтому не пытайтесь делать это, сидя за ноутбуком в постели посреди ночи.Следуйте простым инструкциям для любого компьютера или устройства, которое вы используете, и скоро вы начнете свой бизнес.
Программное обеспечение Microsoft
Неудивительно, что Microsoft позволит вам сделать то же самое, если вы используете или вам было сказано использовать его программное обеспечение. Например, Microsoft Teams позволяет вам следовать аналогичному маршруту для изменения фона во время видеоконференцсвязи.
На самом деле, есть изящный поворот, поскольку на этот раз это больше размытый фон, и это нормально, если ему удастся скрыть груду грязного белья в углу вашей спальни.Этот процесс, как описано на страницах поддержки Microsoft, еще проще.
Skype route
Как и в случае с Microsoft Teams, вы также обнаружите, что маршрут размытия фона является опцией в постоянно популярном программном инструменте Skype. На их страницах блога есть отличный обзор того, как это сделать, в котором объясняется, что эта функция доступна для большинства настольных компьютеров и ноутбуков, оснащенных последней версией программного обеспечения.
Вы можете получить более полную разбивку по этапам, перейдя на специальную страницу поддержки для этого процесса, на которой описаны его действия в зависимости от типа машины или устройства, с которыми вы должны работать.Однако эта функция не поддерживается в Linux. В этом случае ознакомьтесь с нашими лучшими альтернативами Skype.
ChromaCam
Другой вариант, который вы, возможно, захотите изучить, — это ChromaCam. Это настольное приложение для Windows, которое может работать в тандеме с обычной веб-камерой. Его можно использовать в паре с такими, как Skype, Webex, Zoom, Google Hangouts и другими, и вы можете изменять фон ваших видеозвонков.
После установки этот маршрут также позволяет удалить фон, размыть его, добавить эффекты потоковой передачи или вставить слайды презентации Powerpoint в качестве фона.
ChromaCam в настоящее время поставляется в двух вариантах, с бесплатной версией Lite, которая предлагает возможность создания виртуального зеленого экрана, размытия фона, а также возможность добавления стандартных фоновых изображений.
Между тем, версия Pro имеет единовременную плату в размере 29,99 долларов США и добавляет отсутствие водяных знаков, положение для вставки пользовательского фона и логотипов, а также поддержку тех слайдов Powerpoint, которые вы просто не можете дождаться, чтобы показать их, когда Следующая встреча. ChromaCam также сообщает, что в настоящее время работает над разработкой версии для Mac.
3 способа сделать фон логотипа прозрачным: пошаговое руководство
Логотип с прозрачным фоном может иметь решающее значение для создания дизайна и рекламы профессионального уровня. Это дает вам больше вариантов того, где вы можете разместить свой логотип, и обеспечивает безупречный вид конечному продукту. Хотя Photoshop — отличный инструмент для этого, есть много других способов сделать это, будь вы дизайнер или нет!
Прозрачные фоны для непрофессионалов:
1) LunaPic
Лучший бесплатный инструмент, который я нашел, — это LunaPic.LunaPic работает очень просто: вы загружаете свое изображение, нажимая кнопку обзора, а затем выбираете свою фотографию.
Эффект «Прозрачный фон» можно найти в меню редактирования на панели инструментов.
Затем вы нажимаете на цвет фона — в данном случае в любом месте белого. И ваше изображение теперь прозрачное! Вверху есть полоса регулировки, если вам кажется, что фон должен быть виден более или менее. Вы можете легко загрузить его и использовать разными способами.
2) Магия обрезки
Еще один хороший вариант — Clipping Magic. К сожалению, это не бесплатно, и для загрузки изображения вам потребуется подписка, но это относительно недорого. Хотя LunaPic хорош для удаления сплошного цветного фона, если по какой-то причине фон не сплошной, Clipping Magic — еще один хороший выбор. Вот как это работает:
Для начала вы загружаете свою фотографию.
Затем вы используете инструмент «Красно-зеленая кисть», чтобы отметить, какие части изображения оставить, а от каких избавиться.
Не нужно рисовать все, достаточно лишь желтых линий вокруг изображения. Вы также можете изменить размер кисти внизу страницы, если у вашего логотипа тонкие линии.
3) PicMonkey
PicMonkey — еще один отличный ресурс, для которого также требуется подписка. Существует 7-дневная бесплатная пробная версия, но после этого вы должны заплатить, чтобы пользоваться услугой. PicMonkey очень полезен, если вы собираетесь редактировать не только прозрачный фон.Для этого вы начинаете с нажатия «дизайн» на главной странице.
Когда вы открываете свой дизайн, вы хотите изменить размер холста в соответствии с размером вашего изображения. В этом случае мое изображение было 4349 пикселей на 2852 пикселей. Параметр «изменить размер» находится внизу на панели основных эффектов. Убедитесь, что вы сняли флажок «сохранять пропорции», если ваше изображение не квадратное.
В верхней части панели «Базовый эффект» вы можете сделать фон вашего изображения прозрачным.
Теперь загрузите свое изображение, щелкнув панель «Наложение» и выбрав «Добавить свое».Когда ваша фотография загрузится, появится инструмент наложения. Вам нужно будет нажать на ластик, а затем вы можете начать стирать фон вашего изображения.
Размер ластика можно регулировать, чтобы стирать мелкие линии. Как только вы закончите, просто сохраните изображение, чтобы использовать его в любое время!
Использование Photoshop для создания прозрачного фона
Если вы дизайнер или используете Adobe Photoshop или Illustrator, есть несколько простых способов сделать фон вашего логотипа прозрачным.
В Фотошопе очень легко удалить фон фотографии. Открыв изображение в Photoshop, убедитесь, что оно разблокировано, чтобы его можно было редактировать. Затем выберите инструмент Magic Wand.
Затем щелкните в любом месте фона, чтобы выбрать его. Вокруг всего, что выбрано, появится движущаяся пунктирная линия.
Инструмент «Волшебная палочка» великолепен, но не всегда выделяет все пустое пространство. Чтобы убедиться, что вы будете стирать весь фон, я предпочитаю щелкнуть раскрывающееся меню «Выбрать» и выбрать «Подобный».Это обеспечит фактический выбор всего фона.
Как только весь фон выбран, просто нажмите «Удалить» на клавиатуре, и фон исчезнет!
Чтобы отменить выбор изображения, используйте сочетание клавиш -D и затем вы можете сохранить логотип как PNG, чтобы сохранить прозрачность. У JPEG не может быть прозрачного фона, как бы вы ни старались.
Создание векторного логотипа в Illustrator
Хотя PNG прекрасны, они основаны на пикселях, а не на векторах.Это означает, что при увеличении масштаба вы потеряете четкость и изображение будет нечетким. Векторное изображение можно масштабировать бесконечно маленьким или большим и оставаться четким без пикселизации. Если ваш логотип еще не является векторным, есть простой способ превратить его в векторную иллюстрацию с помощью Adobe Illustrator.
Сначала нам нужно проследить изображение логотипа. После того, как вы откроете изображение в Illustrator, выберите «Объект» в верхнем меню и нажмите «Image Trace — Make». После этого есть несколько способов продолжить.
Не беспокойтесь, если ваше изображение будет выглядеть немного странно сразу после этого. Это очень поправимо. Меню предустановок слева очень полезно для определения того, какая линия изображения лучше всего подходит для вашего логотипа. Для этого логотипа я выбрал 6-цветный вариант, потому что используются 4 разных цвета.
Новый вектор выглядит идентично исходному изображению. Однако вы заметите, что фон все еще остается белым, если переместить вектор.
Чтобы исправить это, вам сначала нужно щелкнуть «Развернуть» на верхней панели, чтобы дать изображению точки, которые вы можете редактировать.Теперь, используя инструмент «Прямое выделение», вы можете удалить точку вокруг логотипа, чтобы избавиться от белого поля.
Вы можете сохранить этот файл как EPS, чтобы сохранить вектор. PDF-файл также сохранит векторы, но автоматически установит белый фон.
Независимо от того, никогда ли вы раньше не редактировали изображение или только что знакомы с Illustrator и Photoshop, эти инструменты должны дать вам простой способ создать более функциональный и привлекательный логотип.
Пригласить Измените медиа-группу в свой почтовый ящик! Вы будете получать нашу первую серию электронных писем, а затем одно письмо в месяц с необходимой информацией.Никакого спама никогда, отписывайтесь в любое время.
Кэмпбелл Томпсон — Visual Composer CMG. Кэмпбелл занимается креативной рекламой и студийным искусством в Университете штата Мичиган. У нее есть страсть к политике и некоммерческим организациям, и она надеется использовать свои навыки в графическом дизайне и фотографии, чтобы вдохновить на изменения в мире вокруг нее.
фонов | Webflow University
Обзор стилей фона, которые можно установить для элемента: цвет, фон, градиенты и цветные наложения.
В этом видео используется старый интерфейс. Скоро выйдет обновленная версия!
В этом видео используется старый интерфейс. Скоро выйдет обновленная версия!
В этом видео используется старый интерфейс. Скоро выйдет обновленная версия!
* СОДЕРЖАНИЕ ПРЕДУПРЕЖДЕНИЕ в 01:23 — этот раздел может затронуть людей с повышенной зрительной чувствительностью. Следуя своему усмотрению зрители советуют.
Установка фона для элемента дает вам контроль над внешним видом и удобочитаемостью. В разделе Backgrounds панели Style вы можете добавить фоновое изображение, градиент или цвет к большинству элементов (кроме мультимедийных элементов, таких как видео и изображение).
В этом уроке:
- Цвет фона
- Фоновое изображение
- Градиенты
- Наложение цвета
- Фоновое видео
Цвет фона
Вы можете установить цвет фона для любого элемента, кроме изображений и видео. Вы можете применить цвет фона к любому элементу, введя веб-цвет (шестнадцатеричный, rgba или название цвета) или выбрав цвет с помощью палитры цветов. Цвет фона также можно добавить к текстовым элементам или определенному текстовому содержимому внутри текстового элемента.
Бывают случаи, когда вы хотите, чтобы цвета фона были одинаковыми во всем проекте. Здесь пригодится тег Body (Все страницы) .
Вы можете стилизовать тег Body (Все страницы) двумя способами:
- Выберите элемент Body и выберите тег Body (All pages) в раскрывающемся списке Selector field на панели Style
- Выделите любой элемент и выберите тег Body (Все страницы) в меню наследования — все элементы наследуют стили от тега Body (Все страницы)
После того, как вы установили фон на Body (Все страницы) , любой добавляемый элемент будет по умолчанию использовать этот стиль фона.И вы можете вносить изменения не только в цвет фона, но и в любое свойство стиля. Подробнее о стилизации элементов тегов в тегах HTML.
По умолчанию у большинства элементов прозрачный фон. Некоторые элементы, такие как компонент ползунка, имеют цвет фона по умолчанию, который можно изменить, установив цвет фона для основного элемента ползунка.
Фоновое изображение
Webflow предлагает множество параметров для настройки фонового изображения.
Чтобы добавить или изменить фоновое изображение:
- Прокрутите до Фон на панели стилей
- Щелкните Выбрать изображение , чтобы выбрать изображение на панели «Активы».
- Установите флажок для @ 2x (чтобы установить ширину изображения в половину от исходного размера, чтобы оно отображалось четко на устройствах HiDPI)
Чтобы использовать вместо этого фоновое видео, замените элемент на компонент фонового видео на панели Добавить .
Размер фонового изображения
Чтобы указать размер фонового изображения, используйте пользовательские размеры или одну из предустановок:
- Пользовательский определяет ширину и / или высоту фонового изображения.Вы также можете использовать процентные значения. Чтобы установить масштаб фонового изображения больше, чем элемент, используйте любой процент выше 100%.
- Обложка масштабирует изображение, чтобы заполнить и покрыть весь фон элемента, перекрывая любую заданную ширину и высоту. Изображение может быть обрезано в зависимости от соотношения сторон элемента, размера экрана и изображения.
- Содержать масштабирует фоновое изображение, чтобы оно оставалось внутри элемента и. Это значение также имеет приоритет над любой установленной шириной и высотой.
Положение фонового изображения
По умолчанию фоновое изображение размещается в верхнем левом углу элемента. Измените положение фона, чтобы настроить вид изображения на экране.
Изображение можно выровнять по вертикали и горизонтали.
Чтобы вручную настроить положение фонового изображения, вы можете ввести значение положения для горизонтального положения (слева) и вертикального положения (вверху). Вы также можете изменить единицы измерения значений между пикселями,% (по умолчанию), VW и VH.
Мозаика
По умолчанию фоновое изображение повторяется как по вертикали, так и по горизонтали.
Вы можете выбрать повторение фона по горизонтали, вертикали или вообще не повторять.
Фиксированный или прокручиваемый
Вы можете выбрать поведение фонового изображения при прокрутке в Фон настройки:
- Не фиксировано : изображение прокручивается вместе со страницей
- Фиксированное : изображение остается на месте на прокрутке
Все фоновые изображения — Не фиксировано по умолчанию.Установка фонового изображения на Фиксированное значение принудительно устанавливает ширину изображения в области просмотра, а не в границах элемента.
Градиенты
Градиенты можно использовать отдельно или поверх существующего цвета фона или изображения.
Существует 2 типа градиентов:
- Линейные градиенты
- Радиальные градиенты
Оба типа градиента имеют остановки (или точки) вдоль градиента, где цвета переходят от одного к другому.
Примечание : Safari интерпретирует (и интерполирует) градиенты прозрачности как «прозрачный черный».Таким образом, прозрачный цвет будет выглядеть черным для пользователей Safari.
Линейный градиент
Линейный градиент создает градиент цвета в одном направлении, направленном под углом. Чтобы отрегулировать угол градиента, вы можете:
- Щелкните и перетащите точку на шкале направления, щелкнув в любом месте шкалы, чтобы установить положение угла
- Нажимайте стрелки, чтобы повернуть угол с шагом 45 градусов
- Введите желаемый угол в поле ввода.
Ограничения градиента
С помощью ограничителей градиента вы можете редактировать цвет и непрозрачность градиента, выбирая ограничители градиента на панели градиента.Если под градиентом есть слой фонового изображения, он станет видимым после уменьшения непрозрачности.
Чтобы добавить дополнительные цвета к градиенту, добавьте остановку к полосе градиента. Вы можете добавить более одной остановки, щелкнув в любом месте полосы градиента.
Вы можете отрегулировать позиции останова, щелкнув и перетащив полосу градиента.
Чтобы удалить остановку:
- Долгое нажатие на упор
- Перетащите упор из полосы градиента, пока края упора не станут прозрачными
- Отпустите, чтобы удалить упор
Повторить
Переключение Повторить приведет к повторению положения и угла существующего градиента.
Устанавливается по положению первой и последней остановок. Чтобы создать более очевидный повторяющийся градиент, перетащите первую или последнюю остановку от края полосы градиента.
Реверс
Значок реверса меняет положение упоров на обратное.
Радиальный градиент
Радиальные градиенты создают градиент в форме круга.
Цветовой ограничитель слева будет цветом, который вы видите в центре радиального градиента.
Положение
Вы можете выбрать фокус градиента, щелкнув одну из точек в элементе управления положением.Например, щелкните центральную точку, чтобы выровнять содержимое изображения.
Вы также можете вручную отрегулировать положение, введя значения для горизонтального положения (слева) и вертикального положения (вверху). Вы также можете изменить единицы измерения значений между px,% (по умолчанию), vw и vh.
Размер
Как градиент работает с границей элемента, управляется предустановкой размера. Предустановки:
- Ближайшая сторона : градиент начинается от центральной точки к ближайшей стороне
- Ближайший угол : градиент начинается от центральной точки до ближайшего угла
- Самая дальняя сторона : градиент начинается от центральной точки и продолжается до самой дальней стороны
- Самый дальний угол : предустановка по умолчанию.Градиент начинается от центральной точки и продолжается до самого дальнего угла
Наложение цвета
Наложение цвета можно добавить к любому фону. Используйте палитру цветов, чтобы выбрать цвет, затем установите значение непрозрачности.
Наслоение изображений и градиентов
Добавляйте и складывайте несколько фоновых изображений, градиентов и наложений цветов для создания многослойных эффектов. Чтобы изменить порядок фоновых слоев, наведите указатель мыши на слой и щелкните вертикальную пунктирную линию слева.
Щелкните значок глаза, чтобы переключить видимость слоев. Чтобы удалить любой слой, щелкните значок корзины.
Фоновое видео
A Фоновое видео — отличный способ привлечь внимание, используя беззвучное, зацикленное видео в качестве фона определенного раздела контента. Фактически, фоновое видео ведет себя почти как раздел, поэтому вы можете поместить контент прямо внутрь.
Добавьте фоновое видео , используя Quick find (CMD / CTRL + E) или из компонентов панели Elements .Когда вы поместите фоновое видео на холст, вам будет предложено загрузить видео.
Затем загрузите видео со своего компьютера.
Поддерживаемые форматы видео
Компонент Background video принимает видеофайлы размером менее 30 МБ в следующих форматах: webm, mp4, mov, ogg.
Примечание. Имена файлов фонового видео не должны содержать пробелов или специальных символов (кроме дефисов), а видео следует оптимизировать для Интернета для обеспечения максимальной производительности.
Транскодирование видео
После загрузки видеофайла он перекодируется в другие типы видеофайлов (mp4 и webm) для максимальной поддержки браузером.Пока это происходит, вы можете продолжать работать в Конструкторе.
Предварительный просмотр фонового видео
Есть 3 способа просмотреть только что загруженное видео:
- Наведите указатель мыши на эскиз видео в настройках фонового видео
- Щелкните значок «Открыть в новой вкладке» рядом с именем видеофайла для предварительного просмотра видео в новой вкладке
- Щелкните значок предварительного просмотра на верхней панели, чтобы увидеть, как фоновое видео будет отображаться в вашем дизайне
Замена фонового видео
Чтобы заменить фоновое видео , откройте фоновое видео настройки, дважды щелкнув видео или перейдя на панель Settings .
Вы также можете получить доступ к настройкам Фоновое видео , выбрав элемент и нажав Введите . Когда откроется окно настроек, нажмите Заменить видео , чтобы загрузить и перекодировать новое видео.
Использование фонового видео в качестве раздела
Вы можете использовать фоновое видео в качестве раздела. Просто поместите любой контент в элемент Background video . Размещение и стиль содержимого внутри раздела такое же, как и для других элементов — все свойства стиля доступны на панели «Стиль ».
Примечание : Фоновые видео могут не воспроизводиться автоматически на сенсорных устройствах, если посетитель сайта включил экономию трафика.
Фоновое наложение видео
Вы можете добавить контраст, используя градиент или наложение сплошного цвета на вашем Фоновом видео . С помощью палитры цветов — выберите цвета и измените прозрачность, чтобы настроить видимость.