收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 24521|回复: 84

[教程] [网页设计]如何调出来漂亮的渐变色?

  [复制链接]
发表于 2012-2-27 20:36:41 | 显示全部楼层 |阅读模式
本帖最后由 liyangisme 于 2012-2-27 20:38 编辑

好多人都说,胖纸李,你调出的颜色还挺好看的哈,你教教我呗?然后胖纸就汗了,这有何难,关键是这个怎么教呢……其实胖纸一直都有个贱贱的小技巧,只不过一般人不告诉他,问的人多了,实在是不堪重负,现在我偷偷地告诉你们~~

大家对某一图层做渐变叠加的时候,都习惯直接选取颜色吧……像这样



这样做,看起来非常专业,不过据我所知,好多人做网页设计并没有专门学过设计学知识,直接这样取色很不好操作,特别容易就把渐变搞的不伦不类。

其实有个非常简便的方法,能让你做出和谐美丽的渐变颜色,不够首先得先了解2个知识点。

1、颜色库

Photoshop除了拾色器之外,还为我们提供了已经配好颜色的颜色库



颜色库分为很多种,多数是为印刷准备的,和比色卡匹配,不过这些颜色用在屏幕介质上也是ok的,做好看的渐变的第一步就是要选好一个基准色,从颜色库选取是个很好的方式。

2、混合模式

Photoshop为我们提供了不同的混合模式,例如正片叠底,滤色,强光,颜色减淡等等,多样的混合模式使我们设计的过程充满了surprise,用好了,就能调配出很好的效果,我这懒得写说明了,有兴趣的朋友请移步这里

接下来,就可以开工了。下面是详细的教程,由于各种原因,有些p友可能打不开图片,我这里图文结合来写,我们共创河蟹社会。

1、先画个放框框



2、从颜色库里选个柔和的颜色,当然大家做的时候看具体情况和领捣要求。



3、双击方框所在的图层,弹出图层模式面板,选择渐变叠加,颜色选择由黑到白,混合模式选择柔光,调整混合模式透明度。



4、完工



颜色还不错吧,研究清楚混合模式,对颜色的设计非常有帮助!

欢迎大家来我的博客,有你们的鼓励我会常常更新好东西滴:http://liyangis.me>>
发表于 2012-3-13 11:23:22 | 显示全部楼层
很实用,支持楼主多发好教程
回复 支持 1 反对 0

使用道具 举报

发表于 2012-3-12 23:32:38 | 显示全部楼层
应该多些网页设计方面的教程,很需要
回复 支持 1 反对 0

使用道具 举报

发表于 2012-3-1 09:20:57 | 显示全部楼层
老板总说我用的颜色不够漂亮,不够刺激人的眼球。。。受教了,谢谢LZ
回复 支持 0 反对 1

使用道具 举报

发表于 2012-2-29 08:59:22 | 显示全部楼层
对这方面一直不太了解,希望大侠们多讲解一下···
回复 支持 0 反对 1

使用道具 举报

发表于 2012-2-28 22:12:06 | 显示全部楼层
我觉得渐变最重要的是按照光源来做  否则2个渐变的光源冲突了就是失败的设计
回复 支持 1 反对 0

使用道具 举报

发表于 2012-2-28 21:19:11 | 显示全部楼层
提示: 作者被禁止或删除。
回复 支持 1 反对 0

使用道具 举报

发表于 2012-3-13 21:47:29 | 显示全部楼层
楼主说得对,经常也是这样做法的
回复 支持 反对

使用道具 举报

发表于 2012-3-16 17:00:39 | 显示全部楼层
受教了~~ 多谢楼主
回复 支持 反对

使用道具 举报

发表于 2012-3-17 08:24:50 | 显示全部楼层
太有用了太有用了,谢谢楼主
回复 支持 反对

使用道具 举报

发表于 2012-3-17 11:15:30 | 显示全部楼层
一语中的,经验之谈呀,顶上~
回复 支持 反对

使用道具 举报

发表于 2012-3-18 10:24:56 | 显示全部楼层
做渐变叠加
回复 支持 反对

使用道具 举报

发表于 2012-3-18 22:50:11 | 显示全部楼层
简直就是受益匪浅啊!!!顿时领悟了!!
回复 支持 反对

使用道具 举报

发表于 2012-3-21 11:46:08 | 显示全部楼层
不错,很好呢,胖纸楼主好聪明
回复 支持 反对

使用道具 举报

发表于 2012-3-21 14:11:51 | 显示全部楼层
渐变的还是比单色的有质感一些
回复 支持 反对

使用道具 举报

发表于 2012-3-26 14:36:29 | 显示全部楼层
支持,绝对要支持,让我眼前突然一亮啊!
回复 支持 反对

使用道具 举报

发表于 2012-3-26 15:42:36 | 显示全部楼层
学习了,支持
回复 支持 反对

使用道具 举报

发表于 2012-3-26 20:13:37 | 显示全部楼层
这个不错的,去试试看了
回复 支持 反对

使用道具 举报

发表于 2012-3-28 11:31:18 | 显示全部楼层
学习了,谢谢楼主
回复 支持 反对

使用道具 举报

发表于 2012-4-1 09:22:37 | 显示全部楼层
谢谢了,受教了
回复 支持 反对

使用道具 举报

发表于 2012-4-1 09:43:17 | 显示全部楼层
谢谢,学习了,希望胖纸楼主多多给大家分享经验,谢谢……
回复 支持 反对

使用道具 举报

发表于 2012-4-1 10:23:38 | 显示全部楼层
学习了 谢谢分享
回复 支持 反对

使用道具 举报

发表于 2012-4-9 17:25:19 | 显示全部楼层
为什么我看不到图片?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-4-12 10:56:45 | 显示全部楼层
fannie 发表于 2012-4-9 17:25
为什么我看不到图片?

抱歉,这两天host空间dns更改,我忘了更新导致图片不能访问,不过现在已经好了,呵呵
回复 支持 反对

使用道具 举报

发表于 2012-4-16 13:37:43 | 显示全部楼层
好东西,对颜色迟钝的我有很大帮助
回复 支持 反对

使用道具 举报

发表于 2012-4-16 14:26:22 | 显示全部楼层
果断mark之。。。
回复 支持 反对

使用道具 举报

发表于 2012-4-23 10:59:24 | 显示全部楼层
聪明的胖子,这招不错
回复 支持 反对

使用道具 举报

发表于 2012-4-23 16:01:44 | 显示全部楼层
找不到感觉,但是看着挺漂亮
回复 支持 反对

使用道具 举报

发表于 2012-4-27 11:46:15 | 显示全部楼层
又学到一招拉····
回复 支持 反对

使用道具 举报

发表于 2012-4-27 23:14:20 | 显示全部楼层
不错,这个以前老师教过,嘿嘿
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-10-1 16:59 , Processed in 0.140268 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表