Пнг картинки для фотошопа: PNG картинки с прозрачным фоном

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

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

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

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

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

Вырезание объекта в фотошопе

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

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

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

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

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

Основной предмет с высокой четкостью границ можно выделить обычным инструментом «Лассо», а нечеткие края — мягкой кистью в режиме «Быстрой маски» (Quick Mask — Клавиша Q), как показано на снимке ниже.

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

Добавление к выделению нечетких областей

А теперь, подробнее о другом способе выделения. Выделите основную часть изображения с четкими границами, затем нажмите — Select/Save Selection…

Снимите выделение и создайте новое, вокруг нечеткой области. Нажмите правой кнопкой мыши — Feather… (Растушевка…) Задайте необходимое значение. Как правило, нескольких пикселей будет достаточно.

Теперь, нажмите — Select/Load Selection… Выберите пункт — Add to Selection (добавить к выделению). Ваше прошлое выделение склеиться с новым, а разные степени размытия сохранятся.

Возможно, этот прием покажется более сложным, чем предыдущий. В общем, делайте, как удобно вам.

Форматы поддерживающие прозрачный фон

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

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

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

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

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

Кратко о возможных вариантах

Для того чтобы бэкграунд изображения не перекрывал поверх другую картинку или общий фон, примените один из этих инструментов:

1. “Волшебная палочка”
2. “Магнитное лассо”
3. “Быстрое выделение” (если фон картинки разноцветный)
4. “Быстрая маска” (если разноцветный)

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

back to menu ↑

Способ №1 “Волшебная палочка”

Это самый популярный способ, который применяется для одноцветного бэкграунда.

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

1 Откройте изображение в Фотошоп. Картинки с непрозрачным фоном обычно имеют формат Jpg, и у них фоновый слой недоступен для редактирования. Чтобы его разблокировать в правом нижнем углу выберите раздел Слои и кликните по замочку в строке Слой 0 (Layer 0)

2 Теперь активируйте инструмент Волшебная палочка (Magic wand). Если его никак не найти, то кликаем правой кнопкой по инструменту Быстрое выделение, и в ниспадающем меню появится нужная нам палочка

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

4 Теперь ненужный задний слой необходимо удалить (нажмите на клавиатуре клавишу Delete). То что задник стал невидимым понятно по открывшемуся полю из бело-серых шашек. Можно сразу вставить объект в другой бэкграунд (копируем и вставляем с помощью сочетания горячих клавиш Ctrl+C и Ctrl+V)

5 Для того чтобы прозрачный бэкграунд не превратился в белый во время сохранения выберите формат GIF либо PNG. В меню Файл нужно будет выбрать функцию Сохранить как, тогда будет доступен выбор формата сохраняемого изображения. Если сохранять в Jpg, то все до одной картинки будут непрозрачными. Поддерживается получившийся формат всеми браузерами, поэтому можно сразу загружать работу на web-сайт

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

Теперь перейдем к работе с Лассо.

back to menu ↑

Способ №2 “Лассо”

У инструмента есть три разновидности.

• Обычное “Лассо” стоит применять только если у вас графический планшет либо твердая рука. Выделять границу объекта вместе со всеми неровностями придется самостоятельно, без помощи программы
• “Прямолинейное лассо” подойдет только для объекта, состоящего из прямых линий
• “Магнитное лассо” является самым удобным вариантом и подойдет неопытным пользователям. Им и будем работать

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

1 Откройте изображение в Фотошопе. В правом нижем углу кликните по окну Слои, а затем по иконке замка в строке Слои 0. Если он исчез, то это сигнализирует о допуске к работе

2 На панели инструментов правой кнопкой кликните по иконке Лассо. Откроется ниспадающее меню, в котором нужно выбрать Магнитное лассо

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

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

5 Теперь в верхнем меню кликните по разделу Выделение, а в ниспадающем меню выберите функцию Инверсия

6 В результате вы увидите, что вся область бэкграунда автоматически выделится

7 Останется только удалить ее кнопкой Del. Не забудьте сохранить получившуюся картинку как PNG или GIF-изображение. Если нужно, то сразу используем Ctrl+C и вставляем скопированное изображение в новый фон

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

back to menu ↑

Способ №3 “Быстрое выделение”

Инструмент для лентяев, как и магнитное лассо. Однако с “приталиванием” пограничной линии, возможно, придется повозиться.

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

1 Откройте изображение в Фотошоп. В правом нижнем углу выберите раздел Слои и в строке Слой 0 кликните на замочек

2 На панели инструментов выберите Быстрое выделение. Если инструмента не видно, то кликните правой кнопкой мыши по инструменту Волшебная палочка и в выпадающем меню перейдите на нужный

3 Кликните на границу фона и объекта и далее, с помощью последовательных кликов для создания опорных точек, добейтесь полного выделения объекта. Если было зацеплено лишнее пространство, то подкорректируйте его, используя клавишу Alt

4 Теперь применим уже известный нам комбинацию с инверсией

5 Марширующие муравьи опять очертили весь ненужный фон

6 Осталось только удалить его, нажав Del, и сохранить получившееся изображение как PNG или GIF-картинку

Для полноты картины рассмотрим еще один способ устранения разноцветного фона.

back to menu ↑

Способ №4 “Быстрая маска”

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

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

1 Открываем изображение в фоторедакторе. В правом нижнем углу находим окно Слои и в строке Слои 0 нажимаем на иконку замка для разблокировки фона

2 На панели инструментов последовательно выбираем Быструю маску и Кисть

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

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

5 Теперь нажмите знакомую уже клавишу Delete фон для удаления. Готово. Осталось сохранить получившуюся картинку как PNG или GIF.

back to menu ↑

Отсечение фона маской

Этот метод не требует использования программы 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, тем самым меняя его форму. Двойной щелчок по контуру будет создавать новые узлы.

Как сохранить изображение в формате PNG с помощью стандартных средств Windows

Проще всего для изменения формата изображения воспользоваться предустановленной программой Paint. Вам поможет представленная далее инструкция.

1. Откройте программу.
2. В открывшееся окно перетащите необходимое для изменения формата изображение.
3. Нажмите по синей кнопке, расположенной в левом верхнем углу интерфейса приложения.
4. Из появившегося списка нажмите по вкладке «Сохранить как».
5. В открывшемся окне «Проводника», во второй строке «Тип файла», необходимо развернуть список и выбрать из предложенных расширение PNG.
6. Нажмите «ОК».

Прозрачность режимом наложения

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

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

В Illustrator нужно открыть панель прозрачностей — Window/Transparency. А затем выбрать режим — Multiply (Умножение).

В CorelDRAW возьмите инструмент — Transparency.

В панели параметров инструмента настройте так, как показано на скриншоте ниже:

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

Программы для работы с png, как скачать и установить

В Интернете есть программы для работы с png файлами, которые можно скачать бесплатно. Если Вам они нужны, заходите в Интернет и пишете в поиске браузера соответствующий запрос (Скрин 3).

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

Как правило, использование утилит ПНГ подразделяют на несколько категорий:

• предназначенные для работы в Windows, Mac, Linux;
• на мобильных устройствах.

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

Программы для работы с png в Windows

Выше мы разбирались с основным вопросом статьи – формат png что это. А сейчас разберём лучшее программное обеспечение для Windows, которое может не только открыть Png файлы, но и их редактировать:

1. Movavi Fhoto Editor. Эта отличная программа для Виндовс, которая редактирует фотографии и картинки. Вместе с тем, открывает форматы картинок в Png.
2. Microsoft Paint. Об этой программе мы уже говорили раньше в статье. Она поможет Вам просматривать ПНГ файлы и сохранять их в другие форматы. Данная программа есть в каждой Виндовс, её не нужно устанавливать на компьютер.
3. Artweaver. Эта утилита умеет качественно редактировать любые изображения. С помощью неё Вы так же сможете открыть ПНГ картинки.
4. Adobe Photoshop. Думаю эта программа известна многим пользователям. Она редактирует изображения, делает их уникальными и сохраняет их в формате Png.

Этих программ Вам вполне хватит, чтобы отредактировать картинку в PNG и её открыть.

Программы для работы с png в Mac, Linux и мобильных устройствах

Рассмотрим ещё программы для редактирования ПНГ файлов на других устройствах:

1. MacPhun ColorStrokes. Эта программа в основном используется в операционной системе MAC. Она довольно быстро редактирует картинки ПНГ.
2. GIMP. Простой редактор, который предназначен для создания и редактирования картинок Png и других форматов. Он работает в системе Linux.
3. Adobe Photoshop Express for Android. Это своего рода специальное приложение, которое устанавливается на телефон через App Story или Плей Маркета. Оно может Вам помочь отредактировать фотографию для Вашего блога и социальных сетей.

Конечно, это не все программы. На просторах Сети Вы сможете найти ещё больше похожих программ.

Конверторы png файлов

В Интернете есть бесплатные конверторы png файлов. Воспользуемся одним из них – «convertio.co/ru/png-converter», а затем перечислим небольшой список конверторов. Итак, нажимаете кнопку на сервисе – «С компьютера» и выбираете те картинки, которые хотите конвертировать в Png (Скрин 5).

Если перейдёте по указанной ранее ссылке, в настройках на сервисе, будет стоять формат PNG. Далее, кликните на кнопку «Конвертировать», чтобы преобразовать формат. Затем, нажмите «Скачать» и файл будет загружен на компьютер в формате Png.

Есть ещё такие конверторы, которые Вы можете использовать:

1. PNG To JPG Converter.
2. Online-converting.ru.
3. Конвертор Png
4. Pixlr

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

Оптимизация изображений.

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

Лучший способ сжать изображения оффлайн.

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

Вот его преимущества:

• Объединяет PNGOUT, OptiPNG и DeflOpt для создания меньшего размера PNGs
• Без потерь качества изображения — изменяется только размер файла
• Конвертация JPG, GIF, TIFF, и BMP файлов в PNG
• Ультра-комфортный интерфейс

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

Как быстро в Photoshop сохранить изображение без фона в формате PNG

Инструкция

Запустите Adobe Photoshop и создайте новый документ нужного вам размера. Чтобы вызвать соответствующий диалог раскройте в меню раздел «Файл» и выберите команду «Создать» или просто нажмите сочетание клавиш ctrl + n. Размеры укажите в полях «Ширина» и «Высота». Убедитесь, что в выпадающем списке «Содержимое фона» выбрана строка «Прозрачный», а затем нажмите кнопку «OK».

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

Подберите настройки качества и выберите формат сохраняемой картинки. Для этого в разделе «Файл» выберите команду «Сохранить для Web и устройств» или воспользуйтесь сочетанием клавиш shift + ctrl + alt + s. Первым делом выберите формат сохранения — для этого предназначены два выпадающих списка в правом верхнем углу окна. Прозрачность поддерживают gif и png, выберите один из пресетов, относящихся к этим форматам. После этого с помощью настроек, размещенных в этом окне, подберите устраивающее вас соотношение качества изображения и веса создаваемого файла. Качество будет отображаться на картинке предпросмотра, а вес — ниже левого угла этого изображения. Затем нажмите клавишу «Сохранить».

Укажите название создаваемого файла и место его сохранения в следующем окне и снова нажмите клавишу «Сохранить».

Полезный совет

Если Adobe Photoshop не установлен в вашем компьютере, то можно воспользоваться его онлайн-версией на сайте http://pixlr. com/editor/?loc=ru.

Источники:

• как меня прозрачность картинки

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

Вам понадобится

• — программа Gimp.

Инструкция

Для сохранения файла-анимации на жесткий диск с интернет-страницы необходимо запустить браузер, открыть новую вкладку, перейти по нужному адресу и произвести копирование. Как правило, это можно сделать через контекстное меню, используя команды «Сохранить изображение как…».

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

Для редактирования анимационных графических файлов необходимо использовать специальное программное обеспечение, например, бесплатный редактор Gimp, который получил распространение во многих операционных системах. Запуск программы осуществляется после двойного клика по ярлыку на рабочем столе.

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

Для реализации данных художественных замыслов существует графический файл в формате

PNG Расшифровывается эта аббревиатура следующим образом: portable network graphics , что на русском означает «переносимая сетевая графика ». Правильно произносится, как «пинг ».

Формат png является детищем компании Adobe, он был создан под редактор Fireworks. Все известные графические редакторы с легкостью воспроизводят и редактируют файлы, сохраненные в данном формате. Я продемонстрирую создание файла png в Paint.NET, так как предпочитаю работать с графикой именно в этой программе.

После открытия Paint.NET произведем стандартный набор команд: «Файл – Создать». В появившемся окне зададим параметры ширины файла, допустим квадрат 200 на 200 пикселей. По умолчанию он будет белого цвета. Не путайте белый цвет и прозрачный. Многие считают его таковым, так как он сливается с белым фоном контента большинства веб – ресурсов. По той же причине бессмысленно делать скриншот квадрата, так как он будет невидимым на белом фоне страницы.

Чтобы квадрат стал бесцветным надо в командной строке программы нажать на «Слои – Свойства слоя».

Снимите в открывшемся окне галочку напротив параметра «Видимый» и нажмите OK.

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

Для этого жмем «Файл – Сохранить как», указываем в верхней части всплывшего окна, в какую папку будем делегировать файл (я выбрал рабочий стол), вместо безымянного имени можете указать свое, пусть будет «прозрачный» и выбираем в ниспадающем списке PNG (*.png), хотя, скорее всего, нужный формат будет выбран программой автоматически.

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

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

2 голоса

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

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

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

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

Более терпеливых я благодарю за понимание. Приступим.

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

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

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

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

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

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

Шашку.

Как правильно хранить прозрачные картинки

Все мы привыкли к такому формату фотографий, как jpeg. Некоторые люди даже и не знают о существовании других. Однако, он не понимает, что такое прозрачность. Для того, чтобы скачивать и хранить на своем компьютере «правильные» фотографии, вам понадобится понять и запомнить новый формат — png.

Видите, помимо шашки, в Google почти всегда вместе с нужными картинками можно увидеть это сочетание букв.

Затем выбираете нужный тип файла, png и готово. Он есть в любой версии. Если не видите – ищите внимательнее. Без него никак. Уверяю вас.

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

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

В моем блоге вы можете найти статью, в которой я показываю 4 инструмента и привожу видео, в котором можно найти 3 способа избавиться от фона на рисунке (). Можете прочитать ее, если вам интересно. Сейчас я хотел бы показать вам еще один прием, так как считаю, что без этого статья была бы не полной. Мало ли, кто-то не захочет лазить по моему блогу. А тут все в одном месте.

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

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

Можете увеличить диаметр ластика, чтобы стирать было удобнее.

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

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

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

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

Думаете, что у вас не получится или вы слишком стары для этого дерьма? Не хватает времени? Поверьте, это все нелепые отговорки. Я юрист и зарабатываю достаточно, но … у вас есть хобби, любимое увлечение? Вы живете полной жизнью? Вам действительно не скучно?

Что бы вы ни знали и чем бы ни интересовались. Интернет открывает массу новых возможностей. Впустите в свою жизнь изменения. Если деньги вас не интересуют – это еще лучше. Это дает больше шансов вашему проекту стать дорогим, крутым и успешным. Все известные люди не работают ради прибыли, они трудятся, потому что любят то, чем они занимаются. Редко кто из них называет это «работой».

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

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

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

Занимайтесь чем-то новым. Если вы любите фотошоп – обратите внимание на курс Зинаиды Лукьяновой — «Фотошоп с нуля » и овладейте им в совершенстве. Очень быстро у вас появится прибыльное хобби. Не так уж увлечены дизайном? Обратите внимание на то, и создавайте свои проекты.

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

Возможно, одна из них вас вдохновит на что-то новое и пока неизвестное. Вы поймете, что это интересно и захотите попробовать сами, а потом… кто знает что будет потом?

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

Я искренне желаю вам успехов в ваших начинаниях и надеюсь, что эта наша встреча будет не последней.

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

Как вырезать часть картинки с помощью Photoshop

В этом уроке мы рассмотрим 3 способа вырезания картинки:

1. С помощью волшебной палочки
2. С помощью лассо
3. С помощью маски

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

Перед  тем как перейти к обучению, сделаем небольшое отступление.

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

1. Загружаем картинку в фотошоп.
2. Два раза кликнем по слою с картинкой и переводим ее из Фонового слоя в Слой 0 (Background в Layer 0).
3. Создаем новый слой и устанавливаем его под слоем с картинкой.
4. Заливаем созданный слой темно зеленым или бордовым цветом.

И так приступим к вырезанию…

Способ 1: волшебная палочка.

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

Перед тем как приступить к вырезанию картинки прочтите отступление в начале урока!

Выбираем инструмент Magic Wand (волшебная палочка).Выставляем параметры в верхней панели как на скрине.

Теперь клацаем на цвет фона, который хотим удалить. После этого фон выделиться пунктиром.

Теперь нажимаем кнопку на клавиатуре «Delete» и удаляем выделенный цвет.

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

Увеличиваем картинку в масштабе до тех пор, пока вам четко не будут видны пиксели цвета. Берем инструмент Eraser (резинка) и подчищаем ненужный цвет.

Затем возвращаем масштаб на 100%. Удаляем нижний слой с цветом и сохраняем (Save as / Сохранить как) в формате PNG без заднего фона.

Способ 2: С помощью лассо

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

Перед тем как приступить к вырезанию картинки прочтите отступление в начале урока!

Для того чтобы нам было легче вырезать сделаем следующие действия.

Заходим в  Image / Canvas Size (Изображение / Размер холста). В выпадающем списке выставляем  измерение в pixels (в пикселях) и увеличиваем  Width и Height (ширину и высоту)на 30 px. Нажимаем OK.

Переходим на нижний слой и еще раз перезаливаем его тем же цветом.

Затем возвращаемся на верхний слой.

Увеличиваем картинку в масштабе до тех пор, пока вам четко не будут видны пиксели цвета.

Выбираем инструмент Polygonal Lasso (Полигональное лассо)и приступаем вырезать (я всегда начинаю с левого нижнего угла). Выделяя с помощью лассо, идите по центру контура рисунка. Если вы поставите неправильный узел его можно удалить кнопкой на клавиатуре «Delete».

Начинаем в точке Х идем по часовой стрелке и соединяем выделение в точке Х.

После того как вы закончите выделение инвертируете его Select  / Inverse (Выделение / Инверсия выделения).

И нажимаем 1 или 2 раза на кнопку  «Delete».

Удаляем нижний слой с цветом и сохраняем (Save as / Сохранить как) в формате PNG без заднего фона.

Способ 3: С помощью маски

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

Перед тем как приступить к вырезанию картинки прочтите отступление в начале урока!

Теперь в английской раскладке клавиатуры нажимаем на Q и переходим в режим быстрой маски.

Закрашиваем инструментом кисть то, что необходимо оставить (на картинке закрашивается красным цветом).

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

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

Нажимаем на клавиатуре кнопку  «Delete».

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

Удаляем нижний слой с цветом и сохраняем (Save as / Сохранить как) в формате PNG без заднего фона.

Автор урока: Prescilla

Данный материал подготовлен для Вас командой сайта https://bakemono.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

28.01.2015 27.01.2018

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

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

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

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

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

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

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

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

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

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

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

Инструкция

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

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

Чтобы сохранить изображение в том виде, в каком вы видите его в редакторе, выберите в верхней строке меню пункт «Файл» (File). Из выпадающего меню выберите команду «Сохранить как» (Save as). В открывшемся диалоговом окне укажите директорию для сохранения файла, в поле «Имя файла» (File name) введите имя, под которым вы хотите сохранить файл. В поле «Тип файла» (Format) из выпадающего списка выберите значение PNG(*.PNG) и нажмите на кнопку «Сохранить» (Save).

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

Загрузите из сети интернет соответствующий скрипт. В качестве фона установите прозрачный слой, а основное изображение разместите на другом слое. Выберите в верхней строке меню пункт «Файл», в развернувшемся меню — пункт «Сценарии» (Scripts) и команду «Экспортировать слои в файлы» (Export Layers to File).

В открывшемся диалоговом окне выберите директорию для сохранения слоев, установите маркер в поле напротив надписи Fast Mode (Don»t remove hidden layers), в поле «Тип файла» выберите формат.png и нажмите кнопку «Выполнить» (Run). Данное действие приведет к тому, что у вас будет сохранено два файла: один «пустой», в другом будет находиться изображение с вашими настройками прозрачности.

Источники:

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

png — графический формат для интернета

Из всех применяемых сегодня графических форматов для веб-изображений чаще всего используются три — gif, jpeg и молодой, но очень перспективный формат png. Разработанный в 1995 году, как альтернатива не удовлетворявшему все пользовательские запросы GIF, он предназначен для изображений, использовать которые планируется в интернете. В отличие от gif, формат png поддерживает 24-битные изображения и прозрачность фона без зубчатых краев.

Основные преимущества формата png -поддержка любых цветов, работа с прозрачными пикселями, эффективный алгоритм сжатия без потери качества изображения. В отличие от gif, который поддерживает только полную прозрачность, png сохраняет также полупрозрачные пиксели (1-99%) за счет Альфа-канала с 256 градациями серого. Встроенная гамма-коррекция позволяет без искажений отображать цвета на любом компьютере, независимо от платформы. Данный формат имеет возможность загружаться с чересстрочной разверткой, причем двойной — по горизонтали и вертикали.

Формат png поддерживает цветовые модели RGB, Grayskale, Indexed Color и Bitmap без альфа-каналов. Он не предназначен для использования с профессиональной графикой и не обеспечивает поддержку цвета CMYK.

Как посмотреть файл с расширением png

Самый простой способ открыть такой файл — два раза щелкнуть по нему левой кнопкой мышки. Даже если на компьютере не установлено никаких дополнительных программ, запустится «Средство просмотра фотографий Windows» и картинка будет открыта. Кроме того, этот формат без проблем открывает графический редактор Paint (в котором можно еще и отредактировать изображение, а также создать новое) и браузер Internet Explorer, входящие в пакет стандартных программ.

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

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

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

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

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

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

Ashampoo Photo Commander FREE — качественная утилита для просмотра и обработки графики. Имеет такие встроенные эффекты, как сепия, тень и резкость, позволяет кадрировать и вращать изображение. Помимо основных функций, обладает возможностью делать снимки рабочего стола, записывать фотографии на диск CD или DVD, конвертировать изображения и отправлять их по электронному адресу. Кроме того, в ней можно создавать и коллажи.

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

Все рассмотренные программы полностью бесплатны. Существует и много других подобных приложений. Среди них можно отметить, например, Honeyview, который позволяет просматривать фотографии прямо из архива zip, 7z или rar, не распаковывая их. Также заслуживает внимания просмотрщик изображений Irfan View. Его функциональность можно значительно увеличить при помощи плагинов, выбор которых будет зависеть от задач, стоящих перед конкретным пользователем.

РЕСУРСЫ ДЛЯ ПОДБОРА СТИЛЬНЫХ И БЕСПЛАТНЫХ ФОТО

 БЕСПЛАТНЫЕ ИЗОБРАЖЕНИЯ И НЕ ТОЛЬКО

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

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

Приглашать фотографа, моделей и делать фото специально для проекта – не каждому по плечу и по карману. Это даже скорее долго, чем дорого.

А картинка к статье нужна вот прямо сейчас. Как быть?

Тут выручают фотостоки и банки авторских фотографий.

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

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

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

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

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

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

Creative Market  Помимо огромного количества приложений для обработкифото (которые, конечно, можно использовать для обработки фото для пина), естьсервис, где можно купить красивые картинки и шаблоны. Это Creative Market есть подраздел с соц. сетями (social media) и Пинтерест(Pinterest). Шаблоны можно купить, но по понедельникам раздаются шесть бесплатных шаблонов. Зарегистрируйтесь, чтобы непропустить их!

Icons for everything  – более миллиона иконок на все случаи жизни. Каждую иконку можно редактировать под ваши задачи, поменять цвет и т.п. Все изображения лицензированы СС 3.0. Это означает, что выможете их бесплатно использовать в любом проекте, если укажите имя автора картинки. Если вы не хотите его упоминать, необходимо приобрести платную лицензию.

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

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

FreePNGimg.com  – Свыше 50 тысяч бесплатных PNG изображений на прозрачном фоне, каждое из которых при необходимости можно преобразовать в иконку. Вы можете их использовать для создания коллажей, стоп-моушен анимации, оформления сайтов и Инстаграм.

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

БЕСПЛАТНЫЕ САЙТЫ ДЛЯ СОЗДАНИЯ И РЕДАКТИРОВАНИЯ ФОТО

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

 Canva  НА РУССКОМ!!! – это мой любимый инструмент для создания социальной медиа-графики и изображений для моих статей в блоге. Canva является бесплатной и очень простой в использовании, даже если вы не создали ни одного изображения в своей жизни, этот удивительный сайт помогает предварительно созданными шаблонами и шрифтами, которые вы можете использовать для мгновенного преображения фото.

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

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

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

Я буду рада, если вы этой информацией поделитесь с друзьями, потому что этиресурсы многим нужны!

Уроки фотошопа-как убрать фон|Как убрать задний фон с картинки|Убрать задний фон в фотошопе

Здравствуйте, уважаемые читатели!

Фотошоп — это интересная штука, которой должен уметь пользоваться каждый! Я не буду объяснять здесь что это и как, я просто буду давать полезные уроки на понятном языке.

Как говорят многие — буду писать для чайников!

Для кого-то фотошоп — это хобби, для кого-то — способ заработка, ну или просто развлечение… А для меня фотошоп — это очередной незаменимый инструмент, без которого мне и моему блогу нет дороги!

Он помогает мне делать классные уникальные картинки (Об этом я напишу позже — у меня там свои фишки, советую подписаться на мой блог. А то вдруг статья выйдет, а вы не узнаете об этом…)

Делать различные 3D коробки и обложки, надписи и т.д

Поэтому я понемногу стал овладевать этими знаниями, и хочу начать обучать и вас! Это не будут очередные унылые и заумные уроки для профессионалов — все будет для чайников в интересном формате (друзья, здесь без обид).

По этому поводу я создаю на блоге еще один раздел под названием «Уроки Фотошоп»!

Да разделов у меня многовато, и один даже есть пустой — но вы на это не смотрите! Скоро я исправлюсь и все-все заполню полезными статьями…

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

Ну что, заканчиваем с таким сказочным вступлением и пора бы приступать к теме поста…

В этой небольшой статье мы раскроем такой небольшой секрет: «Как убрать задний фон с картинки в фотошопе?»

Недавно я сам задавался таких вопросом и был в поисках ответа на него… Но теперь, все это я делаю в считанные секунды и даже друзья-блоггеры просят меня о помощи (я им не раскрыл секрета и сказал, что лучше напишу статью по этому поводу — вот они обрадуются)

Но для начала нам понадобится программа под названием Photoshop (точнее так — Adobe Photoshop)…

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

Открываем наш Фотошоп…

Теперь нам нужно добавить нашу картинку для удаления фона: Файл — Открыть… (думаю тут скрин не нужен)

Я буду использовать вот такую картинку для примера (возьму и библиотеки блога, чтобы не грузить лишнее):

P.S. А вот небольшое замечание: картинка должна быть в формате JPG, с форматами PNG и GIF такая фишка не пройдет… Но если у вас картинка не в формате JPG, то это еще не повод для расстройств — нам нужно просто сменить формат картинки!

Как сменить формат картинки?

Здесь все просто! Можно воспользоватся например программой Paint (это стандартная программка, которая есть на каждом компьютере — ну или по крайней мере должна быть)

Открываем картинку и просто сохраняем ее в уже нужном нам формате (Jpg) без каких либо изменений!

C Фотошопом такая фишка не проходит: не хочет картинки формата PNG и GIF сохранять в Jpg…

Кстати, я использую Adobe Photoshop CS6 Portable… (p.s. мне очень хорошая версия попалась)

После добавления картинки, в окне «Слои» сделайте двойной клик и в открывшемся окне нажмите «ок» (так мы сможем создать новый не заблокированный слой и в последствие произвести изменения):

Теперь нам нужно выбрать в левой панели инструмент под названием «Волшебная палочка» (работает точнее чем «Быстрое выделение«) и с помощью нее производить клики по тем участкам картинки, которые хотим удалить… (сделали клик левой кнопкой мыши, тем самым выделив участок и нажали Delete):

После удаления фона нужно произвести сохранение (Файл — Сохранить как…). Картинку нужно сохранять только в формате PNG, только тогда фон останется прозрачным!

В общем вот мой результат:

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

Теперь такую картинку с легкостью можно поместить на любой фон!

Уроки фотошопа — как убрать фон… Второй вариант!

А вот второй вариант! Если честно, то он мне не по душе!

Все остается прежним, только мы используем другой инструмент, а именно — «Перо». Вообщем, смотрите картинку:

Надеюсь суть картинки понятна! Нам нужно выделять объект точечками пока не замкнется контур…  Если поставили точку неверно, не переживайте — ее можно отменить (во вкладке: Окно — История, ну или кликом правой кнопкой мыши по ней — Удалить опорную точку)

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

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

После всех этих действий фон станет прозрачным, останется только сохранить картинку в формате PNG.

Почему мне не по душе этот вариант?

• очень долго (особенно, если картинка — это не круг или квадрат=)
• контур картинки иногда изменяет свой вид

И так как второй вариант мне не нравится, я решил записать небольшой видеоурок только по первому… Вообщем, смотрим:

Ну да, не удержался и записал про два способа=)

На видеозаписи не видно курсора во-время работы в программе — завис что-то… Но, думаю суть ясна! А еще я не добавил никаких титров, но выше написана классная статья, а еще я жду вас со своими вопросами в комментариях!

На этом все! Всем пока!

  С уважением, автор блога ИНТЕРЕСНО О ПОЛЕЗНОМ

Иконки «Photoshop» — скачай бесплатно PNG и вектор

Иконки «Photoshop» — скачай бесплатно PNG и вектор

Иконки

Фото

Треки

Иллюстрации

Поиск

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

Adobe Photoshop

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

PSD

+ В коллекцию

Adobe Muse

+ В коллекцию

Adobe Muse

+ В коллекцию

Adobe Muse

+ В коллекцию

Adobe Muse

+ В коллекцию

Adobe Muse

+ В коллекцию

Fonticons

+ В коллекцию

Fonticons

+ В коллекцию

Fonticons

+ В коллекцию

Fonticons

+ В коллекцию

Fonticons

+ В коллекцию

Fonticons

+ В коллекцию

Скачать Photoshop PNG фото изображения и клипарт

Photoshop означает редактирование, обрезку, улучшение и исправление изображения с помощью программного обеспечения. Самый мощный инструмент для фотошопа называется Adobe Photoshop. Adobe Photoshop — надежный графический редактор, выпущенный и разработанный Adobe Incorporated для macOS и Windows. Таким образом, название программного обеспечения стало общим товарным знаком, что привело к его использованию в качестве глагола, например, «фотошоп», «фотошоп и конкурс фотошоп».Photoshop может редактировать составное растровое изображение в нескольких слоях и поддерживает альфа-компостирование, маску и цветовые модели, включая плашечный цвет, двухцветный цвет, CMYK и многие другие. Известно, что Photoshop использует собственные форматы файлов PSD и PSB для поддержки этих файлов и функций.
Photoshop CC 2019 в этой 32-разрядной версии Windows больше не поддерживается. В этом Photoshop CC представлены совершенно новые функции, включая новый инструмент под названием Frame Tool для создания рамок-заполнителей для изображений. Дополнительные функции — это новое заполнение с учетом содержимого, режим многократной отмены, автоматическая фиксация, предотвращение случайных перемещений панели с помощью мастерской блокировки.Некоторыми другими дополнительными функциями были: Пропорциональное преобразование без клавиши Shift, Цветовое колесо, Распределение интервалов, как в Illustrator, возможность видеть длинные имена слоев, сопоставлять шрифт с японскими шрифтами и китайскими шрифтами, переворачивать представление документа, масштабировать пользовательский интерфейс по шрифту, контрольную точку скрывать простой по умолчанию, новый композитинг и надежный движок. Photoshop — это способ редактирования изображений, улучшения, обрезки и использования в профессиональных целях.

В этой подкатегории вы можете бесплатно скачать PNG изображения: Photoshop Artistic.В этой категории «Photoshop» у нас есть 12 бесплатных изображений PNG с прозрачным фоном.

• 
  Эффекты для Photoshop Png Hd
  Формат: PNG
  Разрешение: 1447×870
  Размер: 1,8 МБ
  Загрузок: 23,715
• 
  Эффекты для Photoshop Png Изображение
  Формат: PNG
  Разрешение: 900×891
  Размер: 889.1KB
  Скачиваний: 5,082
• 
  Эффекты для Photoshop Изображение
  Формат: PNG
  Разрешение: 1024×1024
  Размер: 752.4KB
  Скачиваний: 4307
• 
  Эффекты для Photoshop Прозрачный
  Формат: PNG
  Разрешение: 1036×769
  Размер: 720.7KB
  Загрузок: 3,641
• 
  Эффекты для Photoshop Png File
  Формат: PNG
  Разрешение: 1920×1080
  Размер: 2,0 МБ
  Загрузок: 3,040
• 
  Эффекты для Photoshop Скачать бесплатно Png
  Формат: PNG
  Разрешение: 1920×1200
  Размер: 1.7MB
  Загрузки: 2,903
• 
  Эффекты для Photoshop Png Image
  Формат: PNG
  Разрешение: 1023×945
  Размер: 889.4KB
  Скачиваний: 2491
• 
  Эффекты для Photoshop Png Pic
  Формат: PNG
  Разрешение: 1600×795
  Размер: 574.6KB
  Загрузок: 2,423
• 
  Эффекты для Photoshop Png
  Формат: PNG
  Разрешение: 1024×1024
  Размер: 727.9KB
  Скачиваний: 1986
• 
  Эффекты для Photoshop Png Clipart
  Формат: PNG
  Разрешение: 1302×978
  Размер: 718.7KB
  Скачиваний: 1,867
• 
  Эффекты для Photoshop Free Png Image
  Формат: PNG
  Разрешение: 3000×2000
  Размер: 500.2KB
  Скачиваний: 1749
• 
  Photoshop Flower Adobe Portable Color Rgb Design
  Формат: PNG
  Разрешение: 2000×2000
  Размер: 293.0KB
  Скачиваний: 654

(БЕСПЛАТНО) Пыль PNG изображения — Photoshop Supply

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

Эффект пыли

В пакете 9 пыли Изображения PNG с прозрачным фоном (попробуйте мой экшен Photoshop для , удаляющий белый фон ).

Создайте реалистичный эффект пыли всего за несколько простых шагов! Просто добавьте на изображение пыль png.

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

В наборе 9 текстура пыли png изображение в формате PNG с прозрачным фоном:

• пыль png
• взрыв пыли png
• наложение пыли png
• частицы пыли png
• песчаная пыль png
• царапина png

Текстуры пыли | Бесплатно

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

Вы можете использовать эти изображения пыли png для создания эффекта дезинтеграции или эффекта рассеивания.

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

Для создания такого эффекта вам понадобится кисть для пыли Photoshop . Используйте эти изображения png как кисть для пыли . Перейдите в меню Edit> Define Brush , чтобы сделать кисти из этих изображений пыли.

Vintage Photo Effects Online

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

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

Описание предмета

Этот бесплатный пакет содержит 9 файлов PNG

Другие ресурсы, которые могут вам понравиться:

Как оптимизировать PNG — Smashing Magazine

Об авторе

Сергей Чикуйонок — российский интерфейсный веб-разработчик и писатель с большим энтузиазмом относился к оптимизации: от изображений и эффектов JavaScript до рабочего процесса и… Больше о Сергей ↬

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

Как веб-дизайнер вы, возможно, уже знакомы с форматом изображений PNG, который обеспечивает полнофункциональную прозрачность. Это надежная, очень хорошая замена старого формата изображений GIF без потерь. Как пользователь Photoshop (или любого другого редактора изображений) вы можете подумать, что существует не так много вариантов оптимизации PNG, особенно для PNG-изображений с истинным цветом (PNG-24 в Photoshop), у которых их нет.Некоторые из вас могут даже подумать, что этот формат «неоптимизируемый». Что ж, в этом посте мы постараемся развенчать этот миф.

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

Дополнительная информация о SmashingMag:

Скучная часть

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

PNG был разработан как открытая замена проприетарного формата GIF . У них есть некоторые общие особенности (например, индексированная цветовая палитра), но PNG намного лучше, чем GIF во всех аспектах. Он представил несколько интересных функций для упаковки и сжатия изображений, но для нас, веб-дизайнеров и разработчиков, наиболее важной из них является фильтрация строк (также известная как «дельта-фильтры»).

Фильтрация строки развертки

Вот как это работает. Например, у нас есть изображение размером 5 × 5 пикселей с горизонтальным градиентом. Вот схематический вид этого изображения (каждое число представляет уникальный цвет):

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

Число 2 перед каждой строкой представляет примененный фильтр, в данном случае это «Вверх».Фильтр «Вверх» отправляет сообщение декодеру PNG: «Для текущего пикселя возьмите значение указанного выше пикселя и добавьте его к текущему значению». У нас есть значение 0 для строк 2–5, потому что все пиксели в каждой вертикальной линии имеют одинаковый цвет. И такие данные сжимались бы лучше, если бы изображение было относительно большим. Например, 15 пикселей со значением 0 можно записать как 0 (15), и это намного короче, чем пятнадцать нулей — так обычно работает сжатие.

Я написал «можно упаковывать», потому что в этом идеальном тестовом примере фильтр «Sub» (номер 1 перед каждой строкой) даст гораздо лучший результат:

Фильтр «Sub» отправляет сообщение в декодер: « Возьмите значение левого пикселя и добавьте его к текущему значению.В данном случае это 1. Как вы уже догадались, такие данные будут сжиматься очень эффективно.

Фильтрация строк сканирования важна для нас, потому что мы можем их использовать: в частности, мы можем выполнять некоторые манипуляции с изображениями, чтобы улучшить фильтрацию. Существует пять фильтров: None (без фильтрации), Sub (вычесть значение левого пикселя из текущего значения), Up (вычесть значение пикселя выше), Average (вычесть среднее значение левого и верхнего пикселей) и Paeth (заменить значение верхнего, левого или верхнего левого пикселя, названное в честь Алана Паэта).

А вот как эти фильтры влияют на размер изображения по сравнению со старым добрым GIF:

GIF, 2568 байт

PNG, 372 байта

Как видите, GIF изображение в 7 раз больше, чем такое же PNG-изображение .

Тип изображения

Еще одна важная вещь, которую нужно знать о PNG, — это тип изображения , метаданные, хранящиеся внутри файла. Как пользователь Photoshop, вы знакомы с PNG-8 (индексированное изображение) и PNG-24 (полноцветное изображение).Как пользователь Fireworks, вы, возможно, знаете PNG-32 (истинный цвет с прозрачностью), что довольно сбивает с толку, потому что PNG-24 Photoshop может также сохранять истинный цвет с прозрачностью. Что ж, стоит знать, что эти имена не являются официальными, и вы не найдете их в спецификациях PNG. Для вашего удобства в этой статье мы будем использовать соглашение Photoshop об именах типов изображений PNG.

Есть 5 доступных типов изображений в PNG : оттенки серого, Truecolor, индексированные цвета, оттенки серого с альфа-каналом и Truecolor с альфа-каналом.Также есть два подтипа типа индексированного цвета (тоже неофициальный): -битная прозрачность (каждый пиксель может быть полностью прозрачным или полностью непрозрачным) и палитра прозрачности (каждый пиксель может быть полупрозрачным). Во втором случае каждый цвет сохраняется в палитре со своим альфа-значением. Таким образом, непрозрачный красный и 50% -ный прозрачный красный — это два разных цвета, и они занимают 2 ячейки внутри палитры.

Хуже всего то, что Photoshop может сохранять PNG только с тремя из этих типов: индексированный цвет с битовой прозрачностью, Truecolor и Truecolor с прозрачностью.Вот почему вы можете встретить множество мнений о том, что Adobe Fireworks — лучший инструмент для оптимизации PNG. Лично я не согласен с ними: у Fireworks недостаточно инструментов для обработки изображений, у него лишь немного больше возможностей для сохранения изображения PNG, но это тема для другого обсуждения.

Вот где пригодятся такие утилиты, как OptiPNG или pngcrush. По сути, эти инструменты делают следующее:

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

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

Теперь хватит скучной части, давайте сделаем немного волшебства!

1. Постеризация

Это хорошо известный метод оптимизации полноцветного изображения.Откройте пример изображения в Photoshop, нажмите значок в палитре слоев и выберите «Постеризация»:

Выберите минимально возможное количество уровней (обычно достаточно 40) и сохраните изображение:

Оригинал, 84 КБ

Постеризация, 53 КБ

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

Исходное изображение

Плакатное изображение

2. Грязная прозрачность

Take Посмотрите на следующие изображения:

75 КБ

30 КБ

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

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

Откройте оба изображения из приведенного выше примера в Photoshop и выберите Filer> Photo Wiz> Remove Transparency .Теперь вы можете увидеть фактические данные о пикселях, которые были сохранены в изображении:

Что происходит? Как можно выявить данные исходного изображения из однослойного изображения PNG? Что ж, это довольно просто. Каждый пиксель в полноцветном изображении с альфа-каналом описывается четырьмя байтами: RGBA. Последний — Alpha, который контролирует прозрачность пикселей: значение 0 означает полностью прозрачный пиксель, а 255 — полностью непрозрачный. А это означает, что каждый пиксель (с любым значением RGB) может быть скрыт с помощью только байта Alpha, установленного в 0.Но эти данные RGB все еще существуют и, кроме того, не позволяют кодировщику PNG эффективно упаковывать и кодировать поток данных. Таким образом, мы должны удалить эти скрытые данные (например, залить их сплошным черным цветом) перед сохранением изображения. Вот быстрый способ сделать это:

1. Откройте первое изображение из приведенного выше примера в Photoshop.

2. Ctrl + щелчок (или Cmd + щелчок на Mac) на миниатюре изображения в палитре слоев, чтобы создать выделение, затем инвертировать его: Select> Inverse .

1. Переключитесь в режим быстрой маски, нажав клавишу Q:

1. Мы создали маску для полупрозрачного изображения, но нам нужно оставить только полностью прозрачные пиксели. Выберите Image> Adjustments> Threshold и переместите ползунок Threshold Level вправо, оставив таким образом полностью прозрачные пиксели выделения:

1. Выйдите из режима быстрой маски (снова нажмите клавишу Q) и залейте выделение черным:

1. Снова инвертируйте выделение ( Select> Inverse ) и щелкните значок в палитре слоев, чтобы добавить маску.

Вот и все, теперь вы можете сохранить это изображение в формате PNG-24 и убедиться, что изображение размером 75 КБ теперь составляет 30 КБ. Кстати, все эти шаги можно легко записать в Photoshop Action и использовать позже одним нажатием клавиши.

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

5537 байтов

6449 байтов

Если вы удалите прозрачность этих изображений, вы увидите следующее:

Несмотря на тот факт, что первое изображение содержит более сложные данные изображения, оно на 1 Кб легче, чем второе, которое было оптимизировано, как описано выше.Объяснение этого «ненормального» поведения простое: поток данных изображения в первом примере был эффективно упакован с помощью дельта-фильтров, которые лучше подходят для плавных переходов цвета (например, градиентов).

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

Окончательным решением для сохранения исходных данных изображения является создание маски на слое изображения в Photoshop (мы вернемся к этому позже):

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

3.Разделить по прозрачности

Иногда приходится сохранять изображение в «тяжелом» PNG-24 из-за небольшого количества полупрозрачных пикселей. Вы можете сэкономить дополнительные килобайт, если разделите такие изображения на две части — одну со сплошными пикселями, а другую с полупрозрачными — и сохраните их в соответствующих графических форматах. Например, вы можете сохранять полупрозрачные пиксели в PNG-24 и сплошные пиксели в PNG-8 или даже JPEG. Вот быстрое (и записываемое для действий) решение для этого. Для наших экспериментов мы будем использовать этого старшего российского предка iPod:

PNG-24, 62 КБ

1. Ctrl + щелчок / Cmd + щелчок по миниатюре изображения в палитре слоев, чтобы создать выделение:

1. Перейдите в палитру каналов и создайте новый канал из выделенного:

1. Удалите выделение (Ctrl + D или Cmd + D), выберите вновь созданный канал и запустите Threshold ( Image> Adjustments> Threshold ).Переместите ползунок вправо:

1. Мы сделали маску для выделения мертвых твердых пикселей. Теперь нам нужно разделить исходный слой по этой маске. Ctrl + щелчок / Cmd + щелчок по каналу Alpha 1, перейдите в палитру слоев, выберите исходный слой и запустите Layer> New> Layer via Cut . В результате получается два слоя с разделенными сплошными и полупрозрачными пикселями.

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

PNG-8 128 цветов + дизеринг 17 КБ

Постеризация PNG-24 35 6 КБ

И вот результат для сравнения:

До 63 КБ

После 23 КБ

Этот способ имеет очевидный недостаток: вместо одного изображения вы получаете два изображения, что может быть не очень удобно (например, при создании каталога товаров в CMS).

4. Маски влияния

На самом деле, это не метод оптимизации, специфичный для PNG, а демонстрация редко используемых свойств «Сохранить для Интернета»: маска влияния уменьшения цвета и маска влияния дизеринга.

К сожалению, эти свойства были удалены в Photoshop CS4, поэтому вы можете попробовать этот подход оптимизации только в версиях до CS4 (я использую CS3).

Чтобы понять, как работают маски влияния, давайте откроем это демонстрационное изображение в PS и сохраним его в PNG-8 со следующими настройками: Уменьшение цвета: Адаптивное, Дизеринг: Без дизеринга, Цвета: 256 .

42 KB

Первое, что я заметил на этом изображении, — очень нечеткий маятник. Это очень яркое пятно на изображении, которое привлекает слишком много внимания. Попробуем сгладить цветовые переходы маятника, установив дизеринг на 100%:

46 КБ

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

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

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

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

Перейдите в диалоговое окно «Сохранить для Интернета» и установите следующие свойства: Уменьшение цвета: Адаптивное, Дизеринг: Нет, Цвета: 128 (как видите, мы уменьшили количество цветов с 256 до 128). Теперь нам нужно выбрать маску влияния: щелкните ближайший список уменьшения цвета и выберите канал цвета из раскрывающегося списка: Теперь наше изображение выглядит следующим образом:

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

Маятник теперь имеет наивысший приоритет цвета, поэтому мы должны уменьшить интенсивность белого круга, чтобы оставить больше цветов для других областей.Закройте диалоговое окно «Сохранить для Интернета», перейдите в палитру «Каналы», выберите цветовой канал , канал и откройте диалоговое окно «Уровни» ( Изображение> Коррекция> Уровни ). Установите максимальный выходной уровень на 50, чтобы снизить интенсивность белого цвета:

Попробуйте сохранить для Интернета еще раз с теми же свойствами:

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

Я думаю, вы уже понимаете, как работают маски влияния: вы предоставляете Photoshop некоторые подсказки о важных областях изображения с разными оттенками серого.С пробами и ошибками у меня получилась следующая цветовая маска (вы можете скопировать ее и применить к изображению):

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

Мой канал сглаживания выглядит так:

Применение каналов влияния цвета и сглаживания с одинаковыми настройками оптимизации (адаптивная, 128 цветов):

Довольно хорошо для 128 цветов, не правда ли? Давайте сделаем последние штрихи: установите цвета на 180 и максимальное сглаживание на 80%. И вот наш окончательный результат по сравнению с исходной, не оптимизированной версией:

256 цветов, без сглаживания, не оптимизировано 42 КБ

180 цветов, оптимизировано 34 КБ

Оттенки серого

Photoshop не может сохранять PNG с оттенками серого, поэтому вам придется использовать OptiPNG после сохранения черно-белых изображений, например:

 optipng -o5 bw-image.png 

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

PNG-24 (Photoshop → true-color), 8167 байтов.

PNG-24 (Photoshop + OptiPNG → градации серого), 6132 байта

Установка цветового режима оттенков серого (Изображение → Режим → оттенки серого) для изображений перед их сохранением в PNG очень важна, особенно для полупрозрачных изображения (дополнительные сведения см. в разделе Метод грязной прозрачности).

Меньше цветов

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

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

1. Откройте исходное изображение в Photoshop и продублируйте его (Изображение → Дублировать).

63 КБ

1. Удаление прозрачности с дублированного изображения (Фильтр → Мастер фото → Удалить прозрачность):

1. Установите режим изображения на индексированный цвет (Изображение → Режим → Индексированный цвет). В новом диалоговом окне введите следующие настройки:

• Цвета: 190,
• Дизеринг: Диффузия,
• Количество: 80%.

1. Верните режим изображения RGB и скопируйте слой изображения в исходный файл. Выровняйте скопированный слой с указанным и примените его маску. Теперь сохраните его в PNG-24:

51 КБ

Как видите, эти простые шаги сэкономили нам 11 КБ исходного изображения без какого-либо заметного влияния на качество изображения. Но у этого метода есть еще одно преимущество: запуск OptiPNG на этих изображениях часто экономит еще больше байтов. В этом примере размер изображения был уменьшен на 36%, с 51 КБ до 33 КБ.Вместо преобразования изображения в режим индексированных цветов вы можете сохранить его для Интернета и применить маску влияния для экономии дополнительных байтов.

Обратите внимание, что этот метод отличается от PNG-8 с прозрачностью палитры в Fireworks. В большинстве случаев на цветов меньше даст вам более 256 цветов, поэтому вам придется сохранять изображение в формате PNG-24, а не PNG-8. Помните, что сплошной красный и 50% -ный прозрачный красный — это два разных цвета.

Уменьшение деталей

Этот метод полезен для оптимизации теней, отражений, свечения и т. Д.Идея состоит в том, чтобы уменьшить детализацию в едва заметных областях изображения. Как вы помните из метода грязной прозрачности, каждый пиксель полноцветного изображения с прозрачностью описывается в четырех байтах: RGBA. Последний контролирует прозрачность пикселей. Для пикселей, у которых значение Alpha слишком низкое (т. Е. Едва видимые пиксели), вы можете заменить данные RGB для лучшего сжатия изображения. Давай попробуем.

1. Снова откройте iPod Retro в Photoshop.

63 КБ

1. Как видите, под радио есть отражение, которое является хорошим кандидатом для оптимизации.Ctrl + щелчок или ⌘ + щелчок по миниатюре изображения в палитре слоев, чтобы создать выделение. Перейдите в палитру каналов и создайте новый канал из выделения:

• 3. Нам нужно локализовать только те пиксели, которые едва видны. Инвертируйте канал (Image → Adjustments → Invert) и откройте диалоговое окно Threshold (Image → Adjustments → Invert). Достаточно установить пороговый уровень на 170:

4. У нас есть маска, которая включает только едва видимые пиксели.Ctrl + щелчок или ⌘ + щелчок по каналу в палитре, чтобы создать выделение. Вернитесь в палитру слоев, выберите слой изображения и откройте Фильтр → Шум → Медиана. Этот фильтр сглаживает пиксели в выделенной области, делая их более удобными для сжатия. Установите значение Радиуса на 5:

Теперь сохраните это изображение «для Интернета» в PNG-24 и посмотрите, как его размер уменьшился с 63 КБ до 59 КБ. Вы можете изменить пороговый уровень и средний радиус, чтобы сжать больше или сохранить больше деталей.

Дополнительные советы по использованию и оптимизации PNG

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

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

3. Многие люди думают, что PNG-8 всегда лучше, чем PNG-24 для низкоцветных изображений. Это не. В некоторых случаях PNG-24 может дать лучшие результаты:

PNG-8, 833 байта

PNG-24, 369 байтов

В этом примере есть накладные расходы в PNG-8: 3 байта использовались для описания пикселей в цветовой палитре и 1 байт для описания цвета пикселя в потоке данных изображения, в то время как PNG-24 занимал только 3 байта для каждого пикселя.Итак, если вы сохраняете низкоцветные изображения в PNG без прозрачности , проверьте, что формат PNG-8 или PNG-24 дает вам меньший файл.

Если вы используете старую версию Photoshop (предыдущая версия CS3), вы можете обнаружить, что изображения PNG в редакторе изображений выглядят иначе, чем в веб-браузере. Это связано с тем, что в файле PNG сохраняется блок gAMA, который управляет гаммой изображения. Вы можете безопасно удалить его с помощью таких инструментов, как TweakPNG (только для Windows) или smush.it.

«Особый» тип изображения PNG позволяет сохранять полупрозрачное изображение как PNG-8 с индексированными цветами.Этот тип изображения недоступен в Photoshop (он есть в Fireworks), но вы можете подготовить изображение в Photoshop, а затем преобразовать его с помощью OptiPNG. OptiPNG по умолчанию преобразует полноцветные изображения в 8-битную палитру, если ваше изображение содержит менее 256 цветов. Для этого вы можете применить техники «Меньше цветов» и «Уменьшить детализацию» и «угадать» количество цветов.

Но это может занять очень много времени. Существует инструмент под названием PNGNQ, который может преобразовывать полноцветное изображение в 256 палитру, но у вас не будет достаточного контроля над результирующим изображением.Вам придется уменьшить общее количество разных цветов, в том числе полупрозрачных, до 256 или меньше. Этот формат является «особенным» из-за того, как он отображается в IE6:

IE6

Другие браузеры

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

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

Оптимизация PNG в реальной жизни

Скринкаст, демонстрирующий, как большинство из этих методов работают в реальной жизни:

Расширенная оптимизация PNG от Сергея Чикуйонока на Vimeo.

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

(al)

Могу ли я извлечь и сохранить фон изображения PNG в Photoshop?

Могу ли я извлечь и сохранить фон изображения png в фотошопе? — Обмен стеками графического дизайна

Сеть обмена стеков

Сеть Stack Exchange состоит из 176 сообществ вопросов и ответов, включая Stack Overflow, крупнейшее и пользующееся наибольшим доверием онлайн-сообщество, где разработчики могут учиться, делиться своими знаниями и строить свою карьеру.

Посетить Stack Exchange

2. 0
3. +0
6. Авторизоваться Зарегистрироваться

Graphic Design Stack Exchange — это сайт вопросов и ответов для профессионалов, студентов и энтузиастов графического дизайна.Регистрация займет всего минуту.

Зарегистрируйтесь, чтобы присоединиться к этому сообществу

Кто угодно может задать вопрос

Кто угодно может ответить

Лучшие ответы голосуются и поднимаются наверх

Спросил 5 лет, 9 месяцев назад

Просмотрено 830 раз

На этот вопрос уже есть ответы здесь :

Закрыт 5 лет назад.

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

Он имеет фоновое изображение — рисунок — с текстом и другим изображением, расположенным над ним. Мне нужно извлечь фон и использовать его на веб-странице. Файл .psd недоступен.

Могу ли я извлечь фоновое изображение этого png-файла в фотошопе и сохранить его?

Спасибо

Создан 09 июл.

2

Нет, файл PNG плоский.Единственный способ получить фоновое изображение без рабочего файла — это воссоздать фоновое изображение. Вы можете спасти часть дизайна, если на части фона нет изображения / текста, используя инструмент «Перо» или другой метод выделения.

Я думаю, что Fireworks может читать многослойные файлы PNG, если исходный PNG был экспортирован, например, в Fireworks. См. Как читать многослойные файлы PNG Fireworks без Fireworks

.

PNG-файлы не имеют слоев, поэтому слои Fireworks хранятся в частные фрагменты файлов PNG в проприетарном формате, который не PNG.Я не знаю ни одной программы, которая могла бы их прочитать. Вам нужно будет попросите владельца этих фотографий преобразовать их в сжатый png (однослойный) или в другой многослойный формат, например psd.

Ответил harrymc

Создан 09 июл.

Эндрю

12k33 золотых знака2727 серебряных знаков5353 бронзовых знака

2 Graphic Design Stack Exchange лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie Настроить параметры

Различия между PSD, TIFF, GIF, PNG и JPEG

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

Adobe Photoshop по умолчанию (PSD)

PSD-файл — это файл многослойного изображения, используемый в Adobe PhotoShop (PSD), который расшифровывается как Photoshop Document и является форматом по умолчанию, который Photoshop использует для сохранения данных. PSD — это проприетарный файл, который позволяет пользователю работать с отдельными слоями изображений даже после того, как файл был сохранен.

TIFF (формат файлов изображений с тегами)

TIFF — это формат файлов без потерь, который популярен среди художников-графиков, фотографов и издателей. Информация сохраняется в слоях, что зависит от того, как вы сохраняете файл. Он также является фаворитом среди принтеров, поскольку при печати изображения не происходит потери качества. TIFF также поддерживается различными приложениями для редактирования фотографий, такими как Photoshop, Lightroom, Illustrator, Photomatix, Google Nik и другими. Файл TIFF, как и файл RAW, очень большой.Кроме того, в этом формате нельзя размещать изображения в Интернете.

GIF — формат обмена графическими данными

Расширение файла GIF было представлено в 1987 году американским агентством компьютерных услуг и компанией CompuServe, занимающейся хостингом в Интернете. Аббревиатура GIF расшифровывается как Graphics Interchange Format. Долгое время GIF был очень популярен для использования в Интернете. На сегодняшний день его превзошел PNG. Преимуществами GIF являются поддержка анимации и (ограниченная) поддержка прозрачности.Недостатком GIF является то, что он поддерживает только 256 цветов. Риск потери качества при сжатии файла GIF велик, особенно для цветных изображений. В настоящее время GIF используется в Интернете, в основном, для простой анимации.

PNG (переносимая сетевая графика)

PNG, изначально созданный как улучшенная замена GIF, является популярным форматом, используемым фотографами и графическими дизайнерами. Это связано с тем, что формат поддерживает сжатие данных без потерь, что означает, что при сохранении и повторном открытии изображений сохраняется много информации.PNG-файлами можно также публиковать в Интернете. Одна из лучших особенностей PNG — возможность прозрачности. Вы можете легко наложить изображение PNG на фон (обычно представленный бело-серой шахматной доской), сохраняя прозрачность и придавая общей фотографии или графике качество 3D. Эта функция также позволяет более эффективно редактировать изображения; фоторедакторы и графические дизайнеры могут легко применять свои правки в слоях. При этом используется сжатие данных, но не так сильно, как в GIF-файлах, что позволяет сохранить изображение высокого качества.Однако размер, хотя и в сжатом виде, все же больше, чем у изображения в формате JPEG.

JPEG (Joint Photographic Experts Group)

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

Вопросы?

Heb je en vraag over de verschillende bestandstypen en hun verschillen of over fotobewerking? Laat hieronder een bericht achter of bel: 0168 476 144. Wij helpen je graag verder!

новый код — простые PNG с альфа-маской в ​​Photoshop

GIF имеет «одноцветную прозрачность» — один цвет может быть выбран как прозрачный в изображении. Это означает, что PhotoShop должен сгладить видимые края изображения, которые касаются прозрачности, на фоне ожидаемого цвета фона . Выбирается путем установки соответствующего «матового цвета» в PhotoShop при экспорте изображения. Затем приложение сглаживает краев GIF по ожидаемому цвету фона, обеспечивая плавный переход. Увеличены эффекты «окантовки» изображения GIF на его фоне из-за неправильного выбора матового цвета во время экспорта из PhotoShop.

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

Чтобы обойти эту проблему, вы можете экспортировать PNG с альфа-маской . Альфа-маска — это выделенная область изображения с уровнями прозрачности: 256 из них, если быть точным, в диапазоне от сплошного черного (полностью прозрачного) до уровней серого до сплошного белого (полностью непрозрачного).В обычных обстоятельствах эта маска не видна напрямую: вместо этого она влияет на восприятие изображения.

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

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

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

Шаг 1 . Нарисуйте любую твердую непрямоугольную форму на холсте PhotoShop. В этом примере я нарисовал красный кружок.

Шаг 2 . Отключите видимость фонового слоя. Это сообщает PhotoShop, что мы будем сохранять прозрачное изображение. Примечание: при нормальных обстоятельствах я бы обрезал это в PhotoShop до краев видимого изображения, чтобы уменьшить размер файла и упростить его размещение на странице; Я специально выделил прозрачную область в этом примере для иллюстрации.

Шаг 3 . Выберите Файл / Сохранить для Интернета и устройств .В открывшемся окне выберите режим « 2 на ».

Шаг 4 . Выберите «PNG 24» в качестве вывода с прозрачностью на . Технически это теперь 32-битный PNG (24-битный цвет, 8-битная альфа-маска), хотя PhotoShop утверждает, что это все еще формат PNG-24. Обратите внимание, что когда в режиме PNG-24 выбрана прозрачность, параметр «матовый» неактивен: «матовый» является избыточным, если для управления уровнями прозрачности используется альфа-маска. Простое изображение PNG-24 с альфа-маской, показывающее, что это действительно так. автоматически сглаживается по всем цветам фона

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

Нравится? Я приглашаю вас подписаться на меня на twitter.com/dudleystorey, чтобы узнать больше.

пакет — PHOTOSHOP — объединение 300 PNG с одинаковым фоном

пакет — PHOTOSHOP — объединение 300 PNG с одинаковым фоном — Суперпользователь

Сеть обмена стеков

Сеть Stack Exchange состоит из 176 сообществ вопросов и ответов, включая Stack Overflow, крупнейшее и пользующееся наибольшим доверием онлайн-сообщество, где разработчики могут учиться, делиться своими знаниями и строить свою карьеру.

Посетить Stack Exchange

2. 0
3. +0
6. Авторизоваться Зарегистрироваться

Super User — это сайт вопросов и ответов для компьютерных энтузиастов и опытных пользователей.Регистрация займет всего минуту.

Зарегистрируйтесь, чтобы присоединиться к этому сообществу

Кто угодно может задать вопрос

Кто угодно может ответить

Лучшие ответы голосуются и поднимаются наверх

Спросил 10 лет, 10 мес назад

Просмотрено 7к раз

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

Мне нужно объединить каждый из 300 PNG с фоном и сохранить как новый PNG. Итак, мне нужно создать 300 новых изображений, созданных с использованием 1.png на фоне, 2.png на фоне и т. Д.

Есть ли метод минимальной боли для этого в Photoshop? У меня CS5.

спасибо за любую помощь.

С.Хоэкстра

2,1111414 серебряных знаков1515 бронзовых знаков

Создан 18 июн.

Утка утка

1,9559 золотых знаков2323 серебряных знака4040 бронзовых знаков

Вероятно, есть несколько способов автоматизировать процесс, вот один:

1. Сохранить фон в буфер обмена
2. Создать новое действие (должно быть на той же вкладке, что и История)
3. Нажмите кнопку записи
4. Вставить фон
5. Перейдите на слой -> Упорядочить -> На задний план
6. Нажмите кнопку остановки

Теперь у вас есть многоразовый экшен.

1. Перейдите в Файл -> Автоматизировать -> Пакетная обработка.
2. Убедитесь, что действие — это ваше новое действие вставки.
3. Выберите источник, я использовал папку.
4. Если вы также хотите сохранить его, укажите место назначения
5. Хит ок.

Создан 18 июня ’10 в 21: 302010-06-18 21:30

2 Очень активный вопрос .

No related posts.