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

Содержание

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

26 февраля 2022

Ликбез

Технологии

Пять проверенных способов, с которыми у вас всё получится.

Как сделать прозрачный фон в Photoshop с помощью функции «Удалить фон»

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

Откройте изображение и разблокируйте фоновый слой, щёлкнув по замку напротив его названия.

Раскройте меню «Быстрые действия» и нажмите «Удалить фон».

Через секунду фон исчезнет, и останется только сохранить фото. Для этого перейдите в меню «Файл» → «Экспорт» → «Быстрый экспорт в PNG» и выберите нужную папку.

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

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

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

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

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

Для сохранения зайдите в меню «Файл» → «Экспорт» → «Быстрый экспорт в PNG» и укажите расположение для новой картинки.

Как в Photoshop сделать прозрачный фон «Магнитным лассо»

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

Загрузите картинку в Photoshop и снимите блокировку со слоя, кликнув по замку.

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

Если ключевая точка добавилась не очень точно — отмените её создание, нажав клавишу Delete. Для корректировки можете самостоятельно добавлять точки в нужных местах, просто кликая по ним мышью.

Продолжайте, пока не обведёте весь объект. Затем кликните по первой ключевой точке, чтобы образовать выделение.

Нажмите Shift + Ctrl + I (Shift + Cmd + I) для инвертирования выделения, а затем Delete, чтобы удалить фон.

Снимите выделение, нажав Ctrl + D (Cmd + D), и сохраните результат через меню «Файл» → «Экспорт» → «Быстрый экспорт в PNG».

Как сделать прозрачный фон в Photoshop с помощью «Быстрой маски»

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

Откройте изображение, разблокируйте слой, щёлкнув по значку замка, и нажмите клавишу Q, чтобы переключиться в режим «Быстрая маска».

Выберите обычную кисть, установите чёрный цвет и аккуратно закрасьте объект в кадре (он будет малиновым). Если где‑то ошибётесь, отмените действие с помощью Ctrl + Z (Cmd + Z).

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

Для сохранения результата откройте меню «Файл» → «Экспорт» → «Быстрый экспорт в PNG» и укажите нужную папку.

Как сделать прозрачный фон в Photoshop с помощью «Пера»

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

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

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

Теперь выберите инструмент «Перо+» и добавьте вспомогательные точки посередине линий в местах, где контур получился угловатым.

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

Кликните правой кнопкой мыши и выберите «Выделить область». Если на выделении есть неточности, попробуйте изменить радиус растушёвки с 0 на 1–3 пикселя и поэкспериментируйте с этим параметром.

Сочетанием Shift + Ctrl + I (Shift + Cmd + I) инвертируйте выделение и нажмите Delete для удаления фона.

Сохраните изображение, выбрав в меню «Файл» → «Экспорт» → «Быстрый экспорт в PNG» и указав нужную папку на диске.

Читайте также 🧐

  • 15 лучших графических редакторов, которые не стоят ни копейки
  • Как обрезать фото в Photoshop
  • Как сделать тень в Photoshop
  • Как сделать водяной знак на фото
  • Как установить шрифт в Photoshop

Как сделать прозрачный фон в 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. Также в этом окне можно задать необходимый для будущей картинки размер / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт

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

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

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

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

Как сделать фон прозрачным в Photoshop с помощью инструмента «Удалить фон»

1. Откройте фотографию в Photoshop.

2.  Дублируйте изображение на новом слое. Для этого нажмите Ctrl + A, затем Ctrl + C, а затем Ctrl + V. (Это выделяет все изображение, затем копирует его и, наконец, вставляет как новый слой.) Вы должны увидеть новый слой, появившийся в слоях. палитра в правой части экрана.

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

После дублирования слоя скройте фоновый слой.

Дэйв Джонсон/Business Insider

4.   В палитре свойств справа найдите «Быстрые действия» и нажмите «Удалить фон».

Используйте быстрое действие «Удалить фон», чтобы удалить фон за один шаг.

Дэйв Джонсон/Business Insider

Теперь вы должны увидеть объект в шахматном порядке — это прозрачный фон. Вы можете сохранить файл как файл Photoshop (PSD) или PNG, чтобы сохранить прозрачность.

Если это не сработало, вы можете попробовать сделать фон прозрачным вручную.

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

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

1.  Откройте фотографию в Photoshop и в палитре «Слои» дважды щелкните «Слой 0». Во всплывающем окне нажмите «ОК».

Дважды щелкните слой и нажмите «ОК», прежде чем продолжить.

Дэйв Джонсон/Business Insider

2.  Теперь вам нужно использовать любой из инструментов выделения, который вы предпочитаете, чтобы выбрать тему (и только тему). Вот лучшие варианты:

  • Инструмент выделения объектов . Нажмите и удерживайте четвертый инструмент сверху палитры инструментов, пока инструменты не выскочат из отсека. Выберите «Инструмент выделения объектов». Чтобы использовать этот инструмент, перетащите рамку вокруг объекта (или его части). Через мгновение Photoshop автоматически выберет часть объекта, содержащуюся в рамке.
  • Инструмент быстрого выбора . Находится в том же отсеке, что и инструмент «Выбор объекта». Чтобы использовать этот инструмент, щелкните и перетащите внутри объекта, и выделение должно охватывать окружающую часть объекта.
  • Инструмент «Волшебная палочка» . Также находится в том же закутке, щелкните волшебной палочкой внутри предмета, и он выберет область похожего цвета. Вы можете использовать элемент управления «Допуск» в верхней части окна, чтобы изменить чувствительность этого инструмента.

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

Дэйв Джонсон/Business Insider

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

Инструменты лассо — еще один удобный способ выделения.

Дэйв Джонсон/Business Insider

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

  • Новый выбор . Используйте этот режим только тогда, когда вы начинаете выбирать объект. Каждый раз, когда вы используете инструмент с выбранным этим режимом, вы начинаете свой выбор с нуля.
  • Добавить к выбору . Это режим, который следует использовать, когда вы «строите» свой выбор — каждый раз, когда вы используете инструмент, новый выбор будет добавлен к вашим предыдущим выборам.
  • Вычесть из выбора . Как следует из названия, это убирает текущий выбор и удобно для исправления ошибок.

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

Дэйв Джонсон/Business Insider

4.  Когда вы выберете весь предмет, нажмите «Выбрать» в меню, а затем выберите «Инвертировать». Это переворачивает выделение, поэтому выделяется весь фон.

5.  Нажмите клавишу Delete на клавиатуре.

Окончательное изображение должно выглядеть примерно так.

Дэйв Джонсон/Business Insider

Теперь вы должны увидеть объект в шахматном порядке — это прозрачный фон. Вы можете сохранить файл как файл Photoshop (PSD) или PNG, чтобы сохранить прозрачность.

  • Как добавить новые кисти для рисования в Photoshop на Mac или ПК

  • Как изменить цвет фона ваших фотографий в Photoshop, чтобы сделать ваши изображения более яркими

  • Как инвертировать цвета любого изображения в Photoshop за 3 простых шага

  • Как выделить текст в Photoshop, чтобы он выделялся на пользовательском изображении

  • Как перевернуть изображение в Photoshop, чтобы получить зеркальное отражение любой фотографии

Дэйв Джонсон

Внештатный писатель

Дэйв Джонсон — технический журналист, который пишет о потребительских технологиях и о том, как индустрия превращает спекулятивный мир научной фантастики в современную реальную жизнь. Дэйв вырос в Нью-Джерси, прежде чем поступить в ВВС, чтобы управлять спутниками, преподавать космические операции и планировать космические запуски. Затем он провел восемь лет в качестве руководителя отдела контента в группе Windows в Microsoft. Как фотограф Дэйв фотографировал волков в их естественной среде обитания; он также инструктор по подводному плаванию и соведущий нескольких подкастов. Дэйв является автором более двух десятков книг и участвовал во многих сайтах и ​​публикациях, включая CNET, Forbes, PC World, How To Geek и Insider.

ПодробнееПодробнее

Как сделать прозрачный фон — 5 способов удалить фон с любого изображения

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

Пропустить следующие быстрые ссылки:

  • Что такое прозрачный фон PNG?
  • PNG, JPG и GIF
  • Какие инструменты можно использовать для создания прозрачного PNG?
  • Сделайте фон прозрачным с помощью Canva
  • Сделайте фон прозрачным с помощью Adobe Photoshop
  • Сделайте фон прозрачным с помощью Fiverr
  • Лучшие программы для редактирования изображений

Что такое прозрачный фон PNG?

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

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

Напротив, здесь вы видите логотип на белом фоне:

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

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

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

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

Связанный пост: 150+ невероятных идей по сбору средств, которые, как доказано, собирают деньги за меньшее время

PNG против JPG против GIF

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

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

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

PNG — лучший выбор, когда вам нужно прозрачное изображение или что-то с невероятно четкими, четкими линиями (например, линейный рисунок или другая знаковая графика).

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

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

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

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

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

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

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

.

  • Canva
  • Adobe Photoshop
  • Fiverr

Давайте посмотрим.

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

Сделайте фон прозрачным с помощью Canva

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

Функция удаления прозрачного фона доступна только в тарифном плане Pro, стоимость которого составляет 12,99 долларов США в месяц. Он поставляется с 30-дневной бесплатной пробной версией, поэтому вы можете удалить столько фонов, сколько захотите, за месяц бесплатно!

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

Шаг 1. Создайте дизайн

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

После того, как вы создали свой дизайн, вы увидите экран, который выглядит следующим образом:

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

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

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

Вы можете изменить размер в соответствии с пространством по своему усмотрению.

Примечание : мы добавили цветной фон, чтобы я мог видеть, когда мой фон исчезает.

Шаг 3. Удалить фоновое изображение

Нажмите на изображение, которое вы добавили в свой дизайн. Вы увидите несколько меню, включая «Эффекты». Выберите эффекты. Первый вариант, который вы увидите, будет «Удаление фона».

Нажмите, и все готово! Легкий!

Раньше:

После:

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

Шаг 4. Загрузите изображение 

Выберите загрузку в правом верхнем углу. Вы увидите это меню:

Убедитесь, что тип вашего файла — PNG, и что вы установили флажок «Прозрачный фон». Затем нажмите скачать!

Ознакомьтесь с Canva здесь.

Полное видеопрохождение

Связанный пост: 32 Виртуальные идеи по сбору средств для некоммерческих организаций [2022]

Сделайте фон прозрачным с помощью Adobe Photoshop

Если у вас есть логотип с цветным фоном, вы должны сначала сделать фон прозрачным. Затем вы можете преобразовать формат файла в PNG, который является форматом файла, предназначенным для передачи изображений в Интернет. Вот как это сделать в Adobe Photoshop.

Глубокое погружение: из этой книги вы узнаете все тонкости Photoshop.

Шаг 1. Откройте файл логотипа

Шаг 2. Добавьте прозрачный слой

Выберите «Слой» > «Новый слой» в меню (или просто щелкните значок квадрата в окне слоев).

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

Перетащите этот новый слой под слой вашего изображения и выберите слой содержимого.

Шаг 3. Удалить фон

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

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

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

Шаг 4. Сохранить как прозрачное изображение PNG

Нажмите «Файл» -> «Сохранить как». Выберите «PNG (*.PNG) в качестве формата файла. Обратите внимание, что хотя прозрачный фон в Photoshop выглядит клетчатым, в конечном файле PNG он будет прозрачным. Теперь вы можете загрузить этот логотип с прозрачным фоном на свой сайт!

Совет. Возможно, вам потребуется перейти в «Режим» -> «Цвет RBG», чтобы изменить цветовой формат вашего изображения на RBG, который поддерживает прозрачность.

Видео прохождение:

Сделайте фон прозрачным с помощью Fiverr

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

Мы использовали эту услугу раньше, и они обычно обрабатывают проект в течение 1 дня (иногда быстрее), включая исправления, и это стоит около 5 долларов США или меньше за изображение.

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

Шаг 1. Перейдите на сайт Fiverr Logo Gigs

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

Шаг 2. Выберите гиг

Эти концерты начинаются с 5 долларов США за 1 изображение. Многие люди предлагают до 5 или 10 изображений всего за 5 долларов, поэтому обязательно просмотрите все, чтобы найти подходящую цену и сервис.

Мы рекомендуем выбрать кого-то с рейтингом 4,9 из 5,0 или выше, с неограниченным количеством версий и 5 изображениями. Доставка менее чем за час является обычным явлением, поэтому обратите внимание на быстрый оборот.

Шаг 3. Приобретите услугу Fiverr

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

Fiverr теперь взимает плату за обслуживание (новая в этом году), поэтому заложите эту дополнительную сумму. Например, у этого концерта за 5 долларов плата за обслуживание составляет 2,25 доллара!

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

Посмотрите концерты с логотипом Fiverr здесь.

Больше приложений для создания прозрачного фона

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

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

  1. Adobe Photoshop — это золотой стандарт любого типа редактирования изображений. Создание прозрачных фонов — это всего лишь царапина на поверхности (и может быть излишним, если это все, что вам нужно сделать). Photoshop поставляется с бесплатной пробной версией и ежемесячными планами.
  2. Canva — это очень простой в использовании онлайн-инструмент для редактирования, помогающий создавать красивые дизайны без каких-либо сложностей. Мы сравниваем его с облегченной онлайн-версией Adobe Photoshop и простым способом сделать фон вашего изображения прозрачным прямо из браузера.
  3. Snappa — это быстрый онлайн-инструмент, который поможет вам создавать онлайн-графику для социальных сетей, рекламы, блогов и многого другого. Это бесплатно, и, как и Canva, это простой способ сделать прозрачный фон для ваших изображений.
  4. Lumina — это настольное приложение (Mac и ПК), которое объединяет традиционное редактирование изображений с технологиями искусственного интеллекта. На своих изображениях вы можете автоматически стирать объекты, менять цвет неба и многое другое.
  5. InPixio — это настольное приложение (Mac и ПК), предназначенное для удаления нежелательных объектов с изображений.