LINUX.ORG.RU

Пиксель-арт из фотографии

 


2

1

Имеется фотография. Например, такая: https://pxhere.com/en/photo/348762 Требуется уменьшить её до 320х200 пикселей, так, чтобы она не превратилась в груду пикселей или мешанину цветных пятен. То есть с потерей большей части мелких деталей и с большими однотонными областями. Чтобы итоговая картинка была похожа на https://pic4a.ru/811/Ngi.png или https://pic4a.ru/811/9kr.png А не как в https://pikabu.ru/story/pikselnaya_grafika_v_fotografii_5356446

Кто-нибудь может посоветовать годные руководства?

Результаты применения 8Bit Photo Lab после повышения HSV Saturation:
https://raw.githubusercontent.com/tkzv/looters/master/cutscenes/dump-1.png
https://raw.githubusercontent.com/tkzv/looters/master/cutscenes/dump-2.png
https://raw.githubusercontent.com/tkzv/looters/master/cutscenes/dump-3.png
https://raw.githubusercontent.com/tkzv/looters/master/cutscenes/empty-hangar.png

★★★★★

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

bdfy ★★★★★ ()

Если картинки из пикабушного примера уменьшить до нужного размера разве не получится примерно то, что ты хочешь? То есть я бы делал так - увеличивал и "пикселизировал" (уменьшал бы количество оттенков наверно чтоб получить вот эту ступенчатость) нужное изображение, а потом очень сильно уменьшал (то есть чтоб ступенчатость осталась, но размер "пикселей" был бы меньше).

micronekodesu ★★ ()
Ответ на: комментарий от micronekodesu

То есть я бы делал так - увеличивал и «пикселизировал» (уменьшал бы количество оттенков наверно чтоб получить вот эту ступенчатость) нужное изображение, а потом очень сильно уменьшал (то есть чтоб ступенчатость осталась, но размер «пикселей» был бы меньше).

Вопрос в том, как ставить пороги. Например, иногда полезна функция Posterize, но на приведённом фото слишком разноцветный мусор.

question4 ★★★★★ ()

Постеризация, повышение контрастности, пикселизация (чётное количество пикселей), уменьшение размера, повышение контрастности. Возможно придётся править руками.

mord0d ()

Кто-нибудь может посоветовать годные руководства?

MATLAB/Image Processing Toolbox/Морфологическая обработка полутоновых изображений ©.

с потерей большей части мелких деталей и с большими однотонными областями

Итеративная скелетизация-дилатация (она же эрозия-размыкание) ранговым фильтром.

quickquest ★★★★★ ()
Ответ на: комментарий от djambeyshik

Сохраняет в старом разрешении. В JPEG. Палитра в режиме VGA не адаптивная, а жёстко прошитая. На выходе мешанина пикселей, но смотрится неожиданно хорошо.

В бесплатной версии доступно меньше половины фильтров.

https://pic4a.ru/811/aoE.jpg — пожалуй, его можно подчистить руками до чего-то приемлемого.
https://pic4a.ru/811/dGn.jpg
https://pic4a.ru/811/XXv.jpg
https://pic4a.ru/811/ajH.jpg

question4 ★★★★★ ()
Ответ на: комментарий от question4

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

djambeyshik ★★★★★ ()
Ответ на: комментарий от djambeyshik

Так там же фильтры вроде ещё и детально настраиваются

Я привёл как раз результаты 4 вариантов настроек.

Значительная часть настроек доступна только за деньги. Например, бесплатны только 2 палитры для VGA. И бесплатное повышение цветности ограничено.

question4 ★★★★★ ()

1. Какова практическая задача? На чем?
2. Ты же понимаешь, что все три твои примера очень разные по характеру изображения? Прям очень.

dk- ()
Ответ на: комментарий от dk-

Автор приводит в пример картинки, которые явно нарисованы. Например БТР изображен в изометрической, а не перспективной проекции. В другой картинке применено условное, не реалистичное разделение переднего и заднего плана. Ничего этого нельзя получить из фотографии, по крайней мере, автоматической обработкой.

XVIII_vek ()
Ответ на: комментарий от dk-

Какова практическая задача?

Слайд-шоу для игры в ретро-стиле. 320x200, палитра 256 цветов из 2^24.

P.S. Я могу пытаться что-то рисовать по пикселю, но так энтузиазм закончится быстрее, чем сделаю что-то приемлемое. Поэтому я надёргал фотографий под CC и обрабатываю их.

На чем?

В смысле? На чём я работаю? Гимп на маломощном ноуте с Линуксом, планшет с Андроидом. Поставить Octave на ноут — не проблема. Запустить скрипт на Питоне — не проблема. Запустить бесплатную программу из Google Store — не проблема, хоть и неприятно.

Ты же понимаешь, что все три твои примера очень разные по характеру изображения? Прям очень.

Какой 3-й? Фотографии на Пикабу?

Меня устроят переходы цветов как на картинке с бронетранспортёром, как на картинке с НЛО и промежуточные между ними варианты. Не устроит то, что получилось на Пикабу. Если сможешь в словах сформулировать их различие, буду рад.

question4 ★★★★★ ()
Последнее исправление: question4 (всего исправлений: 1)
Ответ на: комментарий от XVIII_vek

Автор приводит в пример картинки, которые явно нарисованы. Например БТР изображен в изометрической, а не перспективной проекции. В другой картинке применено условное, не реалистичное разделение переднего и заднего плана. Ничего этого нельзя получить из фотографии, по крайней мере, автоматической обработкой.

Я спрашивал только про преобразование цветов. А угол зрения и перспектива может различаться и на фотографиях.

question4 ★★★★★ ()
Ответ на: комментарий от question4

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

XVIII_vek ()
Ответ на: комментарий от XVIII_vek

Тогда надо привести примеры фотографий, обработанных как тебе нравится.

Нашёл бы примеры — использовал бы прилагаемый метод. А руками их делать — слишком долго.

question4 ★★★★★ ()
Ответ на: комментарий от question4

На правах офтопика, но почему именно 320х240? На условный спектрум что ли?

Я прям конкретных советов не дам. Всеж другим занимаюсь. Но ради прикола попробовал фото мусорки сохранить в гиф\пнг с пониженным количеством используемых цветов. вышло похоже.

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

dk- ()
Ответ на: комментарий от XVIII_vek

#PixelArt — всё о пиксельной графике под Unix-like OS

+1. Качественный пиксель-арт делается ручками!

Кто-нибудь может посоветовать годные руководства?

Вот
>>> #PixelArt — всё о пиксельной графике под Unix-like OS

atsym ★★★★★ ()
Последнее исправление: atsym (всего исправлений: 1)
Ответ на: комментарий от dk-

почему именно 320х240?

320х200. VGA. Ограничение движка OpenXcom. Авторы так специально сделали, чтобы имитировать старый движок 1994 года.

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

Мой авторский замысел — начать сюжет с того, что НЛО разбилось на свалке :)

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

Из чего сохранял? Из Гимпа? Цветность увеличивал?

question4 ★★★★★ ()
Ответ на: комментарий от atsym

А где ты хоть 320x240 увидел-то?

По соотношению трудозатрат к качеству пока лидирует http://www.ilixa.com/8bitphotolab.php , но она делает картинки 320х240. Я несколько выше выложил: Пиксель-арт из фотографии (комментарий)

question4 ★★★★★ ()

Re: #PixelArt — всё о пиксельной графике под Unix-like OS

Дизайнер сайта https://lospec.com/pixel-art-tutorials — дебил. Поиск только по тегам. Постраничный просмотр списка невозможен. До конца список домотать нереально — связь рвётся и начинать сначала.

Там много материалов не в виде одной картинки в Твиттере или ролика на Ютубе? Я пока нашёл всего 1 штуку, и тот в web.archive.org.

И по работе с фотографиями — ничего.

question4 ★★★★★ ()

И по работе с фотографиями — ничего.

Хотя эти туториалы в оригинале писались для Photoshop'а, вцелом они должны подойти и для AzPainter/GIMP/Krita.

atsym ★★★★★ ()
Ответ на: комментарий от peregrine

Можно натренировать нейросетку или взять готовую.

Есть програмка Pixelator (free for personal use)

atsym ★★★★★ ()
Ответ на: комментарий от peregrine

Можно натренировать нейросетку

Нельзя

Q: Is there any way to programmatically turn any image into pixel art? - https://www.quora.com/Is-there-any-way-to-programmatically-turn-any-image-int...

A: I've been a pixel artist for almost 20 years, and my answer is no. But there are easy ways I'll describe below.

First off, by the definition of pixel art (and also for it to work as a sharp and consistent image as pixel art does) you have to have pixel level control over it. Basically for this you need reduced size and reduced colors on top of other things. Photographic and 3D images tend to have unlimited colors, and when you try to reduce their colors in a program such as Adobe PS, you never get a decent reduction. When you try to reduce the size, you always lose the necessary details rather than the unnecessary ones.

I suggest shrinking the image in size to what you need, then prepare or get a limited color palette (8 or 16 are good numbers to begin with, you can Google "Dawnbringer's 16 color palette"), and edit it with a pencil tool on a separate layer using only colors from that palette (trying to use colors from the original image often produces blurry results). First trace borders with the darkest color, then fill spaces with single colors, then add shades with a dark color, and finally add highlights. This way you will have a proper pixel art.

For further help, you can use Pixel Joint or Pixelation forums.

P.S.: GrafX2 — FOSS pixelart editor
>>> GrafX2 2.5 — свободный 256-цветный редактор пиксельной графики

atsym ★★★★★ ()
Последнее исправление: atsym (всего исправлений: 2)
Ответ на: комментарий от atsym

https://www.youtube.com/watch?v=s_VLSWWpxWo

Убожество. Тускло и коряво. Даже цвета не потрудился подкрутить.

https://www.shutterstock.com/blog/how-to-turn-any-photograph-into-pixel-art-w...
https://www.digitalartsonline.co.uk/tutorials/photoshop/turn-photo-into-16-bi...

Спасибо, но я с этого и начал :) В первом случае чаще получается груда пикселей как здесь https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2014/11/img188.jpg , во втором трудоёмкий процесс рисования вручную.

Но я был не вполне справедлив к https://lospec.com/pixel-art-tutorials Нашлись ещё 2 руководства:

https://www.youtube.com/watch?v=FcMPkuzZlVw — но в Гимпе невозможно напрямую задавать параметр Amount для аналога «Dither ⇒ Diffusion». Хотя Pattern отработал лучше, чем я ожидал.

https://www.deviantart.com/cyangmou/art/Pixel-Art-Process-413418385 — опять всё вручную, но нашёл для себя полезные рекомендации. Если возьмусь в будущем всё перерисовать по-нормальному.

https://www.youtube.com/watch?v=-jvXJs97bPo — пример ротоскопирования. 20 минут на кадр 20х20.

Хотя эти туториалы в оригинале писались для Photoshop'а, вцелом они должны подойти и для AzPainter/GIMP/Krita.

Кстати, в Гимпе есть HD Index Painting? Или аналог помимо заливки маской или пиксельным градиентом? Чтобы можно было крутить слайдер, и менялась плотность точек в уже закрашенных участках, как здесь: https://youtu.be/TCYdYeKySCo?t=52

question4 ★★★★★ ()
Ответ на: комментарий от question4

http://archive.eglug.org/gimpixel — забавно, если начинающий попробует поставить современный Гимп и воспользоваться этими советами, инструменты работать не будут. Или будут, но непредсказуемо :) Из-за размывания.

http://www.youtube.com/watch?v=51f1m_cj7aA — не то, но оригинально.

question4 ★★★★★ ()