青色背景图片

篇一：主色以绿色为主的素材图片

素材图片主色以绿色为主，不过绿色部分有点沉，不能突出人物甜美感。调色的时候可以考虑把绿色转为稍淡的青绿色，局部再增加一些暖色，这样画面就会更清新，人物也会更甜美。

原图

篇二：PS把美女照片背景调成唯美青蓝色

PS把美女照片背景调成唯美青蓝色

来源：网络作者：网络时间：2016-1-21 20:41:41点击： 144

素材图片不够唯美，处理的时候先把主色转为青蓝色；然后给暗部增加蓝色，高光区域增加淡青色；再把整体调淡，边角区域增加暗部；最后微调人物颜色，整体柔化处理即可。最终效果

原图

一、打开原图素材大图，创建可选颜色调整图层，对黄、绿、白进行调整，参数设置如图1 - 3，效果如图4。这一步把图片中的黄绿色转为绿色，高光区域增加淡青色。

二、按Ctrl + J 把当前可选颜色调整图层复制一层，不透明度改为：50%，效果如下图。

三、按Ctrl + Alt + 2 调出高光选区，然后创建曲线调整图层对RGB、红、绿、蓝通道进行调整，参数设置如图6 - 9，效果如图10。这一步主要给图片高光区域增加淡蓝色。

篇三：颜色搭配和布局

绿色在黄色和蓝色（冷暖）之间，属于较中庸的颜色，这样使得绿色的性格最为平和、安稳、大度、宽容。是一种柔顺、恬静、满足、优美、受欢迎之色。也是网页中使用最为广泛的颜色之一。绿色与人类息息相关，是永恒的欣欣向荣是的自然之色，代表了生命与希望，也充满了青春

绿色在黄色和蓝色（冷暖）之间，属于较中庸的颜色，这样使得绿色的性格最为平和、安稳、大度、宽容。是一种柔顺、恬静、满足、优美、受欢迎之色。也是网页中使用最为广泛的颜色之一。

绿色与人类息息相关，是永恒的欣欣向荣是的自然之色，代表了生命与希望，也充满了青春活力，绿色象征着和平与安全、发展与生机、舒适与安宁、松弛与休息，有缓解眼部疲劳的作用。

它本身具有一定的与自然、健康相关的感觉，所以也经常用于与自然、健康相关的站点。绿色还经常用于一些公司的公关站点或教育站点。

绿色能使我们的心情变得格外明朗。黄绿色代表清新、平静、安逸、和平、柔和、春天、青春、升级的心理感受。

从上图的主色调、辅色调HSB模式的数值可看出，这两中颜色只是在明度上有区别，其显示的色相与饱和度是一样的。正绿色是120度，这两种颜色从RGB数值上看，都不同程度的混合了其他少许颜色，因此离正绿色稍有些偏差。由于绿色本身的特性，所以整个网页看起来很安稳舒适。

辅助色只在明度上降低，让页面多了些层次感、空间感。

白色块面使得绿色的特性发挥到最好的状态并增强了视觉节奏感。

点睛色恰到好处的体现出了”点睛”这一妙笔，极尽诱惑力，整个页面顿时生动提神起来，增强了页面主题的表达力。

主、辅色调是属于同类色绿色系，通过不同明度的变化，能较递增缓和变化同时却也较明显的体现出页面的色彩层次感来。如果不是通过数值来分析判断，可能会有些朋友凭经验判断，容易误认为这两种颜色除了明度外有可能纯度会有所不同，这时候适当的使用数值模式会很容易得到正确的结论的。

整个页面配色很少：最大色块的翠绿，第二面积的白色，第三面积的深绿色，但得到的效果却是强烈的、显眼的，达到充分展现产品主题的目的。

深绿色给人茂盛、健康、成熟、稳重、生命、开阔的心理感受。

绿色在黄色和蓝色（冷暖）之间，属于较中庸的颜色，这样使得绿色的性格最为平和、安稳、大度、宽容。是一种柔顺、恬静、满足、优美、受欢迎之色。也是网页中使用最为广泛的颜色之一。绿色与人类息息相关，是永恒的欣欣向荣是的自然之色，代表了生命与希望，也充满了青春

绿色系分析： (高纯度配色：绿色对比色组合)

HSB数值H显示60度为正黄色，该主、辅色调只向绿色倾斜了一丁点–H为75度。大面积明度稍低的黄绿色为主要色调，饱和度却非常高，达到了100%，辅助色使用了提高明度的嫩绿色和白色，这两种辅色除了增加页面的层次感的同时，还能让整个页面配色有透亮的感觉，增强了绿色的特性。背景深褐色无疑把前景的所有纯色烘托得都耀眼于舞台上。

该页面有两组小小的对比色，一组是黄绿与橙红色，一组是橙黄色与天蓝色，这两组配色严格的来说不算对比色，因为色彩多少有些偏差。虽然它们的饱和度降低，但在这个页面中足以构成了最响亮的色调，把整个页面烘托得非常活跃、鲜明。

主、辅色调黄绿色大面积使用并不刺目，反而使得页面看起来很有朝气、活力。

适当运用不同纯度的不是相当严格意义上的对比色系组合时，通常能起到的主要作用是主次关系明确。不”标准”的对比色系对比特性虽然减弱，页面色彩看起来容易协调、柔和，但一样能突出主题。→ 同类色浅

绿色系分析：(同类色浅绿色)

主色调绿色属性是明度很高的浅绿色，前面提到过，通常情况下明度高饱和度就降低，饱和度低页面色彩度就降低，除非颜色本身有自己的特性，加上大面积的辅助色白色，整个页面看起来很清淡、柔和、宁静，甚至有温馨的感觉。

页面中使用了渐变的浅绿色，使得整个页面视觉上更加柔和舒适。

尽管点睛色只在主要标志上出现，按钮也只有少许一点，但也给整个页面的色彩带来些亮笔。尤其是红色的HSB模式的H数值显示颜色接近于正红色，饱和度达到最高值。另一个点睛色中黄色，在页面视觉上呈绿色与红色这一组对比色起到缓和视觉的作用。因为在色轮表上，黄色正是在绿色和红色之间的过渡色。

结论：

浅绿色系有优雅、休息、安全、和睦、宁静、柔和的感觉。

渐变的效果更能加深这种印象。但页面配色上浅色过多时，整个页面容易呈现发”灰”的感受，这就需要适量的添加纯度稍高的颜色例如左下角的辅助色绿色块，适当的鲜艳的点睛都能很好的解决这一问题。

布局：

症状描述：在ie下（6或7，8没有试过）当出现中英文混排，都采用默认字体时，并使用 li 列表做float时，会出现如上图的症状，文字排列上下不对齐的情况。影响了布局的美观性，造成上图情况的原因是中英文的文字基线不同，arial字体的下边缘要比宋体（同为12号）低一个象素，上边缘比宋体矮两个象素，而且英文还有i,y这种上下基线不同的情况。所以当中英文混排对齐时，就会出现明显的高度差异，使排版不均。可见放大图。

采用中英文字均使用宋体的方案

可以解决文字排列不对齐的情况，但宋体英文字是衬线字体（Times New Roman即是英文中的衬线字)，字型紧凑，细节较多，排列在一起很醒目，但在连续成文时，容易造成辨识困绕，看错行的情况。关于衬线字体的优缺点，请见这篇文章。相比之下，表示英文还是使用无衬线字体更美观大方。

解决方法一 “饺子”童鞋的发现。

英文采用tahoma字体–宋体，arial及tahoma字体比较–arial与tahoma的无衬线体比较精致

当中英文混排时，使用tahoma字体的情形

中英混排，纯中文组合的行高都一致了，但a在hover状态下下划线与中文粘联在一起。 缺陷：使用tahoma字体时，在ie6及ie6以下版本，会导致所有中文字体链接的下划线会出现与字体粘连现象。淘宝使用的也是这一解决方案。相信大型项目，不同的人来共同完成一个页面的模块时，在统一的规范下，使字体更规范，减少错位，而采用带有下划线会出现与字体粘连的tahoma字体，是值得的

以下是携同大米童鞋发现的：

英文采用arial字体，中文使用宋体。可在<a>标签内注明 line-height:1.231,可解决行高不等以及字体与下划线粘连问题。（不知道大范围中英文混排适不适用，有待后续校验。）

CSS混沌初开I：导航菜单素材的设计

现在开始我们将学习如何一步一步的构建一张CSS页面。本教程分成以下几个部分：第一讲主要是关于如何在PS中制作导航按钮素材；第二部分主要针对的内容是背景，接着是页面的整体布局以及顶部解析，最后一部分是如何整合CSS和XHTML。

有些人可能会疑惑为什么要从导航按钮图片的制作开始，事实上我的初衷是让大家了解进而注重素材制作中的一些细节处理，这对最终的作品效果有很大的影响，至少在视觉上而言。首先看一下完成的效果：

玻璃质感导航图片的制作：

首先我们在Photoshop中建立一个178x22像素的RGB空白文档，添加一个新图层命名为“按钮”，并用灰色#ECECEC进行填充。再新建一个图层命名为“高光”，在其上、左边缘各绘制1px的白色线条，你用画笔或单像素选取工具都可以。然后我们用橡皮工具把左边缘白线的底部擦除一段，在这里我使用的是大小20px透明度为50%的橡皮刷：

新建一个名为“网点”的图层，用1px的铅笔工具在适当的位置绘制几个小点，示例中的颜色是#727272，当然这里你可以自由发挥设计更有创意的小点组合，关键就是要让它们看起来精致有序：

本文来源：https://www.bwwdw.com/article/x6sb.html