Как создать PNG с прозрачностью в Adobe Photoshop (версии CC и выше)? Как сделать png файл с прозрачным фоном в фотошопе


Как сделать фон прозрачным (photoshop)

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

И так, открываем нашу картинку в фотошопе.

1. Первое, что нужно сделать — создать у картинки рабочую область с прозрачным фоном. Для этого:— в окошке слоёв кликаем два раза на наш слой (с замочком)— В повившемся окошке нажимаем ОК

Замочек должен исчезнуть

2. Далее…

Если фон однотонный:Выбираем инструмент «Волшебная палочка» — это очень гибкий инструмент для выделения нужной области. Наша задача выделить весь фон, кроме рисунка. Для этого подгоняем настройки волшебной палочки (параметр допуск), пока не получим нужный результат. Так-же пользуемся клавишей Shift, чтобы выделить область помимо уже выделенной. Нажимаем Del и выделенная облась удаляется.

Если фон разноцветный:Используем инструмент «Быстрое выделение«. Тут наша задача выделить не фон, а сам объект, который должен остаться. Нажимаем до тех пор, пока не выделится нужная область. Если выделилось лишнее, зажимаем Alt и минусуем облась. Посмотреть результат можно клавишей Q.Когда выделение готово, копируем его Ctrl+C. Создаем новый документ с прозрачным фоном (Ctrl+N) и вставляем туда объект Ctrl+V.

3. Если на рисунке осталось что-то лишнее, используем инструмент «Ластик«, просто затираем лишний фон.

4. Сохраняем изображение для Web (Alt+Shift+Ctrl+S) выбираем формат GIF либо PNG (в других наш прозрачный фон превратится в белый).

Полезное видео в тему:

Похожее

Запись опубликована в рубрике Разное с метками Photoshop.

i-leon.ru

Сделать прозрачный фон в Фотошопе

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

Итак, как сделать прозрачный фон в Фотошопе?

Запускаем Фотошоп и открываем подопытную фотографию. Жмем меню Файл – Открыть и указываем расположение изображения.

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

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

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

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

Появилась пунктирная линия (бегающие муравьи). Остается нажать на клавиатуре клавишу DELETE и фон будет удален. Смотрите как получилось:

Супер! Теперь снимите выделение нажав на клавиатуре сочетание клавиш CTR+D.

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

Для этого нажмите меню Файл – Сохранить для Web. Или же просто воспользуйтесь горячей клавишей ALT+SHIFT+CTR+S.

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

А теперь смотрите что было и что стало:

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

На этом сегодня всё, желаю удачи!

Тут был блок "Поделись в соц. сетях"

Интересные статьи по теме:

www.inetkomp.ru

Три способа, как сделать прозрачный фон картинки в Photoshop (фотошоп)

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

Будем работать с рисунком, который вы видите снизу: у нас есть пенек, а на пенек мы посадили колобка. Как видите, белый фон вокруг колобка закрывает пенек, да и вообще портит всю картину:

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

Далее откроется окошко, где нужно нажать на кнопку «Ок». Теперь нажмите на инструмент «Волшебная палочка» и в «Допуске» мы ставим параметр «10»:

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

Все, фон исчез:

○ 2 способ:

Удаляем фон при помощи инструмента «Магнитное лассо»:

Нажимайте возле колобка и просто ведите курсор вокруг него. Линия сама будет притягиваться по контуру:

После выделения нужно перейти в верхнем меню на пункт «Выделение» => «Инверсия»:

Жмите на клавиатуре клавишу «Delete». Все, фон исчез:

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

○ 3 способ:Удаляем фон при помощи режима «Быстрая маска». Она находится внизу:

Нажимаем на «Быструю маску», выбираем инструмент «Кисть» и просто зарисовываем колобка, но не затрагивая фон:

Когда зарисовали колобка, нужно отжать кнопку «Быстрая маска»:

А на клавиатуре нажать клавишу «Delete». Все, фон исчез:

Теперь самое важное: как сохранить?

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

Если картинку сохранить в формате JEPG, то вместо прозрачного фона он будет белым. Сохранять нужно в формате PNG или GIF.Итак, сохраняем:Жмите в меню на «Файл» => «Сохранить как…»:

В «Имя файла:» дайте название картинке, в «Тип файла» найдите и выберите формат «PNG». Жмите на кнопку «Сохранить»:

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

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

Подписывайтесь на обновление моего блога .

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: для начинающих, фотошоп

bloggood.ru

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

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

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

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

А так выглядит список слоев

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

Мы можем сохранить это изображение с прозрачным слоем. Для этого сохраняйте изображение в формате PNG или в GIF. Для этого перейдите в меню Файл — Сохранить для Web. Здесь можно выбрать формат файла.

Сохраняйте в PNG если вы хотите сохранить изображение без потери качества и в GIF если вам важен вес файла.

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

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

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

Вот например я добавил прозрачность 50% для слоя с яблоком. В результате оно стало прозрачным на фоне.

Уменьшить прозрачность для слоя можно на панели слоев. Вы активируйте нужны слой и уменьшаете проценты прозрачности (opacity).

Надеюсь назначение прозрачного слоя в фотошопе теперь вам понятно!

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

Автор урока — Александр Акимов

pixelbox.ru

Как создать PNG с прозрачностью в Adobe Photoshop (версии CC и выше)?

Иногда нужно загрузить изображение, содержащее прозрачные элементы, сквозь которые будет проглядывать первоначальный фон. В этих случаях, было бы удобно загрузить 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) автоматически заполняются значениями, которые вы задали, когда создавали файл. Но если вы хотите изменить размер файла перед сохранением, то можно сделать это сейчас.

Чтобы сохранить изображение, нажмите кнопку «Сохранить» (Save) внизу окна.

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) должны автоматически заполниться значениями, которые вы задали, когда создавали файл. Но при желании можно изменить эти параметры перед тем, как сделать эффект прозрачности в Фотошопе:

Когда закончите, нажмите «Экспортировать все» (Export All).

Перевод статьи «How can I create a PNG with transparency in Adobe Photoshop (CC and higher)?» был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Как сделать прозрачный фон у картинки « Блог сайтостроителя

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

И вот, бывает попадается очень подходящая картинка для вашего поста и всё бы хорошо... Но фон картинки не подходит под фон блога или блока с текстом. Явно ни у одного меня такая проблема и ни у одного меня фон не белый, который подходил бы в большинстве случаев. Мне нужен прозрачный фон!

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

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

Возьмём в пример одну простую картинку в формате .jpg (вообще формат не важен особо):

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

Загружаем наше изображение. Справа в окошке "Слои" появится слой "Фоновый", на котором замочек (не дает удалять фон картинки).

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

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

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

Остается только сохранить изображение. Файл -> Сохранить. Сохраняем изображение обязательно в формате .png, иначе прозрачный фон пропадет.

В итоге на выходе получаем то же изображение с прозрачным фоном.

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

Рейтинг 4 балла Просмотров: 1117

sitestroyblog.ru

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

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

Сегодня поговорим о том, как сделать картинку без фона в Фотошопе.

Сделать это можно несколькими способами.

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

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

Дважды кликаем по слою и в диалоговом окне нажиаем «ОК».

Затем выбираем инструмент «Волшебная палочка» и нажимаем на белый фон. Появляется выделение (марширующие муравьи).

Теперь нажимаем клавишу DEL. Готово, белый фон удален.

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

Выбираем «Быстрое выделение» и «закрашиваем» наше изображение.

Затем инвертируем выделение сочетанием клавиш CTRL+SHIFT+I и нажимаем DEL. Результат такой же.

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

Для ручного выделения в Фотошопе есть несколько инструментов.

1. Лассо. Используйте его, только если у Вас твердая рука или имеется графический планшет. Попробуйте сами и поймете, о чем пишет автор.

2. Прямолинейное лассо. Данный инструмент целесообразно применять на объектах, имеющих в своем составе только прямые линии.

3. Магнитное лассо. Применяется на однотонных изображениях. Выделение «примагничивается» к границе объекта. Если оттенки изображения и фона идентичны, то края выделения получаются рваными.

4. Перо. Наиболее гибкий и удобный для выделения инструмент. Пером можно рисовать как прямые линии, так и кривые любой сложности.

Итак, выбираем инструмент «Перо» и обводим наше изображение.

Ставим первую опорную точку как можно точнее на границу объекта. Затем ставим вторую точку и, не отпуская кнопку мыши, тянем вверх и вправо, добиваясь нужного радиуса.

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

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

Пером можно выделять сразу несколько объектов на изображении.

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

Теперь нужно удалить фон в Фотошопе, нажав клавишу DEL. Если вдруг удалился выделяемый объект вместо фона, то нажимаем CTRL+Z, инвертируем выделение комбинацией CTRL+SHIFT+I и снова удаляем.

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

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

Помогла ли вам эта статья?

Да Нет

lumpics.ru