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

Обновлено: 07.07.2024

В этом динамичном туториале я покажу вам основные приёмы создания пиксельарта. Спрайты - это картинки в 2D играх, которые представляют собой различные объекты: игрового персонажа, монстров, предметы и т.д.

Пиксельарт, также известный как дот-арт в Японии, это вид цифрового искусства, где рисование происходит на пиксельном уровне. В основном он ассоциируется с графикой игр 80-90 годов, в которых художники преодолевали технические ограничения (небольшое количество памяти и маленькое разрешение), создавая все более захватывающие картины.

В наши дни пиксель арт все еще актуален и используется в играх, несмотря на возможность создания реалистичной 3D графики. Почему? - cпросите вы. Если не брать во внимание ностальгию, то создавать хорошие рисунки с такими жесткими ограничениями все также интересно и достаточно сложно. Также, как мы восхищаемся тем, что художник, сделав пару мазков, может показать объем и вызвать у нас какие-то эмоции, мы любуемся несколькими соединёнными пикселями, выполняющими ту же работу.

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

Работая с 3D моделью ты, по крайней мере, можешь крутить ее, деформировать, перемещать её конечности, копировать анимацию с одной модели на другую и т.д, чего не скажешь о пиксельарте. Профессиональный пиксельарт почти всегда подразумевает под собой большое количество кропотливого размещения пикселей на каждом кадре анимации.

Как говорится “Кто предупрежден, тот вооружен!”, а теперь о моем стиле: по большей мере я использую пиксельарт для своих игр, они же и воодушевляют меня продолжать заниматься этим. Если быть точным, то я фанат Famicon(NES), 16 битных консолей и аркадных автоматов 90ых годов.

Мои любимые игры этой эры имели пиксельарт, который нельзя описать иначе как насыщенный, дерзкий и чёткий. но не настолько, чтобы быть чопорным или минималистичным. Это стиль, который я взял за основу своего, но вы можете легко использовать техники, применяемые в этом туториале для чего-то совсем другого. Смотрите на художников, которые вам нравятся и делайте пиксельарт, какой вашей душе угодно!

Самыми базовыми инструментами для занятия пиксельартом являются лупа и карандаш. Также будут полезными линия, фигуры, выделение и заливка цветом. Есть большое количество как платных, так и бесплатных программ, в которых имеются данные инструменты. Я расскажу о самых популярных из них (включая те, которые использую сам).

Если у вас Windows, вы можете использовать Paint, несмотря на скудность программы, в ней имеются все нужные инструменты, чтобы заниматься пиксельартом.

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

GraphicsGale - это первый редактор, о котором я узнал, разработанный и предназначенный именно для пиксельарта и его анимации. Созданный компанией HUMANBALANCE, он стал бесплатным в 2017 году и до сих пор широко используется несмотря на рост популярности Aseprite. К сожалению, доступен только обладателям Windows.

Самый популярный редактор на данный момент. Содержит большое количество полезных функций и инструментов, постоянно обновляется, доступен как на Windows и Mac, так и на Linux. К тому же вы можете пользоваться программой бесплатно, скомпилировав её исходный код. Если вы серьёзно хотите заниматься пиксельартом и ещё не выбрали себе редактор, то Aseprite будет неплохим вариантом.

GameMaker Studio 2 - это отличный движок для создания 2D игр, который также содержит достойный редактор спрайтов. Если вы собираетесь делать игры с пиксельартом, то это лучший выбор для обоих. В данный момент (2019 год) я использую его для создания UFO 50, коллекции из 50 ретро игр. В основном я использую местный редактор для создания спрайтов, а тайлсеты делаю в Photoshop.

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

Я настоятельно рекомендую пользоваться графическим планшетом для любого вида иллюстраций, чтобы предотвратить заболевания повторяющейся длительной нагрузки на запястье (туннельный синдром). Такие заболевания намного легче предотвратить, чем вылечить. Когда появляется боль, вы уже обречены ( мои дни рисования мышкой, сделали невозможным играть в игры с быстрым нажатием кнопок). Так, что позаботьтесь о себе пока не поздно – это того стоит! В данный момент я использую маленький Wacom Intuous Pro.

Если у вас нет возможности купить планшет, по крайней мере, возьмите лучезапястный бандаж. Я использую от компании Mueller Green Fitted Wrist Brace. У других брендов бандажи были либо слишком неудобными, либо недостаточно эффективными.

Давайте приступим к делу! Мы начнем со спрайта персонажа размером 96x96 пикселей. Я решил нарисовать орка, но вы вправе выбрать что-то другое. Конечный вариант орка находится на скриншоте Final Fight, который вы можете увидеть выше, для того, чтобы вы понимали масштаб спрайта– он большой для большинства ретро игр (оригинальный скриншот имеет размер 384x224 пикселя).

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

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

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

Именно для этого туториала я буду использовать палитру из 32 цветов, созданную специально для UFO 50. Палитры из 32 и 16 цветов используются достаточно часто. Данная палитра была создана для выдуманной консоли, которая бы находилась где-то между Famicon и PC Engine. Можете спокойно взять эту палитру и двигаться дальше (или нет! Это не столь важно).

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

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

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

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

Мне нужно увеличить пиксельный спрайт, но больше своего размера при помещении от становится мыльным, есть ли скрипт для ФШ который не даёт замылить обьект?

Нельзя увеличить без потери качества, если оно уже и так 100%-е. Только если кропнуть ради увеличения. Это закон.

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

некто неизвестный Просветленный (40992) Границы между микселями (в уменьшеной версии) размываются?

Никак. Потеря качества будет в любом случае, где же программа будет брать недостающие пиксели? Даже если поставить галочку на "Интерполяция", то заполнение участков смежными пикселями приведет к потере резкости, как в твоем случае и получилось.

Почему тогда при свободном трансформировании спрайты выглядят без мыла?

Sanek841 Просветленный (47862) Потому что они скорее всего у тебя в виде смарт-объектов

Векторный - легко, пиксельный - никак.
Любая интерполяция в плюс даст мыло.

Есть спец программы типа Photo Zoom, там по специальным алгоритмам - мылится поменьше при увеличении растровых картинок.
Также существуют спец. плагины к фотошоп для этой цели.
Но чудес от них не ждите. Максимум 50-70% они добавят, не более

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

самолет самолетов Искусственный Интеллект (231490) НЕ нужны никакие ролики, просто ставть алгоритм ресайза "по соседним пикселям" и ВСЁ! :-)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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