Как пикселизировать части фотографии в Adobe Photoshop за 3 шага
Иногда нам нужно пикселизировать области фотографии (лица, номерные знаки, адреса …) или мы просто хотим сделать это, чтобы придать нашим изображениям художественный оттенок. На самом деле, есть графические дизайнеры, которые используют пиксели в своем дизайне, о чем мы расскажем в этой статье. сообщение о Юни Ёсиде. В этом уроке я покажу вам, как пикселизировать части фотографии в Adobe Photoshop., легко и быстро Не пропустите!
Индекс
- 1 Открыть изображение в Photoshop и преобразовать в смарт-объект
- 2 Выберите часть, которую вы хотите пикселизировать
- 3 Применить фильтр пикселизации
Открыть изображение в Photoshop и преобразовать в смарт-объект
Позволять открыть фото в фотошопе который мы хотим пикселизировать, например, я выбрал это, но это можно сделать с любым изображением.
Затем мы разблокируем фоновый слой и щелкнем по нему превратимся в смарт-объект
Выберите часть, которую вы хотите пикселизировать
Мы собираемся выбрать в этом слое часть изображения, которую мы хотим пикселизировать. Вы можете использовать тот инструмент, который вам больше нравится, тот, в котором вы владеете лучше всего (инструмент быстрого выбора, палочка, инструмент выбора объекта …). В тех случаях, когда нам не нужно, чтобы выделение было чистым и идеальным, я рекомендую вам использовать опцию выберите тему (который появляется в меню параметров инструмента при нажатии на любой инструмент выделения). Когда вы применяете выбранный объект, Photoshop автоматически находит и выбирает довольно точно.
Если вы видите, что это большая ошибка, всегда можно исправить с помощью маски выделения, вот на этой кнопке. Например, я собираюсь улучшить выделение руки. Я уменьшу прозрачность и кистью закрашу ускользнувшую часть.
Подпишитесь на наш Youtube-канал
Применить фильтр пикселизации
После того, как вы сделали выбор, в верхнем меню ищите: Фильтр. Перейти к пикселизировать и выберите вариант мозаика. Откроется окно, в котором вы можете изменить размер пикселя. Отрегулируйте его по своему вкусу и нажмите предварительный просмотр, чтобы увидеть, как это выглядит, я собираюсь оставить его на 35.
Как вы видите, как только вы нажмете ОК, автоматически будет создана маска фильтра, поэтому вы можете применить этот фильтр к изображению, сохранив оригинал. Кроме того, если вы хотите пикселизировать только часть выделения, p
Это конечный результат:
Еще один пиксельный эффект
Я собираюсь показать вам еще один очень интересный эффект пиксельной графики.
Мы повторим процесс. В смарт-объекте выделим нужную область и перейдем во вкладку Фильтр> Пикселизация. На этот раз вместо мозаики мы щелкнем по кристаллизоваться.
Снова откроется окно для определения размера пикселя, на этот раз он не будет квадратным, определите размер и нажмите OK, чтобы создать маску фильтра.
Это конечный результат:Содержание статьи соответствует нашим принципам редакционная этика. Чтобы сообщить об ошибке, нажмите здесь.
Вы можете быть заинтересованы
Как сделать пиксель арт в Photoshop: настройка, рисование
Автор Admin На чтение 3 мин Просмотров 54 Опубликовано Обновлено
В последнее время очень большой популярностью пользуются фотографии, сделанные в стиле пиксель арт.
Особенно это популярно на игровых сайтах или каналах, с соответствующей тематикой. Как правило, пиксель арт считается тяжелым искусством, ибо вы должны поточечно нарисовать такое изображение в пикселях, но в целом, можно преобразить любую картинку в этот стиль. И в этой статье мы научим вас все это делать.
Как мы уже сказали выше, фотографии можно рисовать, а можно преображать готовые. Давайте по очереди разберемся с обоими видами работ.
Как нарисовать пиксель арт в PhotoshopДля примера мы возьмем вот такую вот заготовку. Для начала создаем небольшой холст, размерами 200х200 пикселей. Тут же обязательно заходим в настройки и где «интерполяция изображения» выставляем значение «по соседним пикселям (сохраняет четкие края)».
После этого вверху заходим в раздел «просмотр» и выбираем пункт «показывать сетку». После этого возвращаемся к нашему первому рисунку, вырезаем фигурку и переносим ее на нашу клетчатую поверхность. Пользуемся комбинацией горячих клавиш Ctrl+T, чтобы трансформировать наше изображение до нужного размера.
Теперь просто прорисовываем и разукрашиваем нашего персонажа. Для удобства, каждый фрагмент нужно делать на новом слое, чтобы при необходимости его отредактировать. Получается примерно следующее:
Чтобы рисунок выглядел еще более пиксельным, можно дополнительно увеличить холст, а затем и персонажа, применяя комбинацию Ctrl+T. Остается только правильно экспортировать рисунок. Делать это лучше всего в GiF или PNG-форматах, т.к. вы можете сохранить изображение на прозрачном фоне, а главное – сохраните 16-цветовую палитру, что позволит вам сохранить пиксельную тематику.
Как преобразить обычную картинку в пиксель артТеперь, что касается перевода обычной картинки. Для примера мы возьмем картинку кота, т.к. по своей структуре она является достаточно сложной. Первое, что нужно сделать – это снять блокировку слоя, если она стоит.
После этого, на верхней панели меню, переходим в «изображения» / «коррекция» / «цветовой тон, насыщенность».
Тут нужно передвинуть ползунок насыщенности примерно на 50. После этого снова идем в «изображения», только теперь выбираем «режим», а затем «индесированные цвета».
В открывшейся табличке нужно проследить, чтобы цветов было 10, а все остальное должно быть отключено. После этого выбираем «изображения», а затем «размер изображения». В разделе «подогнать под» выбираем «автоматический выбор разрешения», качество ставим «черновое». По итогу картинка уменьшится примерно до 200х200 пикселей.
Увеличиваем ее и рассматриваем. Получилось неплохо. Теперь снова переводим изображение в RGB. Для этого в разделе «изображения» выбираем «режим», а затем RGB. Остается только вырезать кота на нужный слой, а также дополнительно подкрасить, чтобы он выглядел более естественно. Но по сути – картинка готова.
На этом мы заканчиваем данную статью, всем удачи и до новых встреч.
( 1 оценка, среднее 5 из 5 )
Поделиться с друзьями
Учебник— Настройка Photoshop для 2D Pixel Art
Я большой поклонник ретро-видеоигр и пиксельной графики.
Во время рождественских каникул я попытался (после долгого перерыва) создать пиксельную графику для 2D-игры в ретро-стиле для мобильных устройств, которую я создавал в Unity для развлечения. Мне пришлось немного повозиться с настройкой Photoshop для создания 2D-спрайтов и фона, поэтому вот краткое пошаговое руководство о том, как настроить Photoshop для создания пиксельной графики.
Шаг 1. Создайте маленькое изображение
Пиксель-арт сделан в очень низком разрешении. Это означает, что вы начнете с создания очень маленького изображения, которое вы едва сможете разглядеть без увеличения . Я не могу дать вам эмпирического правила, но я обычно использую 20×20 пикселей для спрайтов (иногда 40×40 пикселей, если я хочу добавить больше деталей) и около 150×80 пикселей для фона.
Итак, создайте новое изображение в Photoshop.
После того, как вы создали изображение, вы едва сможете его увидеть. Так увеличьте , чтобы вы могли его увидеть.
Шаг 2. Настройка интерполяции изображения для ближайших соседей
Когда ваш пиксельный рисунок изменяется или масштабируется, вам нужно, чтобы края или углы выглядели жесткими и зубчатыми, а не гладкими и размытыми . По умолчанию Photoshop использует бикубическую интерполяцию (или билинейную), которая создает эффект размытия при увеличении изображения. В то время как бикубическая интерполяция отлично работает для обычных изображений, пиксельная графика, масштабированная с использованием бикубической, выглядит ужасно и чертовски размытой. Как пример (источник):
Вот старик из The Legend of Zelda, который дает вам меч. ( Вы можете прищуриться, чтобы увидеть это )
Здесь он увеличен 4x с бикубической интерполяцией :
Масштабируйте здесь в 4 раза, используя Ближайший сосед :
Примечание. Если вы экспортируете изображение (параметр «Сохранить для Интернета») и изменяете его размер, убедитесь, что в разделе «Качество» или «Пересэмплирование» выбран параметр «Ближайший сосед».
Шаг 3. Настройка инструментов
Вам нужно настроить инструменты рисования и получить желаемые пиксельные эффекты. Для инструментов карандаш и ластик я использовал следующие настройки:
- Размер до 1 пикселя (px).
- твердость до 100%.
- непрозрачность до 100%.
- для ластика, режим был установлен на «Карандаш».
Единственным другим инструментом, который я использовал, было ведро с краской, которое не требовало никакой настройки.
Шаг 4. Отобразите сетку (необязательно)
Сетка полезна для точного позиционирования и выравнивания объектов. Я нахожу сетку очень полезной при создании спрайтов. Сетку можно включить в меню «Вид».
Далее нам нужно настроить сетку, чтобы она могла отображать каждый пиксель по отдельности .
Откройте настройки «Направляющие, сетки и фрагменты» в меню «Настройки» и обновите настройки сетки.
Вот и все. Я надеюсь, что этот урок был вам полезен, и вы продолжите создавать великолепный пиксель-арт 🙂 Процитирую Боба Росса:
» Люди могут смотреть на вас немного странно, но это нормально. Художникам позволено быть немного другими. ”
Если вам нравится этот пост, пожалуйста, поделитесь с помощью кнопок выше. Это поможет CodeAhoy расти и добавлять новый контент. Спасибо !
Как сделать пиксель-арт в Photoshop для начинающих
В этом уроке для начинающих вы узнаете, как создавать пиксель-арт для своих игр и проектов с помощью Adobe Photoshop! Мы рассмотрим все, начиная от создания пиксельного изображения и заканчивая тем, чтобы поделиться им со всем миром!
Готовы сделать свой собственный пиксель-арт? Независимо от того, хотите ли вы создать что-то, чтобы поделиться в своей учетной записи в социальной сети, или, возможно, вам нужен персонаж для вашей ретро-видеоигры, это руководство по Photoshop поможет вам быстро создать пиксельную графику с помощью Adobe Photoshop.
Начало работы
Пиксель-арт — это быстрый и простой способ создания 2D-изображений для ваших игр или творческих работ, таких как изображения, которые вы видите в популярных мобильных играх, таких как Flappy Bird! Изучение того, как создавать пиксель-арт в Photoshop, также является основой для создания отличного воксельного искусства. Существует множество инструментов для создания пиксельной графики, но в этом уроке мы будем использовать самое популярное программное обеспечение для создания 2D-изображений, доступное в Интернете. Photoshop — явный фаворит для создания пиксель-арта из-за его множества функций, направленных на создание потрясающего пиксель-арта!
Создать новый файл
Прежде чем приступить к созданию пиксельной графики в Photoshop, убедитесь, что у вас установлена последняя версия Photoshop через Creative Cloud, а затем откройте программу. Вы должны увидеть меню, похожее на приведенное ниже. Это называется экраном приветствия. Идите вперед и нажмите Create New .
Появится экран «Новый документ». Здесь вы можете выбрать один из готовых шаблонов, чтобы помочь создавать фотопроекты, предназначенные для разных размеров экрана. В этом уроке Photoshop мы покажем вам, как сделать собаку в пиксельной графике. Для этого мы будем использовать Пользовательский параметр . В меню справа под названием Preset Details введите имя HipsterDog и введите 32 для ширины и 32 для высоты. Когда закончите, нажмите Создать .
По сути, это создает новый файл с именем HipsterDog с холстом размером 32×32 пикселя. Этот холст будет тем, что мы будем использовать для рисования нашего пиксель-арта. После того, как вы нажмете Create , вы должны увидеть экран, подобный показанному ниже. Имейте в виду, что 32×32 действительно мало. Если вы посмотрите в нижний левый угол, то заметите, что масштаб увеличен на 100%. Пиксельное искусство по своей природе — это произведение искусства, которое работает на уровне пикселей.
Мы всегда можем масштабировать наши пиксельные изображения позже, но пока мы проектируем, мы должны оставаться в этом разрешении.
Чтобы упростить дизайн, мы всегда можем просто увеличить масштаб, чтобы лучше видеть нашу пиксельную графику. Для этого нажмите CTRL + на компьютере с Windows или CMD + на Mac. Мы увеличивали масштаб, пока не достигли 3200%. Вы можете увидеть увеличение в левом нижнем углу.
Если этого недостаточно, вы можете увеличить или уменьшить масштаб. Теперь, когда у нас есть пустой холст, нам нужно настроить нашу рабочую среду, чтобы мы могли сделать отличный пиксель-арт в Photoshop.
Настройка Adobe Photoshop для Pixel Art
Теперь, когда у вас есть холст, нам нужно установить некоторые базовые настройки в Photoshop, которые помогут нам создать нашу самую первую пиксельную графику, а также чтобы она отображалась должным образом.
Включить ближайший сосед
При первом открытии Photoshop все изображения создаются с использованием Bicubic Automatic для интерполяции изображений.
Это отлично подходит для обычных изображений, потому что когда вы масштабируете изображение вверх или вниз, это помогает размыть пиксели, чтобы они выглядели «гладкими» и менее пикселизированными. Однако в пиксель-арте это полная противоположность. Всякий раз, когда вы делаете пиксельные изображения, они должны выглядеть четкими и четкими. Для этого нам нужно изменить этот параметр на Ближайший сосед . Изображения ниже являются примером масштабирования изображения, которое мы будем составлять 8x .
Итак, без дальнейших задержек давайте изменим интерполяцию изображения. Перейдите к Настройки и выберите категорию Общие .
Когда меню настроек открыто, щелкните раскрывающийся список Интерполяция изображения и выберите Ближайший сосед (сохранить резкие края) из списка элементов.
Теперь, когда вы изменяете размер своего пиксельного рисунка, Photoshop сохраняет четкие края, придавая вашему рисунку чистый и четкий вид.
Включить сетку
Следующей важной настройкой, которую мы включим в Photoshop, является Сетка . Пиксель-арт работает на основе невидимой 2D-сетки. Включив это, будет легко увидеть, где именно мы размещаем наши пиксели. Чтобы включить нашу сетку, перейдите в View > Show > Grid .
Когда вы нажмете Сетку, вы должны увидеть что-то похожее на это на вашем холсте. Имейте в виду, что эта сетка является лишь ориентиром и не будет отображаться при экспорте пиксельного изображения.
Иногда сетка не отображается нужного размера. Это связано с тем, что линии сетки установлены неправильно. Если вам нужно изменить это или вы хотите перепроверить, перейдите на панель Preferences внутри Photoshop и на этот раз нажмите Guides, Grid & Slices… из вариантов.
Когда откроется меню, убедитесь, что свойство Gridline Every: имеет значение 1 пикселя . Также убедитесь, что Subdivisions – это 1 .
Это гарантирует правильный размер сетки. Поздравляем! Теперь мы готовы сделать пиксель-арт!
Нарисуйте свое пиксель-арт изображение
Теперь, когда вы настроили Photoshop для пиксель-арта, пришло время выбрать инструмент, который мы будем использовать для фактического рисования нашего пиксель-арта. Несмотря на то, что существуют десятки инструментов и сочетаний клавиш, которые можно использовать для создания пикселей на изображении, мы сосредоточимся на одном основном инструменте. Это инструмент Pencil .
Настройка инструмента «Карандаш»
Инструмент «Карандаш» в Photoshop станет одним из наиболее часто используемых инструментов, когда вы начнете создавать пиксель-арт. Чтобы максимизировать его эффективность, мы изменим некоторые настройки перед тем, как начать.
Для начала выберите инструмент «Карандаш» на панели инструментов. Вы можете найти его на правой стороне. Он буквально выглядит как карандаш.
После того, как вы выбрали Карандаш, мы настроим некоторые свойства.
Щелкните стрелку раскрывающегося списка в левом верхнем углу окна Photoshop. Рядом с ним должен стоять номер. Это число показывает, сколько пикселей в ширину нарисует карандаш, когда вы нажмете на холст. Поскольку мы делаем пиксельную графику, мы хотим, чтобы она была очень тонкой. Для этого установите размер на 1. Это позволит нам рисовать по 1 пикселю за раз. Затем установите жесткость на 100%. Помните, что пиксель-арт должен быть четким и резким. Это свойство предотвратит сглаживание, делая наши пиксели четкими.
Контур головы
И вот момент, которого мы все ждали! Чтобы нарисовать пиксель, просто щелкните в любом месте вашего холста. Поскольку мы проделали всю тяжелую работу по настройке Photoshop, это должно быть буквально похоже на заполнение кубов на сетке. Мы начнем с обводки головы черным цветом.
Чтобы изменить цвета, щелкните поле «Цвет», расположенное в нижней части области панели инструментов. Появится всплывающее окно, где вы можете перетащить ползунок, чтобы настроить цвет.
Нажмите OK, когда закончите.
Теперь, чтобы добавить пиксель, просто щелкните внутри созданной ранее сетки. С нашими текущими настройками он будет заполнять одну ячейку за раз. Попробуйте воспроизвести изображение ниже, щелкнув инструментом «Карандаш».
Очень красиво! Теперь, когда у нас есть контур нашего пиксельного персонажа, мы можем начать добавлять некоторые детали внутри головы. Продолжайте добавлять детали, используя тот же метод, который вы использовали для контура. Наметим уши и добавим нос. Повторите изображение ниже.
Теперь он начинает обретать форму! Чтобы сделать очки для нашей собаки, нам нужно изменить цвет. Нажмите на поле цвета еще раз и введите цвет ниже.
Теперь, когда мы изменили цвет, давайте начнем рисовать очки. Попробуйте воспроизвести изображение ниже, используя тот же инструмент «Карандаш».
Отличная работа! Теперь у нас есть большая часть нашей пиксельной собаки. Давайте начнем заполнять пустые области. Отличный способ раскрасить ряд пикселей — щелкнуть левой кнопкой мыши по первому пикселю в ряду.