Як зробити пнг у фотошопі (PNG у Adobe Photoshop)?

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

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

Оновлено: 2021-02-16 09:51:15 МЛ Марія Логутенко автор матеріалу

Як зробити файл PNG в Adobe Photoshop?

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

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

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

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

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

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

Як зробити фото в пнг за допомогою Adobe 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 ).

МЛ Марія Логутенко автор-перекладач статті «

Як зробити PNG у Фотошопі

PNG — це один з форматів для зберігання зображень. Він з'явився в 1996 році, щоб скласти конкуренцію GIF. Але обидва формати популярні, широко застосовуються і знайшли свої ніші користувача.

Розповідаємо, навіщо використовують PNG та в чому його переваги, а також як зробити PNG будь-якої форми у Фотошопі.

PNG для роботи, редагування та зберігання файлів використовують ілюстратори, дизайнери, фотографи.

Навіщо потрібний PNG

PNG, на відміну від GIF, спочатку замислювалися як відкритий формат, який можуть використовувати вільно все і скрізь.За задумом, він мав замінити старий і простий GIF, а також більш важкий та складний TIFF, який досі використовують у друкарнях.

• PNG зберігає зображення у стислому вигляді, але не псує його якість, як JPEG.

Через це багато фотографів вважають за краще зберігати готові і навіть проміжні варіанти знімка в PNG-форматі. Мабуть, єдиний мінус у тому, що не всі соцмережі можуть прочитати цей формат, тоді як JPEG – універсальний та повсюдний.

• Палітра кольорів PNG набагато ширша, ніж у GIF. З цього випливає, що він може передавати більше кольорових нюансів та відтінків.

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

• Картинки в PNG-форматі можна перезберігати щоразу без втрат в якості. При цьому якщо перезберігати той же JPEG, то вийде типовий «затертий» мем з «Вконтакте».

Як створити PNG у Photoshop

Щоб з будь-якої фотографії, малюнка чи графіки зробити PNG у Фотошопі, потрібно просто правильно вибрати формат та зберегти зображення. Щоб зберегти зображення у Photoshop, скористайтеся одним із способів: у меню Файл/File виберіть: Зберегти/Save; Зберегти як / Save as… або Зберегти як копію / Save as a Copy.

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

Який би із способів ви не вибрали, у вікні виберіть місце, де зберігати картинку, і формат - PNG.

Щоб вибрати формат зображення, натисніть на список «Тип файлу».Тут потрібно знайти формат PNG, а потім кнопку «Зберегти» / Скріншот: Єлизавета Чечевиця

PNG буде в будь-якому з трьох способів збереження. Різниця лише в тому, що кожен з методів має свою кількість форматів на вибір. Найбільше їх буде, якщо вибрати Зберегти як копію / Save as a Copy.

Виберіть швидкість збереження та розмір вихідного зображення.

Як натиснете кнопку «Зберегти» з попереднього кроку, відкриється маленьке віконце. Якщо ви хочете, щоб картинка важила менше, вибирайте останній варіант, але тоді вона довше зберігатиметься. Для любителів поспішати і забувати про дедлайн, підійде перший - найшвидший - варіант. Середній же – золота середина, коли файл і швидко зберігається, і прийнятно важить.

Заради експерименту ми перезберегли одну й ту саму фотографію тричі кожним із варіантів. У першому випадку зображення збереглося миттєво, у другому довелося почекати близько 5-8 секунд, а в третьому - 20-23 секунди.

Копія, збережена найшвидше, важила 4,3 МБ, середня - 3,467 МБ, а найменша, що зберігалася майже півхвилини - 3,449 МБ. Найвигідніше за співвідношенням розмір-час зберігати в середньому розмірі / Скріншот: Єлизавета Чечевиця

Як зробити круглу фотографію у Фотошопі

Якщо ви використовуєте PNG для зберігання або обміну зображеннями, можна пропустити цей пункт. Але дуже часто до цього формату звертаються, щоб зробити картинку у формі якоїсь фігури, із напівпрозорим фоном або взагалі видалити із зображення фон. Розглянемо на прикладі круглої фотографії, які часто використовують на сайтах, як зробити PNG без фону у Фотошопі.

1. Відкрийте зображення у графічному редакторі.

2. Знайдіть інструмент Овальна область / Elliptical Marquee Tool (Гаряча клавіша M).

Шукайте іконку інструмента або назву, а не запам'ятовуйте розташування - у користувачів може бути налаштована палітра під себе, а інструменти знаходитись у різних частинах / Скриншот: Єлизавета Чечевиця

3. Наведіться на фотографію. Затисніть ліву кнопку миші та проведіть рукою з одного кута картинки до іншого.

Одночасно з цим на зображенні з'явиться пунктирне коло - заготівля для круглої картинки.

Лайфхак: якщо коло виходить занадто овальним, затисніть Shift - тепер він буде створюватися пропорційним та ідеально круглим. Якщо ж у вас не вдається зробити його так, щоб об'єкт був у центрі, затисніть Alt. Тепер коло можна створювати з центральної точки, а не рухом "з кута в кут". Щоб поєднати обидві можливості, натисніть Shift і Alt одночасно.

4. Якщо розташування кола все ще вам не подобається, перемістіть його. Для цього наведіть курсор на область усередині кола, затисніть ліву кнопку миші та посуньте туди, куди вам подобається. Ще варіант - переміщати заготовку за допомогою стрілок на клавіатурі.

Тепер майбутня іконка на сайт виглядає більш гармонійно, адже обличчя розташовується по центру.

5. Минув час видаляти фон для майбутнього PNG-файлу! Для цього натисніть кнопку Виділення та Маска / Select and Mask.

6. У вікні, що відкрилося, перемістіться поглядом в самий низ. У нижньому лівому куті натисніть на меню, що випадає Висновок у / Output to.

Виберіть Новий шар зі Шаром-маскою / New Layer with Layer Mask та натисніть Ок / Скріншот: Єлизавета Сочевиця

7. Ви побачите коло з портретом на полі із сіро-білої клітини.Так у Фотошопі позначається порожнеча. Тепер файл без фону можна зберегти у форматі PNG, або перед цим кадрувати картинку, щоб вона була компактнішого розміру.

Знайдіть інструмент Рамка/Crop Tool і обріжте непотрібний пустий простір. У результаті залишиться мініатюрне кругле зображення / Скріншот: Єлизавета Чечевиця

Як у Фотошопі зробити PNG зображення

Сьогодні ми розглянемо, як створити PNG-зображення в Adobe Photoshop. PNG (Portable Network Graphics) – це популярний формат зображень, який характеризується хорошим стиском без втрати якості та підтримкою прозорості.

Збереження файлу у форматі PNG

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

1. Відкрийте Adobe Photoshop.
2. У меню виберіть «Файл» > «Новий» (Ctrl+N).
3. У вікні задайте розміри та параметри файлу.
4. У розділі "Кольоровий режим" виберіть "RGB".
5. Натисніть кнопку «Створити».

Збереження файлу

1. Працюйте над зображенням, додайте шари та елементи.
2. У меню виберіть «Файл» > «Зберегти як» (Ctrl+Shift+S).
3. У вікні виберіть формат «PNG (*.PNG, *.png)».
4. Вкажіть шлях збереження та ім'я файлу.
5. Натисніть "Зберегти".
6. У наступному вікні можна вибрати налаштування стиснення та інтерлейсингу. Зазвичай налаштовані параметри є оптимальними.
7. Натисніть "OK".

Експорт у форматі PNG

Експорт за допомогою «Експорту для Інтернету»

1. У меню виберіть «Файл» > «Експорт» > «Зберегти для Інтернету» (Alt+Shift+Ctrl+S).
2. У вікні виберіть «PNG-8» або «PNG-24» у верхньому правому куті (залежно від потрібної глибини кольору).
3. Налаштуйте параметри, такі як розмір зображення, палітра кольорів і транспарентність.
4. Натисніть «Зберегти» та виберіть шлях для збереження та ім'я файлу.

Експорт за допомогою «Швидкого експорту»

1. У вікні «Шари» виберіть шар або групу шарів, які потрібно експортувати.
2. Клацніть правою кнопкою миші та оберіть «Експортувати як».
3. У вікні виберіть формат «PNG» зі списку. 4. Налаштуйте параметри, такі як розмір зображення та прозорість.
4. Натисніть «Експорт» та виберіть шлях збереження та ім'я файлу.

Оптимізація файлу PNG

Використання «Зберегти для Інтернету»

1. У меню виберіть «Файл» > «Експорт» > «Зберегти для Інтернету» (Alt+Shift+Ctrl+S).
2. У вікні виберіть «PNG-8» або «PNG-24» у верхньому правому куті (залежно від потрібної глибини кольору).
3. Увімкніть оптимізувати для зменшення розміру файлу.
4. Налаштуйте додаткові параметри, такі як палітра кольорів і транспарентність.
5. Натисніть «Зберегти» та виберіть шлях для збереження та ім'я файлу.

Використання сторонніх інструментів

Якщо ви хочете додатково оптимізувати ваш PNG-файл, ви можете скористатися іншими інструментами, такими як TinyPNG або ImageOptim. Ці інструменти допоможуть стиснути зображення без значних втрат якості.

Використання бібліотеки Adobe Generator

Adobe Generator — це інструмент, який автоматично експортує шари або групи шарів з вашого проекту до різних форматів, включаючи PNG.

Увімкнення Adobe Generator

1. У меню виберіть "Файл" > "Генерація" > "Автоматичний експорт зображень".
2. Тепер Adobe Generator автоматично експортуватиме шари, які мають відповідні імена.

Експорт шару у форматі PNG

1. Перейменуйте шар або групу шарів, які потрібно експортувати, додавши «.png» наприкінці імені.
2. Adobe Generator автоматично створить PNG-файл у папці «_генератор» поруч із вашим PSD-файлом.
3. Зверніть увагу, що зміни автоматично експортуватимуться при збереженні документа.

Тепер ви знаєте всі основні методи створення зображень PNG в Adobe Photoshop. Ці підходи дозволять вам зберігати та оптимізувати файли у форматі PNG для різних завдань, таких як веб-дизайн, розробка програм та створення цифрових творів.

Власник цього сайту. Графічний дизайнер, спеціаліст з Фотошопу з досвідом 10+ років. Також веду канал про графічний дизайн на Ютуб та розвиваю тематичну спільноту у ВКонтакті. Зв'язатися зі мною можна через коментарі, форму зворотнього зв'язку або електронною поштою [email protected]