Изображение с прозрачным фоном. Как вырезать и сделать фон прозрачным в фотошопе? Пошаговая инструкция в Paint: как сделать прозрачный фон
Иногда нужно загрузить изображение, содержащее прозрачные элементы, сквозь которые будет проглядывать первоначальный фон. В этих случаях, было бы удобно загрузить PNG изображения, поскольку они способны сохранять прозрачность.
В этой статье мы расскажем, как сделать прозрачность в Фотошопе .
Создание файла
Первый шаг – это создание файла. Для этого откройте Adobe Photoshop и в меню «Файл » (File ) вверху страницы выберите «Создать » (New ).
Затем в появившемся окне «Новый документ » (New Document ) создайте файл нужного размера, и убедитесь, что разрешение документа составляет 72 пикселя на дюйм (поскольку файл предназначен для использования в веб ). А также, что вы выбрали значение «Прозрачный » (Transparent ) в выпадающем списке «Содержимое фона » (Background Contents ).
*Перед тем, как сделать PNG с прозрачностью в Фотошопе , нужно уточнить, что в этом примере мы создаем изображение для загрузки в качестве фона для сайта, поэтому размер документа задан следующим образом: ширина 3000 пикселей, высота 1730 пикселей, что является рекомендуемыми размерами для загрузки HD изображений:
После того, как вы задали значения параметров, нажмите «OK », чтобы открыть новый документ.
Затем в панели «Слои » (Layers ) убедитесь, что работаете на прозрачном слое, а не на фоновом:
После того, как вы завершили создание и готовы сохранить прозрачное изображение, в зависимости от используемой версии Photoshop , в меню «Файл » (File ) вы можете использовать один из возможных вариантов:
Photoshop версии ранее, чем CC 2015:
Сейчас мы расскажем, как сделать прозрачность картинки в Фотошопе , который вышел раньше CC 2015 . В этих версиях используют метод «Сохранить для Web » (Save for Web & Devices ), чтобы сохранить и оптимизировать PNG изображения для использования в вебе. Чтобы воспользоваться этим методом, просто зайдите в меню «Файл » (File ), и далее – «Сохранить для Web » (Save for Web & Devices ):
Затем в появившемся окне выберите PNG-24 из выпадающего меню возможных значений, а потом убедитесь, чтобы выбраны опции «Прозрачность » (Transparency ) и «Преобразовать в sRGB » (Convert to sRGB ). Это подтверждает, что изображение будет содержать прозрачный фон и его цветовой режим будет преобразован в sRGB , рекомендованное цветовое пространство для веб.
Поля «Размер изображения » (Image Size ) автоматически заполняются значениями, которые вы задали, когда создавали файл. Но если вы хотите изменить размер файла перед сохранением, то можно сделать это сейчас.
Photoshop версии CC 2015:
Перед тем, как сделать прозрачность фото в Фотошопе , нужно знать, что с версии CC 2015 опция «Сохранить для Web » (Save for Web & Devices ) в меню «Файл » (File ) помечена как Legacy (устаревшая ). И замещена на новую опцию «Экспорт » (Export ), которая предлагает идентичную функциональность с более быстрым сохранением в файле меньшего размера и в лучшем качестве. Чтобы воспользоваться опцией «Экспорт », нажмите меню «Файл » (File ), а затем — «Экспортировать как » (Export As ).
Примечание: Adobe по-прежнему предлагает опцию «Сохранить для Web » (Save for Web & Devices ) в Photoshop CC 2015 , и она доступна через меню Файл > Экспорт (File > Export ) или при использовании комбинации клавиш Command+Option+Shift+S (для Mac ) или Ctrl+Alt+Shift+S (для ПК ):
Затем в появившемся окне выберите PNG из выпадающего меню «Формат » (Format ) и убедитесь, что выбраны опции «Прозрачность » (Transparency ) и «Преобразовать в sRGB » (Convert to sRGB ).
Поля «Размер изображения » (Image Size ) и «Размер холста » (Canvas Size ) должны автоматически заполниться значениями, которые вы задали, когда создавали файл. Но при желании можно изменить эти параметры перед тем, как сделать эффект прозрачности в Фотошопе .
Разрабатывая макет полиграфии или верстая сайт, может потребоваться некоторые участки изображения сделать прозрачными. Например, для того, чтобы фон фотографии совпадал с фоном макета или углы изображения не перекрывали текст.
Прозрачный фон изображения позволяет делать красивое . Этот прием сокращает пустое пространство и улучшает вид верстки.
Такие векторные редакторы как CorelDRAW и Illustrator могут скрывать часть изображения с помощью контурной маски, это быстрый и простой метод сделать прозрачный фон, если форма предмета простая.
Но лучшим решением будет подготовить изображение в Photoshop и сохранить в формате поддерживающим прозрачность фона.
В этом видео уроке подробно опишу 3 способа, а также, какие форматы поддерживают прозрачность.
Чтобы сделать прозрачный фон, необходимо вырезать предмет, а фон удалить. В зависимости от формы предмета, выберите тот , который будет удобен в данной ситуации.
Качество готовой картинки в основном зависит от качества выделения. Постарайтесь максимально точно повторить форму предмета подходящими инструментами лассо.
Если края предмета имеют не четкие края, выделение тоже должно иметь слегка размытые грани. Для этого нужно щелкнуть по выделению правой кнопкой мыши и задать значение "Растушевки". Значение размытия сработает ко всему выделению.
Однако, бывают редкие ситуации, когда только часть предмета имеет размытый край или отсутствие фокусировки. В таком случае, необходимо комбинировать несколько способов выделения.
Для примера, я специально выбрал более сложное изображение с разной степенью фокусировки, соответственно с разной четкостью границ.
Основной предмет с высокой четкостью границ можно выделить обычным инструментом "Лассо", а нечеткие края - мягкой кистью в режиме " " (Quick Mask - Клавиша Q), как показано на снимке ниже.
Преимущество этого метода заключается в том, что вы можете менять жесткость краем меняя жесткость кисти в процессе рисования. Но есть и недостаток: выделение кистью не такое точное как лассо. Но это не единственный способ получить выделение с разной четкостью границ.
Добавление к выделению нечетких областей
А теперь, подробнее о другом способе выделения. Выделите основную часть изображения с четкими границами, затем нажмите - Select/Save Selection...
Снимите выделение и создайте новое, вокруг нечеткой области. Нажмите правой кнопкой мыши - Feather... (Растушевка...) Задайте необходимое значение. Как правило, нескольких пикселей будет достаточно.
Теперь, нажмите - Select/Load Selection... Выберите пункт - Add to Selection (добавить к выделению). Ваше прошлое выделение склеиться с новым, а разные степени размытия сохранятся.
Возможно, этот прием покажется более сложным, чем предыдущий. В общем, делайте, как удобно вам.
После того, как вы удалили фон, необходимо сохранить изображение в формате поддерживающем прозрачность.
PSD - самый первый из них. Он легко читается во всех редакторах Adobe и не только. Он содержит всю информацию о слоях эффектах и т.д. поэтому, как правило, имеет большой вес.
Tiff - формат похожий по свойствам с предыдущим. Тоже может содержать прозрачные области. Из-за высокого качества, часто используется в полиграфии.
PNG - имеет относительно не большой вес и позволяет сохранять качество изображения. Чаще всего используется в веб-дизайне. Баннера, кнопки сайтов, графические элементы веб-страницы часто содержат этот формат.
Внимание! Прежде чем сохранять обязательно удалите альфа каналы, если вы их создавали в процессе выделения.
Отсечение фона маской
Этот метод не требует использования программы Photoshop. Непосредственно в программе верстки CorelDRAW или Illustrator вы можете обрисовать предмет контуром, а затем скрыть все, что за его пределами.
Если предмет имеет простую форму (круг, прямоугольник, треугольник и т.д.) применение маски может сэкономить время и силы на обработке изображения. При более сложной форме предмета лучше использовать фотошоп и формат изображения поддерживающий прозрачность.
Еще один недостаток этого метода состоит в том, что маской невозможно частично размыть края предмета, в отличие от обработки в фотошопе.
Clipping Mask в Adobe Illustrator
Разместите изображение в редакторе Illustrator и обрисуйте контуром предмет. Затем выделите изображение и контур вместе и нажмите правой кнопкой мыши - Обтравочная маска (Make Clipping Mask). Часть изображения за пределами контура скроется.
После отсечения маской части изображения вы можете продолжать редактировать контур. Двойной щелчок по обтравочной маске позволит менять расположение предметов внутри контура, удалять, вносить новые, менять форму контура или снова разобрать Clipping Mask и вытащить все элементы.
PowerClip в CorelDRAW
В CorelDRAW есть такой же прием, однако работает он немного иначе. Также нужно обрисовать предмет контуром, а затем, выделить изображение и нажать - Effects/PowerClip/Place inside Frame.... Вместо указателя появится стрелка, которой нужно показать контур.
Контур в CorelDRAW также можно редактировать после создание маски.
Еще в CorelDRAW можно сделать объект прозрачным, не создавая контура, вы можете просто перемещать узлы краев изображения инструментом Shape tool, тем самым меняя его форму. Двойной щелчок по контуру будет создавать новые узлы.
3. Прозрачность режимом наложения
Что делать, если фон фотографии, как и фон макета уже белый, но углы изображения перекрывают важные детали макета. В таком случае, можно применить режим наложения. Применение этого режима к изображению будет достаточно, чтобы белый угол не залезал на изображение.
Этот способ позволяет получить прозрачный фон одним нажатием кнопки, совершенно ничего не выделяя и не вырезая.
В Illustrator нужно открыть панель прозрачностей - Window/Transparency. А затем выбрать режим - Multiply (Умножение).
В CorelDRAW возьмите инструмент - Transparency.
В панели параметров инструмента настройте так, как показано на скриншоте ниже:
Использовать этот режим нужно аккуратно, у него есть и свои недостатки. Хорошо работать он будет только на белом фоне, а сам предмет тоже станет прозрачным при наложении на текст или на другие изображения.
Видео урок: прозрачный фон
Смотрите подробный видео урок, как сделать прозрачный фон в Adobe Photoshop, Illustrator, CorelDraw тремя разными способами:
(Visited 2 847 times, 1 visits today)
Время от времени многие пользователи сталкиваются с необходимостью изменения прозрачности изображения. В первую очередь, это действие подразумевает удаление фона, но иногда требуется сделать всю картинку или фотографию в той или иной степени прозрачной. О каждом из этих вариантов мы расскажем в нашей сегодняшней статье.
Конечно, обрабатывать и изменять графические файлы, убирать на них фон или другие элементы куда удобнее с помощью специализированных программ – редакторов. Но когда такого ПО нет или отсутствует желание устанавливать его на компьютер, вполне можно прибегнуть к одному из множества . Благо, с поставленной перед нами задачей они справляются хорошо, позволяя не только сделать изображение прозрачным, но и выполнить ряд других манипуляций.
Примечание: Достичь желаемого эффекта прозрачности без особых усилий можно с файлами формата PNG. А вот с JPEG, в котором сохраняются, например, фотографии, могут возникать определенные проблемы.
Способ 1: IMGOnline
Этот веб-сервис предоставляет довольно широкие возможности по работе с графическими файлами. Так, в его арсенале есть инструменты для изменения размера, сжатия, обрезки, конвертирования изображений и обработки их эффектами. Конечно, есть здесь и необходимая нам функция – изменение прозрачности.
- Оказавшись на сайте, нажмите по кнопке «Выберите файл» . Откроется окно стандартного «Проводника» Windows, в нем перейдите к папке с картинкой, прозрачность которой вы хотите изменить. Выберите ее и нажмите кнопку «Открыть» .
- Следующий шаг – настройка параметров замены фона. Если нужен прозрачный, ничего в этом разделе не меняем. Если же необходимо заменить на другой однотонный фон, выбираем любой доступный из выпадающего списка. Дополнительно можно ввести HEX-код цвета или открыть палитру и выбрать подходящий оттенок из нее.
- Определившись с параметрами фона, выбираем формат для сохранения обрабатываемого изображения. Рекомендуем установить отметку напротив расширения PNG, после чего следует нажать «ОК» .
- Изображение будет обработано моментально.
На следующей странице вы сможете открыть его в отдельной вкладке для предварительного просмотра (это поможет понять, действительно ли фон стал прозрачным)
или сразу же сохранить на компьютер.
Вот так просто можно изменить прозрачность фотографии, а точнее, ее фона, с помощью онлайн-сервиса IMGOnline. Однако есть у него и недостатки – действительно качественно, идеально может быть изменен только однородный фон. Если же он будет с оттенками или попросту разноцветным, убран будет лишь один из цветов. Помимо этого, алгоритмы сервиса нельзя назвать достаточно умными, и если цвет фона будет совпадать с цветом какого-то элемента на изображении, он тоже станет прозрачным.
Способ 2: Фотоулица
Следующий сайт, который мы рассмотрим, предоставляет возможность совсем иного подхода к созданию прозрачной картинки. Он действительно делает ее таковой, а не просто убирает однородный задний план. Веб-сервис Фотоулица будет полезен в случаях, когда осветлить изображение требуется, например, для его наложения на другое или использования в качестве фирменной подложки документа, водяного знака. Рассмотрим, как с ним работать.
- На главной странице сайта нажмите по кнопке «Открыть фоторедактор» .
- Далее, возможно, потребуется разрешить веб-сервису использовать , для чего нужно просто кликнуть по пустому полю, а затем нажать «Разрешить» во всплывающем окне. В появившемся фоторедакторе нажмите по расположенной в правом верхнем углу кнопке «Загрузить фото» .
- Далее нажмите «Загрузить с компьютера» или выберите второй вариант, если у вас есть ссылка на изображение в интернете.
- На обновленной странице веб-сервиса нажмите кнопку «Выбрать фото» , в открывшемся окне системного «Проводника» перейдите в папку с картинкой, выделите ее и нажмите «Открыть» .
- Когда изображение будет добавлено в фоторедактор, нажмите по расположенной в нижней части левой панели кнопке «Эффекты» .
- В правой верхней области, нажимая на круглый значок «–» , измените степень прозрачности изображения.
- Добившись приемлемого результата, нажмите «Свернуть» , чтобы открыть основное меню редактора на сайте Фотоулица.
- Там кликните по кнопке «Сохранить» , расположенной внизу.
- Далее выберите предпочтительный вариант скачивания. По умолчанию установлено «Сохранить на компьютер» , но можно выбрать и другой. Определившись, нажмите «ОК» .
- Сервис предоставит вам возможность выбора качества конечного файла. Установите галочку напротив пункта «Большой размер» и около расположенной снизу строки «Не печатать логотип» . Нажмите «ОК» .
- Начнется процедура сохранения результата, которая, по непонятным причинам, может затянуться на несколько минут.
- Когда сохранение измененного изображения будет выполнено, онлайн-сервис предоставит вам ссылку на его скачивание. Перейдите по ней – картинка будет открыта во вкладке браузера, откуда ее можно сохранить на ПК. Кликните правой кнопкой мышки и выберите пункт «Сохранить файл как…» . Укажите предпочтительную директорию для размещения скачиваемого файла и нажмите «Сохранить» .
Изменение прозрачности изображения с помощью редактора, встроенного в онлайн-сервис Фотоулица, требует немного больше усилий и действий, чем рассмотренный в предыдущем способе IMGOnline. Но ведь и обработку он выполняет по совсем иному принципу. При этом важно учитывать следующее – для изображений в формате JPG фактически будет изменена не прозрачность, а яркость, то есть изображение просто станет более светлым. А вот с файлами PNG, поддерживающими прозрачность по умолчанию, все будет именно так, как и задумано – картинка, становясь менее яркой визуально, в действительности будет становиться более прозрачной пропорционально уменьшению этого показателя.
Приветствую Вас, дорогие читатели моего блога!
Недавно мне понадобилось убрать фон с картинки, с фотошопом я не дружу особо. И скажу Вам, что у меня его даже нет на компьютере. (Ну правильно вообще то, зачем мне то, с чем я не умею работать).
Но фон с картинки надо было как то убрать, я начала бороздить просторы интернета, в поисках решения своей задачи. Вариантов очень много на самом деле, но я искала, что нибудь полегче)). Я нашла очень легкий и простой способ, как можно убрать фон с картинки.
И так, давайте приступим. Нам понадобиться фотошоп, но так, как у меня его нет. Я использую онлайн фотошоп. Очень удобная штука, я Вам скажу. И конечно же картинка фон которой мы хотим сделать прозрачным.
Покажу Вам на примере, вот такой картинки, убирать мы будем белый фон
Заходим в онлайн фотошоп. Я использовала вот этот PIXLR
Выбираем: Загрузить изображение с компьютера.
Теперь справа в окошке «СЛОИ» надо открыть замочек
Кликаем на него 2 раза левой кнопкой мыши, должна появиться галочка в квадратике.
Теперь идем на панели, которая находиться слева, выбираем инструмент «волшебная палочка» и толерантность ставим 21.
Вот вроде бы и все, но меня не устраивает полностью картинка, остались еще остатки фона, я снова кликаю на то место которое хочу убрать. Потом «редактировать»----«очистить». И так пока не уберете все, что надо.
Здравствуйте друзья! В статье будет показано, как убрать белый фон с картинки онлайн в программе Pixlr, будет показано, зачем это нужно. Убрать можно не только белый фон, убрать можно любой фон, в том числе задний фон на фотографии. Не нужно забывать и о Photoshop поэтому мы также рассмотрим вопрос, как сделать прозрачный фон картинки в фотошоп.
Зачем делать прозрачный фон картинки
Если Вы ведете свой сайт, блог, то наверняка Вам приходится делать часть работ по улучшению дизайна своего блога, приходится работать с картинками и фотографиями. Часто в сайдбаре нужно размещать различные баннеры, как на свои продукты, так и на чужие. Если Вы занимаетесь заработком через Интернет, то нужно создавать подписные и продающие страницы, обложки для книг и коробки для инфопродуктов. Вам снова нужно редактировать картинки для них, создавать наложением из нескольких картинок одну.
При наложении картинок, фотографий нужно делать прозрачный фон. Дело в том, что каждая картинка (изображение) имеет своё расширение – jpeg, gif, png, bmp и массу других расширений. Все указанные расширения, за исключением части изображений png, не имеют прозрачности картинки. Для наложения такой картинки на другую картинку, следует делать прозрачный фон (смотрите скрин).
Как видите со скрина, такую картинку нельзя накладывать на другое изображение, мешает белый фон. Возникает вопрос, как убрать белый фон с картинки? Мы часто работаем с изображениями в онлайн, например, в программе Pixlr. Эта программа фотошоп онлайн, её не нужно устанавливать на компьютер, она абсолютно бесплатная. Вы поработали с картинкой, сохранили её на компьютере, а программу Pixlr онлайн закрыли. Очень удобная программа, мне она нравится.
Поэтому во второй части статьи мы рассмотрим вопрос, как убрать белый фон с картинки онлайн в программе Pixlr. Несмотря на то, что программа Pixlr это тот же фотошоп, она проще в использовании, научиться работать в ней может любой новичок без специальных курсов. Кстати, на блоге есть несколько статей посвященных фотошопу онлайн — программе Pixlr. В конце статьи будут представлены ссылки на статьи посвященные Pixlr.
Если Вы научитесь делать прозрачный фон картинок, то Вы сможете самостоятельно создавать отличные баннеры для своего блога, Вы сможете устанавливать их на свой блог. Комбинируя наложением различных картинок друг на друга, Вы можете получать не только супер уникальные картинки, но и картинки, отличающиеся творческим подходом. Кстати, о том, можно прочитать в указанных статьях на блоге. Итак, переходим к практике и рассмотрим, как убрать фон с картинки в Pixlr.
в Pixlr
Итак, если Вы раньше не работали в программе Pixlr, то Вам нужно набрать её название в поиске или перейти по этой ссылке — https://pixlr.com/editor/ . Эта часть программы является редактором. Регистрироваться в программе не надо, устанавливать её на компьютер тоже не надо.
Чтобы немного ознакомиться с данной программой, посмотрите статьи и . Теперь, когда Вы немного разобрались с панелью управления, приступаем к вопросу, как убрать белый фон с картинки онлайн. Весь процесс пошагово показан в представленном ниже видео, в статье отмечу только основные шаги. Будем редактировать картинку, которая находится на нашем компьютере.
Заходим в программу Pixlr, во всплывающем окошке Pixlr Editor нажимаем «Загрузить изображение с компьютера».
Далее выбираем нужное нам изображение, где нужно сделать прозрачный фон картинки. Справа от загруженной картинки, высвечиваются три маленьких окна, выбираем среднее окно «Слои». В окошке отображена наша картинка в миниатюре, где написано «Задний фон».
Нам необходимо нажать два раза по замку левой кнопкой мыши, чтобы разблокировать работу со слоями (смотрите видео). Далее в левой панели управления выбираем «Волшебную палочку» и нажимаем ею на то место, где нужно сделать прозрачный фон картинки. На изображении должны появиться пунктирные контуры.
Теперь нужно нажать либо клавишу «Delete», либо выбрать в верхней части программы «Редактировать» и нажать «Очистить». У Вас появится фон в виде шахматной доски, это означает, что прозрачный фон картинки получен. Теперь остается сохранить картинку. Для этого выбираем «Файл» и «Сохранить».
Имя файла нужно заполнять латинскими буквами, русские буквы программа не принимает. Важно! Нужно выбрать расширение полученной картинки png, иначе прозрачность картинки не сохранится. На этом работа закончена, мы с Вами разобрались, как убрать белый фон с картинки онлайн в программе Pixlr. Теперь перейдем к вопросу, как сделать прозрачный фон картинки в фотошопе на практике.
Поскольку многие пользователи работают в программе Photoshop, им будет интересно создавать прозрачный фон картинки именно в этой программе. Будем считать, что у Вас установлена программа фотошоп на компьютере.
Итак, переходим к реализации на практике вопроса, как сделать прозрачный фон картинки в фотошопе. Весь процесс получения прозрачного фона картинок показан в прилагаемом ниже видео, в статье будет дано только небольшое описание.
Для начала нужно открыть программу фотошоп и загрузить в неё нужную нам картинку, в которой мы хотим сделать прозрачный фон. Далее нужно разрешить работу со слоями. Эту работу делаем точно так же, как делали мы это в программе Pixlr. Для этого переходим в правую часть программы, где написано «Фон» и нажимаем левой кнопкой мыши на замочек. После этого разрешается работа со слоями (смотрите скрин, стрелочка 1).
Далее выбираем инструмент «Быстрое выделение» (стрелка 2), выбираем кисть со знаком + (на скрине это стрелка 3). Если мы хотим делать прозрачный фон без искажений, то нужно установить минимальный размер редактируемых пикселей (стрелка 4).
Устанавливаем курсор на белый фон картинки, который нужно убрать, нажимаем левую кнопку мыши. В результате по кругу появляется пунктирная линия, которая указывает границы прозрачности картинки. Остается теперь нажать кнопки «Редактировать» и «Очистить». В результате мы сделали картинку без фона.
Остаётся сохранить картинку. Если наша картинка в расширении png, то её можно сохранить через кнопки «Файл» и «Сохранить как». Если Вы сделали прозрачный фон картинки в другом расширении, то полученную картинку нужно сохранить в формате png. Для этого нажимаем кнопки «Файл» и «Сохранить для Web и устройств», а в верхней части нового окна выбираем «PNG» и нажимаем кнопку «Сохранить». Попутно мы можем в этом окне изменить размеры картинки.