Создание маски изображения на смарте
Автор: Troyan_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 бит.