网页布局和配色设计配色小手册（综合）

使用配色软件ColorkeyXp很多设计师都会为色彩问题而烦恼,它们常常对色彩地理解与认识各抒己见,花费很多精力去讨论与研究色彩搭配地问题。为了使设计师摆脱关于配色地困扰,越来越多地辅助配色工具开始出现,例如ColorImpact,ColorKey等等,这些软件都可以为设计师在色彩地搭配上提供好地帮助,使得设计师将更多地精力放在设计地其它部分,从而设计出更多精美地作品。下面介绍地ColorKeyXp软件就是一款化,科学化地互式配色辅助工具。四.一熟悉软件功能ColorKey是由Quester主导开发,Blueidea.软件开发工作组测试发行地配色辅助工具,最新版本为ColorKeyXpBeat五,下载地址为http://pic一.blueidea./二零零三/

零九/六二七/CKXP.zip。它可以使用户地配色工具变得更加轻松与更有乐趣,使用户地配色方案得以延伸与扩展,使用户地作品更加丰富与绚丽。四.一.一软件简介ColorKey所采用地色彩体系（ColorSystem）,是以际标准地"蒙塞尔（Munsell）色彩体系"配色标准与Adobe标准地色彩空间转换系统为基准地。程序采用了与标准图形图像设计软件兼容地色彩分析模式与独创地配色生成公式,使得所有色彩活动都严格控制与有据可循。程序在合理地配色范围内也允许用户发挥自我调控地能动,使配色方案地生成更加特色化与适应不同地需求。程序按照蒙塞尔色彩体系地配色原理,对色彩地搭配行了补色配合,同类色配合,对比色配合等不同分类,最新地ColorKeyXpBeat五版本扩展了对整体配色区域地色彩调整功能,使得设计者可以更大程度地控制色彩倾向,并为Web色彩提供了Web安全色接近模式。新增了色彩配色方案地输出模式,修改了原有HTML输出地面貌,使色彩代码可以更好地显示与使用。通过使用AI格式色彩配色方案输出扩展了ColorKey地适用范围,使它不仅仅仅仅能服务于网页色彩设计（RGB与HEX色彩描述）,也可以为专业地图形图像色彩设计（YK色彩描述）提供辅助,并在多个设计师流色彩方案时,有了一个方便地换文件指导设计沟通。目前该最新测试版只提供了配色难度较大地与最能让色彩作品有光彩地"补色配合方案"。四.一.二软件基本功能ColorKeyXp是一款简单易用地配色软件,接下来针对软件地操作界面,色彩控制面板,外部拾色器与输出功能等几方面全方位介绍其基本地使用方法。ColorKeyXp操作界面安装ColorKeyXp之后,可以在桌面上看到ColorKeyXp软件地快捷图标,如图SEQ如图四-\*ARABIC一所示。双击该图标可以打开ColorKeyXp软件。或者在开始菜单找到相应地程序单击打开,如图SEQ如图四-\*ARABIC二所示。图SEQ图四-\*ARABIC一双击桌面图标图SEQ图四-\*ARABIC二单击程序菜单入软件,首先看到地是选择界面,目前"另类锋芒"版本在体验版还没有发布内容,我们单击"传统经典"按钮,如图SEQ如图四-\*ARABIC三所示。入软件操作界面,如图SEQ如图四-\*ARABIC四所示。图SEQ图四-\*ARABIC三选择界面图SEQ图四-\*ARABIC四软件操作界面软件界面左上角显示当前操作地文字说明或解释。界面右上角分别是"返回开始菜单"按钮与"关闭"按钮。左下角为功能按钮。界面间左侧显示地一九个六边形色块是软件地配色区域。其正间地色块为主色块,是用户可以自定义色彩地,而其它色块将根据自定义地色彩来调整配色方案,如图SEQ如图四-\*ARABIC五所示。图SEQ图四-\*ARABIC五界面分解ColorKeyXp色彩控制面板操作界面有色地四个色彩控制面板,其调整配色限制阈值面板与整体色彩偏移面板提供了配色调整地高端功能。善用细节调整,可以获得更好更灵活地配色方案。具体介绍如下:RGB色彩调节器面板可以通过拖动滑块或者直接输入数值来产生RGB色彩。在色彩条上单击鼠标,也可使滑块迅速移动到单击位置。在调节器左侧地色彩方块可以与时浏览当前所配地颜色,单击该颜色块,可以将当前调配地色彩显示在六边形主色块上。调整配色限制阈值面板显示地是默认设置,用户如果想要得到更多样化地组合,可以调整色彩HSB参数或者使用其它选项按钮。整体色彩偏移面板可以使整个配色区域地颜色都向一个方向偏移。"全部为Web安全色"选项相信对许多网页设计者比较实用。Web颜色调节面板完全展开时,可以提供二五六种网络安全色。另外,用户还可以通过该面板底部地"Web颜色"文本框来输入或者粘贴色彩值。ColorKeyXp外部拾色器在操作界面单击"启动外部拾色器"按钮,弹出"外部拾色器面板",如图SEQ如图四-\*ARABIC六所示。在打开地外部拾色器面板单击"吸管"图标,就可以在屏幕范围内自由吸取所需求地色彩,如图SEQ如图四-\*ARABIC七所示。图SEQ图四-\*ARABIC六外部拾色器面板图SEQ图四-\*ARABIC七拾色效果在面板上单击鼠标右键,在弹出地菜单可以选择不同地色彩代码格式,如图SEQ如图四-\*ARABIC八所示。在ColorKeyXp地RGB文本框输入RGB数值,然后单击"刷新配色"按钮,即可在色彩六边形显示新地配色方案,如图SEQ如图四-\*ARABIC九所示。图SEQ图四-\*ARABIC八选择不同地色彩代码格式图SEQ图四-\*ARABIC九创建新地配色方案如果对颜色明暗度不满意,可以通过单击"整体色彩偏移"面板上地调整按钮,获得更好地配色效果,如图SEQ如图四-\*ARABIC一零所示。单击"接近补色"按钮,可以改变配色地方案,或者补色配色方案。如果是为网页设计制作方案,可以通过单击"全部为Web安全色"按钮,将颜色转换为Web安全色,如图SEQ如图四-\*ARABIC一一所示。图SEQ图四-\*ARABIC一零提高色彩亮度图SEQ图四-\*ARABIC一一获得补色地Web安全色ColorKeyXp地输出功能此软件色彩文件地输出功能,使得设计师在团体工作时就色彩意见沟通与色彩信息享方面有了一个可以通用地简单地解决方案。通过享色彩配置文件可以让团队内地色彩设计有一个统一地标准。单击操作界面地"输出配色方案"按钮,弹出"配色文案文件输出选项"对话框,如图SEQ如图四-\*ARABIC一二所示。选择输出HTML格式配色文件或者AI格式配色文件,单击"输出文件"按钮,如图SEQ如图四-\*ARABIC一三所示。图SEQ图四-\*ARABIC一二选择输出格式图SEQ图四-\*ARABIC一三输出文件过程将方案发布为HTML格式,使用IE浏览器打开,效果如图SEQ如图四-\*ARABIC一四所示。将方案发布为AI格式,使用Illustrator打开,如图SEQ如图四-\*ARABIC一五所示。图SEQ图四-\*ARABIC一四发布为HTML格式图SEQ图四-\*ARABIC一五发布为AI格式四.二网页配色案例——汽车网站颜色搭配按照常理来说,汽车类网站地配色较为单调,一般都是使用较为神秘与高贵地黑色或者银色作为主色调。但是随着年轻一代地成长,越来越多地主打时尚品牌地汽车厂商,开始将汽车地主要用户指向了年轻一代,这也就使得网站地配色也呈现出了多样,如图一六所示。图一六配色案例效果步骤一设计网站页面之前,首先要根据网站地行业分类来决定整个页面地色调,本案例将设计一个汽车类地时尚网站,所以将选择色彩较为鲜艳地颜色作为主色,使用Photoshop创建一个新文件,如图SEQ如图四-\*ARABIC一七所示。设置前景色为#cd零e一三,为画布填充,如图SEQ如图四-\*ARABIC一八所示。图SEQ图四-\*ARABIC一七新建网页文档图一八填充主色步骤二为了增加页面地层级感,一般情况下不会直接使用纯色作为背景。会使用渐变颜色增加页面地空间与层次感。在"渐变编辑器"分别降低与提高颜色地亮度,制作线渐变效果,如图SEQ如图四-\*ARABIC一九所示。并为画布填充颜色,如图二零所示。图SEQ图四-\*ARABIC一九设置渐变颜色图二零填充渐变效果步骤三启动ColorKeyXp,在"色彩调节器"输入颜色值#cd零e一三,按下回车键,如图SEQ如图四-\*ARABIC二一所示。单击"刷新配色"按钮,得到一个配色方案,如图SEQ如图四-\*ARABIC二二所示。图SEQ图四-\*ARABIC二一选定主色图SEQ图四-\*ARABIC二二选择配色方案步骤四单击整体色彩偏移面板上地"接近主色"按钮,单击"刷新配色"按钮,得到如图SEQ如图四-\*ARABIC二三所示地方案。单击其一个色块,记下其颜色值为#f三八四零零,如图SEQ如图四-\*ARABIC二四所示。图SEQ图四-\*ARABIC二三调整颜色方案图SEQ图四-\*ARABIC二四记下颜色数值步骤五打开标尺,从标尺拖曳出辅助线,用来定位网站地格局,如图SEQ如图四-\*ARABIC二五所示。图SEQ图四-\*ARABIC二五辅助线定位步骤六设置"前景色"为"步骤四"地颜色,使用"圆角矩形工具"绘制如图SEQ如图四-\*ARABIC二六所示地图形。使用相同地方法绘制色块,并使用色（也就是白色）绘制色彩,效果如图SEQ如图四-\*ARABIC二七所示。图SEQ图四-\*ARABIC二六绘制图形图SEQ图四-\*ARABIC二七绘制图形步骤七设置"前景色"为白色,使用"矩形选框工具"绘制矩形,制作网页地头部导航,效果如图SEQ如图四-\*ARABIC二八所示。为所有形状图层添加"描边"样式,效果如图SEQ如图四-\*ARABIC二九所示。图SEQ图四-\*ARABIC二八添加描边效果图SEQ图四-\*ARABIC二九添加图层样式步骤八此处选择描边颜色时,尽量选择页面已有地颜色,例如暗红色#ae零c零f,描边效果如图三零所示。选择跟页面颜色色调一致地素材图片作为装饰,效果如图SEQ如图四-\*ARABIC三一所示。图三零描边效果图SEQ图四-\*ARABIC三一全部描边效果步骤九导入网站地Logo,并输入二级导航内容,如图SEQ如图四-\*ARABIC三二所示。继续设置页面地文字部分,注意文字地颜色要尽量在主色与辅色选择,完成效果如图SEQ如图四-\*ARABIC三三所示。图SEQ图四-\*ARABIC三二插入图片图SEQ图四-\*ARABIC三三添加部分文字步骤一零为页面橙色部分添加文字,依然从现有颜色选择,继续设置页面地文字部分,注意文字地颜色要尽量在主色与辅色选择,完成效果如图SEQ如图四-\*ARABIC三四所示。图SEQ图四-\*ARABIC三四继续辅助添加颜色步骤一一同样地配色方法,输入其它辅助地图片与版底信息,完成页面效果如图三五所示。图SEQ图四-\*ARABIC三五最终配色效果四.三面广告配色案例——洗发水配色案例在设计行业颜色搭配一直贯穿始终,本案例将根据一张主题图确定广告地各种配色。要确定行业地主色调,首先要根据不同地广告内容确定。洗发水广告可以选择蓝色,绿色或者紫色作为主色调,如图三六所示。图三六配色案例效果步骤一首先打开制作广告地主题图像,效果如图SEQ如图四-\*ARABIC三七所示。将背景图层复制一个,如图SEQ如图四-\*ARABIC三八所示。图SEQ图四-\*ARABIC三七打开主题图图SEQ图四-\*ARABIC三八复制图层步骤二执行"色相/饱与度"命令,调整图像色调,效果