配色弱的同学必看!跟大自然学配色(自定义色板教程) - 优设网 - UISDC

配色弱的同学必看!跟大自然学配色(自定义色板教程)

2014/03/29 42179评论区

当我们开始设计的时候,其实可以在生活中或者漂亮的照片中找配色方案。
譬如我们这里要制作一张与秋天元素相关的海报或者贺卡的时候。
你脑海中会想起什么呢?

有没有想过从摄影师镜头里的秋天中吸取颜色制作成色板,从而解决配色问题呢?
好咯,本篇文章将会给你演示一下这样的案例。

相关配色网站推荐,相信很多同学也都知道,相当不错的工具类站点:http://colrd.com/

本教程讲解色板如何自定义。我喜欢在平时生活中拍照,将照片里搭配良好的颜色采集下来自制成色板以便后续使用。如果照片色调不好怎么办?木关系,来看看这篇《PS修图小教程!漂亮色调一秒调出来》,分分钟变高达上唷!

下面这张照片就是我要用来采集颜色的源照片,我想创建一个名为”Autumn Leaves”的颜色样本集。

Adobe Photoshop tutorial image.

Step 1:在photoshop色板面板中删掉多余的色板

为了更好地采集颜色,我们需要首先删除多余的色板。不要担心色板被永久删除,因为ps的默认色板是可以随时还原的。

Adobe Photoshop tutorial image.

不幸的是ps没有一键删除色板的选项。怎么办呢?需要一个一个删除。按住Alt (Win) /Option (Mac)键鼠标一个个左击颜色就可以了。

下图是删除完颜色时的色板面板:

Adobe Photoshop tutorial image.

Step2:吸管工具

打开要制作色板的照片,然后选中吸管工具(I):

Adobe Photoshop tutorial image.

Step3:吸取第一个颜色

使用吸管工具在照片上吸取你的第一个颜色:

现在你可以看到前景色变成了你所吸取的颜色:

Adobe Photoshop tutorial image.

提示:在吸取颜色的过程中,你可以按住鼠标左键然后在照片上移动鼠标,这样子前景色会不断显示鼠标所经之地的颜色。如此更可以方便地吸取到你真正需要的颜色。

Step4:添加颜色到色板中

吸取完颜色后,鼠标移到颜色面板,这时图标会自动变成油漆桶的标志,随便在该区域点击一下即弹出添加色板的弹窗,编辑好名称”Yellow”,点击确定。

Adobe Photoshop tutorial image.

下图就是添加颜色后的色板面板的状况了。大多数情况下你不需要刻意为每个颜色命名,因为你一看就知道是什么颜色。所以上面的那一步你完全可以就按着软件默认的颜色命名来。

Adobe Photoshop tutorial image.

Step5:重复上面的第3步和第4步,直到添加完所有的颜色:

Adobe Photoshop tutorial image.

Step6:把这组颜色集合添加为一个专门的颜色样本:

现在你需要存储色板啦!如下所示,在色板面板的右上角点击向右的按钮,选中”存储色板”,在弹出的窗口中命名好色板的名字,点击保存即可。

Adobe Photoshop tutorial image.
 
Adobe Photoshop tutorial image.
 
Adobe Photoshop tutorial image.

Step7:重置默认色板

哎呀呀,制作好新的颜色样本,现在咱们就得赶紧欢迎默认色板回来啦!这一次呢,还是在色板面板的右上角点击向右的按钮,不过选中的是”复位色板”:

Adobe Photoshop tutorial image.

这个时候弹出的这个对话框可能会吓到你,该怎么选择呢?直接OK之!

Adobe Photoshop tutorial image.

就这么愉快地复位了色板…

Adobe Photoshop tutorial image.

Step8:载入制作好的色板

拿,上面复位了色板,辛辛苦苦制作的颜色样本哪里去了?!没事儿,需要使用的时候,载入之替换掉默认色板!还是在色板面板的右上角点击向右的按钮,不过选中的是”替换色板”,在弹出框中选中刚才制作好的色板,出现的弹窗依然直接点击OK就可以了。

Adobe Photoshop tutorial image.
 
Adobe Photoshop tutorial image.

这个时候默认色板就被这个色板给替换了:

Adobe Photoshop tutorial image.

选中色板中一个颜色作为新的前景色:

鼠标点击色板上的任一颜色,前景色就会改成被选中的颜色:

Adobe Photoshop tutorial image.
 
Adobe Photoshop tutorial image.

选中色板中一个颜色作为新的背景色:

只要按住Ctrl(Win)/Command(Mac)键,鼠标左击色板上的任一颜色,背景色就会改成被选中的颜色:

Adobe Photoshop tutorial image.
 
Adobe Photoshop tutorial image.

下面我们就可以拿着这套色板应用在设计中了。下图是一个设计例子,感受下:

poem

希望本教程对你有帮助 :)

另外优设微博也曾推荐过更多colrd网站上的配色成熟案例,当时有同学全部打包了!回顾地址:http://weibo.com/1773655610/yeaWDaNJz

【午夜干货:520枚超赞配色卡打包】当别人在漫无目的挑选配色方案时,你却慵懒地享受着温暖阳光,做着更好的构思。读懂这些卡片,会教你更懂生活的色彩。设计网页时确定好目标,按着实物色卡模拟,绝对让你的页面大气专业。

原文地址:photoshopessentials
优设网翻译:@写说说
本文由优设网uisdc.com原创翻译,转摘请注明优设网译文出处,谢谢各位小编。

【优设网 原创文章 投稿邮箱:2650232288@qq.com】
 
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量66万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/custom-swatches

发表评论 加载中....

评论加载中....

uisdc

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

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

您还没有登录

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

微信扫码

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

把好文章收藏到微信

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