Мододелам на заметку. Как правильно изменить размер полупрозрачного изображения.

[coJlHe4Hblu_noH4uk 141]

Что будем делать?
Менять размер полупрозрачной картинки с сохранением максимума четкости.

 

Краткая суть метода.

ImajeJ делает точный ресайз. На примерах ниже видно, что он не "замыливает" "мелкие" текстуры и детали. И всё. Но он не умеет работать с масками прозрачности, поэтому просто гробит их. Предложенный метод позволяет обойти это ограничение, путем разделения исходника на 2 части - картинку без полупрозрачных элементов и черно-белую маску прозрачности. Потом они ресайзятся раздельно и объединяются в единое изображение.

 

ImageJ? Ниже, открыв спойлер, можно посмотреть, почему в качестве инструмента ресайза выбран именно ImajeJ:

'Сравнение ImageJ с Adobe Photoshop и Paint.NET'

 

 
Зачем нам это нужно?
Встроенный в игровой интерфейс родной способ изменения изображений работает недостаточно качественно. На уменьшенных изображениях появляются "лесенки". Теряются детали картинки. Подробнее речь идет о коде типа такого:

"format": "<img src='xvmres://img/icons/help.png' width='33' height='33'>"

Какие инструменты нам нужны?

• Photoshop или любой другой софт, который умеет сохранять маску прозрачности и работать со слоями.
• ImageJ Resize Launcher - замечательнейшая программа для изменения размера изображений с сохранением четкости. Её единственный недостаток - при ресайзе полупрозрачных изображений она заливает прозрачные участки белым, с чем мы и будем бороться в  этой статье.

Где скачать необходимое?

• Ссылок на Photoshop по понятным причинам не привожу. Для разовой операции можно обойтись и 30-дневной пробной версией, скачав её с сайта производителя.
• Свежую версию ImageJ Resize Launcher всегда можно скачать напрямую в теме автора на сайте club.foto.ru (зеркало).

Картинка для привлечения внимания (до и после ресайза):

 

Начнем.

• Откроем наше полупрозрачное изображение в Photoshop (для наглядности две картинки объединены в одну):

• Зажав клавишу Ctrl, кликнем по пиктограмме единственного имеющегося у нас слоя, создав выделение:

• Создадим новый корректирующий слой "Цвет", вызвав меню как показано на скриншоте ниже:

• В окне выбора цвета выбираем белый:

• Создадим новый корректирующий слой "Цвет", вызвав меню уже известным нам способом, цвет выбираем черный:

• У нас получается три слоя.
• Перетаскиваем верхний слой на участок между средним и нижним слоем:

• Должно получиться такое изображение (маска прозрачности, где черный цвет означает 100% прозрачности, белый - 0% :

• Файл -> Сохранить как -> Выбираем настройки, как показано на скриншоте:

• В меню настрое формата TIFF выберем следующие опции:

http://i58.fastpic.ru/big/2013/1109/2f/b69b5e99fd44b9db522f63d31f0f002f.jpg

• Откроем наше исходное изображение заново:

• Многократно повторяем нажатие сочетаний клавиш Ctrl+J -> Ctrl+Shift+E -> Ctrl+J -> Ctrl+Shift+E -> Ctrl+J -> Ctrl+Shift+E .... , добившись полного превращения полупрозрачных областей в непрозрачные:

• Сохраним изображение с теми же настройками, что и раньше, указав имя img, к примеру.
• Закрываем Photoshop, после чего запустим ImageJ Resize Launcher, перетащим на него наши сохраненные изображения, в качестве выходного формата выберем PNG (Только не JPG!!!), остальное по вкусу. 64px выбрано учитывая следующее правило - размер изображения будет пропорционально уменьшен (увеличен) по длинной стороне до 64px. Нажимаем start и получаем два уменьшенных изображения:

 

• Откроем оба в Photoshop, перейдем на наше черно-белое изображение, выделим его, нажав Ctrl+A, скопируем в буфер обмена, нажав Ctrl+C, затем перейдем на цветное изображение и вставим скопированную в память картинку сочетанием клавиш Ctrl+V. Должно получиться два слоя, как на скриншоте:

• Перейдем во вкладку "каналы", затем, зажав Ctrl, кликнем на канале RGB:

• Перейдем назад на вкладку "слои", выберем нижний слой, а затем нажмем сочетание клавиш Ctrl+J, должно получиться три слоя, как показано на рисунке ниже:

• Скроем, нажав на "глаз" самый нижний и самый верхний слои:

• Файл -> Сохранить как -> В поле формат выбираем PNG, в опциях сохранения для Сжатия ставим "самый маленький/медленно", для пункта чересстрочно - "снять выделение". Готово. Вот как будет выглядеть наша картинка в наложении на реальную графику:

 

 

 

UPD. 1: Для придания дополнительной четкости советую обратиться к методу, описанному в этой статье.

 

"Звенящей" вам резкости и успехов на полях сражений!

Edited November 18, 2013 by DotNetFramework

[POLIROID 210]

Зачем изобретать велосипед? Paint.NET спокойно справляеться с поставленой задачей =) А картинка для привличения внимания работает однако =)

[coJlHe4Hblu_noH4uk 141]

Зачем изобретать велосипед? Paint.NET спокойно справляеться с поставленой задачей =) А картинка для привличения внимания работает однако =)

Это продвинутый велосипед. Если вы, конечно, видите разницу (слева ImajeJ, справа - Paint.NET (специально поставил, чтобы убедиться)):

 

 

 

Paint.NET не справляется с задачей.

Edited November 9, 2013 by DotNetFramework

[Mr A 750]

 

 

Если вы, конечно, видите разницу

В таком размере и от Paint'a не увижу.

[coJlHe4Hblu_noH4uk 141]

В таком размере и от Paint'a не увижу.

 

Около миникарты. Видите разницу?

 

[Ganjalezz 438]

Около миникарты. Видите разницу?

Правая иконка немного чётче левой. Но как и сказал Mr A - в таком размере не так уж и заметно.

Возможно это актуально для текста.

[coJlHe4Hblu_noH4uk 141]

Правая иконка немного чётче левой. Но как и сказал Mr A - в таком размере не так уж и заметно.

Возможно это актуально для текста.

 

Не-не-не, текст, как показала практика, лучше "рендерить" самому в CS5/6. Там сглаживание хорошее сделали для шрифтов. ImajeJ со шрифтами работает крайне убого, imho.

А по поводу предложенного мной метода - кому такая точность интерполяции нужна - будет использовать. Кому нет - не будет.

[minooz 138]

К чему примеры ресайза, если они не имеют элементов полупрозрачности?

Можно прикрепить пример ресайза из действтельно большой картинки ~3000х2000 уменшив до ~1000х700 без манипуляций над резкостью?

Edited November 12, 2013 by minooz

[coJlHe4Hblu_noH4uk 141]

К чему примеры ресайза, если они не имеют элементов полупрозрачности?

Можно прикрепить пример ресайза из действтельно большой картинки ~3000х2000 уменшив до ~1000х700 без манипуляций над резкостью?

 

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

 

'Пример 1'

'Оригинал'

'Ресайз'

'Пример 2'

'Оригинал'

'Ресайз'

[minooz 138]

, Вот спасибо, теперь понятно, это конкретно этот способ или сама прога ImajeJ?

[coJlHe4Hblu_noH4uk 141]

, Вот спасибо, теперь понятно, это конкретно этот способ или сама прога ImajeJ?

 

ImajeJ делает точный ресайз. На примерах видно, что он не "замыливает" "мелкие" текстуры и детали. И всё. Но он не умеет работать с масками прозрачности, поэтому просто гробит их. Предложенный метод позволяет обойти это ограничение, путем разделения исходника на 2 части - картинку без полупрозрачных элементов и черно-белую маску прозрачности. Потом они ресайзятся раздельно и объединяются в единое изображение.

Edited November 12, 2013 by DotNetFramework

[aviva24 362]

ImajeJ делает точный ресайз. На примерах видно, что он не "замыливает" "мелкие" текстуры и детали. И всё. Но он не умеет работать с масками прозрачности, поэтому просто гробит их. Предложенный метод позволяет обойти это ограничение, путем разделения исходника на 2 части - картинку без полупрозрачных элементов и черно-белую маску прозрачности. Потом они ресайзятся раздельно и объединяются в единое изображение.

О!

Вот ЭТИМ и замени описание ImajeJ в шапке.

Чтобы ДО описания процесса было понятно что и как мы пытаемся сделать. Из самого описания это не очень-то и понятно.

Тогда бы и вопросов меньше бы возникло бы... ))

 

Ну и картинки хорошо бы в шапку покрупнее и сравнимее.

Т.е. там, под танком хотелось бы видеть (в ряд!):

1) крупную полупрозрачную картинку (исходник), 300х300 например;

2) ресайз до хорошо видимых деталей 64х64 просто фотошопом (или паинтом);

3) ресайз описанным способом 64х64.

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

[coJlHe4Hblu_noH4uk 141]

О!

Вот ЭТИМ и замени описание ImajeJ в шапке.

 

Готово.

[aviva24 362]

Готово.

Почти... ))

С ImageJ всё теперь наглядно.

 

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

Тема же о них? ))

[coJlHe4Hblu_noH4uk 141]

Почти... ))

С ImageJ всё теперь наглядно.

 

Тема же о них? ))

 

Да.

[aaturlan 5]

У меня не работает программа "ImageJ Resize Launcher 3.3.1"! Нажимаю на кнопку start создается папка, а в папке ничего нет! Может кто-нибудь знает как это исправить?

[coJlHe4Hblu_noH4uk 141]

У меня не работает программа "ImageJ Resize Launcher 3.3.1"! Нажимаю на кнопку start создается папка, а в папке ничего нет! Может кто-нибудь знает как это исправить?

Какой тип файла (тип, разрядность, параметры сжатия) подаете на вход? Какой задание выходной размер?

[aaturlan 5]

Какой тип файла (тип, разрядность, параметры сжатия) подаете на вход? Какой задание выходной размер?

Для того что бы проверить программу я взял картинку с расширением JPEG и размером 1920х1200. В программе все выделил как на скиншоте

Edited November 17, 2013 by aaturlan

[coJlHe4Hblu_noH4uk 141]

Для того что бы проверить программу я взял картинку с расширением JPEG и размером 1920х1200. В программе все выделил как на скиншоте

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

[aaturlan 5]

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

Так тоже попробовал все равно создается папка а внутри ничего.