Q: Image Size & Color Matching?


#1

Howdy,

I’m using the Jucer to insert background and button images that our graphic designer has created in Illustrator, and I’m encountering some strange issues try to get image dimensions (and colors) to match up. Caveat: It seems to me that the graphic designer should be able to answer some of these questions, but he can’t, so it’s possible that he’s doing something wrong.

Here’s an example: I have a stereo input fader strip component with two channels worth of faders in it. There are a series of several of these placed butting up against each other left to right. Each component has the same background image, a .png, and the component is 100 pixels wide and 402 high. The designer uses Illustrator to make a 100 x 402 .png. Windows tells me the image is 100 x 402 when I ask it about the image dimensions.

I get a little confused when I bring the image into the Jucer. I have set the dimensions of the component to 100 x 402. I set the image source to the .png. If I now hit ‘reset to image size’, the Jucer changes the dimensions of my component to 101 x 403. Huh? I reset the dimensions to 100 x 402, and the images seem to ‘fit’ and to butt up to each other, but there are weird effects on the left edge - a thin black line on the far left, and ‘harder’ edges in between cells than in the middle of the cell (where the mating was done in Illustrator). (I recognize that the latter may have to do with cropping and anti-aliasing in Illustrator, just thought I’d put it out in case someone knows for sure.)

I should note that I don’t really understand the ‘stretch mode’ options. I’m using ‘Stretched to fit’, but ‘Maintain aspect ratio’ sounds pretty good too, and I’m not even really sure that ‘Maintain aspect ratio, only reduce in size’ isn’t for me. What do these mean? Am I on the wrong setting - I’m always setting my component’s dimensions to be the same as those of the image I’m using (not ‘reset to image size’, though, as that always adds one to each dimension).

Also, the graphic designer provides me with colors he has extracted using Illustrator. When I enter the color values into, say, Jucer rectangles, the colors don’t quite match when the rectangle is put next to the image. He’s giving me RGB values in hexadecimal and I’m putting them into the right fields and setting the alpha to 0xFF, anyone have any ideas how it’s possible for them to not match? (Any Illustrator gurus know of a reason Illustrator might be fooling him?)

Thanks,
Alex


#2

That’s a bit strange - if you want to send me one of these pngs I’ll take a quick look and see if it’s a bug.

Having different colours values will probably be because of some kind of colourspace that illustrator is applying somewhere, but I don’t know anything about illustrator, I’m afraid.


#3

actually, I just checked and there’s a rounding error that’s getting the size wrong - I’ll sort that out…


#4

Howdy Jules,

Yeah, the color issues seem to be Illustrator user error related. Apparently Photoshop is the proper tool for what we’re doing - our designer is switching over and the edge/size issues are going away. Hopefully the color ones will be fixed as well.

So, while you are fixing the roundoff issue, should I just keep using components sized for the image and ‘stretch to fit’?

Thanks,
Alex


#5

I’ve fixed the rounding issue. If the component is the same size as the image, then it won’t matter which mode you use.