Как сохранить изображение без фона в фотошопе

Обновлено: 21.11.2024

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

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

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

В этом учебном пособии вы шаг за шагом узнаете, как сохранить такие PNG-изображения с прозрачным фоном.

Вот что вам нужно сделать:

■Инициализируйте Adobe Photoshop, дважды щелкнув его значок.

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

■Убедитесь, что фоновый слой настроен на прозрачность.

■После того, как вы закончите процесс создания изображения, сведите изображение, выбрав «Слой» > «Свести изображение».

■Принимать любое подтверждение, отображаемое в любом окне подтверждения, при сведении изображения.

■После того как изображения будут сведены, перейдите в меню "Файл" в строке меню.

■В появившемся меню выберите параметр «Сохранить для Интернета».

(Примечание: для этой демонстрации используется Adobe Photoshop 7. Если у вас есть другая версия Adobe Photoshop, вы можете найти параметр «Сохранить для Интернета и устройств» или что-то подобное в меню «Файл».)

■В открывшемся окне «Сохранить для Интернета» в правой части щелкните, чтобы выбрать параметр PNG-24 в раскрывающемся списке «Настройки».

■Установите флажок "Прозрачность".

■Наконец нажмите кнопку "Сохранить", чтобы сохранить изображение с прозрачным фоном.

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

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

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

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

Шаг 1. Превратите изображение в многослойный файл

Откройте изображение продукта в Photoshop. Скорее всего, это будет в формате JPG. В этом примере мы будем использовать изображение наручных часов на белом фоне.

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

На панели «Слои» дважды щелкните фоновый слой. Появится диалоговое окно New Layer с просьбой переименовать слой. Вы можете оставить это как Слой 0 по умолчанию и нажать OK.

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

Шаг 2. Создайте свой выбор

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

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

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

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

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

После того, как вы выбрали только свой продукт, выберите инверсию, нажав SHIFT+CTRL+I (SHIFT+COMMAND+I на Mac) или выбрав «Выбрать» > «Инверсия» в раскрывающемся меню в верхней части окна приложения.

Выбрав инверсию (фон), введите BACKSPACE (DELETE на Mac). Ваш фон теперь будет прозрачным. В Photoshop прозрачный фон представлен серо-белым рисунком в шахматном порядке.

Нажмите CTRL+D (COMMAND+D на Mac), чтобы отменить выбор.

Шаг 4. Сохраните изображение в подходящем для Интернета формате

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

Лучший формат для сохранения изображения – PNG-24. Этот формат допускает несколько уровней прозрачности, а это означает, что ваше изображение никогда не будет иметь пиксельный «ореол» при размещении на фоне другого цвета. Старые прозрачные форматы файлов, такие как PNG-8 и GIF, могут создавать этот нежелательный эффект ореола, поэтому по возможности используйте формат PNG-24.

Чтобы сохранить файл в формате PNG-24 в Photoshop CC, нажмите SHIFT+ALT+CTRL+W (SHIFT+OPTION+COMMAND+W на Mac) или выберите «Файл» > «Экспорт» > «Экспортировать как…» в раскрывающемся меню на странице вверху окна приложения.

Примечание. Если вы используете более старую версию Photoshop и не видите кнопку «Экспортировать как. можно выбрать «Сохранить для Интернета» и выбрать PNG-24 в раскрывающемся меню «Набор настроек» в правой части диалогового окна.

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

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

Кроме того, поскольку многие из ваших клиентов просматривают ваш продукт на дисплее Retina, рекомендуется сохранять изображение продукта в размере, на 50–100 % превышающем ожидаемый размер. Это поможет ему выглядеть четким на всех устройствах. Другими словами, если вы знаете, что ваш продукт будет отображаться с максимальной шириной 400 пикселей, вам нужно сделать его шириной не менее 600 пикселей.

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

Шаг 5. Сохраните файл

Установив нужный размер изображения, нажмите «Экспортировать все».

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

Нажмите "Сохранить".

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

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

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

Однако, если ваш логотип сохранен в формате JPG, вам потребуется удалить фон в Photoshop и повторно сохранить файл в формате PNG-24, как мы сделали для изображения продукта в приведенном выше примере. Если вам посчастливилось иметь логотип в виде векторного файла (с расширениями .AI, .EPS или .PDF), вам все равно нужно будет открыть файл в Photoshop и преобразовать его в PNG-24, чтобы он иметь веб-формат.

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

В Photoshop выберите «Файл» > «Открыть» и перемещайтесь, пока не увидите файл с логотипом. Нажмите Открыть.

Если вы открываете файл .JPG (или другого растрового формата), файл просто откроется в Photoshop.

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

Обрезать до: установлено значение "Ограничивающая рамка".
Флажок "Сохранить пропорции" установлен.
Режим: установлен на цвет RGB

Нажмите "ОК".

Шаг 2. Сделайте фон прозрачным

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

Как и в шаге 1, когда мы сделали прозрачным фон изображения продукта выше, вам нужно будет дважды щелкнуть фоновый слой на панели «Слои» и нажать «ОК», чтобы преобразовать фон в слой 0.

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

Выделив весь фон, нажмите BACKSPACE (DELETE на Mac). Теперь у вас будет прозрачный фон, представленный серо-белой шахматной доской.

Шаг 3. Сохраните изображение в формате PNG в Photoshop

Выполните шаги 4 и 5, где мы сделали изображение продукта прозрачным выше, чтобы экспортировать файл в формате PNG-24. Эти шаги одинаковы независимо от того, с какого формата файла вы начали, независимо от того, был ли ваш исходный файл JPG, AI, PDF или другим форматом файла.

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

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

Существует множество причин для сохранения изображения с прозрачным фоном. Например, вы можете создать коллаж, наложив одно изображение поверх другого. Или, что более вероятно, вам может понадобиться использовать изображение онлайн с фоном, созданным веб-сайтом. Это общий подход для всего: от портретов и фотографий продуктов до логотипов и графики, для правильного отображения которых требуется прозрачный фон. Вот как сохранить изображение с прозрачным фоном в Photoshop.

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

После того, как слой показывает только ту часть изображения, которую вы хотите сохранить, пришло время убрать фон. Недостаточно сделать фон белым, черным или любым другим цветом — на самом деле перед сохранением он должен быть прозрачным. Итак, чтобы добиться этого, вам нужно полностью удалить фоновый слой. Посмотрите на панель «Слои», чтобы увидеть, какой слой активен. Активный слой обозначен тонким выделением. Щелкните фоновый слой, чтобы сделать его активным, а затем просто щелкните значок корзины в правом нижнем углу панели «Слои», чтобы удалить его.

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

Возможно, вы привыкли сохранять файлы изображений для использования в Интернете в формате JPEG, но файлы JPEG не поддерживают прозрачный фон. Поэтому вместо этого вам нужно будет использовать такой формат, как GIF, TIF или, в идеале, PNG. Файл PNG достаточно мал для использования в Интернете, но при этом обеспечивает высокое качество и прозрачность. Если ваше изображение представляет собой логотип в текстовом стиле, вам может подойти формат GIF, но для фотографии с непрерывным тоном лучше подойдет формат PNG.

В более ранних версиях Photoshop пункт «Сохранить для Интернета и устройств» в меню «Файл» позволял сохранить для этой цели изображение с прозрачным фоном. Теперь эта опция находится под заголовком «Экспорт» в меню «Файл». При открытии диалоговое окно предлагает параметры для всего: от готовых размеров и размера файла до формата файла и многого другого. Он предлагает ряд элементов управления для точной настройки готового изображения, если они вам нужны.

Если вы предпочитаете более простой способ сохранения, просто убедитесь, что изображение уже имеет нужный вам размер (а если это не так, используйте элементы управления "Размер изображения" в меню "Изображение", чтобы изменить размеры), и выберите "Сохранить как". в меню «Файл». Затем выберите подходящий формат файла (например, PNG) в раскрывающемся списке «Формат». Теперь этот файл готов к использованию в Интернете или в любой другой ситуации, когда необходим прозрачный фон.

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

Пропустите эти быстрые ссылки:

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

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

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

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

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

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

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

PNG, JPG и GIF

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

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

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

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

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

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

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

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

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

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

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

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

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

НОВИНКА: вы можете включить до 5 пользователей в новую цену!

1. Начните с создания дизайна

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

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

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

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

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

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

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

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

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

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

После:

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

4. Скачать изображение

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

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

Посмотрите это видео

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

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

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

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

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

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

3. Сделать фон прозрачным

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

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

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

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

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

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

Посмотрите это видео

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

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

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

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

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

1. Перейти к концертам с логотипом Fiverr

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

2. Выберите концерт

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

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

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

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

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

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

Лучшие программы для редактирования прозрачных изображений

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

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