Как сохранить прозрачность в фотошопе
Обновлено: 04.07.2024
Создание прозрачного фона для изображения вашего продукта в 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.
< /p>
В более ранних версиях Photoshop пункт «Сохранить для Интернета и устройств» в меню «Файл» позволял сохранить для этой цели изображение с прозрачным фоном. Теперь эта опция находится под заголовком «Экспорт» в меню «Файл». При открытии диалоговое окно предлагает параметры для всего: от готовых размеров и размера файла до формата файла и многого другого. Он предлагает ряд элементов управления для точной настройки готового изображения, если они вам нужны.
Если вы предпочитаете более простой способ сохранения, просто убедитесь, что изображение уже имеет нужный вам размер (а если это не так, используйте элементы управления "Размер изображения" в меню "Изображение", чтобы изменить размеры), и выберите "Сохранить как". в меню «Файл». Затем выберите подходящий формат файла (например, PNG) в раскрывающемся списке «Формат». Теперь этот файл готов к использованию в Интернете или в любой другой ситуации, когда необходим прозрачный фон.
Вы хотите создать изображение с прозрачным фоном в Photoshop? Какой метод лучше? Как сохранить финальное изображение в различных форматах файлов? Какие форматы позволяют сохранять прозрачные фоны? Каковы варианты использования прозрачного фона?
Если вам нужна помощь с любым из них, в следующей статье вы найдете подробные ответы на все эти вопросы.
Существуют различные методы создания изображений с прозрачным фоном в Photoshop, включая волшебную палочку, инструмент быстрого выделения и быстрое удаление. Чтобы сохранить прозрачный фон в Photoshop, вы должны выполнить несколько конкретных шагов и выбрать правильные параметры сохранения для каждого формата файла, например «Сохранить прозрачность» для TIFF. Я опишу их ниже.
Сначала давайте кратко остановимся на том, почему вы хотите сохранить фотографию с прозрачным фоном.
Как используются изображения с прозрачным фоном?
Есть множество вариантов использования фотографий и изображений с прозрачным фоном.
Чтобы создать анимацию
Легко создавать анимацию, используя фотографии с прозрачным фоном. Для анимации потребуется несколько изображений. Эти изображения должны быть сложены для создания эффекта анимации. Процесс анимации объекта становится намного проще, если у вас есть последовательность изображений с прозрачным фоном.
Для дизайна плаката
Если вы работаете с плакатами, вам будет интересно разместить объекты на плакате без фона. В таких ситуациях очень помогут прозрачные изображения.Это значительно облегчит работу дизайнера плакатов.
Создание эскизов
Если вы хотите создать набросок предмета с помощью Photoshop или любых других инструментов редактирования, фон может отвлекать внимание. Так что изображение предмета без фона будет полезно.
Для создания 3D-эффекта объекта
При создании 3D-изображения объекта вы будете использовать несколько копий одного и того же изображения с прозрачным фоном. Здесь несколько копий будут сложены с другими изображениями для создания глубины.
Для создания логотипов
Некоторые создатели логотипов используют объекты на фотографиях в качестве своих логотипов. В таких случаях вам придется удалить весь фон с изображения, чтобы получить прозрачное изображение только с объектом.
Для использования в видео
Иногда при создании видео вам могут понадобиться прозрачные изображения объекта. Например, многие свадебные фотографы создают изображения жениха и невесты с прозрачным фоном. Эти изображения будут использованы в видео.
Для графики в играх
Люди, создающие игры, используют множество прозрачных изображений. Такие картинки нужны им для создания персонажей и для разных сцен.
Для объединения нескольких предметов
Возможно, вы захотите выбрать отдельные объекты с разных фотографий и объединить их в одно изображение. В таких ситуациях создание прозрачных фоновых изображений объекта облегчит вам жизнь.
Как сделать фон прозрачным в Photoshop?
Существует множество способов сделать фон изображения прозрачным с помощью Photoshop. (Если у вас еще нет этой замечательной программы, вы можете купить ее здесь)
Для получения прозрачного фона на фотографии можно использовать любой из этих методов. Итак:
Метод инструмента «Волшебная палочка»
Использование инструмента «Волшебная палочка» — один из самых простых способов сделать фон прозрачным в Adobe Photoshop.
Я импортировал изображение клубники с желтым фоном. Я хочу удалить весь желтый фон на этом изображении и хочу, чтобы изображение только клубники было прозрачным.
Нажмите кнопку блокировки, миниатюру фотографии справа. Теперь вы можете видеть, что «Фон» изменится на «Слой 0». Нам нужно преобразовать изображение в слой, чтобы внести все изменения.
После разблокировки изображения нажмите «Инструмент выделения» на левой боковой панели инструментов и выберите параметр «Инструмент «Волшебная палочка». Инструмент «Волшебная палочка» хорошо работает, когда у вас простой фон, как на этом изображении. Выбрав волшебную палочку, нажмите на фон фотографии.
Теперь вы можете видеть, что весь фон изображения выбран автоматически.
Нажмите кнопку "Удалить" на клавиатуре, чтобы удалить фон.
Теперь вы можете видеть, что фон изображения стал полностью прозрачным.
Метод инструмента "Быстрое выделение"
Инструмент "Волшебная палочка" не будет работать должным образом, если фон меняется.
В таких ситуациях вы можете использовать «Инструмент быстрого выбора».
Я открою изображение цветка в Adobe Photoshop. На этом изображении фон не простой, в отличие от предыдущего изображения. Вместо этого это размытый фон с большим количеством листьев. Таким образом, будет сложно правильно выбрать фон с помощью инструмента «Волшебная палочка».
Нажмите кнопку блокировки, чтобы разблокировать изображение. Когда вы разблокируете изображение, имя «Фон» изменится на «Слой 0». Итак, мы изменили изображение на слой для наших правок.
Выберите «Инструмент быстрого выделения» в «Инструментах выделения» на левой панели инструментов.
Вы можете щелкнуть мышью и переместить инструмент быстрого выделения внутрь цветка. Вы можете видеть, что выделяются разные части цветка. Продолжайте этот процесс, чтобы выбрать весь цветок. Здесь не нужно делать точный выбор. Подойдет грубый рисунок мышкой внутри цветка. Края цветка будут выбраны программой автоматически.
Теперь вы выбрали цветок. Но то, что вы хотите выбрать, это фон. Итак, нажмите на опцию «Выбрать» на верхней панели инструментов Adobe Photoshop и выберите опцию «Инверсия». Теперь будет выбран только фон. Затем нажмите кнопку «Удалить» на клавиатуре, чтобы удалить фон.
Теперь у вас есть цветок с прозрачным фоном.
Метод быстрого удаления
Если вы используете новую версию Adobe Photoshop, процесс удаления фона очень прост.
Сначала я открою другое изображение в Photoshop.
На этот раз я импортирую портрет женщины с большим количеством помех на размытом фоне. На этом изображении очень сложно правильно выделить волосы с помощью любого из инструментов быстрого выделения.
Итак, давайте начнем с нажатия на символ замка, чтобы разблокировать изображение. Как только изображение будет разблокировано, имя «Фон» изменится на «Слой 0».
Нажмите на меню «Окно» на верхней панели инструментов. Затем выберите параметр «Свойства».
Откроется новое окно. Вы можете увидеть опцию «Удалить фон» в «Быстрых действиях».
Нажмите здесь кнопку «Удалить фон». Если вы не видите кнопку «Удалить фон», нажмите «Быстрые действия», она появится. Обработка начнется с использованием алгоритма AI в Adobe Photoshop, и через несколько секунд вы сможете увидеть объект без фона.
Здесь нет стрижки волос субъекта. Он очень хорошо справляется с удалением фона, не удаляя волосы девушки. Таким образом, этот метод является лучшим методом для создания прозрачного фона. Его также легко выполнить.
Вы также можете обратиться к этому видеоруководству от Н.С. Создание:
Можно ли сохранить прозрачный JPG в фотошопе?
После удаления фона необходимо сохранить изображение.
Если вы попытаетесь сохранить фотографию в формате JPG, фон фотографии перестанет быть прозрачным. Он станет белым. Формат файла JPG не поддерживает прозрачность. Таким образом, вы не можете использовать формат файла JPG для сохранения прозрачных изображений. Никогда не выбирайте формат файла «JPG» при сохранении изображения с прозрачным фоном.
Какие форматы изображений в Photoshop поддерживают прозрачный фон?
После завершения процесса редактирования необходимо сохранить изображение в правильном формате файла. Если вы выберете неправильный формат файла, в конечном итоге вы создадите белый фон для своего изображения. Только несколько форматов поддерживают прозрачность. TIFF, PNG и GIF — это форматы файлов, поддерживающие прозрачность изображения. Итак, вам нужно убедиться, что финальное изображение сохранено в любом из этих форматов. Вам также необходимо выбрать правильный параметр прозрачности при сохранении.
Как сохранить изображение с прозрачным фоном?
После удаления фона с изображения его нужно сохранить. Мы можем сохранить его в формате PNG, GIF или TIFF. Среди этих форматов файлов PNG является наиболее популярным форматом файлов для прозрачных фоновых изображений.
Нажмите на меню «Файл» на верхней панели инструментов Adobe Photoshop. В раскрывающемся меню выберите «Сохранить как».
Откроется новое окно. Затем вам нужно выбрать формат TIFF, GIF или PNG в разделе «Формат».
TIFF
Если вы планируете использовать формат файла «TIFF», выберите его и нажмите кнопку «Сохранить».
Откроется новое окно. Здесь вам нужно убедиться, что флажок «Сохранить прозрачность» установлен (расположен внизу слева). В противном случае вы не получите прозрачный фон. Нажмите «ОК», чтобы сохранить изображение.
PNG
Если вы хотите сохранить его как файл «PNG», выберите этот вариант и нажмите кнопку «Сохранить».
Появится новое окно с запросом размера файла. Здесь вы можете выбрать Большой, Средний или Маленький в зависимости от вашего варианта использования. Если вы планируете использовать изображение для постеров или для печати, вы можете выбрать файл большого размера. Если он предназначен для использования в Интернете, то подойдет файл небольшого или среднего размера.
ГИФ
Если вы хотите использовать формат файла «GIF», выберите его и нажмите кнопку «Сохранить».
Откроется новое окно. Здесь вам нужно убедиться, что установлен флажок «Прозрачность», чтобы получить прозрачный фон.
Как экспортировать слои в виде прозрачных файлов в Photoshop?
Обычно прозрачный слой создается при работе с несколькими слоями проекта. Но если вы попытаетесь экспортировать изображение целиком, то будут экспортированы и другие слои.
Если вы хотите экспортировать только прозрачный слой, вы можете использовать следующий метод:
Щелкните правой кнопкой мыши на прозрачном слое изображения. Выберите опцию «Экспортировать как» из длинного списка меню.
Откроется новое окно. Здесь вы можете выбрать формат файла «PNG» или формат файла «GIF». Если вы выбираете формат PNG, убедитесь, что флажок «Прозрачность» всегда установлен. После выбора формата нажмите кнопку «Экспорт», чтобы сохранить изображение.
Если щелкнуть правой кнопкой мыши слой 0, вы также можете выбрать параметр «Быстрый экспорт в формате PNG», чтобы сохранить изображение в виде файла PNG. Но проблема с этим методом заключается в том, что он не даст вам возможности изменить размер изображения или размер холста. Эти параметры доступны только с параметром «Экспортировать как». Таким образом, вы можете выбрать соответственно. Быстрый экспорт подойдет, если вас устраивает текущий размер изображения.
Какой формат файла прозрачного изображения лучше всего подходит для Интернета?
Если вы заинтересованы в загрузке изображения с прозрачным фоном в Интернет, вам необходимо убедиться, что вы сохранили окончательное изображение после всех изменений в Photoshop в правильном формате файла. Фотография может быть для вашего веб-сайта или социальных сетей.
Не все форматы изображений обычно поддерживаются в Интернете. Популярные форматы файлов изображений, поддерживаемые в Интернете, включают JPEG, PNG и GIF. Из этих трех популярных форматов файлов только два формата поддерживают прозрачность изображения. Формат файла JPEG не поддерживает прозрачность. Только форматы изображений PNG и GIF поддерживают прозрачность. Таким образом, вы должны сохранить окончательную фотографию в любом из этих двух форматов, если планируете загружать ее в Интернет.
PNG или GIF для Интернета
Когда дело доходит до Интернета, вы хотите максимально уменьшить размер файла изображения. Это поможет быстрее загружать страницы.
Формат файла PNG обеспечивает лучшее сжатие, чем формат GIF. Таким образом, размер файла будет меньше для формата PNG, что очень важно, когда на вашем сайте тысячи изображений. Формат PNG также поддерживает переменную прозрачность или альфа-каналы. Поддержка прозрачности также лучше для формата файлов PNG. Поэтому формат файлов PNG рекомендуется для прозрачных фоновых изображений для Интернета.
Я надеюсь, что эта статья помогла вам научиться сохранять прозрачные изображения в Photoshop и экспортировать их для различных целей, включая Интернет.
Николас Митчелл
Николас — штатный писатель Photodoto. Его интересы включают фотографию, коллекционирование старых и новых камер, монтаж видео и все, что связано с 3D. Если на рынке появится новый гаджет, он обязательно будет первым, кто его попробует. Ему нравится экспериментировать с фотографией при слабом освещении, очень длинными выдержками и высокоскоростной съемкой.
В этом руководстве по созданию прозрачного фона мы расскажем о прозрачных файлах 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 доллара!
После покупки просто отправьте файл изображения (рекомендуется высокое разрешение) и любые инструкции. Мы рекомендуем быть как можно более конкретными, чтобы концерт был сделан правильно.
Лучшие программы для редактирования прозрачных изображений
Мы сократили список до нескольких лучших программ для редактирования изображений.При использовании мобильных приложений и инструментов для редактирования не забывайте учитывать размер файла и убедитесь, что качество вашего логотипа по-прежнему остается высоким для публикации на сайтах для компьютеров.
Читайте также: