Создание маски изображения на смарте.

Приветствую всех!
Так как правила требуют указать первоисточник, то автор я (Trojan_73), если мои мысли сошлись с чьими то другими, прошу не считать это плагиатом

В данной статье я самым подробнейшим образом и по возможности доступным языком опишу как создать маску к изображению, будь то иконка, водный знак или иное изображение, требующее маски.
Аналогичных статей написано уже немало, но почему то люди все равно обращаются с этими вопросами, и я решил поставить жирную точку!
Эту статью я пишу лишь потому, что меня уже забодали с подобными вопросами и дабы отделаться от них раз и навсегда.

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

Что же такое маска… Маска это черно-белый негатив картинки, который определяет прозрачные и видимые места в картинке. Места закрашенные на маске черным цветом, в итоге будут невидимы, а места закрашенные белым – видимы. Здесь следует обратить внимание на такой момент, что видимые-невидимые (белые-черные) места в маске могут быть инверсными, то есть невидимые места могут быть закрашены белым цветом, а видимые – черным, и зависит это от битности маски при ее упаковке, но об этом позже.

С понятием маски мы разобрались… идем дальше. Наибольшее количество вопросов (практически все) по созданию маски связано с тем, что в итоге на полученном изображении, вокруг видимой его части, присутствует некая грязь, а именно размытые, рваные края и разноцветные точки (пиксели). Вот с ними мы и будем бороться.

Для рисования самого рисунка и ее маски нам нужен графический редактор, для работы на смарте я рекомендую программу на питоне от werton – ImageDesigner.
Для упаковки маски и рисунка в mbm файл, в котором они в большинстве случаев используются, нам потребуется программа опять же на питоне от shrim – MBMTool.
Обе эти программы вы при небольшом усилии найдете в обменнике файлов.

Итак, открываем программу ImageDesigner и в ней картинку к которой нужно сделать маску (либо рисуем нужное изображение, как рисовать я описывать не буду, для этого есть отдельная тема на форуме).

Дабы не запутаться, будем разбирать создание маски на примере рисунка: Квадрат, левая половина которого закрашена синим цветом, а правая – красным, на белом фоне с размерами 50х50 пикселей.

Вы открыли (нарисовали) указанный рисунок. Для того, чтобы на итоговом изображении не было грязи и цветных пикселей нужно:
1. Рисовать рисунок в бОльшем размере чем нужно (при нужном изображении 50х50, рисуйте изображение с размерами 100х100).
2. Закрашивать фон (который будет невидимым) на рисунке цветом схожим с цветом самого рисунка (его краев).
3. Создавать маску так же в бОльшем размере.
4. Придать рисунку и маске нужные размеры.

Разбираемся по пунктам:
1. У нас есть вышеоткрытый рисунок квадрата, но нам нужно то же самое изображение, но в бОльшем размере.
- Увеличиваем его: Меню-Изображение-Изменение размера… Где задаем бОльшие размеры т.е. к примеру 100х100.
- При увеличении изображения вы увидите некоторое размытие границ фона и рисунка, это размытие, для создания нормальной маски нужно убрать. Просто закрашиваем размытые участки тем же цветом, что и цвет фона (цвет фона можно выбрать инструментом Пипетка – самый верхний в правом ряду панели инструментов). Закрашивать можно различными инструментами – Линия, Ломанная, Кисть, Карандаш и т.д.
- После того как вы закрасили размытые границы, сохраните этот рисунок, допустим с именем - 1. Все, с первым пунктом мы разобрались.

2. В этом пункте нам нужно закрасить цвет фона, цветом схожим с цветом краев иконки (в нашем случае левая половина квадрата – синяя, правая – красная).
- Инструментом Пипетка (самый верхний в правом ряду панели инструментов) выбираем с рисунка синий цвет квадрата.
- Инструментом Линия (четвертый сверху в левом ряду панели инструментов) проводим по белому фону границы разделяющие синий и красный цвета квадрата.
- Инструментом Заливка (шестой сверху в правом ряду панели инструментов) заливаем белый фон слева от квадрата (правая сторона фона, там где квадрат закрашен красным, должен остаться белым).
- Инструментом Пипетка (самый верхний в правом ряду панели инструментов) выбираем с рисунка красный цвет квадрата.
- Инструментом Заливка (шестой сверху в правом ряду панели инструментов) заливаем белый фон справа от квадрата (правая сторона фона, там где квадрат закрашен красным, должен стать красным, а левая остаться синей).
- Если на залитом фоне справа и слева от квадрата есть белые точки, их нужно закрасить соответствующими цветами (Карандашом, Кистью и т.п.)
- Если ваш рисунок разноцветный, но имеет одноцветную обводку, то весь фон нужно залить цветом обводки (не забывайте, вам нужно заливать фон цветом, схожим с цветом КРАЕВ рисунка).
- После того как вы закрасили фон сохраните этот рисунок под другим именем (пункт в меню Сохранить как…), допустим – 2. Со вторым пунктом закончили.

3. Теперь нужно сделать маску, так же как и рисунок в бОльшем размере.
- Открываем ранее сохраненный рисунок с именем 1.
- Заливаем фон (белый) вокруг квадрата цветом которого нет на самом рисунке (у нас например нет зеленого цвета, вот и им и зальем) инструментом Заливка (шестой сверху в правом ряду панели инструментов).
- Если на залитом фоне вокруг квадрата есть белые точки, их нужно закрасить тем же, зеленым, цветом (Карандашом, Кистью и т.п.)
- Инструментом Пипетка (самый верхний в правом ряду панели инструментов) выбираем с рисунка цвет фона (в нашем случае – зеленый).
- Создаем маску (благо программа делает это автоматически): Меню-Изображение-Преобразовать в маску. В выпавшем меню выбираем тип маски – Обратный.
- У вас должен получится рисунок – белый квадрат на черном фоне.
- Сохраняем этот рисунок (в меню пункт Сохранить, рисунок сохранится с именем первоначально открытого файла, т.е. с именем – 1). С третьим пунктом так же закончили.

4. У нас получилось два рисунка: с именем 1 – маска, с именем 2 – само изображение. Нам нужно задать им необходимые размеры (в исходном рисунке если вы не забыли они были 50х50, а в полученных – 100х100).
- Открываем первый рисунок, выбираем: Меню-Изображение-Изменение размера… и задаем нужные размеры – 50х50.
- Сохраняем рисунок.
- Открываем второй рисунок, выбираем: Меню-Изображение-Изменение размера… и задаем нужные размеры – 50х50.
- Сохраняем рисунок.
- Все, у нас получилось два рисунка с нужными размерами, 1 – маска, 2 – рисунок.

Если увеличить маску, то можно увидеть некоторое размытие границ белого и черного цветов, которое получилось при уменьшении ее размера со 100х100 до 50х50, это самое размытие будет добавлять эффект плавного перехода от видимой части рисунка к невидимой (т.е. избавит от рваных краев), а благодаря тому, что на самом рисунке фон закрашен цветом схожим с цветом изображения мы избавимся от разноцветных пикселей вокруг рисунка.
Если это покажется мелочью (закрашивание фона и прочие танцы с бубном), то вы ошибаетесь, эти мелочи как раз позволяют создать хорошую маску и в итоге нормальную работу (иконку, водный знак и т.п.).

Далее если необходимо, нужно запаковать эти 2 файла в mbm файл, в чем нам поможет MBMTool. В упаковке все просто, поэтому останавливаться на этом я не буду, остановлюсь только на битности, о которой мы говорили в самом начале. Так как мы сделали обратную маску, то ее битность нужно будет поставить на 8, а при создании нормальной маски (когда невидимые части закрашены белым, а видимые – черным) на 16 бит. Сам же рисунок на 24 бит.

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

Если заметите ошибки в статье, прошу написать об этом, по возможности исправлю.

Удачи!