为什么你的视觉稿导出后,颜色就变灰了? - 优设网 - UISDC

为什么你的视觉稿导出后,颜色就变灰了?

2019/06/11 16615评论 11

平时在 PS/Sketch 上设计页面时觉得色彩明亮艳丽,但是导出或上传至标志平台时画面变得灰暗,其实是软件颜色配置的影响。

视觉走查是设计师在页面被开发出来时进行的细节检查与汇总,针对没有还原设计稿的页面细节反馈给工程师,并不断循环这一步过程直到问题被修复,从而确保被开发出来的页面与最初的设计稿一致。

工程师与设计师在面对不同的两个颜色时,工程师看的是两个颜色的数据,设计师看的是两个颜色的视觉色彩,因为 PS 与 Sketch 软件上不同的颜色配置会出现同色值却不同的视觉体验,因此处理好 PS/Sketch 、iPhone 实时预览插件、标注平台三者颜色配置,是设计协助开发的细节之一。

场景一

我们平常在使用蓝湖或 pxcook 进行页面标注时,平台与软件默认无色彩管理,因此识别的色值与 PS 颜色配置「不做色彩管理」、Sketch 里的色彩描述「RGB-sRGB IEC61966-2.1」是一致的。

场景二

平常在手机预览一些优秀的文章与作品时,会对优秀的页面进行采集,但 iPhone 截屏图片色彩格式却是 Display P3,等到 PS/Sketch 打开 iPhone 截屏图片时出现「嵌入的配置文件不匹配」,丢弃不匹配的配置文件之后画面显得灰暗。

△ 手机视图(左)PS视图(右)

这是因为 iOS 系统下截屏得到的图片,其色彩配置文件是 Display P3,与 PS/Sketch 里的 sRGB 不同,因此丢弃不匹配的配置文件之后画面显得灰暗。

于是使用了 PS 进行了以下 5 种方案测试,Sketch 同理。

测试一

PS里:编辑→颜色设置→RGB-sRGB IEC61966-2.1 环境下打开图片。

当颜色设置里的工作空间 RGB 设置为「显示器RGB-sRGB IEC61966-2.1」时,色彩管理方案 RGB 会自动「关」闭,这个时候,电脑屏幕上 PS 显示颜色与 iPhone 实时预览颜色一致。但此时 PS 打开 iPhone 截屏图片会出现「嵌入的配置文件不匹配」,丢弃不匹配的配置文件之后画面显得灰暗。

△ PS视图(左)手机视图(中)PS打开截屏图(右)

测试二

PS里:编辑→颜色设置Adobe RGB(1998)并「保留嵌入的配置文件」环境下打开图片。

当颜色设置里的工作空间 RGB 设置为「Adobe RGB(1998)」,色彩管理方案 RGB 选择「保留嵌入的配置文件」,PS 打开 iPhone 系统下截屏的图片不会再出现弹窗,截屏图片在 PS 上显示颜色正常,但 iPhone 实时预览变得灰暗。

△ PS视图(左)手机视图(中)PS打开截屏图(右)

测试三

PS里:编辑→颜色设置 Adobe RGB(1998)环境下打开图片,再调回颜色设置 RGB-sRGB IEC61966-2.1 环境下处理图片。

图片正常被打开,iPhone 实时预览显示正常,但由于新建画布颜色设置与截屏图片颜色设置不同,因此将截屏图层复制至新建画布或者进行色彩提取时会被自动转化成「显示器RGB-sRGB IEC61966-2.1」下的颜色设置,色值虽然一样,但是画面明显灰暗。

△ 保留色彩配置(左)不做色彩管理(右)

△ 不同颜色配置下的同色值颜色

测试四

PS里:编辑→颜色设置 Adobe RGB(1998)环境下打开图片,再调回颜色设置 RGB-sRGB IEC61966-2.1环境里在截屏文件下处理图片。

图片正常被打开,iPhone 实时预览显示正常,在截屏文件上进行设计,可正常吸取颜色。

上传至蓝湖或 pxcook 进行页面标注,平台标注会自动丢弃不匹配的颜色配置文件,转化成「显示器RGB-sRGB IEC61966-2.1」下的颜色设置,标注平台上的页面数值显示灰暗。

△ PS视图(左)手机视图(中)标注平台视图(右)

方案五 —— 完成同步

PS里:编辑→颜色设置 Adobe RGB(1998)环境下打开图片,再调回颜色设置 RGB-sRGB IEC61966-2.1,使用电脑截屏对手机截屏文件进行截屏,粘贴至不做色彩管理的新建画布,色值虽然进行了改变,但经过电脑截屏的页面色彩与手机截屏色彩一致,可正常吸取颜色。上传至蓝湖或 pxcook 进行页面标注,标注平台上的色彩数值与页面效果一致。

△ PS视图(左)标注平台视图(右)

补充

由于 Sketch 处理方式同理,就不一一截图解释。

Sketch 色彩设置修改路径如下:

  • Sketch →偏好设置→sRGB IEC61966-2.1
  • 文件→修改颜色描述文件→sRGB IEC61966-2.1

tip:Sketch 可以执行操作「查找/替换颜色」对所有同数值颜色进行处理。

欢迎关注作者的微信公众号:「大tip」

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://wap.maladuo.cn/the-color-adjustment

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 设计师干货 交互设计师 界面设计 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 设计规范 海报设计 用户体验设计 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里

新世纪娱乐网址 叙永县| 凉城县| 贵定县| 万年县| 尼勒克县| 石渠县| 桃园市| 郁南县| 永春县| 故城县| 启东市| 永顺县| 安宁市| 图片| 茌平县| 繁峙县| 广州市| 平塘县| 五大连池市| 石楼县| 米林县| 若尔盖县| 淮安市| 梅河口市| 五原县| 军事| 鹿泉市| 台东县| 雅安市| 哈尔滨市| 绥阳县| 阿巴嘎旗| 二连浩特市| 博白县| 沂源县| 浮梁县| 普格县| 泰安市| 灵武市| 民权县| 康平县| 建湖县| 安塞县| 乌拉特后旗| 宜宾市| 沂源县| 钦州市| 平顺县| 迭部县| 徐闻县| 台前县| 盐边县| 安仁县| 彭泽县| 和平区| 闽侯县| 井陉县| 曲麻莱县| 张北县| 汪清县| 新乐市| 科技| 黄石市| 昆明市| 抚远县| 县级市| 二连浩特市| 赤水市| 南郑县| 海门市| 法库县| 南溪县| 新郑市| 泗洪县| 昭觉县| 莱阳市| 湘西| 象山县| 广东省| 泰兴市| 博湖县| 海兴县| 阿克苏市| 赞皇县| 遵义县| 神木县| 恩施市| 加查县| 昆山市| 灌云县| 朝阳县| 大英县| 桂平市| 石嘴山市| 恩施市| 茂名市| 望江县| 抚顺县| 乡宁县| 苍南县| 连城县| 松滋市| 广东省| 耒阳市| 礼泉县| 万全县| 会理县| 阿巴嘎旗| 稻城县| 鄢陵县| 车致| 芮城县| 芜湖县| 长丰县| 沭阳县| 调兵山市| 巴中市| 海口市| 大连市| 瑞昌市| 温州市| 沙洋县| 亳州市| 章丘市| 台东市| 平邑县| 邓州市| 安塞县| 惠州市| 武冈市| 礼泉县| 常宁市| 安阳县| 卢氏县| 土默特左旗| 潜山县| 曲松县|