Товаров: 0 (0р.)

Как сделать картинку пиксельной в фотошопе: Как сделать пиксели в Фотошопе

Содержание

Как сделать пиксели в Фотошопе


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

Пиксельный узор

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

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

1. Создаем две копии слоя с фоном клавишами CTRL+J (дважды).

2. Находясь на самой верхней копии в палитре слоев, переходим в меню «Фильтр», раздел «Оформление». В данном разделе и находится необходимый нам фильтр «Мозаика».

3. В настройках фильтра выставляем довольно крупный размер ячейки. В данном случае –

15. Это будет верхний слой, с высокой степенью пикселизации. По завершению настройки нажимаем кнопку ОК.

4. Переходим на нижнюю копию и снова применяем фильтр «Мозаика», но на этот раз размер ячейки выставляем примерно в два раза меньше.

5. Создаем маску для каждого слоя.

6. Переходим на маску верхнего слоя.

7. Выбираем инструмент «Кисть»,

круглой формы, мягкую,

черного цвета.

Размер удобнее всего менять квадратными скобками на клавиатуре.

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

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

Итоговое изображение:

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

Используя фильтр «Мозаика», можно создавать очень интересные композиции в Фотошопе, главное следовать советам, полученным в этом уроке.

Мы рады, что смогли помочь Вам в решении проблемы.
Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.
Помогла ли вам эта статья?
ДА НЕТ

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

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

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

  • 01 — пиксели, размер изображения и разрешение
  • 02 — Команда Photoshop’s Image Size — Особенности и советы
  • 03 — Как изменить размер изображения для печати с помощью Photoshop
  • 04 — Как изменить размер изображения для электронной почты и обмена фотографиями
  • 05 — Как рассчитать размер изображения
  • 06 — правда о разрешении изображения, размере файла и сети
  • 07 — Как изменить размер пиксельной графики
  • 08 — Лучший способ увеличить изображения в Photoshop CC

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

Будьте первым, кто узнает, когда будут добавлены новые учебники!

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


Как изменить размер изображения в фотошопе. Процесс интерполяции

Чтобы понимать какие процессы заложены в механизм изменения размеров изображения, почитайте статью о пикселях — строительном материале любого растрового изображения. Если вкратце, то это маленькие цветные квадратики, из которых, как из мозаики, складывается картинка.

Говоря о размерах, мы говорим о разрешении. Оно записывается как сумма пикселей в одной строке по ширине и одном столбце по высоте и записывается так: 655×382. Именно таких размеров следующий арт:

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

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

Но этот процесс не обратимый. Если потребуется все вернуть обратно или сделать еще больше, то запустится новый процесс — увеличение.

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

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

Диалоговое окно «Размер изображения»

Итак, самый основной способ изменить размер изображения — воспользоваться командой меню:

Изображение — Размер изображения (Image — Image Size).

Горячая клавиша: Alt+Ctrl+I. 

Откроется диалоговое окно:

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

Размерность (Pixel Dimensions)

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

Обратите внимание на скобку и иконку в виде цепочки. Это означает, что при изменении ширины или высоты, второе значение будет автоматически меняться в тех же пропорциях, что и оригинал изображения. Это нужно, чтобы оно не получилось сжатым или вытянутым. Для включения\отключения такой функцию, поставьте галочку «Сохранить пропорции» (Constrain Proportions).

Размер печатного оттиска (Document Size)

Об этой группе настроек я упоминал, говоря о печати изображения на принтере. Разрешение (Resolution) меняет размер пикселей и влияет на качество печати. Для принтеров смело ставьте в диапазоне 200-300 пикселей на дюйм.

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

Масштабировать стили (Scale Styles)

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

Интерполяция

Это ваш ключ к изменению разрешения без влияния на качество изображения. Интерполяция (Resample Image) — это процесс, при котором фотошоп реагирует на команду изменения размера, добавляя или вычитая пиксели. Проблема заключается в том, что при интерполяции, программа «строит предположения», а это может испортить качество изображения.

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

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

Например, если у вас есть изображение с разрешением 200 пикселей на дюйм, размер которого при печати составляет 4×6, а размер печатного варианта должен быть 5×7 и желательно сохранить разрешение в 200 пикселей на дюйм. Для этого можно установить данный флажок.

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

Вот какие варианты вам предлагаются, отсортированные по качеству (от худшего к лучшему) и по скорости (от самого быстрого к самому медленному):

  • По соседним пикселям (сохраняет четкие края) (Nearest Neighbor). Хотя этот метод в результате дает самое низкое качество изображения, он может быть полезен, поскольку создает самые маленькие файлы. Пригодится, если вы передаете файлы через Интернет, а у вас или у получателя медленное соединение. Этот метод работает ориентируясь на цвета окружающих пикселов, и копируя их. Он известен тем, что создает неровные края, поэтому вам стоит применять его только к изображениям с резкими краями, таким как иллюстрации, которые не были сглажены.
  • Билинейная (Bilinear). Если вы выберете этот метод, фотошоп будет угадывать цвет новых пикселов, выбирая нечто среднее между цветом пикселов, расположенных непосредственно выше и ниже, а также слева и справа от добавляемого. Результат данного метода чуть лучше, чем при выборе варианта По соседним пикселям и он все еще довольно быстрый, но вам лучше использовать вместо Билинейная один из следующих трех методов.
  • Бикубическая (наилучшая для плавных градиентов) (Bicubic). Этот метод позволяет определить цвета новых пикселов, усреднив цвета пикселов непосредственно над и под новым, а также двух пикселов слева и справа от него. Этот метод занимает больше времени, чем предыдущие два, но создает более плавный переход в областях, где один цвет заменяется другим.
  • Бикубическая, глаже (наилучшая для увеличения) (Bicubic Smoother). Близок к предыдущему методу по способу создания новых пикселов. При использовании этого метода пиксели немного размываются, чтобы можно было наложить новые на старые, придавая изображению более гладкий и естественный вид. Рекомендуется применять данный метод для увеличения изображений.
  • Бикубическая, четче (наилучшая для уменьшения) (Bicubic Sharper). Этот метод также похож на метод Бикубическая (наилучшая для плавных градиентов) по способу создания новых пикселов, однако вместо того, чтобы размывать целые пиксели для улучшения наложения новых и старых как предыдущий метод, он смягчает только края пикселов. Рекомендуется применять данный метод для уменьшения изображений.