Png архів. Як створити PNG з прозорістю в Adobe Photoshop (версії CC і вище)

05.06.16 27.2K

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

У цій статті ми розповімо, як зробити прозорість в Фотошопі.

створення файлу

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

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

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

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

Потім в панелі «Шари» ( Layers) Переконайтеся, що працюєте на прозорому шарі, а не на фоновому:

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

Photoshop версії раніше, ніж CC 2015:

Зараз ми розповімо, як зробити прозорість картинки в Фотошопі, Який вийшов раніше CC 2015. У цих версіях використовують метод «Зберегти для Web» ( Save for Web & Devices), Щоб зберегти і оптимізувати PNG зображення для використання в інтернеті. Щоб скористатися цим методом, просто зайдіть в меню «Файл» ( File), І далі - «Зберегти для Web» ( Save for Web & Devices):

Потім у вікні виберіть PNG-24 з меню, що випадає можливих значень, а потім переконайтеся, щоб обрані опції «Прозорість» ( Transparency) І « Перетворити в sRGB» ( Convert to sRGB). Це підтверджує, що зображення буде містити прозорий фон і його колірний режим буде перетворений в sRGB, рекомендоване колірний простір для веб.
поля « Розмір зображення» ( Image Size) Автоматично заповнюються значеннями, які ви задали, коли створювали файл. Але якщо ви хочете змінити розмір файлу перед збереженням, то можна зробити це зараз.

Photoshop версії CC 2015:

Перед тим, як зробити прозорість фото в Фотошопі, Потрібно знати, що з версії CC 2015 опція «Зберегти для Web» ( Save for Web & Devices) В меню «Файл» ( File) Позначена як Legacy (застаріла). І заміщена на нову опцію «Експорт» ( Export), Яка пропонує ідентичну функціональність з більш швидким збереженням у файлі меншого розміру і в кращій якості. Щоб скористатися опцією «Експорт», натисніть меню «Файл» ( File), а потім - " експортувати як» ( Export As).

Примітка: Adobe і раніше пропонує опцію «Зберегти для Web» ( Save for Web & Devices) В Photoshop CC 2015 року, і вона доступна через меню Файл\u003e Експорт ( File\u003e Export) Або при використанні комбінації клавіш Command + Option + Shift + S (для Mac) або Ctrl + Alt + Shift + S (для ПК):

Потім у вікні виберіть PNG з меню, що випадає «Формат» ( Format) І переконайтеся, що обрані опції «Прозорість» ( Transparency) І « Перетворити в sRGB» ( Convert to sRGB).

поля « Розмір зображення» ( Image Size) І «Розмір полотна» ( Canvas Size) Повинні автоматично заповнитися значеннями, які ви задали, коли створювали файл. Але при бажанні можна змінити ці параметри перед тим, як зробити ефект прозорості в Фотошопі.

Файл формату 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, для редагування, на персональному комп'ютері якого існують спеціальні програми редактори, про одну з яких з можливістю скачування ми вам далі і розповімо. Відзначимо, для тих, хто не знає, що даний формат прийшов на заміну популярному раніше аналогу gif, що залишився затребуваним, але вже в іншому напрямку роботи дизайнерів. Інтерес же до рекламованого нами зараз зручному і місткому розширенню зображень, виявлений багатьма дизайнерами і фотографами нашої країни, а також заходу, де він цінується навіть більше.

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

Завантажити програму формат png на комп'ютер

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

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

Що ж, думаю з усього мною перерахованого вище можна зробити пару логічних висновків і прийняти рішення про завантаження до себе на комп'ютер або ж ноутбук зручної редакційної програми з масою достоїнств і повністю відсутніми недоліками. Ну а перейти безпосередньо до самої завантаженні дистрибутива вам допоможе звернення свого пильної уваги на адресні дзеркальні посилання, розташовані трохи нижче і гарантують максимальну швидкість.

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

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

Загальна будова

Структура PNG в найзагальнішому вигляді представлена \u200b\u200bна наступному малюнку.


Тобто файл складається з підпису і деякої кількості блоків (чанкі, 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 \u003d 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

Дякую за увагу, буду радий будь-якої критики!

Вітаю Вас, дорогі читачі мого блогу!

Нещодавно мені знадобилося прибрати фон з картинки, з фотошопом я не дружу особливо. І скажу Вам, що у мене його навіть немає на комп'ютері. (Ну правильно взагалі то, навіщо мені те, з чим я не вмію працювати).

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

І так, давайте приступимо. Нам знадобитися фотошоп, але так, як у мене його немає. Я використовую онлайн фотошоп. Дуже зручна штука, я Вам скажу. І звичайно ж картинка фон якої ми хочемо зробити прозорим.

Покажу Вам на прикладі, ось такий картинки, прибирати ми будемо білий фон

Заходимо в онлайн фотошоп. Я використовувала ось цей PIXLR

Вибираємо: Завантажити зображення з комп'ютера.

Тепер справа у віконці «ШАРИ» треба відкрити замочок

Кількома на нього 2 рази лівою кнопкою миші, повинна з'явитися галочка в квадратику.

Тепер йдемо на панелі, яка знаходиться зліва, вибираємо інструмент "Чарівна паличка" і толерантність ставимо 21.

Ось начебто і все, але мене не влаштовує повністю картинка, залишилися ще залишки фону, я знову кликаю на те місце яке хочу прибрати. Потім «редагувати» ---- «очистити». І так поки не приберете всі, що треба.