без появления артефактных цветных ореолов по краям изображения.
Сначала взглянем на проблему. Вот она - смотрим на фиолетовые ореолы вокруг логотипа с лучником:
Откуда же они взялись? Проблема в том, что края картинки смешались с фиолетовым ключевым цветом ("прозрачным" цветом). А полученные промежуточные цвета (оттенки фиолетового) уже не являются ключевыми и отображаются. Типичный результат неряшливой работы горе-"дизайнера".
Мы рассмотрим частный случай борьбы с этим безобразием. Дано: у нас есть картинка с ключевым цветом, целая, с неповрежденными границами; но нам ее надо уменьшить, и причем так, чтобы "цветная аура" не возникла.
Всё началось с того, что я нашел вот эту прелестную девчонку:
Милая, правда? Но кое-что у нее не в порядке: нарушены пропорции. Это потому, что она с игрового автомата 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 часа. Надеюсь, эта заметка кому-нибудь пригодится.
