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

Обновлено: 07.07.2024

Задача изменения размера пиксельной графики

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

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

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

Изменение размера пиксельной графики при сохранении резкости

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

Вот как это сделать:

  1. Откройте ваше пиксельное изображение в Photoshop.
  2. Откройте изображение и размер изображения.
  3. Включите предварительный просмотр, если он еще не включен.
  4. Установите флажок рядом с Resample. Это позволяет Photoshop сохранять резкость.
  5. Измените интерполяцию с автоматического на ближайший сосед.
  6. Добавьте процент в поле Ширина и Высота, чтобы изменить его размер.
  7. Выберите ОК после завершения.

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

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

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

Изменение размера пиксельного рисунка на точный размер

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

  1. Следуйте инструкциям выше до шага 6.
  2. Добавьте десять процентов к желаемому размеру изображения, чтобы оно было больше, чем вам нужно. Если вы изменили размер изображения до 200% выше, сделайте это до 220% здесь.
  3. Откройте изображение и размер изображения.
  4. Установите ширину и высоту в пикселях на нужный вам размер.
  5. Измените интерполяцию с автоматической.
  6. Выберите ОК.

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


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

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

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

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

Пиксель арт герой. Изображение предоставлено: Adobe Stock

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

Это урок 7 в моей серии «Изменение размера изображения» . Давайте начнем!

Как увеличить пиксель арт в фотошопе

Вот персонаж, открытый в фотошопе. И, как вы можете видеть, он выглядит довольно маленьким:

Пиксель арт открывается в фотошопе в оригинальном размере

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

Выбор команды «Размер изображения» в Photoshop

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

Пиксель арт открывается в диалоговом окне «Размер изображения» в Photoshop CC

Просмотр текущего размера изображения

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

Текущие размеры пиксельной графики в диалоговом окне «Размер изображения» в Photoshop.

Шаг 2: Включите опцию Resample

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

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

Параметр Resample в диалоговом окне «Размер изображения» в Photoshop

Шаг 3: Введите процент в поля Ширина и Высота

Упрощение пиксельной графики в Photoshop на 400 процентов

Это увеличит размеры в пикселях с 500 пикселей на 500 пикселей до 2000 пикселей на 2000 пикселей :

Новые размеры в пикселях после повышения качества иллюстраций в Photoshop

Новые размеры в пикселях после изменения размера иллюстрации.

Изменение размера окна предварительного просмотра

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

Изменение размера диалогового окна «Размер изображения» для большего предварительного просмотра пиксельной графики

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

Проблема с изменением размера пиксельной графики

Все идет нормально. Либо это? Если мы посмотрим на иллюстрацию в окне предварительного просмотра, мы увидим, что она выглядит неправильно. Вместо того, чтобы края вокруг фигур выглядели четкими и резкими, они выглядят немного мягкими и размытыми:

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

Края выглядят слишком мягкими после увеличения рисунка.

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

Повышение частоты дискретизации размывает формы и добавляет ореолы вокруг них

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

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

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

Пиксельная графика выглядит великолепно, когда вы нажимаете и удерживаете.

Но как только вы отпустите кнопку мыши, вы снова увидите ореолы:

Пиксель выглядит мягким и размытым, когда вы отпустите кнопку мыши

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

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

Опция интерполяции находится справа от опции Resample. И по умолчанию установлено значение « Автоматически» :

Параметр интерполяции изображения в диалоговом окне «Размер изображения» в Photoshop

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

Шаг 4: Установите метод интерполяции на Nearest Neighbor

Методы интерполяции изображения в диалоговом окне «Размер изображения» в Photoshop.

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

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

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

Это потому, что теперь это один и тот же метод интерполяции оба раза. Photoshop всегда добавляет пиксели, изначально используя Nearest Neighbor. Но теперь, когда мы сами выбрали Nearest Neighbor, он не использует ничего другого, что могло бы ухудшить пиксель-арт:

Пиксельная графика с повышенной дискретизацией выглядит великолепно при использовании метода интерполяции Nearest Neighbor в Photoshop

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

Шаг 5: Нажмите ОК

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

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

Как увеличить и увеличить пиксель-арт в Photoshop

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

  • 1. Откройте диалоговое окно «Размер изображения» («Изображение»> «Размер изображения»).
  • 2. Установите для параметра Ширина и высота значение Процент, а затем для получения наилучших результатов выберите процент, кратный 100 (200%, 300%, 400% и т. Д.).
  • 3. Измените метод интерполяции на «Ближайший сосед».
  • 4. Нажмите ОК.

Как изменить размер пиксельной графики до точного размера

Например, увеличив частоту дискретизации на 400%, я увеличил ширину и высоту с 500 до 2000 пикселей:

Размеры пикселей в пиксельной графике с повышенной дискретизацией

Но что, если мне нужно, чтобы ширина и высота были немного меньше, например, 1600 пикселей? Если бы я увеличил частоту дискретизации моего изображения 500 px x 500 px на 300%, его ширина и высота были бы равны только 1500 пикселям, оставив его все еще слишком маленьким. А повышение частоты дискретизации на 400% сделало его слишком большим. Что мне действительно нужно было что-то среднее. В этом случае вам нужно изменить размер изображения в два этапа .

Шаг 1. Отобразите пиксельную графику в процентах.

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

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

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

Выбор команды «Размер изображения» в Photoshop

Шаг 3: Оставьте опцию Resample включенной

Убедитесь , что Resample вариант еще на так что вы можете изменить количество пикселей:

Если оставить опцию Resample, установлен флажок, чтобы уменьшить изображение в Photoshop

Шаг 4: Установите ширину и высоту в пикселях

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

Ввод новой ширины и высоты для пиксельной графики в диалоговом окне «Размер изображения» в Photoshop

Шаг 5: Установите метод интерполяции на Автоматический

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

Установка метода интерполяции на Автоматически для пиксельной графики с понижением дискретизации в Photoshop

Установите метод интерполяции обратно на Автоматический.

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

Как изменить размер пиксельной графики до точного размера в Photoshop

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

Или посмотрите предыдущие уроки этой серии:

И не забывайте, что все наши учебники теперь доступны для скачивания в формате PDF !

Честно не знаю для чего я тут это постю, может кому когда ни-будь в жизни разочек пригодится, что вряд-ли. У вас то наверное и фотошопа нет, а у кого есть и так скорее всего знают. Расчехляйте чтоувастаммёты :)

Как увеличить изображение без потери качества в Photoshop

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

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

1. Откройте изображение в Фотошопе.

2. Перейдите в "Изображение" -> "Размер изображения" (Ctrl + Alt + I).

3. Активируйте режим "Сохранение пропорций", включив скрепку между "Ширина" и "Высота".

4. Нажмите на "Пиксели" и выберите "Проценты".

5. Измените значение "100" на "120".

6. Повторите 2-4 шаги столько, сколько нужно.

7. Перейдите в "Фильтр" -> "Усиление резкости" -> "Умная резкость".

8. Перемешайте ползунки "Эффект" и "Радиус", пока не достигните желаемого результата.

Мы увеличили художественный арт с 405х600 до 840х1244, без заметных ухудшений. Вес изображения увеличился с 33,5 КБ до 376 КБ.

Как увеличить изображение без потери качества в Photoshop Photoshop, Качество, Картинки

увеличить изображение без потери качества

Невозможно. Никак. Вообще.

Если это не вектор.

Сделайте 4K пжалуста

Иллюстрация к комментарию

Никак. Всё равно теряется качество :)

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

PS а то заголовок поста прям про ахереть что, а содержание "как увеличить картину малевича на 200%" :D

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

Советы из этой замечательной книги?

Иллюстрация к комментарию

Надо было для сравнения, cтандартный метод увеличения масштабированием на 200%

Как-то вы очень хитро увеличили 405 на 20% и получили 840. Метод в принципе рабочий, если исходник плохой, а лучше нет и не предвидится. А в идеале искать лучше или перерисовать.

Иллюстрация к комментарию

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

Там же вектор не проще отрисовать?

а как же выбор типа интерполяции?

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

Резюме: бесполезный совет.

Способ рабочий. Попробовал и всё получилось. Спасибо вам!

Иллюстрация к комментарию

Остросюжетый триллер

Не анекдот, а Писание.

Чат мой, люди знакомые, ставлю пятничное моё;)

Не анекдот, а Писание. Чат, Коронавирус, Вакцинация, Религия


Невероятно!

Невероятно! Монахи, Долголетие, Бессмертие, Юмор, Пикабу

Тибетский монах был обнаружен в горах Непала. Он считается самым старым человеком на планете с возрастом в 201 год. Он находится в состоянии глубокого транса, или медитации, под названием "такатет".

Когда его обнаружили в пещере, спасатели сначала подумали, что это просто мумия.

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

Рядом с ним лежали его вещи. На одном из кусков бумаг было написано: "иди спать и хватит верить всему, что читаешь на Пикабу".

Баянометр молчал, извините если уже было :)

Экономия на спичках

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

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

Сегодня их порезали на половинки. Народ стал брать по четыре.

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


Само зло

Само зло Хабиб Нурмагомедов, Троллинг, Тролль, Facebook, Длиннопост


Маркетинг

Маркетинг


Ответ на пост «Уборщица»

Примерно 15 лет назад я работал в мэрии города на довольно высокой в иерархии муниципальных служащих должности. Был молод и глуп в делах житейских, но прислушивался к советам старших. Моя мама, в первый день моей работы напутствовал меня словами: "в первую очередь здоровайся с уборщицей и тех персоналом, не игнорируй простых людей, они ещё всех вас там переработают." И я воодушевленный наставлениями мамы, да и воспитанием наученный прежде всего, всегда здоровался с уборщицами, поздравлял их с праздниками, иногда дарил небольшие презенты в виде шоколадок или пирожных. Очень хорошие, трудолюбивые люди и мне искренне было приятно с ними иногда переброситься парой слов. Так вот, отработал я там лет пять, уволился, ушел на другую работу. История поросла быльём, но. Недавно зашёл в мэрию документы сдать по нашей фирме и как назло паспорта нет с собой, грозный охранник не пропустил и я расстроенный уже собирался уходить, но тут вышла одна из тех самых уборщиц, узнала меня, очень искренне порадовалась встрече, рыкнула на охранника: наш человек, почему не пропускаешь! Тот что-то промямлил, мол не положено, но пропустил. Сдал я документы, ушел, а на душе приятно. Вот так вот, всех переработала и мэров и сэров и пэров, да и охрану гоняет.)))

Научитесь настраивать разрешение изображения в Adobe Photoshop. Узнайте, почему качество изображения зависит от количества пикселей в файле.

Параллельное сравнение улучшенного изображения человека с браслетом

Можно ли улучшить качество изображения с низким разрешением?

Это знакомый сюжет: детектив просит «улучшить» размытое изображение на компьютере, пока оно не станет достаточно четким, чтобы можно было разглядеть ключевую улику. Это работает? Не так, как в Голливуде.


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

Как повторная выборка и интерполяция влияют на разрешение

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

Выбор оптимального метода интерполяции при повышении сэмплинга

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

Вид интерфейса «Размер изображения» в Adobe Photoshop

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

После выполнения повторной выборки применение фильтра «Нечеткая маска» может улучшить качество изображения.

Настройка разрешения в Photoshop

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

Изменение размеров изображения для печати без настройки размеров пикселей

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

Нужно изменить размер пиксельной графики? Узнайте, как увеличить ваши художественные работы и сохранить четкие и четкие формы с помощью 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: Нажмите ОК

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


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


Усиленный пиксель арт.

Как увеличить пиксель арт - краткий обзор

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

  • 1. Откройте диалоговое окно «Размер изображения» («Изображение»> «Размер изображения»).
  • 2. Установите для параметра «Ширина и высота» значение «Процент», а затем для получения наилучших результатов выберите процент, кратный 100 (200%, 300%, 400% и т. Д.).
  • 3. Измените метод интерполяции на «Ближайший сосед».
  • 4. Нажмите ОК.

Как изменить размер пиксельной графики до точного размера

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

Например, увеличив частоту дискретизации на 400%, я увеличил ширину и высоту с 500 до 2000 пикселей:


Размеры увеличенного изображения.

Но что, если мне нужно, чтобы ширина и высота были немного меньше, например, 1600 пикселей? Если бы я увеличил частоту дискретизации моего изображения 500 px 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!

Или посмотрите предыдущие уроки этой серии:

И не забывайте, что все наши учебники теперь доступны для скачивания в формате PDF!

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