Правильная работа с атласами иконок

[Hrust 21]

Правильная работа с атласами иконок

 

Приветствую, на связи товарищ Hrusteckiy — UI-программист, чьи плоды работы можно видеть в New Project, Last Fallout Overhaul, Забвение, Hike, и многих других, также сделавший 100x100 иконки для оригинальной игры.

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

Скрытый текст

 

Начнём с софта.

Первым делом - используем Photoshop CS5/CS6 или CC(я использую 2019).

Второе - забудьте про Stalker Icon Editor(2023 год на дворе всё-таки).

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

 

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

 

Спойлер

 

Для добавления новых иконок, используем PaintDotNet. Делаем новый слой, на него вставляем нужную нам картинку и подгоняем под размер(билинейный метод), выделяем область, вырезаем и вставляем на основной слой, тем самым затерев предыдущую иконку, если таковая имеется. Сохраняем и переходим в Photoshop. Здесь включаем сетку (Ctrl+Э), её размеры настраиваются здесь, по умолчанию она 50 пикселей.

 

Спойлер

  

 

 

ВАЖНО!!! НЕ ИСПОЛЬЗУЙТЕ КРАЙНИЕ ПРАВЫЕ И КРАЙНИЕ НИЖНИЕ КЛЕТКИ, ОНИ НЕ ЯВЛЯЮТСЯ ЦЕЛЫМИ И МЕНЬШЕ ОСТАЛЬНЫХ НА НЕСКОЛЬКО ПИКСЕЛЕЙ.

 

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

Далее, переходим в "слои" и разблокируем слой - это нам открывает информацию в свойствах о выделенном элементе и его позиции. Именно здесь будем узнавать координаты, для 50x50 придётся пользоваться калькулятором, а для 100x100 всего лишь отсекаем по два нуля.

UPD: в CS5/CS6 получать координаты можно на F8(в новых версиях облегчили доступ и оно на вкладке свойств), при этом позицию выделения смотреть можно лишь от курсора, что не очень удобно.

 

Вот здесь позиция о иксу 950, разделим на 50 и получаем 19 - именно это число пишется в inv_grid_x. Аналогичная история с игреком. Ш - Ширина 50, делим на 50, получаем inv_grid_width равной единице. Так же и с высотой. ПОСЛЕ РАЗБЛОКИРОВКИ СЛОЯ НЕ СОХРАНЯЕМ АТЛАС, А ПРОСТО ЗАКРЫВАЕМ!

Открываем атлас в PaintDotNet или в Photoshop (нужен плагин dds).

 

Спойлер

 

Спойлер

 

 

Закрываем атлас и радуемся.

 

 

P.S. прилагаю свои атласы иконок ЧН, ЗП (названия кликабельны и содержат файлы).
P.P.S. https://youtu.be/5sU-B57OKRc записал ролик по рендерингу и добавлению новых иконок, blender-файл прилагается.

 

Изменено 31 Марта 2023 пользователем Hrust
Обновил атласы.

[Romann 623]

34 минуты назад, Zander_driver сказал:

но размытие-то где? Нет его.

Так у тебя и примера то нет - где у тебя рядом впритык, и пересекающиеся, линии, несколько линий, в разный цвет, нарисованные кистью, в один пиксель? - Так нет их.. Речь не о том, как выкрутиться в ФШ, и вместо нарисованных линий подсовывать цветные текстуры - а о том, что dds в таких случаях бьёт пиксели - и этот факт никакими выкрутасами не изменить... Нарисуй кистью, именно кистью, несколько разноцветных линий в один пиксель, впритык, и пару пересекающихся - и сделай так, чтоб при экспорте в dds их не размазало - ты волшебник? - Почему я настаиваю именно на таком формате линий и их шакала в dds? - Речь то о чём была? - Об иконках, в которых в 50х50 разноцветное пиксельное месиво - смекаешь? - Мы же тут не пи.. кисточками в ФШ меряемся, а рассуждаем о шакалах иконок при многократном сохранении в dds... И если уж прямые линии размазывает, то что тогда с иконками происходит!?

Изменено 25 Марта 2023 пользователем Romann

[Zander_driver 10 334]

1 час назад, Romann сказал:

Нарисуй кистью, именно кистью

А сначала такого условия не было... А зачем?

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

1 час назад, Romann сказал:

а рассуждаем о шакалах иконок при многократном сохранении в dds...

Дык это ежу понятно и @Adm-RAL об этом упомянул еще .дцать постов назад, упомянув также о варианте dds без этого недостатка. А т.к. в DXT5 происходит потеря RGB-кода, то при многократных пере-сохранениях и получится бяка.

С этим никто и не спорил, чего ты раскричался то?

1 час назад, Romann сказал:

о том, что dds в таких случаях бьёт пиксели

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

[aromatizer 4 460]

4 часа назад, Romann сказал:

при многократном сохранении в dds

Сохранение в dds - это финальное действие, а все творчество происходит в других форматах.

[Hrust 21]

3 часа назад, aromatizer сказал:

Сохранение в dds - это финальное действие, а все творчество происходит в других форматах.

Это как раз продвигаем, но некоторые упорно продолжают не использовать исходник и каждый раз открывать-редактировать-сохранять dds, думая, что плохо не станет...
Да, @dog19601?)

[dog19601 1 414]

51 минуту назад, Hrust сказал:

Да, @dog19601?)

Конечно @Hrust ...Ты ведь мои работы все просмотрел...И кучу "шакалов" нашёл....

[Купер 2 921]

Вот вы развели старые сказки о грустном. Не забывая, впрочем...

[aromatizer 4 460]

46 минут назад, Купер сказал:

Вот вы развели старые сказки о грустном.

https://youtu.be/PUIuwqrOK2Q

[Stalkersof 183]

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

[Hrust 21]

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

[2clip 300]

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

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

Пример Photoshop CS3 + Milkshape 3d https://disk.yandex.ru/i/qpHctf3spNWDzQ

К вопросу о бинте и альфе https://disk.yandex.ru/i/AKOQfU83g9ajuQ

[Hrust 21]

16.04.2023 в 10:24, 2clip сказал:

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

Нейросеть не идеальна. Альфу и цвет я раздельно прогонял. Изначально я все атласы нейронкой прогоняю, а что получается заменить -  заменяю.

[Stalk2003 0]

13.05.2023 в 17:05, Hrust сказал:

Нейросеть не идеальна. Альфу и цвет я раздельно прогонял. Изначально я все атласы нейронкой прогоняю, а что получается заменить -  заменяю

Можно по подробней (хорошо бы видео урок). Что за нейросеть, можно ссылку?

Нейросетью отделно альфу и цвет прогонять? Я правильно понял?

[Stalk2003 0]

@2clip в фотошопе (в CS6 точно) нельзя создать с нуля tga

[tihik 1 214]

@Stalk2003 создать то можно, только жутко не практично это все для редактировпния иконок, т.к. альфа-канал в tga редактируется отдельно и совпадать с иконкой всегда не будет. Это основная проблема, на мой взгляд. Да и с сохранением изменений тоже много лишних движений. Возможно для сохранения исходника с нуля или редактирования пары иконок и подойдет. Но на практике, при не единичном редактировании иконок - не стоит того времени, которое на это потратишь. Края подгонять, что-бы все красиво было, все равно ручками придется.  На полотне именно они бросаются в глаза, даже если иконка очень хорошо сделана, а края проработаны не качественно, будет лажа.

[Stalk2003 0]

@tihik насчет альфа канала не вижу проблемы, выделяем с шифтом цвет+альфу.

[Купер 2 921]

Есть же .dds без сжатия с интерполяцией (как оно там в новых...). Если уж совсем нет желания с .tga возиться.

Скрытый текст

 

[Adm-RAL 2 306]

Исходник? В tga? В dxt? 
СОЗДАТЬ с нуля исходник В ФОРМАТЕ файла? А такого вообще не бывает, нигде и никогда. Создаётся всегда ПРОЕКТ с характеристиками цветового пространства и прочими...  
Ну и лично для меня (это зависит от используемой программы), все работы с исходниками происходят в Фотошопе, а хранятся всегда в PSD, сохраняющем все характеристики рабочего пространства.
Работа с альфой... Редактировать и RGB и отдельно альфу? А можно узнать - зачем? Альфа - это лишь один из видов представления прозрачности в нашем случае! А нормальный редактор имеет своё представление прозрачности, в котором и следует работать в 99% случаев! Т.е. работать надо в среде, где прозрачность - это вот прям прозрачность, вот прям на экране!!! И только в финальной стадии у нас должна появляться альфа, которую dds-плагин прекрасно создаёт сам, особенно в случае с форматами полупрозрачности. С dxt1, т.е. где цвета альфы пастеризованы до 2, плагин иногда создаёт артефакты, это да, но это уже другой разговор и там нужна технология сохранений посложнее, но это не касается иконок, потому-что тут мы работаем всегда с полупрозрачностью, т.е. с dxt5.
Если тащим откуда-то текстуру dds в свой исходник (проект), то сначала переведите её в любой формат без сжатия с "настоящей" прозрачностью (можно хоть в том-же ФШ, маской), а потом закидывайте в проект и редактируйте как-угодно, используя какие-угодно эффекты редактора. Иначе никак. Никто не сможет вручную редактировать альфу под каждый накладываемый на RGB эффект, собирая сложную текстуру иконки, с тенями например.  А вот собрав это всё в обычном виде, альфу за вас потом плагин создаст сам.

[Hrust 21]

07.11.2023 в 14:02, tihik сказал:

альфа-канал в tga редактируется отдельно и совпадать с иконкой всегда не будет

Нет, это не проблема. В ролике я показал, как можно смещать альфу вместе с цветами. Колдун выше, к слову, меня так и не понял.