Как вставить картинку с прозрачным фоном

Как сделать задний фон картинки прозрачным html?

>
#pc display: none;
>
#mobile display: inline-block;
>
>
.header border: none;
border-bottom: 2px solid white;
position: fixed;
width: 100%;
height: 10%;
right: 0;
top: 0;
background: #34e89e; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #0f3443, #34e89e); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0f3443, #34e89e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
>
.content position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 90%;
background: #C33764; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1D2671, #C33764); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1D2671, #C33764); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

>
media screen and (orientation : landscape) #pc display: inline-block;
>
#mobile display: none;
>
.header border: none;
border-bottom: 2px solid white;
>
.header__text position: fixed;
margin-left: 10px;
>
>
.header__text position: fixed;
top: 0;
width: 100%;
height: 100%;
>
media screen and (orientation: landscape) .simple margin-top: 0.5%;
margin-left: 6%;
>
.pop margin-top: 0.5%;
margin-left: 4%;
float: left;
>
>
media screen and (orientation: portrait) .simple position: absolute;
margin-top: 3%;
margin-left: 10%;
>
.pop margin-top: 3%;
margin-left: 4%;
float: left;
>
>
.simple,.pop border-radius: 5px;
border: 2px solid white;
>.about background: #C33764; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1D2671, #C33764); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1D2671, #C33764); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
>
body background: #C33764; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1D2671, #C33764); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1D2671, #C33764); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
>

• Вопрос задан более двух лет назад
• 2495 просмотров

Как вставить картинку с прозрачным фоном

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

• Как сохранить картинку с прозрачным фоном
• Часто задаваемые вопросы

Как сохранить картинку с прозрачным фоном

Не каждый Photo Editor может сделать фон картинки прозрачным. Попробуйте Photo Editor от Movavi! Скачайте программу и следуйте инструкции ниже.

Шаг 1. Скачайте и установите Movavi Photo Editor

Запустите установочный файл и следуйте инструкциям программы. После завершения установки Photo Editor откроется автоматически.

Шаг 2. Загрузите изображение в программу

Кликните на кнопку Открыть файл, в появившемся окне найдите нужное фото и нажмите Открыть. Также картинку можно просто перетащить в окно программы.

Шаг 3. Удалите задний фон

На верхней панели выберите вкладку Замена фона. Нажмите кнопку Автовыделение, – программа автоматически выделит силуэты людей на фото.

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

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

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

Шаг 4. Сохраните результат

Нажмите кнопку Сохранить. По умолчанию программа предлагает сохранить файл в JPEG. Этот формат не поддерживает прозрачность, поэтому нужно выбрать другой. Откройте вкладку Тип файла и выберите BMP, DPX, PNG, TGA или TIFF. Нажмите Сохранить. Программа автоматически откроет папку с получившимся файлом.

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

Movavi Photo Editor

Качественная обработка фото – это легко!

*Пробная версия Movavi Photo Editor имеет следующие ограничения: сохранение до 10 изображений, водяной знак на сохраненных фото, запрет на снятие скриншотов при работе в программе.

Часто задаваемые вопросы

В каком формате сохранять изображения без фона?

Сохраняйте изображения без фона в формате PNG – в этом формате прозрачность не потеряется, а получившийся файл будет читаться большинством сайтов и устройств.

Как называется изображение с прозрачным фоном?

Отличить картинку с прозрачным фоном от картинки с непрозрачным по названию невозможно. Можно только определить, способен ли файл содержать прозрачные элементы. Для этого обратите внимание на расширение. Файлы с расширениями .png, .gif, .svg и .psd поддерживают прозрачность, с расширениями .jpg, .jpeg, .raw, .tiff и другими – нет.

Сделать рисунок прозрачным в Word

Word для Microsoft 365 Word для Microsoft 365 для Mac Word для Интернета Word 2021 Word 2021 для Mac Word 2019 Word 2019 для Mac Word 2016 Word 2016 для Mac Word 2013 Word 2010 Word для Mac 2011 Еще. Меньше

Изменение прозрачности всего изображения

Если вы используете Word 2021 или подпискуMicrosoft 365, вы можете применить прозрачность непосредственно к изображению. Дополнительные сведения см. в разделе «Сделать рисунок прозрачным».

1. Сначала нарисуйте фигуру
2. Залейте ее рисунком.
3. Настройте прозрачность рисунка.

Для других версий Word используйте это временное решение.

1. Нажмите кнопку «>фигуры » и выберите фигуру.
2. Нарисуйте фигуру в документе, сделав ее такой же пропорцией, что и рисунок, который вы хотите добавить в документ.
3. Щелкните фигуру правой кнопкой мыши и выберите пункт « >без контура».
4. Снова щелкните фигуру правой кнопкой мыши и выберите » Формат фигуры».
5. В области «Формат фигуры» щелкните значок заливки затем выберите «Рисунок» или «Заливка текстуры».
6. Выберите «Файл«, выберите рисунок и нажмите кнопку «Вставить «.
7. Переместите ползунок « Прозрачность» в области « Формат фигуры», чтобы настроить рисунок. Кроме того, можно ввести число в поле рядом с ползунком: 0 является полностью непрозрачных, значение по умолчанию; и 100 % полностью прозрачны.

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

Изменение прозрачности части рисунка

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

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

1. Выберите рисунок и перейдите к разделу » Формат рисунка >«Цвет» или «Работа с рисунками >« >цвет».
2. Выберите «Задать прозрачный цвет».
3. При изменении указателя выберите цвет, который нужно сделать прозрачным.

Чтобы отменить изменение цвета, выберите «Сбросить рисунок » в группе «Настроить «.

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

Изменение прозрачности рисунка или цвета заливки

Если вы используете Word 2021 или подпискуMicrosoft 365, вы можете применить прозрачность непосредственно к изображению. Дополнительные сведения см. в разделе «Сделать рисунок прозрачным».

Для других версий Word используйте это временное решение.

1. Перейдите к >Фигуры и выберите фигуру для использования.
2. Выберите формат фигуры >заливку фигуры.
3. Выберите «Рисунок » и выберите нужный рисунок.
4. Нажмите кнопку Вставить.
5. Выделите фигуру и перейдите к разделу «Формат фигуры», чтобы открыть область форматирования.
6. Выберите «>рисунка» или «градиентная заливка», а затем перетащите ползунок «Прозрачность», чтобы задать точный процент прозрачности.

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

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

1. Перейдите к >рисунка и добавьте рисунок в документ
2. Выберите рисунок, для которого требуется изменить прозрачность цвета.
3. На вкладке «Формат рисунка» выберите «Цвет» или «Перекрасить«, а затем выберите «Задать прозрачный цвет».
4. Щелкните или коснитесь цвета рисунка или изображения, которые вы хотите сделать прозрачными.

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

Невозможно сделать изображение прозрачным в Word в Интернете. Вместо этого необходимо использовать классическую версию Word (в Windows или macOS).

Как сделать прозрачный фон в Photoshop

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

Рассказываем о быстрых способах, как сделать прозрачный фон, а также о том, что такое png-формат и как сохранить в нём изображение.

Прозрачный фон выглядит в Photoshop именно так. Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт / Фото: pixabay.com

Как сделать фон прозрачным в Photoshop — три быстрых способа

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

Например, в некоторых фирмах, которые нанимают ретушёров для обработки каталожных снимков или школьных фотографий, в день просят обрабатывать больше 100 фотографий. И это далеко не предел!

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

Функция Удалить фон / Remove Background

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

1. Откройте файл, у которого хотите удалить фон. Нажмите на замок на строке слоя справа.

Пока на фоновом слое стоит замок, сделать фон прозрачным нельзя — только залить другим цветом / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт / Фото: pixabay.com

Если вам нужно сохранить оригинал нетронутым, кликните по исходному слою правой кнопкой мыши и выберите функцию Копировать слой / Duplicate Layer, либо нажмите горячие клавиши Ctrl +J.

2. Откройте палитру Свойства / Properties.

Чтобы найти палитру, зайдите в командное меню Окно / Windows / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт / Фото: pixabay.com

3. В палитре Свойства найдите и нажмите кнопку Удалить фон / Remove Background.

Напоминаем — кнопка не будет доступна, пока вы не снимите замок с фонового слоя, либо пока не сделаете его дубликат / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт / Фото: pixabay.com

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

Серо-белая шахматная заливка означает, что в этих местах фон прозрачный, там нет пикселей. В данном случае программа стёрла также часть лимона / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт / Фото: pixabay.com

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

Для этого кликните на чёрно-белый прямоугольник, который появился рядом со слоем, с которого вы стирали фон. Возьмите Кисть / Brush (горячая клавиша B). Чёрным цветом сотрите всё ненужное, белым — верните то, что Photoshop стёр.

Белая кисть дорисовывает, а чёрная — стирает пиксели. Удалённая часть лимона восстанавливалась именно белой кистью, которой рисовали по маске — чёрно-белый прямоугольник справа / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт / Фото: pixabay.com

Инструмент Выделить объект / Object Selection

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

1. Откройте файл. Снимите с исходного слоя замок или сделайте дубликат этого слоя.

2. На панели инструментов слева найдите Выделение объекта / Object Selection Tool.

Быстро найти инструмент можно с помощью горячей клавиши W / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт / Фото: pixabay.com

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

Светло-синяя заливка показывает границы будущего выделенного объекта / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт / Фото: pixabay.com

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

Пунктир вокруг лимонов — марширующие муравьи — это то, что выделил Photoshop / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт / Фото: pixabay.com

3. Когда вы выделили то, что нужно, нажмите Ctrl + J. Программа скопирует выделенные объекты и удалит фон.

В палитре Слои появятся два слоя — исходник и дубликат с прозрачным фоном. Чтобы было видно, что фон удалился, отключите видимость фонового слоя, который находится внизу. Для этого нажмите на значок с глазом / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт / Фото: pixabay.com

Инструмент Волшебная палочка / Magic Wand

Волшебная палочка / Magic Wand выделяет цвет и его оттенки, после чего выбранные пиксели можно легко удалить. Лучше всего инструмент работает и выделение почти не нужно дорабатывать, если объект сфотографирован на однотонном фоне или циклораме. Это часто происходит при предметной и каталожной съемке одежды.

Как настроить Волшебную палочку в Photoshop, чтобы сделать прозрачный фон:

1. Размер образца / Sample Size: 3х3. При такой настройке за образец цвета, который будет искать программа, возьмется средний цвет из квадрата из 9 пикселей.

Если в размере образца стоит Точка / Point Sample, инструмент берёт за образец 1 пиксель, в который вы попали. Если на идеально белом фоне вы случайно попали в черную пылинку, Волшебная палочка выделит только тёмные пиксели, хотя вы рассчитывали на фон.

2. Допуск / Tolerance. То, как много оттенков от выбранного образца «захватит» Волшебная палочка. Чем выше число, тем больше разброс цветов. Подбирается под каждую фотографию отдельно в диапазоне от 0 до 100.

3. Смежные пиксели / Contiguous. Если галочка смежных пикселей нажата, Photoshop включает в выделение только то, до чего смог «дотянуться». То есть только фон.

Так как функция Смежные пиксели выключена, выделяется не только фон, но и похожая на него по цвету светлая кожура лимона / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт / Фото: pixabay.com

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

Как сделать фон прозрачным в Photoshop инструментом Волшебная палочка

1. Откройте файл и снимите со слоя замок. На панели инструментов слева найдите Волшебную палочку / Magic Warp (горячая клавиша W).

2. Поставьте настройки, как сказано в предыдущем блоке.

3. Кликните инструментом по фону, который хотите удалить. Если выделенный вариант не нравится, сбросьте выделение с помощью клавиш Ctrl + D и кликните Волшебной палочкой в другом месте.

Волшебная палочка выделила почти весь фон, не считая желтоватых отражений под лимонами. Они, по мнению программы, сильно отличаются по цвету от выбранного образца / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт / Фото: pixabay.com

4. Если выделение не идеально, доработайте его с помощью кнопок в настройках инструмента. Чтобы добавить к выделению новые области, нажмите на Добавить выделение / Add to selection. Чтобы исключить из выделения то, что попало в него по ошибке, нажмите на кнопку Исключить из выделения / Subtract to selection.

Чтобы добавление или исключение из выделения было аккуратным, меняйте Допуск / Tolerance. Так, уменьшив его до 10, мы включили в выделение тень под лимоном, но оставили нетронутым его хвостик, который также в глубокой тени / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт / Фото: pixabay.com

5. Нажмите клавишу Delete, чтобы сделать фон прозрачным. Снимите оставшееся выделение, нажав Ctrl + D.

Как сохранить файл с прозрачным фоном в Photoshop

Чтобы картинка на прозрачном фоне оставалась такой же вне Photoshop, её нужно сохранить в специальном формате. Для этого используется формат PNG (аббревиатура от английского portable network graphics).

Его разработали в 1995-1996 годах для использования в сети как замену более старого GIF-формата. Тем не менее полностью вытеснить GIF не получилось — только этот формат поддерживает анимацию.

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

Как сохранить файл в png-формате

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

1. В меню Файл / File найдите кнопку Сохранить как / Save as (горячие клавиши Ctrl + Shift + S).

В открывшемся окне выберите место, куда сохранять файл, название, а в выпадающем списке — формат / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт

2. Меню Файл / File — Экспорт / Export — Сохранить для Web / Save for Web (горячие клавиши Ctrl + Shift + Alt + S).

В открывшемся окне найдите формат PNG, а также галочку Прозрачность / Transparency. Также в этом окне можно задать необходимый для будущей картинки размер / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт