I have an UIImageView with a brown image that will not always reach the top part. The UIImage view is inside a white UIView.
So, because the top part of the image is a linear brown color, I said I will make the UIView underneath it the same brown color, and the user will not see where the image ends. So far, so good.
My problem is, when I pick the color in the top part of the image, the color picker picks a more darker color than actually is there :(
Before I click the color picker:
After I click the color picker:
How comes ?
Just wanted to elaborate upon the accepted answer with some screenshots.
If you want to match RGB values between Photoshop and Xcode exactly (without conversion between colorspaces) then you need to save your images in generic RGB and enter any dropper values using the generic RGB colorspace.
When you choose "Save for Web & Devices" from Photoshop, uncheck the "Convert to sRGB" box.
In Xcode, click the colorspace popup in the color picker and choose "Generic RGB", then enter the red, green and blue values from Photoshop, NOT THE HEX VALUE as this reverts back to the sRGB colorspace for some reason (be careful not to tab to the hex field either, as that also changes the colorspace to sRGB).
More info here, including how to match screenshots.
I've managed to find out a solution/explanation (tho I'm still confused) in this answer: https://stackoverflow.com/a/9203647/460750
Basically, what I did to solve my issues, was to choose from the RGB "types" select (that little square under the color picker) the Apple RGB option, and enter the R, G and B values manually, instead of using the picker.
Odd...
Its because the component numbers don’t spec a color. We also need to know the color space which xCode uses. Colorspace which encodes or decodes is available in the drop down left to the RGB slider.
By default xCode chooses the "Generic RGB" and that is what UIColor uses spec color from RGB. If we use magnifying glass, it will change to "Device RGB” space and that is based on your current screen.
So “sRGB" or "Adobe RGB" would be the better or close to what you want if you are using the magnifying glass to pick a color.
I think Generic RGB also works.
the trick is you need to enter number of R G B manually
after change the RGB mode in dropdown list
Odd... (too)
UPDATE 10.10.4
I had this issue as well, I reported it to Apple, and it seems to have been solved on 10.10.4 (it was related to the color picker itself, not to Xcode/IB)
Can someone else confirm it?
This is an old question, but it was important for me to add some info.
The only method that has been working for me accurately over the years was to not use PS's Color Picker, but use macOS' built-in "Digital Color Meter".
It's bundled with every installation of macOS and the RGB values emitted from there with "Generic RGB" always reproduce the correct color in Xcode Storyboards.
Related
In MacOS there is a simple App called Calculator, that I would like to recreate using Swift for learning purposes. A button like the plus button on the calculator has two images associated with it, one when the button is up and one when the button is down, as seen on the images below.
As you can see, when the + button is pressed down, its image changes to a darker orange color and the text gets a dark grey color. My question is: How to implement this button behavior?
Is it possible to do it with NSButton (and if so how)? or is it easier to implement it using CALayer? Or maybe there is some other way that I have not thought of?
You should be able to use a single image and configure it in code or in your asset catalogue to be a "template image". That means the shape is taken into consideration, much like a stamp, and the stamped-out area is filled with color dynamically. That means you don't have to provide a white and dark gray/black variant. One variant will suffice, usually black to see the lines well, and the rest can be configured through.
See the SO question "How to NOT highlight the NSButton's template image when clicked?" for details about the setup: How to NOT highlight the NSButton's template image when clicked?
Our designer gave me a color value:
RGB 217,114,62
In mac image preview I open the color selector, switch to rgb and put in the rgb values. But the color preview seems to be too dark. So I take the color picker and select the color in the preview window. And instead of the same values, it shows RGB 206,93,48. First I thought some sort of color profile would change the colors. But reapeating the procedure with this darker color does not result in a third value. It stays 206,93,48. Then I guessed it might be the nearest web safe color that it switches to. But it's not in the list. What is going on here? Is 217,114,62 a magic value?
I decided to make a html page with a div and styled it to rgb 217,114,62.
All fine:
<body>
<div style="background: rgb(217,114,62);width:300px;height:300px;">RGB 217,114,62</div>
</body>
Now I made a screen shot and opened it in preview. Fine. I added a rectangle, selected it's color with the color picker. The correct color as you can see.
Then I just click the pointer into the HEX field. Automatically the rectangle darkens but the colour values stay the same. See:
When I now pick the darker color from the rectangle it is... You already guessed it... 206,93,48. WTF!?
I have the same problem in all my mac programs that use the color picker.
I have no clue what it can be. I tried changing the display color settings to whatever. Same result. OS-X 10.10.1.
You (and possibly your designer) need to familiarize yourself with color profiles. "RGB 217,114,62" does not adequately specify a color. You would need to know in which color profile that was expressed. For example, sRGB vs. Generic RGB.
When you use the eyedropper in the color picker to sample a color from the screen, you get the values in the device color profile. This will be different from a calibrated color profile like sRGB or generic.
The gear icon next to the pop-up menu showing "RGB" in your screenshots both shows you the color profile for the values shown by the sliders and text fields and lets you change the profile (thus converting the values).
I suspect that clicking in the hex field switches the color profile to sRGB because that's the color profile of web colors but, on the theory that you want to use the sliders and text fields to specify a color in that profile, it doesn't convert the current values. Instead, it reinterprets them in the new profile. For what it's worth, your last screenshot as shown on my screen and sampled with the eyedropper shows that the outer color is nearly 217,114,62 in the Generic RGB color profile while the inner color is nearly 217,114,62 in the sRGB color profile.
You need to check with your designer to find out what color profile they are expressing the colors in. If they aren't color-profile-savvy, they may have expressed them in their personal screen's device profile, which is basically useless. Also, if they are giving you image files to work from, those need to have an embedded color profile so that you can be sure they display (nearly) the same on your screen as they do on theirs. (You both should also calibrate your display's color profile using Display Calibrator or dedicated hardware. You can open Display Calibrator from System Preferences > Displays > Color > Calibrate.)
Once you've confirmed that, you need to switch the color picker to the desired color profile before entering values. Or sample from an image file with an embedded color profile as displayed by an app which properly handles that (Preview will do), and then convert to a specific color profile. If you were to create the color in code, you would use +[NSColor colorWithCalibratedRed:green:blue:alpha:] for values in the Generic RGB color space or +[NSColor colorWithSRGBRed:green:blue:alpha:] for values in the sRGB color space.
I'd like to make an NSToolbarItem with a custom image which toggles between Black and Blue, like the icons at the top right of Xcode 5's main window.
Peter Hosey suggested in this answer that it was as simple as setting the image to be a template, but I haven't found that to be the case. I set it to a template image, and that causes it properly render the dark gray gradient, but it doesn't render in blue when toggled.
I uploaded a very simple example of what I've done, here. If someone could tell me how to change it to light up the NSToolbarItem in blue, as Xcode does, then I'd very much appreciate it.
You mostly have everything you need in place, with the exception of providing an NSButton object using the style NSTexturedRoundedBezelStyle, with which you’ve associated your image.
↳ modified example project here
⌘ OS X Human Interface Guidelines | Window-Frame Controls
I am trying to build a windows phone live tile. I want some text on the tile that is the accent colour. What this means is that I need to draw some text on the tile that is transparent. I don't seem to be able to write in the transparent colour.
I have a User Control which is 173 by 173 pixels which I save as a png file. I use this png as the image for the live tile. The transparent bits of the image come out in the current accent colour.
Any ideas how to write in the transparent colour in xaml?
This behaviour is to be expected. In your original question you are effectively saying "Write invisible text on top of the image", and that's what you're getting (imagine writing in invisible ink on a photograph). You effectively need to do one of two things.
1) Figure out which pixels are part of the text you're writing, and "remove" them from the image so the background colour shows through, or
2) Write text in the background colour ({StaticResource PhoneAccentBrush})
EDIT
You can probably achieve what you need using an Opacity Mask. Apologies for only providing that as a link as I haven't done this myself.
I have a white png image, which is a part of a n icon.
I would like to change it's colour to get a coloured icon.
I know it is possible with hue/saturation setting, but don't know how to achieve a specific colour output.
I am using Axialis Icon Workshop (I have Photoshop CS5 also). The colourize option along with Hue, Saturation and Brightness adjustments will assist getting any colour output. But I specifically want colour #3366CC.
Is there a solution to convert my white png image to #3366CC coloured image?
This can be easily achieved if you go to the layers panel in Photoshop and select your icon layer. If the icon has a transparent background then select the fx button from the bottom of the layers panel and select color overlay or go to the menu at the top of the Photoshop screen and select Layer > Layer Style > Color Overlay. From the options box select the color box and put in 3366cc instead of the ffffff you have.
This should give you a coloured icon as desired. If this doesn't work let me know and I'll try to help.
You can go to layer style and choose color overlay, but that wont give you the color as you exactly want it, you can go a step further and hold the control key and click on the shape or the image you want to change the color, the shape will be selected, make a new layer on top of the shape or image that you want to change the color then fill in the color with the color that you choose in the layer property and set the mode to overlay, reduce the opacity to 50%. done