Як уникнути пікселізації на зображенні зі збільшенням. Як прибрати битий піксель на моніторі Виділення та уточнення країв

Чи потрібно змінити розмір піксельної графіки? Дізнайтеся, як збільшити ваші художні роботи та зберегти чіткі та чіткі форми за допомогою Photoshop!

З цього уроку ви дізнаєтесь, як отримати відмінні результати при зміні розміру піксельної графіки у Photoshop! Піксель-арт відрізняється від стандартних зображень та створює унікальні проблеми при зміні його розміру. Зазвичай, збільшуючи зображення і додаючи більше пікселів, Photoshop намагається не давати результату виглядати блоковим та пікселяним, змішуючи пікселі разом та згладжуючи все.

Але «блоковий і піксельний» - це весь зміст піксельної графіки! Отже, щоб змінити розміри піксельної графіки, нам потрібен спосіб Photoshop просто додати більше пікселів, і все. Замість того, щоб згладжувати речі, нам потрібно, щоб форми та краї малюнка виглядали чіткими та чіткими. На цьому уроці я вам покажу, як це зробити.

Поряд із зміною розміру піксельної графіки, я також використовую цю саму техніку для зміни розміру скріншотів, які використовуються у моїх уроках. І ви можете використовувати його для зміни розміру будь-якої графіки, де вам потрібно зберегти чіткі, різкі краї або текст, що читається. Щоб отримати найкращі результати на цьому уроці, ви захочете використовувати Photoshop CC, але підійде будь-яка версія Photoshop.

Я використовуватиму цього маленького персонажа піксельної графіки, який я завантажив з Adobe Stock:

Наш герой піксельної графіки. Надано: Adobe Stock.

Це урок 7 у моїй серії «Зміна розміру зображення» . Давайте почнемо!

Ось персонаж, відкритий у фотошопі. І, як ви можете бачити, виглядає досить маленьким:

Піксель арт в оригінальному розмірі.

Крок 1. Відкрийте діалогове вікно «Розмір зображення»

Найкращий спосіб збільшити піксельну графіку – використовувати діалогове вікно «Розмір зображення» у Photoshop. Щоб відкрити його, перейдіть до меню « Зображення» врядку меню та виберіть « Розмір зображення" :

Ідемо в Зображення> Розмір зображення.

У Photoshop CC діалогове вікно містить зручне вікно попереднього перегляду зліва, а також параметри розміру зображення праворуч:

Діалогове вікно "Розмір зображення" у Photoshop CC.

Перегляд поточного розміру зображення

Поточний розмір зображення знаходиться вгорі. Поряд зі словом « Розміри"ми бачимо, що моє зображення досить маленьке, з шириною та висотою всього 500 пікселів:

Поточні розміри в пікселях обкладинки.

Крок 2: Увімкніть опцію Resample

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

По-перше, переконайтеся, що Resampleпараметр у діалоговому вікні повернувся на. Якщо Resample вимкнено, розміри пікселів заблоковані, і все, що ми можемо змінити, це розмір друку. Щоб додати або видалити пікселі, Resample має бути увімкнено:

Resample має бути включений.

Крок 3: Введіть відсоток у поля Ширина та Висота

Замість того, щоб збільшувати піксель-арт до певного розміру, найкращий спосіб збільшити його використовувати відсотки. І щоб уникнути спотворень і зберегти кожен квадрат в ескізі ідеально квадратним, вам потрібно дотримуватися відсотків, кратних 100(Наприклад, 200%, 300%, 400% і т. д.). Я збільшити зображення, встановивши як ширинуі висотудо 400 відсотків :

Підвищення ширини та висоти на 400 відсотків.

Це збільшить розміри в пікселях з 500 пікселів на 500 пікселів до 2000 пікселів на 2000 пікселів :

Нові розміри пікселів після зміни розміру ілюстрації.

Зміна розміру вікна попереднього перегляду

Зверніть увагу, що, збільшивши ширину та висоту в 4 рази, зображення тепер занадто велике, щоб поміститися у маленькому вікні попереднього перегляду. Щоб збільшити вікно попереднього перегляду, я збільшу діалогове вікно «Розмір зображення», перетягуючи нижній правий кут назовні. Потім я натисніть і перетягну у вікно попереднього перегляду, щоб центрувати зображення всередині нього:

Зміна розміру діалогового вікна «Розмір зображення», щоб збільшити попередній перегляд.

Докладніше: діалогове вікно «Розмір зображення» у Photoshop CC — Можливості та поради

Проблема зі зміною розміру піксельної графіки

Все йде нормально. Чи це? Якщо ми побачимо ілюстрацію у вікні попереднього перегляду, побачимо, що вона виглядає неправильно. Замість того, щоб краї навколо фігур виглядали чіткими та різкими, вони виглядають трохи м'якими та розмитими:

Краї виглядають надто м'якими після збільшення малюнка.

І якщо ми побачимо ближче, то побачимо ореолинавколо фігур, особливо у областях із вищою контрастністю. Я збільшу зображення, використовуючи кнопки масштабуванняу нижній частині вікна попереднього перегляду. І тут, на рівні збільшення 400%, ми можемо ясно бачити ореоли, особливо довкола очей персонажа:

Розширення піксель-арту розмило фігури та додало навколо них ореоли.

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

Піксельна графіка виглядає чудово, коли ви натискаєте та утримуєте.

Але як тільки ви відпустітькнопку миші, ви знову побачите ореоли:

М'якість та ореоли повертаються, коли кнопка миші відпущена.

Метод інтерполяції зображення

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

Опція інтерполяціїзнаходиться праворуч від опції Resample. І за умовчанням встановлено значення « Автоматично» :

Опція інтерполяції зображення.

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

Крок 4: Встановіть метод інтерполяції на Nearest Neighbor

Для цього натисніть опцію Інтерполяція, щоб відкрити список методів, які ми можемо вибрати. Якщо ви використовуєте Photoshop CC, то метод інтерполяції, який Photoshop вибирає для зображень з підвищеною дискретизацією, це « Зберегти деталі». А у Photoshop CS6 він вибирає Bicubic Smoother. Але жоден із них не працює добре з піксельною графікою:

Методи інтерполяції фотошопу.

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

Вибір найближчого сусіда.

Як тільки ви вибираєте Nearest Neighbor, зображення у вікні попереднього перегляду виглядає чітким та чітким! І якщо ви натисніть і утримаєте у вікні попереднього перегляду, а потім відпустіть кнопку миші, ви побачите, що цього разу нічого не відбувається. Ілюстрації виглядають однаково чітко і післязастосування методу інтерполяції.

Це тому, що тепер це один ітой жметод інтерполяції обидва рази. Photoshop завжди додає пікселі, спочатку використовуючи Nearest Neighbor. Але тепер, коли ми вибрали Nearest Neighbor, він не використовує нічого іншого, що могло б погіршити піксель-арт:

Nearest Neighbor ідеально підходить для піксельної графіки із підвищенням частоти дискретизації.

Крок 5: Натисніть OK

Коли ви будете готові спробувати ілюстрацію, натисніть кнопку «ОК», щоб прийняти ваші налаштування та закрити діалогове вікно «Розмір зображення»:

Натисніть кнопку ОК, щоб збільшити піксель-арт та закрити діалогове вікно «Розмір зображення».

І тепер мій маленький герой піксельної графіки виглядає набагато більше, але все ж таки він зберігає той же блоковий, піксельний вигляд, який ми очікували:

Піксель арт із підвищеною дискретизацією.

Як збільшити піксель арт - короткий огляд

• 1. Відкрийте діалогове вікно «Розмір зображення» («Зображення» > «Розмір зображення»).
• 2. Встановіть для параметра Ширина та висота значення Відсоток, а потім для отримання найкращих результатів виберіть відсоток, кратний 100 (200%, 300%, 400% тощо).
• 3. Змініть метод інтерполяції на найближчий сусід.
• 4. Натисніть кнопку OK.

Як змінити розмір піксельної графіки до точного розміру

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

Наприклад, збільшивши частоту дискретизації на 400%, я збільшив ширину та висоту з 500 до 2000 пікселів:

Розміри збільшеного зображення.

Але що, якщо мені потрібно, щоб ширина і висота були трохи меншими, наприклад, 1600 пікселів? Якби я збільшив частоту дискретизації мого зображення 500 x 500 px на 300%, його ширина і висота дорівнювали тільки 1500 пікселям, залишивши його все ще занадто маленьким. А підвищення частоти дискретизації на 400% зробило його надто великим. Що мені справді потрібно було щось середнє. У цьому випадку вам потрібно змінити розмір зображення в два етапи .

Крок 1. Відобразіть піксельну графіку у відсотках.

По-перше, збільште зразок пікселя, використовуючи відсоткове значення, кратне 100, що зробить його більше,що вам потрібно. У моєму випадку я вже зробив це, збільшивши частоту дискретизації на 400%, тому перший крок зроблено.

Крок 2. Повторно відкрийте діалогове вікно «Розмір зображення»

Потім змініть його розмір вдруге, на цей раз, щоб зменшитийого до точних розмірів у пікселях. Для цього знову відкрийте діалогове вікно «Розмір зображення» у меню « Зображення»і вибравши « Розмір зображення" :

Ідемо в Зображення> Розмір зображення.

Крок 3: Залишіть опцію Resample увімкненою

Впевніться, що Resampleваріант ще натак що ви можете змінити кількість пікселів:

Залишивши опцію Resample зазначеною.

Крок 4: Встановіть ширину та висоту в пікселях

Введіть потрібний розмір у пікселяху поля Ширинаі Висота. Я встановлю їх на 1600 пікселів:

Введення нових розмірів у пікселях.

Крок 5: Встановіть метод інтерполяції на Автоматичний

І нарешті, хоча метод інтерполяції Nearest Neighbor чудово працює для піксельної графіки з підвищеною дискретизацією, ви не хочете використовувати його при знижувальній дискретизації. Замість цього для отримання найбільш різких результатів змініть метод інтерполяції назад автоматичний. Це поверне керування назад у Photoshop, а при зменшенні кількості зображень автоматично вибере Bicubic Sharper :

Встановіть метод інтерполяції на Автоматичний.

Коли ви будете готові змінити розмір ілюстрації до точного розміру, натисніть кнопку ОК, щоб закрити діалогове вікно, і все готово:

Натисніть кнопку ОК, щоб зменшити зображення.

І там у нас це є! Ось як можна досягти найкращих результатів при зміні розміру піксельної графіки, знімків екрана або аналогічної графіки Photoshop! У наступному та останньому уроці цієї серії ми розглянемо найкращий спосіб збільшення зображень у Photoshop CC за допомогою нової функції, відомої як Preserve Details 2.0!

Або подивіться попередні уроки цієї серії:

• 01 — пікселі, розмір зображення та роздільна здатність
• 02 — Команда Photoshop's Image Size — Особливості та поради
• 03 — Як змінити розмір зображення для друку за допомогою Photoshop
• 04 — Як змінити розмір зображення для електронної пошти та обміну фотографіями.
• 05 - Як розрахувати розмір зображення
• 06 — правда про дозвіл зображення, розмір файлу та мережі
• 07 - Як змінити розмір піксельної графіки
• 08 — Найкращий спосіб збільшити зображення у Photoshop CC

І не забувайте, що всі наші підручники тепер доступні для завантаження у форматі PDF!

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

Будьте першим, хто дізнається, коли буде додано нові підручники!

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

Ви можете зменшити Pixelation у Photoshop за допомогою клавіші Ctrl на комп'ютері.

Крок 1

Відкрийте зображення за допомогою Photoshop.

Крок 2

Клацніть мишкою на «Перегляд». Натисніть «Фактичні пікселі», щоб визначити рівень пікселізації зображення.

Крок 3

Перейдіть до свого «Головного меню». Натисніть "Фільтр", "Шум" і, нарешті, "Despeckle". Це дозволяє вирівняти пікселі, які містить ваше зображення.

Крок 4

Утримуйте кнопки «Ctrl» і «f» одночасно. Повторіть цей процес у серію чотири рази.

Крок 5

Натисніть "Smart Blur" у меню "Фільтр". Налаштуйте свій радіус приблизно на півтора пікселя, а поріг – на 14 пікселів. Натисніть "Увійти".

Більш плавним та рівним за рахунок видалення/додавання додаткових пікселів або роблячи їх напівпрозорими.

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

Ця установка активується на панелі параметрів наступних інструментів:

• , у тому числі Прямокутне та Магнітне;

Чому саме ці інструменти?

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

Але виникають питання, чому в цьому списку немає інструментів і – вони теж створюють виділену область!?

Я думаю наступне. Щодо прямолінійного виділення, пригадайте – вони квадратні. Створюючи прямокутне виділення, межі завжди вертикальні та горизонтальні, кути чітко повторюють форму пікселя, таким чином, ми не маємо дефекту, коли краї прямокутника можуть бути різкими та рваними – вони завжди прямі та рівні. Значить і згладжування їм не потрібно.

Щодо Швидкого виділення, то там є альтернативний параметр – Жорсткість пензля, Вона те й регулює якими будуть краї. Причому це налаштування гнучкіше, що дозволяє регулювати ефект за 100% - шкалою.

Стривайте-но – а то до чого? Це далеко від виділеної області! Правильно. А ви не помітили, що Чарівна гумка і майже те саме? Просто гумка відразу видаляє пікселі, а паличка їх додає у виділення. А якщо це той самий принцип дії, то і згладжування має бути і там, і там.

Як зробити згладжування країв

Крок 1 Виберіть інструмент, яким ви створюєте виділену область.

Крок 2 Поставте галочку Згладжування (Anti-alias)на панелі параметрів інструменту

Галочка ставиться лише перед тим, як буде створено виділену область!

Крок 3

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

Для більшого розуміння питання потрібний живий приклад.

Допустимо є якесь зображення, де необхідно видалити фоновий колір.

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

Тепер той самий приклад, але краї будуть згладжені:

Помітили помилку в тексті - виділіть її та натисніть Ctrl+Enter. Спасибі!

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

Піксель залишається більмом, що вічно мозолить очі, навіть якщо він у кутку і взагалі важко розрізнити тими, хто не знає про його існування. Але ж ми знаємо!

Мертвий піксель проти битого пікселя

Мертвий піксельне "горить" взагалі. Ніколи і жодним кольором. Він є чорний на будь-якому фоні. Майже немає шансів на його відновлення.

Битий піксель (застряглий)відображає два кольори з трьох, рідше один із трьох. Тим самим викривляється білий. Крапка буде чорною на червоному, синьому або зеленому тлі. Такі дефекти мають всі шанси повернутися до початкового стану.

З застряглим або розбитим пікселем потрібні деякі зусилля та витрати вільного часу. І ні, розбирати смартфон не доведеться. Погляньмо, що можна зробити на LCD (TFT-TN, IPS, VA) або AMOLED матрицях.

Розбитий піксель на iPhone або iPad. Як прибрати?

Виправлення програмним методом

1. Можна нічого не завантажуючи відкрити Safari веб-сторінку jscreenfix.com і натиснути «Launch JScreenFix».

2. Запуститься невелике вікно зі стимулюючим ефектом для певної області екрана.

3. Виставляємо її так, щоб вона охоплювала місце з битим пікселем і чекаємо щонайменше 10 хвилин (чим довше, тим більше шансів на виправлення).

4. Робимо тест на биті пікселі. Якщо не спрацювало, спробуйте ще кілька заходів.

Виправлення механічним методом

1. Якщо програмна стимуляція не допомагає, дефект слід спробувати виправити механічно (не поспішайте кидати iPhone в стіну!).

2. Очистіть дисплей від пилу та волосся та відключіть його (блокуванням, наприклад).

3. Візьміть безворсову тканину (щоб не подряпати захисне скло) та легкими масажними рухами за допомогою пальця або гумки протягом 3-10 хвилин розминайте дефектну область.

4. Увімкніть дисплей та перевірте результат. Якщо не допомогло, то спробуйте ту ж операцію зробити з увімкненим екраном без перестарання з силою натискання (ви можете так пошкодити сусідні пікселі).

Ще від битого пікселя позбавляє спосіб нагрівання

1. Якщо механічна дія не допомагає, то вдамося до прогріву.

2. Нагрійте воду до температури, близької до точки кипіння (коли вона починає пускати бульбашки).

3. Візьміть безворсову тканину та покладіть її у пластиковий пакет, підстрахувавши його додатковим шаром.

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

5. Кругові рухи за допомогою імпровізованої «грілки» розминають проблемну область близько 5 хвилин.

Битий піксель на смартфон або планшет. Як виправити?

Позбутися програмно

1. Так само, як і у випадку з iPhone, заходимо через браузер Google Chrome на сайт jscreenfix.com і виконуємо покрокову інструкцію, вказану вище.

2. Але можна скористатися і спеціальним програмою з Google Play Маркет під назвою Dead Pixel Detect and Fix з розширеними функціями.

3. За допомогою спеціального інструменту перевіряємо колір, на фоні якого битий піксель буде чорним.

4. Натискаємо кнопку FIX IT для вибраної дефектної області.

5. Програма за замовчуванням працює 30 хвилин - переконайтеся, що смартфон або планшет заряджено.

6. Виконуємо перевірку на биті пікселі цією програмою.

Механічний спосіб рятуваннявід битого пікселя та температурним впливомповністю ідентичні інструкції для iPhone.