网页设计配色精彩十例

wengjianm

网页设计配色精彩十例 <br />分类:设计天下 <br /><br />色的使用在网页制作中起着非常关键的作用，有很多网站以其成功的色彩搭配令人过目不忘。但是对于刚开始学习制作网页的人来说，往往不容易驾驭好网页的颜色搭配。除了学习各种色彩理论和方法之外，笔者认为多学习一些著名网站的用色方法，对于我们制作美丽的网页可以起到事半功倍的作用。所以，笔者总结了一些著名网站的颜色搭配方法，这些方法可以让我们的学习少走弯路，快速提高我们的网页制作水平。 <br /><br />　　一、网页颜色原理和象征意义 <br /><br />　　我们所有网页上颜色，在HTML下看到的是以颜色英文单词或者十六进制的表示方法（如#000000表示为黑色）。不同的颜色有着不同的含义，给人各种丰富的感觉和联想。 <br /><br />　　红色：热情、奔放、喜悦、庄严 <br />　　黄色：高贵、富有、灿烂、活泼 <br />　　黑色：严肃、夜晚、沉着 <br />　　白色：纯洁、简单、洁净 <br />　　蓝色：天空、清爽、科技 <br />　　绿色：植物、生命、生机 <br />　　灰色：庄重、沉稳 <br />　　紫色：浪漫、富贵 <br />　　棕色：大地、厚朴 <br /><br />　　二、网页颜色的使用风格 <br /><br />　　不同的网站有着自己不同的风格，也有着自己不同的颜色。网站使用颜色大概分为几种类型： <br /><br />　　1、 公司色 <br />　　在现在企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要有标准的颜色。比如新浪网的主色调是一种介于浅黄和深黄之间的颜色，同时形象宣传、海报、广告使用的颜色都和网站的颜色一致。再比如国富投资公司的主色调是C：100%，M：60%，Y：0%，K：0%。这样的颜色使用到网站上显得色调自然、底蕴深厚。 <br /><br />　　2、 风格色 <br />　　许多网站使用颜色秉承的是公司的风格。比如海尔使用的颜色是一种中性的绿色，即充满朝气有不失自己的创新精神。女性网站使用粉红色的较多，大公司使用蓝色的较多&hellip;&hellip;这些都是在突出自己的风格。 <br /><br />　　3、 习惯色 <br />　　这些网站的颜色使用很大一部分是凭自己的个人爱好，以个人网站较多使用，比如自己喜欢红色、紫色、黑色等，在做网站的时候就倾向于这种颜色。每一个人都有自己喜欢的颜色，因此这种类型称为习惯色。 <br /><br />　　三、设计用色十例 <br /><br /><br /><br /><br />三、设计用色十例 <br /><br />　　以下我将分别介绍十个配色较好的网站，大家可以学习和借鉴一下，培养对色彩的敏感以及独到的审美能力。 <br /><br /><br /><br /><br /><br /><br /><br />　　1）这是个大型的NBA网站。通常我们经常看到的此类网站以白色为背景，但是这个网站却用灰黑色RGB为（48，48，48/#333333）（以下颜色都用RGB表示），文章标题用色为RGB为（203，201，153/#CCCC99），菜单使用的RGB为（112，119，112/#707770）。这样的配色可以显示独特的个性，又不失大型网站的风采。如图1 <br /><br /><br /><br />图1 <br /><br /><br /><br /><br /><br /><br />　　2）下面是一个娱乐类的综合性网站UGO，他的配色方案是背景色为黑色RGB为（0，0，0）中嵌套RGB（0，0，82），字体白色RGB（255,255,255）,菜单为RGB（77,114,159）。这样的虽以黑蓝为主色调，但是配以漂亮的图片，给人的感觉是生机盎然，充满了互动色彩和青春气息。如图2。　　 <br /><br /><br /><br />图2 <br /><br /><br /><br /><br /><br /><br />　　3）下面的这个网站是大名鼎鼎的微软公司网站，微软不仅软件做的好，连网页制作也是世界一流。他的每一个网页都是制作的样板。从网页我们就可以看出微软公司的风格、作风，以及雄厚的实力。背景颜色使用蓝色RGB为（0，151，254），菜单为黑色RGB（0，0，11），菜单为灰色RGB（200，200，200），字体为黑色RGB（0，0，0），如图3。 <br /><br /><br /><br /><br /><br />图3 <br /><br />4)现在介绍的网站相对简单，但是她的用色也别具匠心，现在我们来看一看，整体上使用的是白色RGB（255，255，255），辅助色为RGB（79，88，95），菜单色为RGB（48，64，64）和RGB（0，81，111）字体使用的是RGB（83，86，91）。虽然简单，但颜色搭配非常的科学合理。如图4　 <br /><br /><br /><br />图4 <br /><br /><br /><br /><br /><br />　　5）下面的网站采用黄色调为主，很体现公司的个性，现在我们就来看一看她的颜色搭配。主色调为黄色RGB为（255，199，48/#FFC730），辅助色调为RGB（49，102，46）字体为棕色RGB（153，103，0），中间再配以抽象的图片，显得个性十足但又不单调。如图5 <br /><br /><br /><br /><br /><br />图5 <br /><br /><br /><br /><br /><br /><br />　　6）橘红色如果运用得当的话是一种非常使用于网页上的颜色。下面的这个网站就是一个非常著名的例子。他的主色调为RGB（255，151，0）辅助色调为RGB（255，103，4），菜单RGB为（252，200，0）。字体使用黑色RGB为（0，0，0）。此种配色显得主人较为前卫，色彩热烈，给人的震慑力较强。如图6 <br />　 <br /><br /><br /><br /><br />图6 <br /><br /><br /><br />　　7）鲜红色也是一种震撼感很强的颜色，如果搭配不当，也可能使网站没有风格和特点。下面的这个网站就是使用红色比较好的网站。我们来看看他的颜色搭配。他使用的主色调是RGB（200，9，0），配以抽象的图形，文字使用的是RGB（213，229，167）显得美观而不失独特，大气而不逼人。如图7 <br /><br /><br /><br />图7 <br /><br /><br /><br /><br /><br />　　8）下面介绍的这种色调是我们制作网页的时候不会经常用到的颜色，如果使用到你的网页中，肯定会给人耳目一新的感觉。他的主色调为RGB（144，151，97）辅助色调为RGB（173，168，112）边饰为黑色RGB（0，0，0）字体为黑色RGB（0，0，0）。这样的搭配显得风格独特，颜色和谐而庄重。如图8 <br /><br /><br /><br />图8 <br /><br /><br /><br /><br /><br />　　9）下面的设计更加的简单化，但是颜色的使用使网页并不呆板，反而让人感觉到一股浓浓的生活和家庭气氛，使人置身于美丽和爱中。他的主体是由两种颜色构成，分别是RGB（239，200，161）和RGB（201，254，200）。如此简单，但是却栩栩如生，跃然网上。如图9 <br /><br /><br /><br />图9 <br />　　10）下面举出这个例子是想证明一个道理&mdash;&mdash;只要你有足够的想象力，你就能够设计出漂亮的网页。目前在网上非常流行一句话就是网页的搭配不要超过四种主要颜色，否则就有杂乱之感。下面的这个网站远远的超过了三种颜色，但是她并不失美丽。因此重要的还是色彩的驾驭能力。下面这个例子的菜单就使用了7种颜色，但是我们看到的网页并不杂乱，相反感觉作者很有创意。如图10 <br /><br /><br /><br />图10 <br />　　网页设计的颜色搭配需要在实践中不断的摸索和不断的创新，认真学习别人的先进方法和经验，可以快速的提高我们的制作水平。可以说。网页颜色搭配得当，成功也就走了一半。如果大家有什么好的方法，别忘了和别人交流，让我们共同进步！ <br /><br /><br />2006.4.06 14:17作者:clong23 <br /><br />【 引用：0 】【收藏】【评论：0】 <br /><br />绘影II代绘图板与Photoshop实用教程－焕彩黑白照片 <br />分类:设计天下 <br /><br />鼠标的出现，大大的改进了电脑的操作方式，但发展至今天，因为时代的进步，它的能力始终有限。作为一个艺术创作者、平面或动画的设计师，如果只使用一个鼠标作绘图，可谓是一件痛苦的事情，即使拥有精湛的鼠标操作技巧，精准的点击能力，也比不上用笔在画板上挥毫那么直观！所以，拥有一个功能强大和灵活多变的创意软件和工具可以使你的设计工作事半功倍，Adobe Photoshop CS和UGEE绘影II代绘图板就是这样一对创意绝配，它具备1024级的压感和200点/秒的绘画识别功能，能帮助你自由地发挥创意空间。在UGEE绘影II代数位板里，还增加了一个非常实用又极具可塑性的可定义功能面板，并很人性化的专门设计了一对能以不同形态支撑绘画板的托脚，能在各种环境，利用不同的角度摆放绘画板，以此提高创意大师的工作效率。 <br /><br /><br /><br />一张黑白的照片，我们怎么给它上色呢？ <br />以前或许我会把各个部分都用选区，然后用色相饱和度来调颜色，但是现在我想试试能不能用图层样式来上色呢? <br /><br />原图： <br /><br /><br /><br />首先，新建图层1，用压感笔绘制脸部，我用的颜色为：R246.G207.B176 ，当然这个不需要太仔细，大概把脸部描一下就可以，脸部中可以加大压力，直接涂抹。为了让边缘显得不那么生硬，在绘制边缘时只要减轻压感笔的压力就可以了。如下图： <br /><br /><br /><br />绘制完成之后，用附送的无线鼠标点图层面板中的更改模式下拉菜单，在弹出来的下拉菜单中选择颜色模式，就得到这样的效果，感觉差不多了，可是&hellip;&hellip;MM的眼睛却成黄色的了，这样会让人以为是生病了，把这么一个PL的MM弄成了黄眼了，多可惜啊！用橡皮把图层1中眼睛的位置擦除干净，在涂眼角的部分的时候，用压感笔轻轻的抹过就可以，中间部位就加大下笔的压力，压感笔的压感技术让我们轻松完成压感笔的压感技术让整个涂抹过程更方便更精确了，要是以前，这个涂抹过程可能会花掉比现在多几倍的时间，哈哈！这样就复原了美女本来神采熠熠的漂亮眼睛。如下图： <br /><br /><br /><br />新建图层2，用同样的方法绘制嘴唇，用压感笔方便了许多，同样使用颜色模式。如下图： <br /><br /><br /><br /><br /><br />新建图层3，绿色画笔绘制眼影，这时绘图板派上大用处了，在绘制时，压感笔的压感技术能让我们非常轻松的获得这样的眼影线，画这种由粗到细的线条时，只要手的力度由重到轻，就可以得到这样一个线条，（手的力度越大，画出的线条越粗，别说我没提前告诉你哦 ）在内眼角部我们加大了压力，画到外眼角时，慢慢减轻压感笔的压力，就能得到如图所示的眼线。这样，就大大提高了效率。在绘画时，执笔的压力感觉非常重要，如果感觉效果不好，可以使用&ldquo;Ctrl+Z&rdquo;或&ldquo;Ctrl+Alt+Z&rdquo;这两组快键，迅速撤消错误步骤。如下图： <br /><br /><br /><br />使用高斯模糊，然后改变图层混合模式为颜色模式，用高斯模糊滤镜时，我用的像素大小为15。这个可以根据你画的眼影大小来决定，没有一个固定值的。这样，MM就漂亮了很多了。可是，眼睛却也变成绿色的啦，是不是常说的绿光?嘿嘿...不怕，还是用前面的方法把图层三中眼睛的位置擦掉。 <br /><br />新建图层四，用红色画笔在MM的脸上随意画上两笔。如下图： <br /><br /><br /><br />使用高斯模糊弄一下看看，模糊数值要大一些哦！我这里用的是30像素，再把图层混合模式改为颜色。这样，脸就变得红润了！哈哈~~~不错哦！如下图： <br /><br /><br /><br />用同样的方法给头发上色，记得要高斯模糊，而且想要什么颜色的头发就要什么颜色的头发。如下图： <br /><br /><br /><br />在使用了绘影II绘图板和PS的完美结合后，让我感觉整个绘制选区的过程是如此得心应手，事半功倍。完成图如下： <br /><br /><br /><br />2006.4.04 13:19作者:clong23 <br /><br />【 引用：0 】【收藏】【评论：0】 <br /><br />像素字体 pixel font 入门 <br />分类:设计天下 <br /><br />首先介绍一下, 字体, 一共分3种, bitmap, vector和postscript, pixel font属于bitmap, 是由一个个点组成的, 目前最流行的仍然是pixel字体, 已经流行 <br /><br />了接近3年. 如果你不知道何为pixel font, 请先了解一下, 学一下使用方法, 不要乱用. 下面是需要注意的: <br /><br />1. 每一种pixel font都有个固定大小, 一般是7 pt到12 pt左右, 作者做出来的时候如果是8 pt, 你使用时就必需字体大小就一定要用8, 或8的倍数(16, 24,32, ...), 否则字体不能正确显示. <br /><br />2. 你必需关闭anti-alias反锯齿, 反锯齿的原理, 是在深思的点旁边加些浅色的点另曲线圆滑. 但pixel font是要字体清晰锐利, 不是要圆滑, 你一打开反锯齿马上就模糊了. <br /><br />3. 这个是针对macromedia flash的, flash并不支持所有bitmap font, 不支持的输出时字体会变实心. 但如果支持, 将大大减少输出文件的大小, 因为你输出时 <br /><br />要输出字体, 而pixel字体都很小. 在flash里用, 除了需要遵守上面两点, 还必需注意, 文字所在的座标, 必需是整数. 例如是(65, 457), 而不是(23.1, 45.7), 否则flash会自动帮你反锯齿, 结果也是变模糊. <br /><br />使用tips: <br />1. 尽量用字体定义的大小(多数是8 pt), 也就是最小的那种, 越小越好是当今潮流 <br />2. 因为有放大不失真的特点, 所以如果你需要在网页上放个很大的T的图片, 可以作个最小的T, 然后用HTML语句放大, 效果一样, 文件大小就小很多了. <br />3. 除非是标题, 如果是给人阅读的句子, 尽量不要用大写的, 因为会另阅读很困难. <br />4. 你可能下了不少字体, 但请不要在同一页面像晒冷一样show off出来, 菜鸟才会那样做. <br /><br />要找字体, 除了去font.com(刚发现真有此站), 应该去哪里? 下面就让我介绍几个一流的字体网站: <br /><br />http://www.04.jp.org <br />国内也很多人用pixel font, 但基本上是用日本的04系列. 所以我劝你用别了, 太滥了呀! <br /><br />http://www.hi-type.com 或 http://www.hi-type.de <br />唉, 你不走运, 这是极出色的字体网站, Micromedia 的MX系列, 右边的panel上用的字体, 就是来自hi-type. 我刚试过, 连不上, 可能down了. 注册后可以免费 <br /><br />下载. <br /><br />http://www.zetuei.com <br />日本网站绝影, 光耞名字就知道是cool! <br /><br />http://www.superlooper.de <br />superlooper有近20款出色字体, 不少设计网站都有使用. <br /><br />http://www.miniml.com <br />如果你从没耞过miniml, 你应该检讨一下要不要在这行混下去. 这是带动pixel font潮流的鼻祖. Hooge, Kroge, Standard三种字体是目前网上设计网站中用得 <br /><br />最多的字体. 看上去有点像04, 但个人认为比04要好. 他们的字体以前是免费下载的, 红了之后开始收费, 好在我下得快. <br /><br />http://www.tint.de <br />里面有目前做得最小的pixel font, 只有4 point <br /><br />http://www.etherbrian.com <br />有种很好看的字体, 自己去看 <br /><br />http://www.fountain.nu <br />不错的付费网站, 但几是块买个来做logo也不贵吧 <br /><br />http://www.cubadust.com <br />还是要给钱买的 <br /><br />http://www.orgdot.com/aliasfonts <br />极出色的alias font(same as pixel font)根据地. <br /><br />http://net.jp.org/jafont <br />这里没有字体下, 但有大量日本字体网站的连结. <br /><br />http://www.wpdfd.com/wpdtypo3a.htm <br />付费的, 但有pixel font的介绍 <br /><br />http://2theleft.rdx.net/fontpage2.htm <br />里面有很多适合做logo的字体 <br /><br />http://fenotype.com <br />好像是楼上的另一个家, 里面有几十种出色字体免费下载. <br /><br />http://www.myeye25.com <br />cool死了的pixel font <br /><br />http://www.myfonts.com <br />我告诉你, 给钱买的就是不同 <br /><br />http://www.dafont.com/en <br />没甚么好介绍的, 字体太多, 但质素比一般网站收藏的好 <br /><br />http://www.koenhachmang.com <br />有些很好看的字体, 但现在我也找不到, 你找找看. <br />

我叫麦兜

学习中!