coJlHe4Hblu_noH4uk 141 Posted November 8, 2013 (edited) Что будем делать?Менять размер полупрозрачной картинки с сохранением максимума четкости. Краткая суть метода. 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 7 Quote Share this post Link to post Short link Share on other sites
POLIROID 210 #124925 Posted November 9, 2013 Зачем изобретать велосипед? Paint.NET спокойно справляеться с поставленой задачей =) А картинка для привличения внимания работает однако =) 1 Quote Share this post Link to post Short link Share on other sites
coJlHe4Hblu_noH4uk 141 #124954 Posted November 9, 2013 (edited) Зачем изобретать велосипед? Paint.NET спокойно справляеться с поставленой задачей =) А картинка для привличения внимания работает однако =) Это продвинутый велосипед. Если вы, конечно, видите разницу (слева ImajeJ, справа - Paint.NET (специально поставил, чтобы убедиться)): Paint.NET не справляется с задачей. Edited November 9, 2013 by DotNetFramework 1 1 Quote Share this post Link to post Short link Share on other sites
Mr A 750 #125130 Posted November 9, 2013 Если вы, конечно, видите разницу В таком размере и от Paint'a не увижу. 1 1 Quote Share this post Link to post Short link Share on other sites
coJlHe4Hblu_noH4uk 141 #125239 Posted November 9, 2013 В таком размере и от Paint'a не увижу. Около миникарты. Видите разницу? 2 Quote Share this post Link to post Short link Share on other sites
Ganjalezz 438 #125380 Posted November 10, 2013 Около миникарты. Видите разницу? Правая иконка немного чётче левой. Но как и сказал Mr A - в таком размере не так уж и заметно. Возможно это актуально для текста. Quote Share this post Link to post Short link Share on other sites
coJlHe4Hblu_noH4uk 141 #125393 Posted November 10, 2013 Правая иконка немного чётче левой. Но как и сказал Mr A - в таком размере не так уж и заметно. Возможно это актуально для текста. Не-не-не, текст, как показала практика, лучше "рендерить" самому в CS5/6. Там сглаживание хорошее сделали для шрифтов. ImajeJ со шрифтами работает крайне убого, imho. А по поводу предложенного мной метода - кому такая точность интерполяции нужна - будет использовать. Кому нет - не будет. 1 Quote Share this post Link to post Short link Share on other sites
minooz 138 #125874 Posted November 12, 2013 (edited) К чему примеры ресайза, если они не имеют элементов полупрозрачности? Можно прикрепить пример ресайза из действтельно большой картинки ~3000х2000 уменшив до ~1000х700 без манипуляций над резкостью? Edited November 12, 2013 by minooz 1 Quote Share this post Link to post Short link Share on other sites
coJlHe4Hblu_noH4uk 141 #125885 Posted November 12, 2013 К чему примеры ресайза, если они не имеют элементов полупрозрачности? Можно прикрепить пример ресайза из действтельно большой картинки ~3000х2000 уменшив до ~1000х700 без манипуляций над резкостью? Для того, чтобы охватить большее многообразие текстур, которое иконки с полупрозрачностью имеют редко. 'Пример 1' 'Оригинал' 'Ресайз' 'Пример 2' 'Оригинал' 'Ресайз' 1 Quote Share this post Link to post Short link Share on other sites
minooz 138 #125953 Posted November 12, 2013 , Вот спасибо, теперь понятно, это конкретно этот способ или сама прога ImajeJ? Quote Share this post Link to post Short link Share on other sites
coJlHe4Hblu_noH4uk 141 #126020 Posted November 12, 2013 (edited) , Вот спасибо, теперь понятно, это конкретно этот способ или сама прога ImajeJ? ImajeJ делает точный ресайз. На примерах видно, что он не "замыливает" "мелкие" текстуры и детали. И всё. Но он не умеет работать с масками прозрачности, поэтому просто гробит их. Предложенный метод позволяет обойти это ограничение, путем разделения исходника на 2 части - картинку без полупрозрачных элементов и черно-белую маску прозрачности. Потом они ресайзятся раздельно и объединяются в единое изображение. Edited November 12, 2013 by DotNetFramework 1 Quote Share this post Link to post Short link Share on other sites
aviva24 362 #126246 Posted November 13, 2013 ImajeJ делает точный ресайз. На примерах видно, что он не "замыливает" "мелкие" текстуры и детали. И всё. Но он не умеет работать с масками прозрачности, поэтому просто гробит их. Предложенный метод позволяет обойти это ограничение, путем разделения исходника на 2 части - картинку без полупрозрачных элементов и черно-белую маску прозрачности. Потом они ресайзятся раздельно и объединяются в единое изображение. О! Вот ЭТИМ и замени описание ImajeJ в шапке. Чтобы ДО описания процесса было понятно что и как мы пытаемся сделать. Из самого описания это не очень-то и понятно. Тогда бы и вопросов меньше бы возникло бы... )) Ну и картинки хорошо бы в шапку покрупнее и сравнимее. Т.е. там, под танком хотелось бы видеть (в ряд!): 1) крупную полупрозрачную картинку (исходник), 300х300 например; 2) ресайз до хорошо видимых деталей 64х64 просто фотошопом (или паинтом); 3) ресайз описанным способом 64х64. Тогда бы хорошо видно было все различия. А сейчас различия полупрозрачных народ не может ни разглядеть, ни сравнить. )) Quote Share this post Link to post Short link Share on other sites
coJlHe4Hblu_noH4uk 141 #126591 Posted November 13, 2013 О! Вот ЭТИМ и замени описание ImajeJ в шапке. Готово. 2 Quote Share this post Link to post Short link Share on other sites
aviva24 362 #126630 Posted November 14, 2013 Готово. Почти... )) С ImageJ всё теперь наглядно. А сейчас различия полупрозрачных народ не может ни разглядеть, ни сравнить. Тема же о них? )) Quote Share this post Link to post Short link Share on other sites
coJlHe4Hblu_noH4uk 141 #126710 Posted November 14, 2013 Почти... )) С ImageJ всё теперь наглядно. Тема же о них? )) Да. Quote Share this post Link to post Short link Share on other sites
aaturlan 5 #127604 Posted November 16, 2013 У меня не работает программа "ImageJ Resize Launcher 3.3.1"! Нажимаю на кнопку start создается папка, а в папке ничего нет! Может кто-нибудь знает как это исправить? Quote Share this post Link to post Short link Share on other sites
coJlHe4Hblu_noH4uk 141 #127631 Posted November 16, 2013 У меня не работает программа "ImageJ Resize Launcher 3.3.1"! Нажимаю на кнопку start создается папка, а в папке ничего нет! Может кто-нибудь знает как это исправить? Какой тип файла (тип, разрядность, параметры сжатия) подаете на вход? Какой задание выходной размер? 1 Quote Share this post Link to post Short link Share on other sites
aaturlan 5 #127793 Posted November 17, 2013 (edited) Какой тип файла (тип, разрядность, параметры сжатия) подаете на вход? Какой задание выходной размер? Для того что бы проверить программу я взял картинку с расширением JPEG и размером 1920х1200. В программе все выделил как на скиншоте Edited November 17, 2013 by aaturlan Quote Share this post Link to post Short link Share on other sites
coJlHe4Hblu_noH4uk 141 #127799 Posted November 17, 2013 Для того что бы проверить программу я взял картинку с расширением JPEG и размером 1920х1200. В программе все выделил как на скиншоте Попробуйте без точки с запятой. Просто требуемый размер выходного файла по длинной стороне. Quote Share this post Link to post Short link Share on other sites
aaturlan 5 #127802 Posted November 17, 2013 Попробуйте без точки с запятой. Просто требуемый размер выходного файла по длинной стороне. Так тоже попробовал все равно создается папка а внутри ничего. Quote Share this post Link to post Short link Share on other sites