Как сохранить пнг в фотошопе: Сохранение файлов в других графических форматах в Photoshop — DesignLessons – все о дизайне

Содержание

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

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

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

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

Шаг 1. Установка

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

Размер бесплатной пробной версии Фотошопа – всего 57 Мб, благодаря чему дистрибутив скачается за считанные минуты даже при низкоскоростном Интернете. С установкой легко справится даже начинающий пользователь, имеющий лишь базовые навыки работы с ПК.

Шаг 2. Выбор фото

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

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

На этом шаге вы узнаете, как сохранить изображение без фона в Фотошопе. Для этого кликните на пункт «Эффекты» в верхнем меню и выберите «Замена фона». В появившемся окне необходимо установить опцию «Без фона», а затем перейти к выделению объекта, который должен остаться на фотографии. Увеличивайте масштаб кадра, пока объект не станет достаточно большим, чтобы его было удобно обрабатывать. Кликайте по границам с фоном по контуру нужного вам участка, следя за тем, чтобы линия выделения ложилась как можно более ровно.

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

Шаг 4. Сохранение

Если вам важно, чтобы при сохранении фон оставался прозрачным, не выходите из окна «Замена фона». В левом нижнем углу вы найдёте кнопку «Сохранить в файл» — нажмите на неё и выберите нужный формат. Важно помнить, что прозрачность поддерживается только форматами PNG и GIF, поэтому стоит обратить внимание именно на них. Форматы TIFF и PSD можно отнести скорее к макетам, чем к изображениям, и просмотреть их без использования Фотошопа не получится.

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

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

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

В этой статье мы расскажем, как сделать прозрачность в Фотошопе.

Создание файла

Первый шаг – это создание файла. Для этого откройте Adobe Photoshop и в меню «Файл» (File) вверху страницы выберите «Создать» (New).

Затем в появившемся окне «Новый документ» (New Document) создайте файл нужного размера, и убедитесь, что разрешение документа составляет 72 пикселя на дюйм (поскольку файл предназначен для использования в веб). А также, что вы выбрали значение «Прозрачный» (Transparent) в выпадающем списке «Содержимое фона» (Background Contents).

*Перед тем, как сделать PNG с прозрачностью в Фотошопе, нужно уточнить, что в этом примере мы создаем изображение для загрузки в качестве фона для сайта, поэтому размер документа задан следующим образом: ширина 3000 пикселей, высота 1730 пикселей, что является рекомендуемыми размерами для загрузки HD изображений:

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

Затем в панели «Слои» (Layers) убедитесь, что работаете на прозрачном слое, а не на фоновом:

После того, как вы завершили создание и готовы сохранить прозрачное изображение, в зависимости от используемой версии Photoshop, в меню «Файл» (File) вы можете использовать один из возможных вариантов:

Photoshop версии ранее, чем CC 2015:

Сейчас мы расскажем, как сделать прозрачность картинки в Фотошопе, который вышел раньше CC 2015. В этих версиях используют метод «Сохранить для Web» (Save for Web & Devices), чтобы сохранить и оптимизировать PNG изображения для использования в вебе. Чтобы воспользоваться этим методом, просто зайдите в меню «Файл» (File), и далее – «Сохранить для Web» (Save for Web & Devices):

Затем в появившемся окне выберите PNG-24 из выпадающего меню возможных значений, а потом убедитесь, чтобы выбраны опции «Прозрачность» (Transparency) и «Преобразовать в sRGB» (Convert to sRGB). Это подтверждает, что изображение будет содержать прозрачный фон и его цветовой режим будет преобразован в sRGB, рекомендованное цветовое пространство для веб.

Поля «Размер изображения» (Image Size) автоматически заполняются значениями, которые вы задали, когда создавали файл. Но если вы хотите изменить размер файла перед сохранением, то можно сделать это сейчас.

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

Photoshop версии CC 2015:

Перед тем, как сделать прозрачность фото в Фотошопе, нужно знать, что с версии CC 2015 опция «Сохранить для Web» (Save for Web & Devices) в меню «Файл» (File) помечена как Legacy (устаревшая). И замещена на новую опцию «Экспорт» (Export), которая предлагает идентичную функциональность с более быстрым сохранением в файле меньшего размера и в лучшем качестве. Чтобы воспользоваться опцией «Экспорт», нажмите меню «Файл» (File), а затем — «Экспортировать как» (Export As).

Примечание: Adobe по-прежнему предлагает опцию «Сохранить для Web» (Save for Web & Devices) в Photoshop CC 2015, и она доступна через меню Файл > Экспорт (File > Export) или при использовании комбинации клавиш Command+Option+Shift+S (для Mac) или Ctrl+Alt+Shift+S (для ПК):

Затем в появившемся окне выберите PNG из выпадающего меню «Формат» (Format) и убедитесь, что выбраны опции «Прозрачность» (Transparency) и «Преобразовать в sRGB» (Convert to sRGB).

Поля «Размер изображения» (Image Size) и «Размер холста» (Canvas Size) должны автоматически заполниться значениями, которые вы задали, когда создавали файл. Но при желании можно изменить эти параметры перед тем, как сделать эффект прозрачности в Фотошопе:

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

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

Как сохранить файл Photoshop в Интернете с частичной прозрачностью на прозрачном фоне?

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

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

Я сейчас «сберегаю для сети» для PNG-24. Тем не менее, Photoshop постоянно превращает прозрачные пиксели в белый или черный — без реальной альфа-прозрачности. Что мне делать?

Вот само изображение:

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

)

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

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

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

Чем открыть файл в формате PNG

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

Что находится в файлах PNG

Файл с расширением файла PNG является файлом

Portable Network Graphics . Формат использует сжатие без потерь и обычно рассматривается как альтернатива GIF. Но в отличие от , в файлах PNG не поддерживается анимация.

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

Как открыть файл PNG

Чтобы открыть PNG файлы, можно использовать любой интернет-браузер или графический редактор. И платформа ОС Windows, и Mac OS имеют встроенные механизмы для просмотра таких изображений. Программа Png — Просмотр фотографий Windows по умолчанию часто используется для открытия файлов PNG, поскольку это системная программа Windows. Но существует много других способов их просмотра.

Все браузеры (например, Chrome, Firefox, Internet Explorer и т. д.) будут автоматически просматривать файлы PNG, которые вы открываете в Интернете, а это означает, что не нужно загружать на компьютер каждый PNG файл, который вы хотите посмотреть. Вы также можете использовать браузер для открытия уже имеющихся на компьютере PNG файлов при помощи комбинации клавиш Ctrl + O.

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

Конвертация PNG

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

Файл изображения, который хранится в формате Portable Network Graphic (PNG). Содержит битовую матрицы цветов и использует компрессию без потерь, близкую к файлу , но без ограничений в копировании. Обычно используется для хранения графики веб-изображений.

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

Доброго времени суток!
Вам когда-нибудь хотелось узнать как устроены файлы PNG? Нет? А я все равно расскажу.
Формат PNG(Portable Network Graphics) был изобретен в 1995 году, чтобы стать заменой GIF , а уже в 1996, с выходом версии 1. 0, он был рекомендован W3C , в качестве полноправного сетевого формата. На сегодняшний день PNG является одним из основных форматов веб-графики.

Под катом вы найдете общее описание строения PNG-файла, некоторое количество картинок-схем, препарирование в hex-редакторе, и, конечно, ссылку на спецификацию.

Общее строение

Структура PNG в самом общем виде представлена на следующем рисунке.

То есть файл состоит из подписи и некоторого количества блоков(чанков, chunks), каждый из которых несет в себе некоторую информацию (спасибо КО!). Но почему подпись нельзя считать одним из чанков? Давайте разберемся поподробнее.

Подпись файла

Подпись PNG-файла всегда одинакова, состоит из 8 байт, и представляет собой (в hex-записи)

Что же это означает?

89 — non-ASCII символ. Препятствует распознаванию PNG, как текстового файла, и наоборот.
50 4E 47 — PNG в ASCII записи.
0D 0A — CRLF (Carriage-return, Line-feed), DOS-style перевод строки.
1A — останавливает вывод файла в DOS режиме (end-of-file), чтобы вам не вываливалось многокилобайтное изображение в текстовом виде.
0A — LF, Unix-style перевод строки.

Chunks

Чанки — это блоки данных, из которых состоит файл. Каждый чанк состоит из 4 секций.

Разберем эти секции по порядку.

Длина

Ну, с длиной вроде все ясно. Просто числовое значение длины блока данных.

Тип (имя)

С типом немного поинтересней. Тип представляет собой 4 чувствительных к регистру ASCII-символа. Регистры символов (пятый бит в числовой записи символа) в имени чанка различаются неспроста — это флаги, которые сообщают декодеру некоторую дополнительную информацию.

Регистр первого символа определяет является ли данный чанк критическим(верхний регистр) или вспомогательным(нижний регистр). Критические чанки должны распознаваться каждым декодером. Если декодер встречает критический чанк, тип которого не может распознать, он обязан завершить выполнение с ошибкой.
Регистр второго символа задает «публичность»(верхний регистр) или «приватность»(нижний регистр) чанка. «Публичные» чанки — официальные, задокументированные, распознаваемые большинством декодеров. Но если вдруг вам для каких-то своих нужд понадобится кодировать специфическую информацию, то просто в имени чанка сделайте второй символ маленьким.
Регистр третьего символа оставлен для будущих свершений. Предполагается, что он будет использоваться для дифференциации различных версий стандарта. Для версий 1.0 и 1.1 третий символ должен быть большим. Если он (внезапно!) оказался маленьким, все нынешние декодеры должны поступать с чанком, так же как и с любым другим не распознанным (то есть выходить с ошибкой если чанк критический, или пропускать в противном случае).
Регистр же четвертого символа означает возможность копирования данного чанка редакторами, которые не могут его распознать. Если регистр нижний, чанк может быть скопирован, вне зависимости от степени модификации файла, иначе (верхний регистр) он копируется только в случае, когда при модификации не были затронуты никакие критические чанки.

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

Ниже приведен список типов чанков с краткими пояснениями.
Критические чанки

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

Вспомогательные чанки

bKGD — этот чанк задает основной фоновый цвет.
cHRM используется для задания CIE 1931 цветового пространства.
gAMA — определяет гамму.
hIST — в этом чанке может храниться гистограмма или общее содержание каждого цвета в изображении.
iCCP — цветовой профиль ICC
iTXt — содержит текст в UTF-8, возможно сжатый, с необязательной языковой меткой. iTXt чанк с ключевым словом «XML:com.adobe.xmp» может содержать Extensible Metadata Platform (XMP) .
pHYs — содержит предполагаемый размер пикселя и/или отношение сторон изображения.
sBIT (significant bits) — определяет «цветовую точность» (color-accuracy) изображения (черно-белое, полный цвет, черно-белое с прозрачностью и т.д.), для более простого декодирования.
sPLT — предлагает палитру для использования, если полный спектр цветов недоступен.
sRGB — свидетельствует о использовании стандартной sRGB схемы.
sTER — индикатор стереоскопических изображений.
tEXt — может содержать текст в ISO/IEC 8859-1 формате, с одной name=value парой для каждого чанка.
tIME — хранит дату последнего изменения изображения.
tRNS — содержит информацию о прозрачности.
zTXt — сжатый текст, с теми же ограничениям, что и tEXt.

Более подробную информацию можно найти в спецификации.

CRC

Контрольная сумма CRC-32 . Кстати на днях был топик о ее подсчете в Windows.

Минимальный PNG

С общей структурой разобрались. Теперь разберем содержание обязательных чанков. Но какие из них обязательные (не критические, критические обязаны распознаваться декодером, а не присутствовать в каждом файле), и как выглядит минимальный PNG-файл? А вот как:

IHDR

Блок данных в IHDR содержит следующие поля:

Ширина, 4 байта
Высота, 4 байта
Битовая глубина (bit depth), определяет количество бит на каждый сэмпл(не пиксель), 1 байт
Тип цвета, состоит из 3 флагов 1 (используется палитра), 2 (используется цвет, не монохромное изображение), and 4 (присутствует альфа-канал), 1 байт
Метод сжатия. На данный момент доступно только значение 0 — сжатие по алгоритму deflate . Если значение отлично от 0, чанк считается нераспознанным, и декодер рапортует об ошибке. 1 байт
Метод фильтрации. Так же, как и в случае сжатия, на данный момент может быть только нулем. 1 байт
Interlace(переплетение) метод. Определяет порядок передачи данных. На данный момент доступно 2 значения: 0 (no interlace) и 1 (Adam7 interlace). 1 байт

Adam7 interlacing прекрасно демонстрирует картинка из википедии (да-да, GIF в статье про PNG):

IEND

Сигнализирует о конце файла, блок данных этого чанка не содержит ничего.

IDAT

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

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

Заключение

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

Топик на хабре про строение JPEG: habrahabr. ru/blogs/algorithm/102521
Топик на хабре про строение GIF: habrahabr.ru/blogs/algorithm/127083

Спасибо за внимание, буду рад любой критике!

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

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

Скачать программу формат png на компьютер

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

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

Что ж, думаю из всего мной вышеперечисленного можно сделать пару логичных выводов и принять решение о загрузке к себе на компьютер или же ноутбук удобнейшей редакционной программы с массой достоинств и полностью отсутствующими недостатками. Ну а перейти непосредственно к самой загрузке дистрибутива вам поможет обращение своего пристального внимания на адресные зеркальные ссылки, расположенные чуть ниже и гарантирующие максимальную скорость. 05.06.16 27.2K

В этой статье мы расскажем, как сделать прозрачность в Фотошопе .

Создание файла

Первый шаг – это создание файла. Для этого откройте Adobe Photoshop и в меню «Файл » (File ) вверху страницы выберите «Создать » (New ).

Затем в появившемся окне «Новый документ » (New Document ) создайте файл нужного размера, и убедитесь, что разрешение документа составляет 72 пикселя на дюйм (поскольку файл предназначен для использования в веб ). А также, что вы выбрали значение «Прозрачный » (Transparent ) в выпадающем списке «Содержимое фона » (Background Contents ).

*Перед тем, как сделать PNG с прозрачностью в Фотошопе , нужно уточнить, что в этом примере мы создаем изображение для загрузки в качестве фона для сайта, поэтому размер документа задан следующим образом: ширина 3000 пикселей, высота 1730 пикселей, что является рекомендуемыми размерами для загрузки HD изображений:

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

Затем в панели «Слои » (Layers ) убедитесь, что работаете на прозрачном слое, а не на фоновом:

После того, как вы завершили создание и готовы сохранить прозрачное изображение, в зависимости от используемой версии Photoshop , в меню «Файл » (File ) вы можете использовать один из возможных вариантов:

Photoshop версии ранее, чем CC 2015:

Сейчас мы расскажем, как сделать прозрачность картинки в Фотошопе , который вышел раньше CC 2015 . В этих версиях используют метод «Сохранить для Web » (Save for Web & Devices ), чтобы сохранить и оптимизировать PNG изображения для использования в вебе. Чтобы воспользоваться этим методом, просто зайдите в меню «Файл » (File ), и далее – «Сохранить для Web » (Save for Web & Devices ):

Затем в появившемся окне выберите PNG-24 из выпадающего меню возможных значений, а потом убедитесь, чтобы выбраны опции «Прозрачность » (Transparency ) и «Преобразовать в sRGB » (Convert to sRGB ). Это подтверждает, что изображение будет содержать прозрачный фон и его цветовой режим будет преобразован в sRGB , рекомендованное цветовое пространство для веб.

Поля «Размер изображения » (Image Size ) автоматически заполняются значениями, которые вы задали, когда создавали файл. Но если вы хотите изменить размер файла перед сохранением, то можно сделать это сейчас.

Photoshop версии CC 2015:

Перед тем, как сделать прозрачность фото в Фотошопе , нужно знать, что с версии CC 2015 опция «Сохранить для Web » (Save for Web & Devices ) в меню «Файл » (File ) помечена как Legacy (устаревшая ). И замещена на новую опцию «Экспорт » (Export ), которая предлагает идентичную функциональность с более быстрым сохранением в файле меньшего размера и в лучшем качестве. Чтобы воспользоваться опцией «Экспорт », нажмите меню «Файл » (File ), а затем — «Экспортировать как » (Export As ).

Примечание: Adobe по-прежнему предлагает опцию «Сохранить для Web » (Save for Web & Devices ) в Photoshop CC 2015 , и она доступна через меню Файл > Экспорт (File > Export ) или при использовании комбинации клавиш Command+Option+Shift+S (для Mac ) или Ctrl+Alt+Shift+S (для ПК ):

Затем в появившемся окне выберите PNG из выпадающего меню «Формат » (Format ) и убедитесь, что выбраны опции «Прозрачность » (Transparency ) и «Преобразовать в sRGB » (Convert to sRGB ).

Поля «Размер изображения » (Image Size ) и «Размер холста » (Canvas Size ) должны автоматически заполниться значениями, которые вы задали, когда создавали файл. Но при желании можно изменить эти параметры перед тем, как сделать эффект прозрачности в Фотошопе .

2 голоса

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Не используйте русифицированный фотошоп — Блог HTML Academy

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

Убедитесь, что Фотошоп правильно настроен: выпадающее меню Edit → Color Settings (вызывается Shift + Ctrl + K), выставьте для RGB вариант sRGB. Это то цветовое пространство, «в котором работает весь веб».

Дополнительная мелкая настройка: Edit → Preferences → Units & Rulers (для OS X пункт Preferences — в выпадающем меню с названием программы), в выпадающих списках для «Rulers» и «Type» нужно выбрать единицы измерения «Pixels».

Интерфейс

Интерфейс Фотошопа

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

Панель со всеми инструментами слева, прочие панели справа или «плавают».

Внешний вид Фотошоп настраивается: можно перетаскивать панели, включать и отключать их видимость (в выпадающем меню Window), сворачивать и разворачивать (двойной клик по названию панели), сворачивать в иконки.

Создав рабочее окружение с нужными панелями и скрыв всё ненужное, можно сохранить вариант получившегося интерфейса. Список рабочих окружений — в верхней правой части окна, в нижней части списка есть пункт «New Workspace…» — нажимаем, именуем, сохраняем.

Необходимые и желательные для верстальщика панели:

Layers — панель слоёв — папки и слои макета.
Character — данные о выделенном текстовом слое или тексте (шрифт, цвет, размер, интерлиньяж и другое).

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

Все лишние панели закрыть, ибо занимают место. ~~Спасибо, кэп!~~

Как верстальщику работать в Фотошопе

Если вы правша, держите левую руку на левой части клавиатуры, чтобы легко доставать до Shift, Ctrl, Alt и Пробел.

Включите линейки (выпадающее меню View → Rules, поставить галочку (оно же — Ctrl + R)), убедитесь, что они показывают пиксели (правой кнопкой мыши кликнуть на линейке, выбрать пиксели).

Ориентация по документу

Tab — показать или скрыть все панели.

Зажать Пробел, «схватить» мышью за документ и перетаскивать — перемещение в рамках масштаба. Зажатие кнопки временно активирует инструмент Hand Tool.

Ctrl + 0 — вписать макет в рабочую область.

Ctrl + 1 — установка масштаба 100%.

Зажать H, зажать левую кнопку мыши — документ масштабируется так, чтоб был виден целиком, можно перетащить рамку (вы держите левую кнопку нажатой, просто тащите мышь) в любое место и отпустить — окажитесь в этой области с тем масштабом, который был ранее. Архиудобно для перемещения по увеличенному документу! Почти как зажатие Пробел, но быстрее при перемещении на «большие расстояния».

Зажать Alt, крутить колесо мыши — масштабирование в обе стороны вокруг того места, где расположен курсор.

Выбор слоёв

Можно поискать нужный слой в панели слоёв, но есть способ быстрее.

Зажать Ctrl и кликнуть на слой. Зажатие кнопки временно активирует инструмент Move Tool. Работает в случае выбора любого инструмента кроме Hand Tool (по зажатию Ctrl включается инструмент масштабирования) и самого Move Tool. Чтобы это работало, убедитесь, что настройки инструмента Move Tool (это панель под выпадающими меню, когда инструмент выбран) выставлены следующие: Auto-Select — галка стоит, в выпадающем списке рядом — Layer.

Показать и скрыть

Показать или скрыть какие-либо слои просто — кликнуть на иконке «глаз» этого слоя в панели слоёв (или с клавиатуры: Ctrl + ,).

Alt + клик по иконке «глаз» в панели слоёв — показать только один этот слой, прочее скрыть, повторный клик, чтобы вернуть статус кво.

Информация о слоях

Двойной клик по миниатюре текстового слоя — редактирование слоя, выставляйте текстовой курсор в нужное место — узнаёте шрифт, размер, интерлиньяж, трансформации, кернинг, спейсинг и цвет. Если параметры Horizontally Scale или Vertically Scale отличаются от 100%, нужно экспериментировать с CSS3-свойством transform у блока, в который включать только этот текст и налаживать взаимодействие дизайнера и верстальщика, если это контентный текст.

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

Если у слоя справа есть курсивная надпись «fx» (и иконка, открывающая список), значит у него есть эффекты. Кликайте на открывающую иконку — увидите список эффектов (можно отключить их показ — кликаем на иконки глаза рядом с эффектами), двойной клик по эффекту вызовет панель с настройками эффекта.

Лирическое отступление: в верхней левой части панели слоёв есть выпадающий список — это режим наложения слоя. Если его значение отличается от Normal, то опять налаживаем взаимодействие дизайнера и верстальщика, так как слои, имеющие наложение в режиме отличном от Normal и не являющиеся часть сложных коллажей/картинок (целиком сохраняются в единое изображение), сверстать корректно (как в макете), или нереально вовсе, или требует дополнительных трудозатрат с вашей стороны.

Цвет в макете: инструмент Eyedropper Tool (в настройках указать Sample Size → Point Sample). Кликаем по произвольному пикселю, в панели цвета (под всеми инструментами) видим цвет пикселя.

Размер в макете: инструмент Ruler Tool — нажать, тащить мышью, отпустить — в панели настроек (под выпадающим меню, параметр L1) увидите измеренное расстояние. Если тащить с зажатым Shift, измеритель перемещается строго горизонтально, строго вертикально или под 45° (для верстальщика не актуально).

Можно использовать Rectangle Marquee Tool, создавая выделение (размер выделения будет показан рядом с выделением), если Фотошоп версии CS6 и новее. Убрать получившееся после измерения выделение — Ctrl + D.

Прочие полезные верстальщику техники

Показать и скрыть сетку, направляющие, габариты трансформации, нарезку — Ctrl + H.

Отмена и повтор последнего действия — Ctrl + Z~~(снова спасибо, Кэп!)~~

Отмена действий последовательно — Ctrl + Alt + Z

Команда из выпадающего списка Image → Trim — подрезка прозрачных или однотонных пикселей (удобно, если нужно получить слой на прозрачном фоне: копируем слой в новый документ, подрезаем, экспортируем).

Узнать истинный габарит слоя с полупрозрачными эффектами — правый клик по названию слоя → Convert to Smart Object. После этого габарит трансформации показывает размер с эффектами.

Обрезать макет до габаритов какого-либо изображения для его экспорта — инструмент Crop Tool.

F12 — восстановить макет в том виде, в котором он сейчас сохранён на диске.

Экспорт графики для веба

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

Если векторный объект нарисован в самом Фотошопе, то чтобы экспортировать SVG, выберите в панели слоёв векторный слой, вызовите контекстное меню и используйте команду File → Export As. В открывшемся окне экспорта можно выбрать SVG-формат. На этапе экспорта отмасштабируйте экспортируемую картинку — убедитесь, что в результате получится именно вектор, а не растровая вставка в векторный файл.

Если же SVG создан в стороннем векторном редакторе (например, в Adobe Illustrator) и добавлен в Фотошоп как смарт-объект, то для его экспорта нужно вызвать на слое контекстное меню и выбрать пункт Export Contents.

Экспорт графики

Большие фотографические (многоцветные) изображения экспортируются как JPEG, качество 60‒95.

Мелкие картинки, вписывающиеся в 256 цветов, которым не нужна полупрозрачность или она бинарная — PNG-8.

Любые картинки где нужна полупрозрачность или отсутствие искажений — PNG-24.

Заключение

Предлагаю тему к обсуждению. Какими приёмами и клавиатурными сокращениями пользуетесь вы?

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

Всем привет. Сегодня речь у нас пойдет о том, как сохранить полученный результат. Ведь форматов так много, а еще зачем-то 2 типа сохранения: Save As и Save for Web & Devices .

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

Формат psd: Photoshop Document

Первым рассмотрим именно *.psd, т.к. это родной формат Photoshop. Он поддерживает всё: слои, корректирующие слои, обтравочные пути, изменения в каналах, либо сами каналы, никакой потери качества при многократном пересохранении не происходит.

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

Формат jpg или jpeg: Joint Photographic Experts Group

Самый распространенный формат растровой графики. В нем, например, чаще всего сохраняют снимки в цифровых камерах. И, если вы обратите внимание, большая часть хранящихся у вас картинок, поставленных с Windows, имеет формат *.jpg.

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

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

Формат gif: Graphics Interchange Format

Удобен для сохранения файлов с маленьким количеством цветов, т.е. поддерживает максимум 256 цветов.

Рекомендации можно дать следующие: если на картинке, несколько одноцветных объектов (имеется ввиду, что окрас объекта имеет один цвет, например, красный без градиентных переходов, а не то, что все объекты имеют одинаковый цвет), то выбор можно сделать в пользу *.gif. Хотя в таких ситуациях стоит еще присмотреться и к формату *.png (8 bit), но о нем ниже. Gif может содержать прозрачность, но не содержит слои.

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

Формат png: Portable network graphics

Выбор между *.png (8 bit) и *.png (24 bit) осуществляется только в File ? Save for Web & Devices…

*.png (8 bit)

Во многом похож на *.gif. Также поддерживает всего лишь 256 цветов, а это значит, что для фотографий не подойдет. Использование *. png (8 bit) приоритетно, если есть градиенты — алгоритм этого формата позволяет сжимать их более компактно.

Как и *.gif может содержать прозрачность. Не умеет сохранять анимацию.

*.png (24 bit)

Имеет одно неоспоримое преимущество перед *.jpg, *.gif, *.png (8 bit) — он единственный умеет сохранять полупрозрачность, т.е. если *.gif и *.png (8 bit) сохраняют только 2 значения прозрачности: прозрачно или непрозрачно, то в *.png полупрозрачность имеет множество промежуточных значений.

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

Остальные множественные форматы в повседневной жизни вам вряд ли пригодятся. И еще одно: все описанные форматы, кроме *.psd, можно открыть на любом компьютере, в стандартной программе просмотра изображений. А так же загрузить в интернет, где их смогут увидеть пользователи.

Теперь пару слов, о методах сохранения, первый метод:

File ? Save As…

Для сохранения *. psd подходит только этот метод, в нём же можно сохранять и *.gif, *.jpg, *.png (24 bit). Но для последних трех форматов прибегать к этому методу сохранения стоит только если вам абсолютно не важен объем полученного изображения.

File ? Save for Web & Devices…

Сохранить докумен в формате *.psd этот метод не позволяет, зато во все остальные описанные форматы без проблем. Главный плюс этого метода — очень тонкая настройка качества картинки, а соответственно и полный контроль над объемом файла.

Так же очень важно то, что тут можно посмотреть оригинал картинки и её же после оптимизации.

Еще один значимый плюс данного метода в том, что именно таким способом можно сохранить *.gif с поддержкой анимации!

Сегодня мы поговорим о том, как правильно сохранить и оптимизировать картинку в фотошопе и в каком формате это лучше сделать. А ведь правильный выбор формата сохранения очень сильно влияет на качество и внешний вид картинки, а также на вес картинки в килобайтах. Это особенно важно для тех, кто учитывает расход трафика. Итак, давайте разберемся по порядку с jpg, gif и png.

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

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

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

Формат png. Похож на предыдущий формат, но более продвинут и эффективнее сжимает картинки. В png очень удобно сохранять клипарты на прозрачном фоне. Существует в двух форматах png-8 (для простых картинок, поддерживает 256 цветов) и png-24 (для более сложных изображений, хорошо поддерживает цвета).

2. Сохраняем с помощью функции «Сохранить как…» (Save as…)
Можно сохранить картинку используя старый добрый способ через меню «Файл» -> «Сохранить как…» (Save as…) или комбинация клавиш «Shift+Ctrl+S». В выпадающем меню выбирается формат файла, в котором хотим сохранить файл. (Смотрим рисунок ниже) Этот способ используется когда сохраняемая картинка останется на вашем компьютере и не предназначается для публикации в интернете.

3. Сохраняем с помощью функции «Сохранить для Web» (Save for Web…)
Если же ваша картинка предназначена для того, чтобы быть вывешенной в интернете, то лучше воспользоваться функцией «Сохранить для Web» (Save for Web…). При таком способе картинка лучше и качественнее сохраняется именно для интернета и плюс там есть несколько удобных возможностей. Выбираем в меню «Файл» -> «Сохранить для Web…» (Save for Web…) или комбинация клавиш «Alt+Shift+Ctrl+S». Откроется диалоговое окно.

Для того, чтобы сохранить картинку в формате jpg в выпадающем меню (1) выбираем формат JPEG. Ставим качество сохранения (2) от 75% до 95%. Я всегда ставлю 75%. Устанавливаем, если надо, необходимые размеры картинки (3). В окошках слева показан изначальный размер картинки (4) и размер оптимизированной картинки (5). После этого нажимаем «Сохранить».

Для того, чтобы сохранить картинку в формате gif в выпадающем меню (1) выбираем формат GIF. Выбираем количество цветов для сохранения (2). Устанавливаем, если надо, необходимые размеры картинки (3). В окошках слева показан изначальный размер картинки (4) и размер оптимизированной картинки (5). После этого нажимаем «Сохранить».

Для того, чтобы сохранить картинку в формате png в выпадающем меню (1) выбираем формат PNG-8. Выбираем количество цветов для сохранения (2). Устанавливаем, если надо, необходимые размеры картинки (3). В окошках слева показан изначальный размер картинки (4) и размер оптимизированной картинки (5). Ставим галочку в чекбоксе «Прозрачность» (6) для того, чтобы фон был прозрачным. После этого нажимаем «Сохранить».

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

Битовая глубина (только в 32-битном режиме)

Задает битовую глубину (16-, 24- или 32-битовую) сохраняемого изображения.

Сжатие изображения

Задает метод сжатия данных совмещенного изображения. При сохранении 32-битового файла tiff можно задать сжатие с прогнозированием, однако вариант использования сжатия jpeg не предлагается. Сжатие с прогнозированием обеспечивает более качественное сжатие данных путем упорядочения значений с плавающей точкой, оно совместимо со сжатием LZW и ZIP.

Примечание.

Сжатие JPEG доступно только для непрозрачных изображений RGB и полутоновых изображений с глубиной цвета 8 бит на канал, размер которых не превышает 30 000 пикселей в ширину или высоту.

Порядок пикселей

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

Формат

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

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

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

Сжатие слоев

Определяет метод сжатия данных для пикселов в слоях (вместо комбинирования данных). Многие приложения не могут считывать данные слоев и пропускают их при открытии файла TIFF. Photoshop, однако, может считывать данные слоев в файлах TIFF. Хотя размер файлов, содержащих данные слоев, больше размера файлов без них, сохранение данных слоев избавляет от необходимости сохранять и работать с отдельным файлом PSD для хранения данных слоев. Выберите параметр «Удалить слои и сохранить копию», чтобы выполнить сведение изображения.

Примечание.

Чтобы получать от Photoshop запрос подтверждения перед сохранением изображения с несколькими слоями, выберите параметр «Выводить предупреждение перед сохранением многослойных файлов в формате TIFF» в области «Обработка файлов» диалогового окна «Установки».

2 голоса

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

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

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

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

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

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

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

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

05.06.16 26.7K

В этой статье мы расскажем, как сделать прозрачность в Фотошопе .

Создание файла

Первый шаг – это создание файла. Для этого откройте Adobe Photoshop и в меню «Файл » (File ) вверху страницы выберите «Создать » (New ).

Затем в появившемся окне «Новый документ » (New Document ) создайте файл нужного размера, и убедитесь, что разрешение документа составляет 72 пикселя на дюйм (поскольку файл предназначен для использования в веб ). А также, что вы выбрали значение «Прозрачный » (Transparent ) в выпадающем списке «Содержимое фона » (Background Contents ).

*Перед тем, как сделать PNG с прозрачностью в Фотошопе , нужно уточнить, что в этом примере мы создаем изображение для загрузки в качестве фона для сайта, поэтому размер документа задан следующим образом: ширина 3000 пикселей, высота 1730 пикселей, что является рекомендуемыми размерами для загрузки HD изображений:

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

Затем в панели «Слои » (Layers ) убедитесь, что работаете на прозрачном слое, а не на фоновом:

После того, как вы завершили создание и готовы сохранить прозрачное изображение, в зависимости от используемой версии Photoshop , в меню «Файл » (File ) вы можете использовать один из возможных вариантов:

Photoshop версии ранее, чем CC 2015:

Сейчас мы расскажем, как сделать прозрачность картинки в Фотошопе , который вышел раньше CC 2015 . В этих версиях используют метод «Сохранить для Web » (Save for Web & Devices ), чтобы сохранить и оптимизировать PNG изображения для использования в вебе. Чтобы воспользоваться этим методом, просто зайдите в меню «Файл » (File ), и далее – «Сохранить для Web » (Save for Web & Devices ):

Затем в появившемся окне выберите PNG-24 из выпадающего меню возможных значений, а потом убедитесь, чтобы выбраны опции «Прозрачность » (Transparency ) и «Преобразовать в sRGB » (Convert to sRGB ). Это подтверждает, что изображение будет содержать прозрачный фон и его цветовой режим будет преобразован в sRGB , рекомендованное цветовое пространство для веб.

Поля «Размер изображения » (Image Size ) автоматически заполняются значениями, которые вы задали, когда создавали файл. Но если вы хотите изменить размер файла перед сохранением, то можно сделать это сейчас.

Photoshop версии CC 2015:

Перед тем, как сделать прозрачность фото в Фотошопе , нужно знать, что с версии CC 2015 опция «Сохранить для Web » (Save for Web & Devices ) в меню «Файл » (File ) помечена как Legacy (устаревшая ). И замещена на новую опцию «Экспорт » (Export ), которая предлагает идентичную функциональность с более быстрым сохранением в файле меньшего размера и в лучшем качестве. Чтобы воспользоваться опцией «Экспорт », нажмите меню «Файл » (File ), а затем — «Экспортировать как » (Export As ).

Примечание: Adobe по-прежнему предлагает опцию «Сохранить для Web » (Save for Web & Devices ) в Photoshop CC 2015 , и она доступна через меню Файл > Экспорт (File > Export ) или при использовании комбинации клавиш Command+Option+Shift+S (для Mac ) или Ctrl+Alt+Shift+S (для ПК ):

Затем в появившемся окне выберите PNG из выпадающего меню «Формат » (Format ) и убедитесь, что выбраны опции «Прозрачность » (Transparency ) и «Преобразовать в sRGB » (Convert to sRGB ).

Поля «Размер изображения » (Image Size ) и «Размер холста » (Canvas Size ) должны автоматически заполниться значениями, которые вы задали, когда создавали файл. Но при желании можно изменить эти параметры перед тем, как сделать эффект прозрачности в Фотошопе .

Сохранение изображений в редакторе Фотошоп онлайн, растровая и векторная графика

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

Сохранение изображений

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

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

После того, как Вы поработаете с изображением, и захотите его сохранить, Вам нужно будет использовать пункт меню Файл — Сохранить, или клавиши Ctrl + S.

На выбор для сохранения предлагаются следующие варианты форматов картинок:

JPEG — позволяет создавать изображения с огромным многообразием цветов и оттенков, их может быть до 16,7 миллионов, оптимально подходит для большинства изображений, если не требуется прозрачность. При сохранении в JPEG все слои со всеми настройками сводятся в один слой, впрочем, это касается и остальных форматов, кроме формата PXD.
PNG — если картинка многоцветная, этот формат имеет больший вес по сравнению с JPEG при том же качестве, но PNG поддерживает прозрачность, в отличие от JPEG.
BMP — прозрачность не поддерживает, сохраняет изображение абсолютно без потери качества, но картинка имеет максимальный вес, хотя конечно, если Вы возьмете картинку JPEG, и сохраните в формате BMP, ее качество от этого не улучшится.
TIFF — позволяет сохранять изображения с большой глубиной цвета, и потому используется в полиграфии, прозрачность не поддерживает, вес файла большой, сравнимый с весом в формате BMP.
PXD — единственный формат из перечисленных, который сохраняет слои и другие настройки изображения. После сохранения в этом формате Вы можете опять открыть его в редакторе Фотошоп онлайн, и продолжить работу со слоями, масками, стилями слоев и так далее, как если бы Вы и не прерывали работу.

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

Для практического применения, конечно, формат PXD не подходит, например, на сайте Вы его не сможете поставить. Он — только для работы в редакторе Фотошоп онлайн.

Этот формат аналогичен формату PSD в фотошопе. Кстати, формат PSD отлично открывается в редакторе Фотошоп онлайн, а вот формат PXD открываться в программе Photoshop не хочет.

Растровая и векторная графика

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

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

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

И к векторному, и к растровому слою можно применять стили. Для применения стилей можно выбрать пункт меню Стили слоев, или нажать на иконку Стили слоев на палитре Слои.

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

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

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

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
Подписаться на блог: Дорога к Бизнесу за Компьютером

Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:

Adobe Photoshop и Image Optimizer — Примеры

Содержание.

Программа Adobe Photoshop.

Программа Image Optimizer.

Программа Blogger.

Сколько картинок проиндексировано?

Уникальность картинок для поисковых систем.

Программа Adobe Photoshop.

Для того, чтобы ускорить загрузку блога, рекомендуется оптимизировать изображение, то есть при минимальном объёме файла, получить максимально качественную картинку. Лидером рынка в области редактирования web-изображений является редактор Adobe Photoshop (Фотошоп).

Скачать последнею версию можно с сайта разработчика или воспользоваться услугами таких программ, как MediaGet. Я выбрала последнее. Вот скаченный мной файл Adobe_Photoshop_CS5_En-Ru-Ukr. При обозначении настроек принято использовать английский язык, поскольку перевод (русификация программы) может варьироваться. Я же буду указывать обозначения, задействованные в данной версии программы.

Общие настройки сжатия изображения.

После предварительной обработки фотографии, выбираем пункт «Файл»-«Сохранить для Web и устройств». Не стоит сохранять оптимизированные картинки поверх оригинала, исходные изображения лучше держать под рукой. При сохранении, имя файла присваиваем латинскими буквами без пробелов, используя в качестве разделителя слов тире, формат — «Только изображения».

Открыть меню для оптимизации изображения Photoshop.

Определяемся с удобным способом предварительного просмотра результата оптимизации изо в сравнении с оригиналом:

Исходное,
Оптимизация,
2 варианта,
4 варианта.

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

Сохранить настройки сжатия в Photoshop.

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

При необходимости можно изменить размер изображения. Нежелательный эффект: изменение пикселей в картинке ухудшает чёткость рисунка. Я для манипуляций размера использую программу Image Resize Guide Lite (скачать с сайта разработчика). На мой взгляд, итоговая картинка получается чётче, чем в Фотошопе. А скриншот, по-возможности, стараюсь сразу получить нужного размера, либо предварительно уменьшив размер программы (см, рис.

ниже), либо изменив масштаб в браузере: «Вид»-«Масштаб».

Image Resize Guide Lite.

Оптимизация изображения в формате PNG-8.

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

Перцепционная — за основу берутся текущие цвета скриншота, сохраняется целостность цвета, особое внимание уделяется восприятию цветовой палитры человеком.
Селективная — предпочтение отдаётся Web-безопасным цветам (количество: 216), которые во всех браузерах выглядят одинаково.

#000000	#000033	#000066	#000099	#0000CC	#0000FF
#003300	#003333	#003366	#003399	#0033CC	#0033FF
#006600	#006633	#006666	#006699	#0066CC	#0066FF
#009900	#009933	#009966	#009999	#0099CC	#0099FF
#00CC00	#00CC33	#00CC66	#00CC99	#00CCCC	#00CCFF
#00FF00	#00FF33	#00FF66	#00FF99	#00FFCC	#00FFFF
#330000	#330033	#330066	#330099	#3300CC	#3300FF
#333300	#333333	#333366	#333399	#3333CC	#3333FF
#336600	#336633	#336666	#336699	#3366CC	#3366FF
#339900	#339933	#339966	#339999	#3399CC	#3399FF
#33CC00	#33CC33	#33CC66	#33CC99	#33CCCC	#33CCFF
#33FF00	#33FF33	#33FF66	#33FF99	#33FFCC	#33FFFF
#660000	#660033	#660066	#660099	#6600CC	#6600FF
#663300	#663333	#663366	#663399	#6633CC	#6633FF
#666600	#666633	#666666	#666699	#6666CC	#6666FF
#669900	#669933	#669966	#669999	#6699CC	#6699FF
#66CC00	#66CC33	#66CC66	#66CC99	#66CCCC	#66CCFF
#66FF00	#66FF33	#66FF66	#66FF99	#66FFCC	#66FFFF
#990000	#990033	#990066	#990099	#9900CC	#9900FF
#993300	#993333	#993366	#993399	#9933CC	#9933FF
#996600	#996633	#996666	#996699	#9966CC	#9966FF
#999900	#999933	#999966	#999999	#9999CC	#9999FF
#99CC00	#99CC33	#99CC66	#99CC99	#99CCCC	#99CCFF
#99FF00	#99FF33	#99FF66	#99FF99	#99FFCC	#99FFFF
#CC0000	#CC0033	#CC0066	#CC0099	#CC00CC	#CC00FF
#CC3300	#CC3333	#CC3366	#CC3399	#CC33CC	#CC33FF
#CC6600	#CC6633	#CC6666	#CC6699	#CC66CC	#CC66FF
#CC9900	#CC9933	#CC9966	#CC9999	#CC99CC	#CC99FF
#CCCC00	#CCCC33	#CCCC66	#CCCC99	#CCCCCC	#CCCCFF
#CCFF00	#CCFF33	#CCFF66	#CCFF99	#CCFFCC	#CCFFFF
#FF0000	#FF0033	#FF0066	#FF0099	#FF00CC	#FF00FF
#FF3300	#FF3333	#FF3366	#FF3399	#FF33CC	#FF33FF
#FF6600	#FF6633	#FF6666	#FF6699	#FF66CC	#FF66FF
#FF9900	#FF9933	#FF9966	#FF9999	#FF99CC	#FF99FF
#FFCC00	#FFCC33	#FFCC66	#FFCC99	#FFCCCC	#FFCCFF
#FFFF00	#FFFF33	#FFFF66	#FFFF99	#FFFFCC	#FFFFFF

Адаптивная — цветовая таблица состоит из наиболее часто встречающихся цветов в исходном изо.

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

Photoshop. Формат PNG-8.

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

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

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

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

Оптимизация изображения в формате PNG-24.

Этот формат применяется для полноцветных изображений, использует более 16 миллионов цветов в файле, сохраняет чёткие детали рисунка, поддерживает многоуровневую прозрачность, в результате чего конечный объём графического файла получается наибольшим. Оптимизация проводится лишь в двух направлениях: присутствием прозрачности и наличием режима «Чересстрочно».

Photoshop. Формат PNG-24.

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

Формат GIF поддерживает по кадровую смену изображений. Широко используется при создании баннеров и анимационной графики.

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

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

Перед осуществлением оптимизации фоторгафии, предварительно применяем команду «Фильтр»-«Шум»-«Уменьшить шум».

Степень сжатия определяется:

Photoshop. Формат JPEG.

Значением поля «Качество» (при использовании очень мелких контрастных деталей, не стоит выставлять качество ниже 51),
Желательным наличием режима «Прогрессивный» (постепенная загрузка изображения),
Значением поля «Размытие»,
Не обязательным присутствием галочки «Встроенный профиль» (большинство браузеров не могут читать ICC-профиль).

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

Также, для прочтения по данной теме рекомендую статьи «Студии Артемия Лебедева».

Программа Image Optimizer.

Для быстрой оптимизации изображений без потери качества в формате PNG и JPEG можно воспользоваться программой Image Optimizer (ссылка компьютерного портала RU-BOARD). После использования Фотошопа, я применяю также эту программу, что позволяет ещё уменьшить размер объёма файла. Для JPEG практикую цифру 2 (Прогрессивный), а для PNG — 3 (Чересстрочно). При Xtreme происходит наилучшее сжатие.

Программа Blogger.

В первую очередь замечу, что поскольку блогпост не позволяет размещать у себя на сервере файлы, в Blogger интегрирован один из сервисов Google — веб-альбом Picasa. Автоматически в нём изображения закрыты для индексации поисковыми системами. Для разрешения поисковикам сканировать ваши изо, нужно сделать Picasa общедоступным.

При включении картинки в блог, Blogger автоматически размещает ссылку на её оригинальный размер и место расположения (левый/правый край, по центру). Код при этом выглядит следующим образом (для работы с кодом нужно при редактировании/создании сообщения выбрать вкладку «Изменить HTML»):

<div>
<a href="http://3.bp.blogspot.com/_ebKrCj8TLPk/TKT7q7GVJkI/AAAAAAAAAoM/Kbm08McseMk/s1600/tigr.jpg" imageanchor="1"><img border="0" src="http://3.bp.blogspot.com/_ebKrCj8TLPk/TKT7q7GVJkI/AAAAAAAAAoM/Kbm08McseMk/s320/tigr.jpg" width="320" /></a></div>

Обратите внимание на часть адреса /s1600/ — он определяет размер изо. Оно может варьироваться по вашему усмотрению, а не только (маленький, средний, крупный, очень крупный, исходный). В данном случаем установлен «средний размер». Но, если выбрать «исходный размер», изображение уместится в ширину сообщения блога. То есть, можно безболезненно удалить ссылку, поскольку она не увеличивает рисунок и не улучшает качество просмотра. Я стараюсь уменьшить ненужную и неэффективную ссылочную массу, поэтому располагаю большую часть картинок в их исходном виде без использования тега .

При выборе варианта размещения рисунка «Исходный размер», нет таких важных параметров, как alt, width, height. В остальных случаях задаётся фиксированное значение width и соответствующее ему height. Более подробно про значения размеров изображений можете прочитать здесь.
Также мы видим тег , который определяет место расположения изображения. При большом рисунке, чтобы его границы были в рамках сообщения, или малом изображении, например, кнопки, в тексте, я удаляю этот элемент. Бесполезен данный код и при использовании возможности «Добавить подпись» к рисунку. В общих чертах:

<table><tbody>
<tr><td><img/></td></tr>
<tr><td>Тигры</td></tr>
</tbody></table>
<div>
<a></a></div>

Как видите, в тег заключён только тег </a>, у которого нет анкора, т.е. ваша картинка не будет увеличиваться. А место размещения рисунка определяется атрибутом class тега .

Конечный код оптимизированного изо будет иметь вид:

<table align="center" cellpadding="0" cellspacing="0"><tbody>
<tr><td><img alt="Тигры" border="0" height="255" src="http://3. bp.blogspot.com/_ebKrCj8TLPk/TKT7q7GVJkI/AAAAAAAAAoM/Kbm08McseMk/s1600/tigr.jpg" width="340" /></td></tr>
<tr><td>Тигры</td></tr>
</tbody></table>

А это его отображение:

Тигры

Сколько картинок проиндексировано?

Чтобы увидеть какие изображения вашего блога проиндексированы:

Расширенный поиск Яндекс.Картинки.
В графу «Находятся на сайте:» задаём URL(адрес, например, http://shpargalkablog.ru/).
Поиск Google (результат: Картинки).
В поле поиска задаём site:ваш_блог (например, site:shpargalkablog.ru).
Здесь же можно загрузить фото через свой компьютер по нажатию на кнопку и робот покажет его аналоги.

Уникальность картинок для поисковых систем.

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

Потренировавшись на нём, у меня получилось, что уникальной картинку можно сделать лишь путём зеркального отражения либо поворотом изображения, скажем на 15 градусов. Способ довольно известный и широко используемый. Больше всего меня удивил скриншот программы Image Resize Guide Lite (см. выше). TinEye без труда выдал несколько копий с изображением тигров. Ни уменьшение, ни обрезка, ни… результата не дали.

Яндекс и Гугл могут определять похожие изображения. Для этого в поиске по картинкам рядом с изображением нужно щёлкнуть ссылку «Другие размеры» (в Яндексе ссылка под фото имеет вид «800×600 … 1600×1200»).

32-bit PNG — All of Photoshop (RU) — ЖЖ

Профиль

All of Photoshop (RU)

Вместо извинений за свой пост, прочтите это

All of Photoshop (FAQ) — TOP 5

Не менее полезные ссылки

Поиск по меткам

20 лет с photoshop, 2010, 2012, adobe, adobe cs6, adobe evolution, adobe photoshop, adobe photoshop elements, adobecreativedays, after effects, allofphotoshop, apple, bug, color, competition, creative cloud, creative days, creative future, creative suite, creative suite 6, creativefuture, creativefuture 2010, cs 5.

5, cs5, cs6, drawing, event, facebook, help, illustrator, lightroom, link, moscow, news, photoshop, photoshop cs6, photoshop elements, poll, premiere elements, premiere pro, ru_photoshop, sale, steve jobs, stuff, terry white, tutorial, useful, video, wacom, Москва, Новости, Россия, Терри Уайт, бесплатно, вебинар, видео, день фотографа, джейпег, евангелист от Adobe, интервью, история, календарь, конкурс, конференция, мероприяте, музей, не умею читать по-английски, новый тэг: я круче всех! абсолютно!, объявление, онлайн, паранормальное, программное обеспечение, скидка, сочи, спикер, туториал, форум, фотограф, фотожаба, фотошоп, эволюция творчества, это фотошоп!, я не могу догадаться заглянуть в FAQ, я не умею запускать программы, я не умею пользоваться поисковиком, я талантливый сын своего времени

27-мар-2013 10:09

Если Вы об отдельном альфа-канале, то PNG не хранит информацию о цвете, если в альфе 0.

Для сохранения отдельного альфа-канала нужно использовать TGA.
И должен быть выбран режим 8-бит на канал.
А так — просто сохранить полупрозрачную картинку в 24-бит PNG с помощью Save for web. Прозрачность должна быть не в отдельном канале, а в самом слое.

Upd. http://www.mirancon.com/howto/photoshop_vs_png (это фотошоп криво работает, а информация хранится правильно)

Edited at 2013-03-27 10:43 (UTC)

27-мар-2013 11:52

RGB (8+8+8) + альфа (8) и есть 32 бита!
или вы хотите сохранить 32-бита на канал?
и на каком устройстве вы намерены просмотривать файл с 32 битами на канал?
32-бита на канал это Radiance HDR (расширенный диапазон)
в фотошопе переведите картинку в 32 бита на канал и посмотрите возможные расширения у файла

вы глубину цвета на изображение, не путаете с глубиной цвета на один канал?

Edited at 2013-03-27 11:58 (UTC)

27-мар-2013 13:07

	Не путаю! Спасибо за ответ! К сожалению пост был на модерации целых 2 дня и я уже перелопатив инет въехала что 24 + альфа это и есть 32! Эх, век живи век учись. Это было из требований подготовки значка для Аппстора.

экспорт — легко сохранить .png из Photoshop без диалогового окна?

Вам нужна капля.

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

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

Чтобы создать каплю, выполните следующие действия:

Выберите File → Automate → Create Droplet.

Откроется диалоговое окно «Создать каплю».

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

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

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

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

Выберите место назначения во всплывающем меню «Место назначения».

Задайте любые параметры именования файлов.

Укажите, как Photoshop должен обрабатывать ошибки.

Когда вы закончите, нажмите OK, чтобы создать каплю.

Чтобы использовать каплю, просто выберите файл, файлы или папки, которые вы хотите обработать, и перетащите их в апплет капли.

Оригинальная статья.

Как сохранить высококачественные изображения в Photoshop, объяснение

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

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

Дело сжатия

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

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

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

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

Различные способы сохранения в фотошопе

В Photoshop существует множество способов сохранения изображений в зависимости от их размера и качества. Самый популярный метод сохранения в Photoshop — это функция Save As в File .

Функция «Сохранить как» предоставит пользователям большинство необходимых им типов файлов. К ним относятся самые популярные типы файлов, такие как JPEG, и неизвестные в других отношениях типы файлов, такие как Scitex CT (.SCT). Сохранить как лучше всего подходит для сохранения редактируемых работ и сохранения слоев.

Export , с другой стороны, экспортирует слои в окончательные однослойные изображения. Вы можете получить доступ к Экспорт из раскрывающегося меню Файл . Основная функция экспорта, на которую следует обратить внимание, — это Save for Web (Legacy) , обозначаемая как SFW . SFW в основном обеспечивает ту же функцию, что и функция Export As , но с добавленными редактируемыми настройками.

Сохранить для Интернета (устаревшая версия)

SFW — это основная функция, которую пользователи Photoshop должны использовать для сохранения изображений для использования в Интернете. Помните, что при сохранении высококачественных изображений сохраняется только то качество, которое у вас уже есть. Например, изображение 200×200 не будет хорошо выглядеть с масштабированием до разрешения 1920×1080, если оно не является векторным. Чтобы просмотреть выбор формата SFW, щелкните раскрывающееся меню рядом с Preset .

SFW представляет разные версии одного и того же типа файла. Они относятся к различным уровням качества, продиктованным цветовой палитрой, количеством дизеринга, размером файла и т. Д. Строго говоря, лучший формат для сохранения изображений не существует. Тем не менее, два конкретных формата файлов обладают всеми качествами, которые можно ожидать от их изображений: PNG 24 и JPEG High. Если вы хотите узнать больше о сохранении в форматах GIF, у нас это тоже есть.

Есть несколько причин выбрать PNG 24 в качестве формата изображения, две основные причины заключаются в том, что PNG является форматом без потерь и поддерживает более широкий диапазон цветов. Другие причины включают поддержку прозрачности и широкую совместимость. Число 24 (вместе с 8) означает поддержку 24-битного цвета. И PNG 24, и JPEG High поддерживают большую цветовую палитру, что означает, что цвета будут плавно переходить в изображение. Ниже приведен пример разницы между PNG 8 и PNG 24 в сравнении с исходным изображением.

Кредит изображения: Шэрон Питтэуэй

Как вы можете заметить, существует значительная разница между размерами файлов. Размер оригинала — 34,2 МБ (мегабайт), размер изображения PNG 8 — 1,87 МБ, а размер PNG 24 — 11,13 М. Это отражает колеблющееся качество между изображениями PNG 8 и PNG 24.

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

Все изображения выглядят одинаково, несмотря на то, что они отличаются на несколько уровней качества. Тем не менее, наблюдается заметное уменьшение размеров отдельных файлов. Что произойдет, если мы увеличим масштаб изображения с 25% до 200%?

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

Сохранение для печати

Распространенная ошибка пользователей Photoshop — манипулирование изображением для печати без учета цветового режима и PPI. Эти изменения настроек, хотя и небольшие, сильно повлияют на ваше следующее задание печати.

Photoshop использует различные цветовые режимы, которые вы можете увидеть в меню Изображение> Режим .Цветовой режим по умолчанию — RGB (красный, зеленый, синий) и является основным цветовым режимом, используемым в Photoshop.

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

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

Еще одна большая помощь при проектировании для печатных носителей — это изменение PPI вашего изображения.PPI означает количество пикселей на дюйм и определяет плотность пикселей вашего изображения. Большая часть редактирования изображений происходит при 72 PPI, PPI Photoshop по умолчанию. Хотя увеличение PPI не повлияет на воспринимаемое качество изображения на мониторе, напечатанные изображения значительно выигрывают от этого сдвига.

Кредит изображения: Клэр Хоппинг

Для надлежащего качества печати увеличьте PPI изображений до 200–250. Хотя 300 является обычным стандартом для профессионального качества печати, для большинства заданий печати он избыточен. Чтобы изменить свой PPI, перейдите в Image> Image Size и измените параметр Resolution .

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

В Photoshop есть два основных формата для печати: Photoshop PDF и TIFF . Оба появятся в вашей функции Сохранить как в файле .

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

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

Спасите правильный путь

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

В каком формате файла вы сохраняете сделанные вами изображения? Дайте нам знать в комментариях ниже!

12 полезных способов повторного использования старого маршрутизатора (не выбрасывайте его!)

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

Об авторе Кристиан Бонилья (Опубликовано 84 статей)

Christian — недавнее дополнение к сообществу MakeUseOf и заядлый читатель всего, от плотной литературы до комиксов Кальвина и Гоббса. Его страсть к технологиям сочетается только с его желанием и желанием помочь; если у вас есть какие-либо вопросы, касающиеся (в основном) чего-либо, не стесняйтесь писать по электронной почте!

Более От Кристиана Бониллы

Подпишитесь на нашу рассылку новостей

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

Еще один шаг…!

Подтвердите свой адрес электронной почты в только что отправленном вам электронном письме.

Как лучше всего сохранить PNG в Adobe Photoshop? — Уроки Photoshop

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

Компрессия

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

Нет / Быстро: Этот отключает сжатие и дает самое быстрое время сохранения .
Наименьшее / медленное : Этот включает сжатие на и будет иметь самое медленное время сохранения .

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

чересстрочная

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

Кредит изображения: LedFrog.com

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

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

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

Как использовать Photoshop «Сохранить для Интернета»

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

Инструмент «Сохранить для Интернета» в Photoshop — это простой способ подготовить файлы JPEG для Интернета. Этот инструмент также сохраняет файлы GIF, PNG и BMP. Вот как использовать инструмент «Сохранить для Интернета», чтобы получить правильный баланс качества изображения и размера файла для ваших изображений.

Инструкции в этой статье относятся к Photoshop 5. 5 и более поздних версий. Команды и параметры меню могут отличаться в зависимости от версии.

Что делает графику готовой к работе в Интернете?

Большинство веб-графики имеют общие характеристики:

Разрешение 72 dpi.
Цветовой режим — RGB.
Файлы уменьшены в размере для более быстрой загрузки веб-страниц.

Как сохранить для Интернета в Photoshop

Сохранить для Интернета — это не такой инструмент, как Marquee, Move или Magnetic Lasso. Это способ экспортировать необработанный файл в формат, который могут легко использовать другие люди. Вот как с его помощью оптимизировать изображения.

Откройте изображение, которое хотите сохранить, в Photoshop.
Выберите Image > Image Size . Или нажмите Alt / Option + Command + I на клавиатуре.
В поле Ширина введите новую ширину, выберите пикселей , затем выберите ОК .
Измените размер фотографии до небольшого размера, который можно использовать на веб-сайте.
Выберите File > Save for Web and Devices .Или используйте сочетание клавиш: Alt / Option + Command + Shift + S .
В других версиях Photoshop путь: Файл > Экспорт > Сохранить для Интернета . Элемент может называться «Сохранить для Интернета» или «Сохранить для Интернета и устройств».
В окне Save for Web перейдите на вкладки Original , Optimized , 2-Up и 4-Up . Эти вкладки позволяют переключаться между просмотром исходной фотографии, оптимизированной фотографии с примененными к ней настройками «Сохранить для Интернета» или сравнением двух или четырех версий фотографии.
Выберите 2-Up , чтобы сравнить исходную фотографию с оптимизированной фотографией. Это показывает расположенные рядом копии изображения.
Измените значение Качество . По мере снижения качества изображение выглядит более грязным, а размер файла уменьшается. Файлы меньшего размера означают более быструю загрузку веб-страниц.
Найдите золотую середину между размером файла и качеством. Качество от 40 до 60 — хороший диапазон. Используйте предустановленные уровни качества (например, JPEG Medium), чтобы сэкономить время.
При необходимости измените тип файла на JPEG, GIF, PNG-8, PNG-24 или WBMP.
При необходимости измените размер изображения. Введите ширину или высоту или масштабируйте ее в процентах.
Щелкните значок блокировки , чтобы изменить пропорции изображения. В противном случае введите другую ширину или высоту, чтобы пропорционально изменить другое значение.
Значения под предварительным просмотром изображения отображают тип файла, размер и время, необходимое для открытия изображения на веб-сайте. Эти числа обновляются по мере внесения изменений.
Когда фотография вас устроит, выберите Сохранить .
Введите имя фотографии и нажмите Сохранить .

Спасибо, что сообщили нам!

Расскажите, почему!

Другой Недостаточно деталей Сложно понять

Ошибка Photoshop Не файл PNG [ТЕХНИЧЕСКОЕ ИСПРАВЛЕНИЕ]

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

Почему Photoshop не открывает файлы PNG?

1. Обновите Photoshop

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

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

Поддержка мобильных устройств
Enhanced Content-Aware Fill
Улучшенное размытие объектива с новым алгоритмом на базе графического процессора
Более быстрая обработка изображений

Adobe Photoshop

Photoshop — лучшее в мире программное обеспечение для редактирования фотографий для редактирования файлов PNG для как профессионалы, так и новички.

2. Проверьте и измените расширение файла

Перейдите в папку, в которой сохранено проблемное изображение.
Щелкните изображение правой кнопкой мыши и выберите «Открыть с помощью блокнота ».
Проверьте, что говорит первый символ. Если написано ÿØÿá , значит, это изображение в формате jpg. Если написано ‰ PNG , это означает, что это изображение PNG .
Теперь, если написано ÿØÿá , это означает, что вам нужно изменить расширение изображения на jpg.
Открыть, Проводник. Убедитесь, что установлен флажок Расширения имени файла .
Щелкните изображение правой кнопкой мыши и выберите Переименовать. Теперь измените расширение файла с png на jpg.
Теперь попробуйте открыть файл в Photoshop, чтобы посмотреть, устранена ли ошибка.

Это простое решение, но оно может помочь вам определить причину ошибки Not a png file в Photoshop.

У вас больше проблем с Photoshop в Windows 10? Ознакомьтесь с этими руководствами для получения дополнительной информации.

3. Сохраните изображение повторно как PNG

Перейдите в папку, в которой сохранено изображение PNG.
Щелкните изображение правой кнопкой мыши и откройте его с помощью Paint.
В приложении Paint щелкните Файл > Сохранить как.
Сохраните изображение как файл png .
Теперь попробуйте открыть изображение в Photoshop и проверьте, нет ли улучшений.

Хотя это обходной путь, он гарантирует, что ваш файл будет сохранен как PNG, и, используя его, вы должны обойти ошибку Not a png file в Adobe Photoshop.

4. Отключить использование графического процессора

Запустите Photoshop.
Перейти к Edit > Preferences > Performance
На вкладке Performance снимите флажок Use Graphics Processor
Закройте и перезапустите Photoshop
Перетащите проблемное изображение в рабочую область и проверьте, есть ли PNG ошибка файла устранена.

Возможно, вам потребуется использовать графический процессор для других задач, связанных с 3D, но несколько пользователей сообщили, что, отключив эту функцию, они исправили ошибку Not a png file Photoshop.

5. Сброс настроек Photoshop

Запустите Photoshop
Щелкните Edit > Preferences
На вкладке General щелкните Reset Preferences on Quit
Закройте Photoshop и перезагрузите компьютер.
Запустите Photoshop и попробуйте получить доступ к изображению, которое выдавало ошибку, чтобы увидеть, разрешит ли сброс настроек ошибку.

Adobe Photoshop Не ошибка файла png помешает вам работать с файлами PNG, но, надеюсь, вам удалось исправить ее после прочтения этого руководства.

Как создать SVG из PNG или JPG в Photoshop

Пару лет назад Adobe решила добавить в Photoshop функцию «Экспорт в SVG». Это означает, что теперь вы можете экспортировать SVG-изображение прямо из Photoshop без использования Illustrator. В этом уроке мы покажем вам, как преобразовать изображение PNG или JPG в SVG с помощью Photoshop. Давай проверим!

Растр VS Вектор

SVG или масштабируемая векторная графика — это, как сказано в названии, векторная графика . Другие форматы, такие как PNG, GIF, JPG, BMP, — это растровая графика .Основное различие между этими двумя векторами состоит в том, что векторы состоят из путей, которые делают их масштабируемыми, в то время как растры состоят из жестких данных пикселей, поэтому масштабирование невозможно. (Когда мы изменяем размер растрового изображения, мы просто экстраполируем текущие пиксельные данные, которые у нас есть. Вектор, с другой стороны, пересчитывает путь в целевой размер)

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

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

Начнем!

1) Откройте изображение в Photoshop и с помощью инструмента быстрого выделения выделите всю черную область

2) После выбора щелкните правой кнопкой мыши и выберите « Make Work Path… »

3) Затем в меню «Слой» щелкните « New Fill Layer » и « Solid Color »

4) Выберите черный цвет

5) Теперь у вас появится новый слой с черной областью.Но это векторный слой-фигура.

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

7) Когда у вас есть слой-фигура для каждого цвета, выберите Файл> Экспорт> Экспортировать как…

8) В верхнем правом раскрывающемся списке выберите SVG в качестве формата. Затем проверьте изображение предварительного просмотра, если все в порядке, и нажмите Экспортировать все

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

Написано

ТЗ Инженер, веб-разработчик, бывший разработчик программного обеспечения для паевых инвестиционных фондов. Он основал Red Stapler в 2015 году, чтобы делиться полезными ресурсами для всех, кто интересуется веб-дизайном, веб-разработкой и программированием. Подпишитесь на его канал на YouTube или страницу в Facebook, чтобы получать еженедельные советы и руководства.

Поместите графику в файл Photoshop

Часто вам нужно импортировать существующую графику и иллюстрации в документ Photoshop. Проблема для фотошопа? Вовсе нет — на самом деле есть несколько способов сделать это!

Внешняя графика может быть размещена в Photoshop как растровые слои или смарт-объекты.И в этом решении, адаптированном из второй главы моей книги Антология Photoshop: 101 совет, приемы и методы веб-дизайна , я покажу вам, как разместить эту графику, а затем мы поговорим о разница между растровыми слоями и смарт-объектами.

Решение

Размещение иллюстраций с веб-страницы

Скопируйте иллюстрацию с веб-страницы, затем выберите «Правка»> «Вставить» или нажмите Ctrl-V (Command-V на Mac), чтобы вставить его в документ Photoshop. Photoshop создаст новый слой, содержащий иллюстрацию, или поместит его в выбранный пустой слой. Изображение будет на растровом слое.

Размещение иллюстраций из файлов сглаженных изображений

Файл плоского изображения — например, GIF, JPEG или PNG — содержит иллюстрацию на одном слое. Откройте файл в Photoshop и используйте «Выделение»> «Все» или нажмите Ctrl-A (Command-A), чтобы выделить весь документ. Щелкните документ Photoshop, затем выберите «Правка»> «Вставить» или нажмите Ctrl-V (Command-V), чтобы вставить его.Photoshop вставит документ в новый или выбранный пустой слой, как это происходит при вставке иллюстраций с веб-страницы. Изображение будет на растровом слое.

Размещение слоев из другого документа Photoshop

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

Размещение иллюстраций из Illustrator

Откройте Illustrator и выберите иллюстрацию, которую хотите экспортировать в Photoshop. Скопируйте иллюстрацию с помощью Ctrl-C (Command-Con на Mac). Переключитесь в Photoshop, пока Illustrator все еще открыт, и вставьте скопированное изображение с помощью Ctrl-V (Command-V). Появится диалоговое окно, в котором вас спросят, хотите ли вы вставить изображение как смарт-объект, пиксели, контур или слой формы.

Размещение изображения как смарт-объекта

Выберите «Файл»> «Поместить» и выберите файл, который нужно импортировать. Нажмите «Поместить», чтобы импортировать файл в документ Photoshop как смарт-объект. Для файлов PDF и Illustrator Photoshop отобразит диалоговое окно, в котором вас попросят выбрать страницы, которые вы хотите разместить. Выберите нужные страницы и нажмите ОК.

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

Обсуждение

Смарт-объекты

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

Смарт-объекты

отличаются от других слоев, поскольку они связаны с исходным файлом (например, файлом Illustrator, JPEG, GIF или другим файлом Photoshop). Если вы внесете изменения в исходный файл, слой смарт-объекта также будет обновлен с этими изменениями.

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

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

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

Растеризация

Смарт-объекты можно растрировать, щелкнув правой кнопкой мыши имя слоя смарт-объекта и выбрав «Растрировать слой».