Как изменить фон на фото

Содержание:

Деревянный
- Почему он?
Свойство background
Универсальное свойство background
Сорви овации
Управление повтором фонового изображения
Эффектное преображение фото:вырезаем объект и меняем фон своими руками
Фиксация фона
Как удалить фон на изображении
Управление позицией фонового изображения
Фон на веб-странице
- Добавление фонового рисунка
- Повторение рисунка
Работа с обработанным фото, после удаления фона

Деревянный

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

Всё довольно просто: едете в Леруа Мерлен или любой строительный магазин. Покупаете 5-6 досок одного размера, 2 дощечки, чтобы их всех соединить, и гвозди. Сколачиваете доски, получаете фон.

Почему он?

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

Цена: 1 доска стоит 60-100 рублей, 1 узкая (скрепляющая) доска стоит 110 рублей, гвозди стоят 30 рублей за штуку. Итого: около 1000 рублей + краска рублей 100-150.

Свойство background

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

Рис. 1. Вид страницы с фоновым рисунком

Пример 1. Добавление фонового рисунка

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Фон</title>
<style>
body {
background:
#c7b39b /* Цвет фона */
url(/example/image/dzen.png) /* Путь к файлу с рисунком фона */
right top /* Положение в правом верхнем углу */
no-repeat /* Не повторять рисунок */
fixed; /* Зафиксировать фон */
}
h1 {
font-family: Arial, sans-serif;
font-size: 1.2em;
}
</style>
</head>
<body>
<p>Устойчивость по Ляпунову колебательно переворачивает устойчивый прибор.</p>
</body>
</html>

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

Универсальное свойство background

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

Существует более простой метод задать значения всех свойств для работы с задним фоном в одном объявлении, используя универсальное свойство background.

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

background: "color image position/size repeat origin clip attachment;

Где значения соответствуют вышерассмотренным нами свойствам:

background-color (color | transparent).
background-image (url | none).
background-position (значение).
background-size (auto | length | cover | contain).
background-repeat (repeat | repeat-x |repeat-y | no-repeat).
background-origin (padding-box | border-box | content-box).
background-clip (border-box | padding-box | content-box).
background-attachment (scroll | fixed | local).

Давайте рассмотрим пример использования универсального свойства background:

Пример использования универсального свойства background

И так, что мы сделали в этом примере:

Мы установили для элементов <html> и <body> высоту 100%, убрали внутренние и внешние отступы.
Для элемента <header> задали минимальную высоту равную 34% от родительского элемента, ширину установили 100%. В качестве заднего фона установили изображение — url(‘cat_g.jpg’), позиционировали его по низу и масштабировали фоновое изображение под размеры элемента (center / contain — background-position / background-size). Без косой черты, как и без позиции фонового изображения работать не будет.
Для элемента <div> с классом .primer2 задали минимальную высоту равную 66% от родительского элемента, ширину установили 100%. В качестве заднего фона установили два различных изображения, позиционировали их по центру (center) и масштабировали их (первое изображение полностью помещается — значение contain, второе изображение масштабируется под размеры элемента cover ).

Результат нашей работы:

Рис. 122 Пример использования универсального свойства background.

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

Подробное изучение позиционирования элементов будет освещено далее в учебнике в статье «Позиционирование элементов в CSS».

Сорви овации

Будьте самыми стильными! Используйте суперэффекты:

Маски для инстаграма.
Обложки для актуальных историй.
Красивые шрифты.
Топ-20 лучших фильтров VSCO.
Анонимно смотреть истории.
Видеоредакторы.
Как убрать предмет с фото.
Рамки (большая коллекция).
Мемоджи.
Акварельные мазки.
Flat Lay раскладка.
Надпись в круге на фото.
Двойная экспозиция.
Снимки в стиле Полароид.
Красивый инстаграм в маленьком городе.

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

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

Спасибо за ваше потраченное время

Управление повтором фонового изображения

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

Это свойство имеет следующие доступные значения:

Значение	Описание
repeat	Фоновое изображение будет повторяться как по вертикали, так и по горизонтали. Это значение по умолчанию.
repeat-x	Фоновое изображение будет повторяться по горизонтали (по оси x).
repeat-y	Фоновое изображение будет повторяться по вертикали (по оси y).
no-repeat	Фоновое изображение не будет повторяться.

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример управления повтором фонового изображения</title>
<style> 
body {
background-image: url("main_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
}
div {
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
background-image: url("small_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
width: 200px; /* устанавливаем ширину элемента */
height: 200px; /* устанавливаем высоту элемента */
border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */
margin-right: 10px; /* устанавливаем внешние отступы справа */
text-align: center; /* выравниваем текст по центру */
line-height: 200px; /* задаем высоту строки */
background-color: azure; /* указываем цвет заднего фона*/
}
.noRepeat {
background-repeat: no-repeat; /* фоновое изображение не будет повторяться.   */
}
.repeatX {
background-repeat: repeat-x; /* фоновое изображение будет повторяться по горизонтали */
}
.repeatY {
background-repeat: repeat-y; /* фоновое изображение будет повторяться по вертикали */
}
</style>
</head>
	<body>
		<h1>Значение repeat для body (по умолчанию)</h1>
		<div class = "noRepeat">no-repeat</div>
		<div class = "repeatX">repeat-x</div>
		<div class = "repeatY">repeat-y</div>
	</body>
</html>

По аналогии с предыдущим примером для <body> мы установили задний фон, который дублируется как по горизонтали, так и по вертикали. Кроме того, мы создали для наших блоков три класса, которые определяют как будет повторяться фоновое изображение, используя различные значения для свойства background-repeat:

Для первого блока мы указали, что изображение не будет повторяться (значение no-repeat), это значение чаще всего используется в работе.
Второй блок получил значение repeat-x, которое определяет, что фоновое изображение будет дублироваться по горизонтали.
Ну и в третьем блоке фон дублируется по вертикали (значение repeat-y).

Результат нашего примера:

Рис. 116 Пример управления повтором фонового изображения.

Эффектное преображение фото:вырезаем объект и меняем фон своими руками

Сложно поверить, но теперь отделить объект от фона на фото можно буквально за два щелчка мыши. С программой «ФотоМАСТЕР» вы без труда выполните настоящий фотомонтаж и окажетесь рядом с Эйфелевой башней или любимым актёром. Читайте статью и узнайте, как вырезать изображение и вставить на другой фон, приложив минимум усилий.

Шаг №1. Откройте исходное фото

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

Откройте нужный снимок в редакторе

Шаг №2. Выделите объект

Откройте вкладку «Инструменты» и найдите в списке функций «Замена фона». На данном этапе ваша главная задача – обозначить, где на снимке объект, а где – фон. Для этого потребуется «порисовать». Редактор предлагает две кисти:

«Объект» – зелёная линия для закраски предмета, который нужно оставить;
«Фон» – красная линия для обозначения областей для удаления/замены.

В других редакторах вам пришлось бы скрупулёзно обводить пиксели, тогда как вырезать изображение по контуру в «ФотоМАСТЕРЕ» можно в считанные секунды. Отрегулируйте размер и обведите фигуру зелёной кистью.

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

Выделите объект и фон на фотографии

Ошибки и неточности вы сможете исправить с помощью «Ластика».

Шаг №3. Исправьте неточности

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

Оцените результат

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

Скорректируйте границы объекта

Шаг №4. Вставьте фон

Настройте контур объекта – вы можете сделать границы более чёткими или размытыми в зависимости от желаемого результата. После вам нужно будет определиться с новым фоном.

При необходимости размойте границы объекта

Если вы хотели узнать, как вырезать объект и оставить его без фона, воспользуйтесь опцией «Сохранить изображение с прозрачным фоном». «ФотоМАСТЕР» запишет фото в формате PNG, оставив в кадре только объект. В дальнейшем вы сможете легко накладывать его на другие снимки.

Сохраните изображение с прозрачным фоном

Выберите новый цвет для фона

И, наконец, если вы хотите добавить на задний план другое фото, кликните «Выбрать изображение для фона». Программа предложит варианты на любой вкус – от живописных пейзажей до нейтральной кирпичной стены. Просто нажмите на понравившееся изображение – «ФотоМАСТЕР» автоматически подставит его под объект. Впрочем, редактор не ограничивает в выборе: нажмите кнопку «Загрузить» и добавьте любую другую картинку с компьютера.

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

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

Шаг №5. Улучшите фото

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

Подберите эффект для фотографии

Фиксация фона

При прокрутке страницы фоновая картинка также прокручивается вместе с содержимым. Если применяется повторение фона, то это не вызовет никаких проблем, но при единственном изображении и большом объёме текста может оказаться так, что фон передвинется за верхний край. Чтобы такого не происходило фоновое изображение фиксируется на месте и не перемещается вместе с остальным содержимым документа. Для этого применяется свойство background-attachment со значением fixed или всё то же свойство background (пример 4).

У fixed есть ещё одна особенность. Если мы добавляем картинку к селектору body, то она располагается не внизу окна браузера, а внизу блока с контентом, что особенно заметно при небольшом объёме текста или увеличении размеров окна браузера. Фиксированный фон привязывается именно к окну и уже не зависит от объёма контента.

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

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

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

Шаг 2. Выбираем размер «Режущей кисти», чтобы наиболее оптимально очертить контуры разделяемого изображения. Выбрав значение от 1 до 3, можно приступать к выделению контура.

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

Шаг 3. Указав сервису границу разделения, необходимо уточнить какие части изображения будут удаляться, а какую часть (или части) нам необходимо оставить. Используя инструменты «Переднего» и «Заднего» плана (зеленая и красная точки соответственно) — делаем пометки для скрипта сервиса, какой из элементов изображения чем является.

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

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

Шаг 5. Творим волшебство: нажимаем кнопку «Вырезать фон», немного ждем и вуаля!

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

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

Управление позицией фонового изображения

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

Значение	Описание
left topleft centerleft bottomright topright centerright bottomcenter topcenter centercenter bottom	Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Если вы указываете только одно ключевое слово, другое значение будет «center»
x% y%	Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0% 0% (это значение по умолчанию). В правом нижнем углу 100% 100%. Если указано только одно значение, то другое значение будет 50%.
x y	Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет 50%. Вы можете совместно использовать проценты и единицы измерения.

Рассмотрим пример использования этого свойства:

<!DOCTYPE html>
<html>
<head>
	<title>Пример позиционирования фонового изображения</title>
<style> 
div {
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
background-image: url("smile_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-repeat: no-repeat; /**/
width: 100px; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */
margin: 10px; /* устанавливаем внешние отступы со всех сторон */
text-align: center; /* выравниваем текст по центру */
line-height: 60px; /* указываем высоту строки */
background-color: azure; /* задаем цвет заднего фона */
}
.leftTop {background-position: left top;} /* задаем позицию ключевыми словами */
.leftCenter {background-position: left center;} /* задаем позицию ключевыми словами */
.leftBottom {background-position: left bottom;} /* задаем позицию ключевыми словами */
.rightTop {background-position: right top;} /* задаем позицию ключевыми словами */
.rightCenter {background-position: right center;} /* задаем позицию ключевыми словами */
.rightBottom {background-position: right bottom;} /* задаем позицию ключевыми словами */
.centerTop {background-position: center top;} /* задаем позицию ключевыми словами */
.centerCenter {background-position: center center;} /* задаем позицию ключевыми словами */
.centerBottom {background-position: center bottom;} /* задаем позицию ключевыми словами */
.userPosition {background-position: 20px 75%;} /* задаем позицию по горизонтали в пикселях, а по вертикали в процентах */
</style>
</head>
	<body>
		<div class = "leftTop">left top</div>
		<div class = "leftCenter">left center</div>
		<div class = "leftBottom">left bottom</div>
		<div class = "rightTop">right top</div>
		<div class = "rightCenter">right center</div>
		<div class = "rightBottom">right bottom</div>
		<div class = "centerTop">center top</div>
		<div class = "centerCenter">center center</div>
		<div class = "centerBottom">center bottom</div>
		<div class = "userPosition">20px 75%</div>
	</body>
</html>

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

Результат нашего примера:

Рис. 117 Пример позиционирования фонового изображения.

Фон на веб-странице

Установка фонового рисунка на веб-страницу традиционно происходит через атрибут
background тега <body>.
Такой рисунок повторяется по горизонтали и вертикали, заполняя таким способом
все окно браузера. Понятно, что особых вариантов для творчества здесь нет, поэтому
обратимся к стилям и посмотрим, что же можно делать с помощью CSS.

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

Добавление фонового рисунка

Добавление рисунка происходит путем установки адреса картинки через ключевое
слово url. Чтобы управлять повторением картинки
применяются аргументы no-repeat (нет повторения),
repeat-x (повторение по горизонтали) и repeat-y
(повторение по вертикали). Благодаря этому можно получить веб-страницу, приведенную
на рис. 1.

Рис. 1. Фоновая картинка без повторения

Чтобы установить картинку на веб-страницу, следует добавить стилевое свойство background
к селектору BODY, как показано в примере 1.

Пример 1. Фоновый рисунок

В данном примере графический рисунок target.gif определяется как фон веб-страницы
без повторения изображения. Чтобы картинка не прилегала плотно к краям браузера,
она смещается на 30 пикселов вправо и на 20 пикселов вниз от своего исходного
положения.

Повторение рисунка

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

Рис. 2. Повторение рисунка по вертикали

Рис. 3. Картинка для создания фона

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

Пример 2. Повторение фона по вертикали

Аналогично можно делать повторение фона по горизонтали, например, создав градиент
и установив его в качестве фоновой картинки (рис. 4).

Рис. 4. Использование градиента в качестве фона

Чтобы получить веб-страницу, приведенную на рис. 4, потребуется вначале
сделать картинку с градиентным переходом. Ширину достаточно указать 20-40 пикселов,
а высота рисунка зависит от цели документа и предполагаемой высоты содержимого
веб-страницы. Не стоит также забывать, что рисунок большого размера приведет
к увеличению объема графического файла. А это отрицательно скажется на скорости
его загрузки и, в конечном итоге, приведет к замедлению отображения фона. Для данного
случая вполне подошла картинка размером 30х200 пикселов (рис. 5).

Рис. 5. Градиентное изображение для создания фона

В примере 3 показан код HTML для создания градиентного фона.

Пример 3. Повторение фона по горизонтали

Градиентный рисунок хорошо сочетается с одноцветным блоком, поэтому в данном
примере добавляется слой, в котором и отображается содержимое веб-страницы.

Работа с обработанным фото, после удаления фона

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

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

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

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

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

Нужно больше возможностей? Воспользуйтесь бесплатным редактором изображений!Редактирование, фильтры, рисование, работа со слоями и текстом

Редактор фото онлайн