恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
正确运用彩色滤镜的一些典例
0.0°
2014-12-26 好文转载 经验/观点 原作者: Nataly Birch 举报 6651 108 53 3

转载一个列举了一些优秀运用彩色滤镜的文章,希望大家能从里面收获一点技巧。

  在当今这个充斥着先进的特效和精妙风格的世界中,谁曾料到,像纯色和渐变这样简单的手法,竟能够催化出创造力,并极大提升网站的美学水准?现代网页设计师们,证明了优雅的插画、精致的图形和壮丽的照片,都能在彩色滤镜效果下很自然地得到强调。气氛焕然一新,网站开始变得光彩夺目。的确,它有助于解决某些问题。

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

  

  首先,彩色滤镜能给网站耳目一新的外观,却不会增加负担 。

  其次,它通过搭配传递各种情绪的色彩,很好地丰富了设计。

  第三,作为一层低透明度的遮罩,它不会掩盖主背景的魅力,对于想要轻微淡化轮播图或视频区域,却仍希望其吸引力不减的人 ,这点尤其有用。

  最后,它为前面的内容提供了坚实的基础,兼顾了可读性。

  这种方案能非常协调地与各种元素协作:提供强烈反差的白色、极受欢迎的扁平风格元素,还有为项目增添精致微妙感的轮廓式图形。

  这里有些杰出的网页设计,示范了如何正确地运用这项技巧:

Zimya

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

  着陆页带有一层美妙的半透明渐变,立刻唤起积极温暖的感觉。从紫红色到橙黄色,遮罩层华丽的颜色令人着迷。

Red Collar

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

  平滑的半透明渐变极大地丰富了背景图——这家机构的视觉象征。它增添了几分独特,不仅与整个场景形成互补,也形成了热情洋溢的氛围。

Ingram Cole and Land

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

  这个网站基于一些非常棒的赏心悦目的效果,这不仅指它的动画,还有成功贯穿整个网站设计的照片处理手法。从紫色到粉色,温暖而微妙的渐变,使欢迎页面看起来相当美妙奢华。

Adopt Wales

clip_image005

  设计师在视频背景上覆盖了一层迷人的粉色渐变,营造了亲切友好的氛围。颜色与透明度的选择很好地突出了上面的元素。

Snippet App

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

  对于更喜欢创造冷静与便捷的整体感观的人而言,蓝与白的结合是非常有用的。设计师实际上用了三种色调,不过这两者占据主要地位。

Joyce Van Herck

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

  Joyce Van Herck是名高端艺术家,她的在线作品集网站嵌入了优美的几何图形。甜美的半透明渐变使斜线拥有活力,加强了这种愉悦的氛围。

Electric Mainline

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

  和前面提到的Snippet App很像,设计师运用了蓝白混合。不论如何,低透明度的遮罩层,使用户欣赏其背后那张扮演主角的背景图。

Invelab

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

  同样,设计师试图在背景与前景之间营造完美的对比,同时也将注意力引向工作室的图片。明亮的紫色有效地与白色形成互补。

M2B

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

  欢快的半透明渐变强化了网站的视觉表现。正由于采用了这种方式,全新的色彩使得背后的图片陡然增色。而白色被用作一种补充色,使内容看起来醒目。


Numero Neuf

clip_image012

  首页的特色是大量基于图片的导航,每一项都覆盖了一层黑色半透明滤镜。这种方式很常用:如果你想为文字营造完美的对比,并淡化菜单项,很自然就应该将注意力引向某个选中的项。

Evoluzione Telematica

clip_image013

  绿色使人联想到正能量,此处就是这么用的。明亮的色调与白色共同建立了一种积极的形象。

The Place

clip_image014

  这位设计师借极简主义的方式重现了优雅。所选的颜色反映了网站的个性,统一了视频样式。

Obbaki Foundation

clip_image015

  颜色可以提升感观的协调程度。它丰富了网站的主题,同时轻而易举加入了一些戏剧性效果,对整体氛围有一定贡献。

Studio Up

clip_image016

  这个机构通过迷人的效果展现了一个视觉差滚动的介绍页面,向普通用户证明了他们熟稔网页流行趋势。每一页都有其独特的颜色,覆盖在动态的背景上,用以突显其内容。

Hype Agency

clip_image017

  设计师在焦点区域挥洒了一整片的橙色,为网站营造了恰当的积极的氛围。另一种颜色则是白色,非常明亮并融入其中。

Papertelevision

clip_image020

  薄薄一层明亮多彩的颜色赏心悦目,伴随着每个主要部分。首页的深紫色几乎不容易注意到,但它仍然能使页面活泼有趣。

结论

  彩色滤镜——这种从前在平面设计中的基本技巧,在网页设计中重获新生。虽然色彩轻微地稀释了设计,它也带来了一丝精致和特别的魅力,同时兼具功能性。设计师们赶快学起来吧!


-----------------------------------------

原文地址

原译文地址

更新:2014-12-26

收藏

108人已收藏

Pyhoooo

学习中

  • 10

    作品

  • 199

    粉丝

  • 8

    关注

  • UI中国8周年明信片征集作品
  • 对自制的笔刷作简单的设计练习
  • 眼前一亮的色彩——移动界面设计中的渐变
  • 取色技巧——如何在PS里通过照片创建色板
相关标签
经验配色ps转载

    猜你喜欢

      2014-12-26 好文转载 经验/观点 原作者: Nataly Birch 举报 6651 108 53 3

      正确运用彩色滤镜的一些典例

      0.0°

      你确定要举报正确运用彩色滤镜的一些典例

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年12月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      53
      108
      3

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录