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

[Hrust 20]

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

 

Приветствую, на связи товарищ 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 Марта пользователем Hrust
Обновил атласы.

[Romann 598]

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

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

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

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

[Zander_driver 9 782]

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

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

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

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

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

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

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

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

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

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

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

[aromatizer 3 760]

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

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

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

[Hrust 20]

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

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

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

[dog19601 1 310]

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

Да, @dog19601?)

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

[Купер 1 737]

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

[aromatizer 3 760]

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

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

https://youtu.be/PUIuwqrOK2Q

[Stalkersof 81]

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

[Hrust 20]

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

[2clip 300]

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

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

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

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

[Hrust 20]

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

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

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