根据客户的设计图像确定条纹色彩的正确RGBA值？ [英] Determine correct RGBA value for bar tint color given a client's design image?

问题描述

我经常会得到模拟图像，用于定义iPhone应用程序的外观。这些可以来自与项目有关的许多不同方法，有时候是balsamiq甚至手绘，有时候是Photoshop。一个常见的是通常指定条形色调以匹配某些公司品牌或整体应用程序设计。

I often get given mockup images that define how an iPhone app is supposed to look. These can come from as many different methods as there are projects, sometimes balsamiq or even hand-drawn, sometimes Photoshop. One thing that is common is a bar tint color specified usually to match some corporate branding or overall app design.

如果我在应用程序中打开其中一个设计图像并使用油漆滴管工具用于获取颜色的RGB值，有许多地方可以做到这一点，从包含按钮下边缘的最暗区域到条形顶部最轻的区域。我无法找到一个可以对编程结果与模型匹配的颜色进行采样的地方，在某些方面总是错误导致我眯着眼睛看两个图像试图调整一个或多个颜色值，以便它们匹配得足够好。

If I open one of these design images in an app and use the paint dropper tool to get the RGB value for a color there are many places to do it, from the darkest regions at the lower edge of included buttons to the lightest regions at the top of the bar. I can't find a place to sample the color where the programmed result matches the mockups, it is always wrong in some regard leading to me squinting at two images trying to tweak one or more color values so they match well enough.

给出一个客户想象导航栏应该如何出现的示例*，如何确定应用于条形tintColor属性的正确UIColor？

Given an sample of how a client imagines a navigation bar should appear*, how do you determine the right UIColor to apply to a bar's tintColor attribute?

*忽略包含彩虹效果，误用渐变和其他幻想飞行的模型。沿中心线匹配颜色和亮度就足够了。这至少是一个可辩护的位置 - 你要求的不是iOS的工作原理！

*ignoring mockups containing rainbow effects, misapplied gradients and other flights of fancy. Matching color and brightness along the centre line would be good enough. That's at least a defensible position - "What you ask for just isn't how iOS works!"

推荐答案

设置应用程序使用UINavigationBar / UIToolbar和三个滑块来设置 tintColor 。移动滑块直到它看起来正确。

Set up an app with a UINavigationBar/UIToolbar and three sliders to set the tintColor. Move the sliders around until it looks right.

如果您还以某种方式将图像带入应用程序（UIPasteboard或将其粘贴在资源中），使用 - [CALayer renderInContext：] 和一些CoreGraphics魔术（kCGBlendModeDifference和一些东西来增加差异;我忘了我用过的东西）你甚至可以比较两个图像。

If you also bring the image into the app somehow (UIPasteboard or stick it in a resource), using -[CALayer renderInContext:] and some CoreGraphics magic (kCGBlendModeDifference and something to multiply the differences; I forget what I used) you can even compare the two images.

模拟器注释：首先需要使用Cmd-C从Mac粘贴板粘贴到模拟器粘贴板中。

Simulator note: You will first need to do Cmd-C to "paste" from the Mac pasteboard into the simulator pasteboard.

我发现你无法在iPhone和iPad上重现默认渐变，除了 tintColor = nil （iPad默认也没有闪耀）。你可以合理地接近，但是完成按钮的颜色都是错误的。

What I found was that you can't reproduce the default gradient on both the iPhone and iPad except with a tintColor = nil (the iPad default also has no "shine"). You can get reasonably close, but then the Done button colour is all wrong.

通常我会在模拟导航栏的中间进行采样。

Usually I sample in the middle of the mock-up nav bar.

这篇关于根据客户的设计图像确定条纹色彩的正确RGBA值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！