[i] Грамотно изменяем размер картинки с прозрачным цветом

Всякий интересный оффтопик - вещи, которые не касаются Рагнарька или OpenKore, но тем не менее могут быть интересны.

Модератор: 4epT

Аватара пользователя
piroJOKE
Модератор
Сообщения: 8204
Зарегистрирован: Сб ноя 04, 2006 2:20 am
Сервер RO:: localhost
Откуда: Molvania

[i] Грамотно изменяем размер картинки с прозрачным цветом

Сообщение piroJOKE »

Изменяем размер картинки с ключевым цветом прозрачности
без появления артефактных цветных ореолов по краям изображения.


Сначала взглянем на проблему. Вот она - смотрим на фиолетовые ореолы вокруг логотипа с лучником:

Изображение

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

Мы рассмотрим частный случай борьбы с этим безобразием. Дано: у нас есть картинка с ключевым цветом, целая, с неповрежденными границами; но нам ее надо уменьшить, и причем так, чтобы "цветная аура" не возникла.

Всё началось с того, что я нашел вот эту прелестную девчонку:

Изображение

Милая, правда? Но кое-что у нее не в порядке: нарушены пропорции. Это потому, что она с игрового автомата CPS2, а у них пиксель не квадратный, а прямоугольный... М-да, и такое бывает! Чтобы всё исправить, изображение надо сжать по горизонтали на 22%.

Открываем нашу милую девчушку в фотошопе. Сразу делаем дубль слоя.

Изображение

Оранжевый цвет - ключевой. (На самом деле он был типичным ярко-фиолетовым... ну вы знаете, да? Я его заменил сразу оранжевым, чтобы не вылазили глаза во время работы над иллюстрациями).

Выделяем МэджикВандом этот цвет. Обращаем внимание на настройки: чувствительность границы 1, сглаживание выключено, непрерывное поле выключено.

Изображение

Удаляем оранжевое выделение - кнопка Del. Отключаем начальный слой фона с исходной картинкой.

Изображение

Делаем дубль нашего последнего слоя и применяем к нему эффект "Минимум" с радиусом 1 или 2 пикселя. Смотрите, какая замарашка у нас получилась:

Изображение

Ничего, этот макияж пойдет нашей дамочке на пользу. ;) Меняем верхние слои местами - прячем "замарашку" под красивую картинку. Теперь я включаю-выключаю слой "замарашки". Смотрите, как это выглядит:

Изображение

Полагаю, самые догадливые читатели уже уловили, в чем фокус метода, и что будет дальше. :)

Мы просто нарастили нашей девушке контур из пикселей того же цвета, что и ее граница картинки.

Объединяем видимые слои:

Изображение

Отключаем текущий слой с девчушкой. Добавляем новый пустой слой. Переключаемся на слой с изначальным оранжевым изображением. Еще раз берем МеджикВандом оранжевое поле, точно так же. Инвертируем выделение, Ctrl-Shift-I. Переключаемся на наш пустой новый слой. Берём карандаш диаметром побольше, с жесткими краями (не кисточку!). Выбираем черный цвет. Тщательно(!) зарисовываем нашу бедолагу:

Изображение

Подготовительные работы закончены. Изменяем размер картинки...

Изображение

Выделяем слой с черным силуэтом, Ctrl-A. Копируем его, создаем новый документ, "вставить". Преобразовать в оттенки серого, преобразовать в двухцветный битмап, с отсечкой по 50%-й границе, без штриховки.

Изображение

Выделяем всё, копируем. Переключаемся на наш оранжевый документ, "вставить". Теперь надо совместить слои. Ставим прозрачность этого нашего белого слоя около 50%. И, возим его стрелочками курсора, пока точно не совместим с предыдущим черным силуэтом:

Изображение

Совместили. Восставнавливаем накрученную прозрачность. Старый слой силуэта удаляем. На новом слое клацаем МеджикВандом по белому...

Изображение

...и удаляем белое поле. Теперь тыкаем МеджикВандом в прозрачный цвет. Вот такое выделение должно получиться:

Изображение

Да, так в чем же отличие этого нашего нового силуэта от старого? В том, что он двухцветный - у него абсолютно резкие края, без всякой полупрозрачности, которая возникла от масштабирования картинки.

Ээээ... вы не утомились? Я намерен немного развлечься. Теперь сделаем так, как обычно делают г-да пираты. Просто залить ключевым цветом фон исходной картинки и отмасштабировать её. Ведь это куда проще и быстрее, не так ли? ;) Вот что было бы, если бы мы не позаботились о резкой маске. Я залил всё фиолетовым, уменьшил картинку и удалил ключевой цвет - и появилась та самая фиолетовая кайма:

Изображение

Отчего же именно так всегда поступают г-да пираты? Причины две: а) они ленивы б) они дубы. А как правило - и то, и другое вместе. Результат - кал.

Ладно, вернёмся к "правильному пути".

Вот как выглядит наш силуэт под увеличением. Видите? Абсолютно резкие края, как я и говорил:

Изображение

Надеюсь, у вас не сбилось выделение, да? Отключаем слой силуэта, включаем девушку, делаем ее слой текущим. Мы уже немного по ней соскучились. ;) Смотрите - все "потерпевшие" пиксели находятся за нашим выделением:

Изображение

Удаляем лишние пиксели - Del. Вот в чем разница - поглядите на отличие нашей работы и бакграунда. Мы сохранили резкую границу ключевого цвета, ура!

Изображение

Вот что получилось. Мы уже почти закончили, правда есть ещё одно "но"...

Изображение

Дело в том, что при уменьшении картинки неминуемо пропадает резкость. Нам следует ее хоть частично восстановить. Эффект Sharpen. Однако, для маленьких картинок его действие чрезмерно - появляются ненужные ореолы вокруг контрастных деталей. Уменьшаем эффект через Edit... fade Sharpen. Оптимальная граница "отката" к 30...50%. Вот иллюстрация, тут 3 картинки - исходная, затем с увеличенной резкостью, и затем с небольшим "фейдом". Я специально увеличил картинку, т.к. на хилых мониторах разницу в резкости часто и не видно:

Изображение

Теперь лучше всего уменьшить к-во цветов до 256: преобразование - индексный цвет. На этом этапе балуемся методом подбора палитры (Palette...) и интенсивно клацаем preview на тему достижения наилучшего качества.

Изображение

Вот самый лучший способ проверки, не облажались ли мы где. Смотрим палитру картинки (color table). Видите? У меня только один(!) оранжевый цвет в табличке. Это значит, что никаких "аур" у нас не будет - мы везде побороли полупрозрачность на границе картинки!

Изображение

Ну-с, вот и сухой результат. Мы восстановили правильные пропорции картинки, и умудрились её не угробить при этом. Кавай! ^___^

Изображение

Теперь можно впечатывать нашу милую даму куда угодно, не боясь, что она испортит нам фон. Всё!

Изображение


В статье использована графика из игр Quiz Nanairo Dreams и Money Puzzle Exchanger.

ЗЫ: Это я себе фон на мобилку делал. :)

ЗЗЫ: На обработку картинки ушло 7 минут. На написание статьи - 3 часа. Надеюсь, эта заметка кому-нибудь пригодится.
Последний раз редактировалось piroJOKE Чт апр 17, 2008 4:04 pm, всего редактировалось 2 раза.
Use brain against brain, ai against ai... · как правильно задавать вопросы · faq · download
Аватара пользователя
Aib0
Бывалый
Сообщения: 961
Зарегистрирован: Чт ноя 16, 2006 12:50 am

Сообщение Aib0 »

Неплохо)
Wtf is "OpenKore"?

"What we're dealing with here is a total lack of respect for the law"
Asacura
Грамотный
Сообщения: 403
Зарегистрирован: Сб фев 03, 2007 11:07 pm
Откуда: Эстония;)

Сообщение Asacura »

большое спасибо=)
Изображение
Нет добра и зла,есть разные мнения, разные противостоящие стороны. :)
Аватара пользователя
piroJOKE
Модератор
Сообщения: 8204
Зарегистрирован: Сб ноя 04, 2006 2:20 am
Сервер RO:: localhost
Откуда: Molvania

Сообщение piroJOKE »

Еще одна тонкость касабельно "правильного" уменьшения картинки.

Ясно, что если увеличивать картинку, она неизменно "портится". Этого делать нельзя. В таких случаях надо искать другую картинку, более крупным изображением; т.е. - опять таки, в конечном итоге - не увеличивать картинку, а уменьшать.

Однако, и при уменьшении есть шанс закоцать картинку. Вот один из приемов, который позволит уменьшить брак. Основна идея - при уменьшении теряется резкость (картинка А). Первое, что приходит в голову - навести резкость после уменьшения (картинка Б). Однако, "правильные" пацаны сперва наводят резкость, а потом уменьшают (картинка Ц). Этот вариант считается дающим наилучшие разультаты. Видите? - резкость визуально выше, чем на исходной картинке, но никаких лишних ореолов вокруг резких границ цветов.

Кстати, в Фотошопе есть специальный режим, делающий примерно это же одним махом. Image Size -> Resample Image -> Bicubic Sharper.

Почти оффтоп: Ну, и наконец экстремальная ерунда - наведение резкости и до, и после уменьшения (картинка Д). Можно рекомендовать только либо в случае уменьшения очень большой картинки в очень маленькую, либо, если оригинал сам по себе был нерезкий.
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Use brain against brain, ai against ai... · как правильно задавать вопросы · faq · download
Аватара пользователя
z-0091
Грамотный
Сообщения: 216
Зарегистрирован: Сб дек 06, 2008 1:00 pm
Сервер RO:: LaGGeme
Откуда: Самара-большой и красивый город

Re: [i] Грамотно изменяем размер картинки с прозрачным цветом

Сообщение z-0091 »

мой дедушка всегда говорит, "Главное в тему" :lol:
Нужен макрос но не хватает моЗга? Хочешь хорошо настроенного бота но ЛенЬ? Я Готов помочь тебе за Сущие копейки xD.
TolikEbolik
Новичок
Сообщения: 11
Зарегистрирован: Сб дек 15, 2018 11:59 am
Сервер RO:: 4game

[i] Грамотно изменяем размер картинки с прозрачным цветом

Сообщение TolikEbolik »

Во спасибо за лайфхак.
bikkihirze
Новичок
Сообщения: 10
Зарегистрирован: Сб май 11, 2019 1:57 am

[i] Грамотно изменяем размер картинки с прозрачным цветом

Сообщение bikkihirze »

Жаль картинки не прогружаются