coJlHe4Hblu_noH4uk Posted November 8, 2013 Share 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 Link to comment Short link Share on other sites More sharing options...
POLIROID Posted November 9, 2013 Share Posted November 9, 2013 Зачем изобретать велосипед? Paint.NET спокойно справляеться с поставленой задачей =) А картинка для привличения внимания работает однако =) 1 @ Quote Link to comment Short link Share on other sites More sharing options...
coJlHe4Hblu_noH4uk Posted November 9, 2013 Author Share Posted November 9, 2013 (edited) Зачем изобретать велосипед? Paint.NET спокойно справляеться с поставленой задачей =) А картинка для привличения внимания работает однако =) Это продвинутый велосипед. Если вы, конечно, видите разницу (слева ImajeJ, справа - Paint.NET (специально поставил, чтобы убедиться)): Paint.NET не справляется с задачей. Edited November 9, 2013 by DotNetFramework 1 1 @ Quote Link to comment Short link Share on other sites More sharing options...
Mr A Posted November 9, 2013 Share Posted November 9, 2013 Если вы, конечно, видите разницу В таком размере и от Paint'a не увижу. 1 1 @ Quote Link to comment Short link Share on other sites More sharing options...
coJlHe4Hblu_noH4uk Posted November 9, 2013 Author Share Posted November 9, 2013 В таком размере и от Paint'a не увижу. Около миникарты. Видите разницу? 2 @ Quote Link to comment Short link Share on other sites More sharing options...
Ganjalezz Posted November 10, 2013 Share Posted November 10, 2013 Около миникарты. Видите разницу? Правая иконка немного чётче левой. Но как и сказал Mr A - в таком размере не так уж и заметно. Возможно это актуально для текста. @ Quote Link to comment Short link Share on other sites More sharing options...
coJlHe4Hblu_noH4uk Posted November 10, 2013 Author Share Posted November 10, 2013 Правая иконка немного чётче левой. Но как и сказал Mr A - в таком размере не так уж и заметно. Возможно это актуально для текста. Не-не-не, текст, как показала практика, лучше "рендерить" самому в CS5/6. Там сглаживание хорошее сделали для шрифтов. ImajeJ со шрифтами работает крайне убого, imho. А по поводу предложенного мной метода - кому такая точность интерполяции нужна - будет использовать. Кому нет - не будет. 1 @ Quote Link to comment Short link Share on other sites More sharing options...
minooz Posted November 12, 2013 Share Posted November 12, 2013 (edited) К чему примеры ресайза, если они не имеют элементов полупрозрачности? Можно прикрепить пример ресайза из действтельно большой картинки ~3000х2000 уменшив до ~1000х700 без манипуляций над резкостью? Edited November 12, 2013 by minooz 1 @ Quote Link to comment Short link Share on other sites More sharing options...
coJlHe4Hblu_noH4uk Posted November 12, 2013 Author Share Posted November 12, 2013 К чему примеры ресайза, если они не имеют элементов полупрозрачности? Можно прикрепить пример ресайза из действтельно большой картинки ~3000х2000 уменшив до ~1000х700 без манипуляций над резкостью? Для того, чтобы охватить большее многообразие текстур, которое иконки с полупрозрачностью имеют редко. 'Пример 1' 'Оригинал' 'Ресайз' 'Пример 2' 'Оригинал' 'Ресайз' 1 @ Quote Link to comment Short link Share on other sites More sharing options...
minooz Posted November 12, 2013 Share Posted November 12, 2013 , Вот спасибо, теперь понятно, это конкретно этот способ или сама прога ImajeJ? @ Quote Link to comment Short link Share on other sites More sharing options...
coJlHe4Hblu_noH4uk Posted November 12, 2013 Author Share Posted November 12, 2013 (edited) , Вот спасибо, теперь понятно, это конкретно этот способ или сама прога ImajeJ? ImajeJ делает точный ресайз. На примерах видно, что он не "замыливает" "мелкие" текстуры и детали. И всё. Но он не умеет работать с масками прозрачности, поэтому просто гробит их. Предложенный метод позволяет обойти это ограничение, путем разделения исходника на 2 части - картинку без полупрозрачных элементов и черно-белую маску прозрачности. Потом они ресайзятся раздельно и объединяются в единое изображение. Edited November 12, 2013 by DotNetFramework 1 @ Quote Link to comment Short link Share on other sites More sharing options...
aviva24 Posted November 13, 2013 Share Posted November 13, 2013 ImajeJ делает точный ресайз. На примерах видно, что он не "замыливает" "мелкие" текстуры и детали. И всё. Но он не умеет работать с масками прозрачности, поэтому просто гробит их. Предложенный метод позволяет обойти это ограничение, путем разделения исходника на 2 части - картинку без полупрозрачных элементов и черно-белую маску прозрачности. Потом они ресайзятся раздельно и объединяются в единое изображение. О! Вот ЭТИМ и замени описание ImajeJ в шапке. Чтобы ДО описания процесса было понятно что и как мы пытаемся сделать. Из самого описания это не очень-то и понятно. Тогда бы и вопросов меньше бы возникло бы... )) Ну и картинки хорошо бы в шапку покрупнее и сравнимее. Т.е. там, под танком хотелось бы видеть (в ряд!): 1) крупную полупрозрачную картинку (исходник), 300х300 например; 2) ресайз до хорошо видимых деталей 64х64 просто фотошопом (или паинтом); 3) ресайз описанным способом 64х64. Тогда бы хорошо видно было все различия. А сейчас различия полупрозрачных народ не может ни разглядеть, ни сравнить. )) @ Quote Link to comment Short link Share on other sites More sharing options...
coJlHe4Hblu_noH4uk Posted November 13, 2013 Author Share Posted November 13, 2013 О! Вот ЭТИМ и замени описание ImajeJ в шапке. Готово. 2 @ Quote Link to comment Short link Share on other sites More sharing options...
aviva24 Posted November 14, 2013 Share Posted November 14, 2013 Готово. Почти... )) С ImageJ всё теперь наглядно. А сейчас различия полупрозрачных народ не может ни разглядеть, ни сравнить. Тема же о них? )) @ Quote Link to comment Short link Share on other sites More sharing options...
coJlHe4Hblu_noH4uk Posted November 14, 2013 Author Share Posted November 14, 2013 Почти... )) С ImageJ всё теперь наглядно. Тема же о них? )) Да. @ Quote Link to comment Short link Share on other sites More sharing options...
aaturlan Posted November 16, 2013 Share Posted November 16, 2013 У меня не работает программа "ImageJ Resize Launcher 3.3.1"! Нажимаю на кнопку start создается папка, а в папке ничего нет! Может кто-нибудь знает как это исправить? @ Quote Link to comment Short link Share on other sites More sharing options...
coJlHe4Hblu_noH4uk Posted November 16, 2013 Author Share Posted November 16, 2013 У меня не работает программа "ImageJ Resize Launcher 3.3.1"! Нажимаю на кнопку start создается папка, а в папке ничего нет! Может кто-нибудь знает как это исправить? Какой тип файла (тип, разрядность, параметры сжатия) подаете на вход? Какой задание выходной размер? 1 @ Quote Link to comment Short link Share on other sites More sharing options...
aaturlan Posted November 17, 2013 Share Posted November 17, 2013 (edited) Какой тип файла (тип, разрядность, параметры сжатия) подаете на вход? Какой задание выходной размер? Для того что бы проверить программу я взял картинку с расширением JPEG и размером 1920х1200. В программе все выделил как на скиншоте Edited November 17, 2013 by aaturlan @ Quote Link to comment Short link Share on other sites More sharing options...
coJlHe4Hblu_noH4uk Posted November 17, 2013 Author Share Posted November 17, 2013 Для того что бы проверить программу я взял картинку с расширением JPEG и размером 1920х1200. В программе все выделил как на скиншоте Попробуйте без точки с запятой. Просто требуемый размер выходного файла по длинной стороне. @ Quote Link to comment Short link Share on other sites More sharing options...
aaturlan Posted November 17, 2013 Share Posted November 17, 2013 Попробуйте без точки с запятой. Просто требуемый размер выходного файла по длинной стороне. Так тоже попробовал все равно создается папка а внутри ничего. @ Quote Link to comment Short link Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.