How to change the color of complex graphics?

I have a graphic in Adobe Illustrator (say, a cat) that I want to use in an Android app. I would like the user to be able to change the color of the fur using a set of colors. What can I save the graphics as (SVG?) To allow me to programmatically control the color using the Android app? Should I have a separate image for each cat color?

+4
source share
5 answers

Theres also a simple trick for color mixing without having to touch pixel data. Just save multiple versions of the image with shifted colors, read them in the app, overlay them and use alpha blending to blend them. Thus, you can achieve a smooth color change without much effort. (Ive done it, just not on Android.)

Reply to comment so that I have more space: Yes, three R / G / B images will work. If you want to have more color options, you can prepare six images with a hue rotated 60 degrees from each other (60/120/180/240/300/360). This can be easily done in your bitmap editor of your choice, as the Hue / Saturation dialog box in the Pixelmator looks like:

Shade Offset http://zoul.fleuron.cz/tmp/hue.jpg

Then you just show two of them at a time, hold the lower alpha in one and change the upper alpha from 0 to 1. When you reach 1, you will hide the lower image and display the next alpha in the foreground. Repeat the libitum declaration. This will give you many shades of color with smooth mixing and little work.

+5
source

You do not need multiple images - you can do this with a single image - use any format supported on the target platform. Android supports PNG, GIF and JPG - I would choose PNG or JPG, with settings for JPG, since this is apparently a photograph.

Assuming that the existing image has a color (i.e. not black or white fur), you can change the colors of the fur either to

  • coloring the image - it forces all the colors to the specified hue
  • hue - this shifts the hue of all colors by a given amount

To implement this. you can use jjil - Jon imaging library - designed for mobile devices with specific Android support.

To implement both of the above transforms, follow these steps:

  • first convert image to HSV using RgbHsv pipeline stage
  • convert the desired color of the wool RGB to HSV (for example, red fur is required; convert rgb (red) to hsv (red). ( Code example ).
  • Then you chose the way to change the color of the image - either by setting H (hue) for each pixel to the same hue value as the desired color of the fur (from step 2), or adding the difference of the selected hue to the hue of the image pixel (module 255) to get the change shade. You can also scale the V value to provide lighter or darker shades of fur.
  • The HSV values ​​of the image are then converted back to rgb. There is no HsvRgb filter in the jjil library, but this can be implemented as the inverse of RgbHsv. Here is the HSV2RGB function.

If other colors are important in the image, you can leave them unchanged and apply the conversion only to certain colors in the image. You check the current HSV value, and if the hue, S, or V values ​​are outside of the ones you don't want to change, you just don't change these values. For example, if a cat has green eyes and brown fur, you skip the HSV values, where H indicates a shade of green - leaving this color, and the eyes remain unchanged.

+5
source

You can use any image format with an indexed color palette. GIF is a good example, JPEG is not.

Then just change the bytes of the image palette in the file and change the color of the fur.

GIF Wikipedia article on GIF explains where the file palette data and its format are located.

0
source

If you are talking about linear art, then SVG is a good choice, because the built-in XHTML properties make it available for scripting in Gecko or Webkit through Javascript. Then you can only target hair nodes and set the color property in real time.

SVG also supports links and cloning, so you may need to change the color in one place and configure all of your hair nodes to inherit it.

LINK ADDED: https://launchpad.net/libsvg-android

0
source

You just have an alpha image that is superimposed on a solid color layer that the user controls.

0
source

Source: https://habr.com/ru/post/1312463/


All Articles