高端双色调网页-五步搞定

用户头像
杭州/UX设计师/10年前/7033浏览
高端双色调网页-五步搞定

经常看到一些国外网站双色调风格的一些网站,非常干净简约,并且色调容易统一。

我觉得这种风格非常百搭,网页、App或者海报都能用上。所以俺就为童鞋们分享一下,有不足的希望大家多指点!

嘻嘻 Y(^_^)Y


高端双色调-五步搞定


下面几张是我用几张普通的素材处理成双色调风格做的网页。(这几张素材图片我已经放到文章下面啦,童鞋们可以下载过来试一试噢!不能下载的话留个邮箱,我有空就发给童鞋们!)


35f5576535120000012e7e7dc042.jpg



4204576532020000012e7ec3d1bd.jpg





马上进入正题!咱们用第一张图片为例。


第一步:

打开Photoshop,新建文件。拉一个炫酷装逼的渐变色,角度如图,然后先吸好深色放在色板中备用。

c96a57652ba90000012e7eab1aa1.jpg


第二步:

选一个高品质的好图,最好主体物能够突出一些,方便分离双色调。然后在Photoshop中打开这张图片。

71e857652c530000018c1b8ae0aa.jpg


第三步:

1.进入通道,选区人与背景比较明显的蓝色通道。

2.按住Alt点击蓝色通道,选择通道中的白色区域。

3.反选选区,用刚才保存的深色填充选区。

580e57652cbf0000012e7e3a6235.jpg


第四步:

1.将填充好的图层移到渐变色的文件中,调整叠加的位置。

933c57652dd20000012e7ec6cabd.jpg


2.我们可以发现,右上角的填充图层上面的颜色将浅色挡掉太多,使得色调不够明朗。所以可以拉一个渐变蒙板将让浅色露出来一些。

575c57652e560000012e7e72f40f.jpg


第五步:

排上装逼的版式~ 然后装逼成功 ^_^

9c72576530450000018c1b1ab8a5.jpg


第一次出教程,希望能够帮到大家。谢谢!




705b57652f930000012e7e07ec16.jpg

喜欢小伙伴们,点个赞呗~

400
举报
|
309
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
网页图标
蓝色简约风格404错误页面
商务网页
女生坐在网页面前办公矢量插画
三个青年站在网页周边矢量插画
浏览电脑网页的元素
卡通风格网页页面3D渲染
网页设计——纸杯蛋糕
卡通风格网页页面3D渲染
 网页背景
互联网,互联网插画,商务,数据,项目,合作,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,沟通,渐变,蓝色插画,商铺,覆盖,管理,项目管理,效率,提升,高效,关系,拓展,
网页电商背景矢量插画
卡通风格网页页面3D渲染
三个青年正在装修网页矢量插画
卡通风格网页页面3D渲染
三位美女围着网页看信息矢量插画
运营数据
网页页面矢量插画
卡通女孩与网页表格3D渲染
网页背景
户外旅行飞机情侣假日出行
互联网,互联网插画,商务,数据,项目,合作,精准,投放,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,交流,沟通,渐变
新年快乐送福网页矢量图banner
男生坐在网页面前办公矢量插画
一个人拿着优惠券准备支付购物电商矢量插画
你可能喜欢
大家都在看
登录注册