浅谈简单设计风格在网页的应用技巧

2016-02-16 21:38 10 1 收藏

今天图老师小编要跟大家分享浅谈简单设计风格在网页的应用技巧,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

【 tulaoshi.com - 平面设计 】

这个时代中充满了太多奇妙的特效,在这些复杂特效中,我们还需要一些与之相反的简单设计。彩色滤镜,既把视觉效果简单化,又与如今的时代节奏相吻合,也许正是我们或缺的那一种类型。

在国外的网页设计中,彩色的滤镜效果已经被很普遍的使用了,但在国内的网页设计领域,滤镜风似乎还没有大面积吹入我们的视线。不如先跟着AnyForWeb一起领略国外的滤镜效果网页设计吧,希望能勾起设计师们更多的创作灵感。

1.这个案例使用了纯色的滤镜效果,让整个画面看起来干净简单,文字与白底色块之间的搭配让用户能一心专注于文字中。这种使用方式证明了滤镜效果能很有效的增强浮于页面背景之上的重点内容的可读性。

浅谈简单设计风格在网页的应用技巧,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

2.这个案例所表现的虽然同样也是纯色的滤镜效果,但与上一个案例还是有一些细微的差别。背景图中的内容相对比较琐碎,因此选择纯色滤镜能规避视觉上的繁复,无线框设计让页面看起来更自由无束缚。

浅谈简单设计风格在网页的应用技巧,PS教程,图老师教程网

3.INTEPCORE的网站以蓝黑色为主,主文字选择了鲜亮的桃红色,之间的色差很大程度上强化了浏览时的视觉表现。色彩上的对比也在画面自身上进行了互补,使整个页面始终处于一个平衡的状态中。

浅谈简单设计风格在网页的应用技巧,PS教程,图老师教程网

4.Knuckles网站使用的滤镜效果其实并不明显,但作用却不容小觑,正是这淡淡的效果令原本枯燥平常的背景图更增添了一些戏剧性的效果。背景、字体、色彩三者的融合显著提升了用户感官的协调程度。

浅谈简单设计风格在网页的应用技巧,PS教程,图老师教程网

5.这个案例很巧妙的选择了一种比较柔和的滤镜效果,文字与线条组合而成的几何元素之间互相纠缠,不仅没有显得很繁琐,反而让对方变得更有活力,柔和的色调相映衬,带出了一丝惬意。

浅谈简单设计风格在网页的应用技巧,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

6.该案例使用了带有渐变效果的滤镜,效果不仅在色调上产生了改变,画面也变得模糊了。渐变和模糊同时存在能很自然的稀释背景内容上的设计,所以热闹的背景图案更适合这样的设计手法。

浅谈简单设计风格在网页的应用技巧,PS教程,图老师教程网

7.这个案例在透明度上没有做太大的改变,只是稍作了一些模糊处理。绿色的主色调总能创造出一种冷静并且便捷的感受,所以花哨的的文字设计也不会显得过于突兀。

浅谈简单设计风格在网页的应用技巧,PS教程,图老师教程网

8.COMBADI的网站中滤镜效果的运用主要作用是突出了背景上层的内容元素,这一点其实比较常规并不特别。网站的巧妙之处在于设计师利用比较温和的滤镜表现出了雪地独有的强光反射效果,让浏览者有一种身临其境的感觉。

浅谈简单设计风格在网页的应用技巧,PS教程,图老师教程网

9.Papertelevision的色彩滤镜呈现出半透明效果,兼具了功能性和一种独特的精致魅力。右上角的汉堡图标设计也非常符合网站的整体风格。

浅谈简单设计风格在网页的应用技巧,PS教程,图老师教程网

10.在真实大图背景中使用模糊滤镜的效果能瞬间让页面变得高大上!正如Sparked的网站,模糊中混合着一些小光晕,画面场景看起来更有意境。

浅谈简单设计风格在网页的应用技巧,PS教程,图老师教程网

不知道从什么时候开始,彩色滤镜效果在图片的美化上突然变的炙手可热起来,原本普通的图片一旦经过滤镜渲染,瞬间变身成另一种风格,正因为如此,滤镜效果在网页设计中获得了又一次的新生。

来源:https://www.tulaoshi.com/n/20160216/1574895.html

延伸阅读
标签: Web开发
1、表单文本输入的移动选择:在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 textarea 中,一切就会变得简单多了,如:  以下为引用的内容: textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focu...
标签: Web开发
输入框( Input )应当符合逻辑地划分为小组,这样大脑就可以很好的处理大堆区域间的关系。– 《HTML权威指南》 Web 应用程序总是利用表单来处理数据录入和配置,但并不是所有的表单都保持一致。输入区域的对齐方式,各自的标签(label),操作方式,以及周围的视觉元素都会或多或少影响用户的行为。 表单布局 考虑到用户...
很多读者常会询问我类似于下图中的按钮的光效是怎么做出来的?其实非常简单,新建图层,笔刷或椭圆画出白色,高斯模糊,再将图层混合模式更改为图层叠加就可以了。但是这篇文章里我们不讨论具体的技术,而来看看如同上面的按钮通过白色的叠加创建出按钮的高光,我们来了解一下图层叠加模式在网页设计中的应用,再通过不同的实例来深层次的了解图...
什么是格式塔? 格式塔心理学诞生于1912年,是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的:我们的视觉系统自动对视觉输入构建结构,并在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。形状和图形在德语中是Ges...
标签: PS PS基础
我们推荐Velositey这个PS插件已经不是一次两次了。这款著名的PS网页布局设计工具为何会有神器之称?因为它真的能让你在短短几分钟内完成网页原型设计。正如同Velositey的口号所说:让设计师专注打磨细节完善设计,而不用在无聊枯燥的事情上耗费时间。 事实上,Velositey就是这样! 先下后看,年薪百万:http://vdisk.weibo.com/s/zduirFgzTMP...

经验教程

266

收藏

49
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部