适合网页与iPhone开发的Photoshop应用
日期 : 2022-01-10 20:34:30
许多使用Photoshop设计网站或应用的人,或多或少,都会遇到将图像颜色与HTML、CSS或编码产生的颜色进行配对的问题。这篇文章的目的便在于彻底解决这些问题。色彩管理,保持多个设备颜色输出-致在印刷界,色彩管理一般包括校准整个工作流程,从扫描设备、数码相机、电脑显示器、校样,到最后媒体输出。这要求近乎过分了,尤其样,到最后媒体输出。这要求近乎过分了,尤其CMYK设备进行配对,其难度不容小觑(在众多著作中,《CMYK2.0- 设计师色彩 管理手册》是比较值得学习的一本) 设计或编辑电视图像时,主要校准的是编辑显示器,同时使用一个播放显示屏是常规做法--可以即时展示这些图像在观众家里的普通电视机上的样子。在这种情况下,色彩管理会带来许多好处,而且得到了极力推荐。设计网站和应用交互界面时,情况则有些不同了。最终输出端和你设计时所使用的设备一样:一个电脑显示器(暂时不考虑Windows、MacOS10.6之前的操作系统以及iPhone的Gamma曲线差异,我们稍后会说到这些) 不过,这其中有个隐情。尽管你设计网站或应用交互界面时所使用的设备与最终产品输出的设备相同,但颜色却会有多种来源:图像(通常是PNG格式、GIF格式和JPEG格式)、格式标记( CSS) 和编码(JavaScript、HTML和Objecitve- C,等等)。要让它们都一致起来得有多棘手!
目标
设计网站或应用交互界面时,我们希望屏幕上Photoshop里显示的颜色和保存到文件中,通过别的应用( 包括Firefox、Safari和iPhone模 拟器)所显示的颜色保持一致。我们不仅希望这些颜色看起来一样,也希望它们保存在文件中的实际数值也与我们在Photoshop中设置的数值完美相符。不管在什么情况下,颜色都不能发生一点偏转,或者看起来发生偏移。
这为何如此之难?
Photoshop的色彩管理不仅应用在它窗口里显示的图像上,同时也应用于所保存的文件中。这是件很糟糕的事情,如果你只是在为网站或用户界面处理RGB图像。在Photoshop默认 设置之下,#FF0000其实会显示成#FB0018,而#BB95FF则是#BA98FD。差别虽然很细微,却不容忽视。
Photoshop和OS操作系统、Windows有什么区别?
OS操作系统的色彩管理是在处理进程的最后一环应用到整个显示中的--在视频存储器完成主体缓存之后。这意味着,尽管应用了色彩管理,衡量屏幕颜色的软件功能(比如/Uitlites/ DigitalColor Meter)所显示的保存在文件中的数值却会和你的编码一致。我想文件中的数值却会和你的编码一致。我想理系统)中的色彩管理运作原理应该相同。Photoshop的色彩管理只应用于其窗口图像部分以及所保存的文件。Photo- shop进行屏幕取色时会出现颜色修正,因此那些测量屏幕颜色的软件功能所报告的颜色通常与你所选取的并不一致。OS操作系统的色彩管理应用在Photoshop之上,但并不值得一提。
我所找到的最佳解决方案便是尽量弱化Photoshop对RGB的色彩管理功能,如此一来就促使屏幕上以及被保存成文件的RGB颜色与实际颜色值相符。如果你得为网站和应用设计校准显示器,那么建议你使用OS操作系统的色彩管理。
以前,关闭Photoshop CS2和之前版本中的色彩管理功能很简单,但现在却需要更多技巧。关闭Photoshop的RGB色彩管理功能这些步骤适用于Mac和Windows系统里的Photoshop CS5, CS4的设置也差不多如此。
第一步:打开“编辑”>“颜色设置”,然后将工作区间和显示器都设置为RGB。第二步:打开文件,点击“编辑”- >° 指定配置文件”,然后将其设置为‘默认RGB”,每个文件操作过程中都需要走这一步。第三步:确保“查看”→“色彩校对”关闭。第四步:以“保存为Web和设备格式”进行保存,确保“转换到sRGB"功能已经关闭。如果你将文件保存为JPEG文件格式,请同时关闭“内置颜色配置”(或许你想对有些图片应用它,但更多时候,为了用户界面元素及图标考虑,你最好是把它关闭) “指定配置文件”与“转换为配置文件”的差异现在来解释下“指定配置文件”与“转换为配置文件”之间的差异再合适不过,这样你就知道该在什么时候运用它们。每个Photoshop文件都包含了一个颜色文件,它和真实的像素颜色数据又是不同的。“指定配置文件”只是将内置的颜色配置应用到图像中,改变其外观,但色彩的原始数值不会有任何改变。因此,这是个不具破坏性的操作,你可以随便给图像配置一个新的颜色,而不会造成任何损害。指定配置新的颜色文件或许会改变它在屏幕上的样子,但是保存在文件中的数据却保持不变。
如果你从一个Photoshop图像中复制图层, 并应用到另一个图像中,你会期望这两个图像的颜色文件是一致的。“转换为配置文件”不仅给图像配置了新颜色,同时也试图让你的图像在屏幕上看起来如出一辙。它通过处理保存在文件中的像素颜色数据达到这个目的。转换到新的颜色文件更可能让图像在屏幕上看起来一致,但文件中所保存的数据已经被永久性地改变了,请谨慎使用。
iPhone用户界面设计
你的iPhone或iPod的屏幕及颜色校准可能和你的Mac或PC屏幕及校准不大一样。我常常把用户界面的全屏图片导入到iPhoto中,并将它们与iPhone同步,看看最终界面在这些设备上看起来到底如何(在Windows系 统中,你可以用iTunes同步照片)。这让你在切割图片或提交编码之前再做些调整。在iPhone应用模拟界面测试中,它们看起来要比在Photoshop里时更模糊,而这篇文章就这-点给出了解答。
结论
现在,你可以用各种方法在Photoshop和llustrator之间移动位图和矢量图,而且完全不改变图像颜色。你也可以用Photoshop中的颜色提取工具剃去颜色,然后将同样格式的颜色数值应用于你的CSS、HTML、JavaScript、 Flash 或Objecitve- _C编码中,它们显示出的颜色会相当和谐。
上一篇:网站设计可用性结论与指南
下一篇:响应式网站设计:概念及使用指南