麻产精国品免费入口2023.高清_伊甸大象2024新地扯一二最新_蘑菇tv成品人视频免费看

公司新闻

将想法与观点,与您一起分享~

开发案例插画 插画-树 插画-树

网页设计中如何设计出优秀的banner大图

润雪科技 时间:2017-07-03 09:41 浏览量:3762

大家在浏览网页时经常可以看优秀的banner大图设计,这些设计往往可以通过其优秀的颜色处理、场景打造、
氛围渲染、排版布局、文字处理以及巧妙的创意等方面来抓住浏览者的眼球。那么我们是不是可以吸收这些
优秀的banner大图视觉,来帮助我们设计其他领域的东西呢? 网页设计是相通的,答案自然也是肯定的。那么今天我们
就跟大家分享一下一些优秀的banner大图设计在网页中的应用。

我们主要通过层次、色调和创意三个方面来跟大家进行汫解。


一:网页设计层次

画面的层次感,说白了其实就是画面的内容有主次之分,有空间感和距离感,有虚实之分,光影层次清
晰,这样的画面才起来才真实、丰富,而且通过一些特殊的处理手法,可以进一步拉开画面中不同元素的层
次,使得主体更加突出。(因本部分的汫解不涉及到色彩方面的知识,为了更便于大家观察,所以对海报进
行了去色处理)

远近关系
重庆网站设计,网站设计公司


上两图中按箭头所示方向由近及远,画面纵深感强,远近景层次明显,画面感很强。运用到网页设计当中如下:


重庆网站设计,网站设计公司

重庆网站设计,网站设计公司

重庆网站设计,网站设计公司


通过上面的例子可以看出,远近层次清晰的画面,搭配上网页设计中的内容,可以使页面看起来更加透气,
在浏览内容的同时,也能够通过场景传递出很强的代入感。

虚实关系

重庆网站设计,网站设计公司


上左图中按箭头所示方向依次由实到虚变化,满足正常情况下近实远虚的道理,层次感很强;在上右图
中,实景和远处的虚景想必大家都可以理解,但为什么离我们最近的下方的人也是虚的呢?我们看下下面这
张图可能更容易理解。



重庆网站设计,网站设计公司


这张海报其实更接近于咱们生活中的实景拍摄,而且是那种有明显对焦主体,毫无疑问是图中拿着竹竿
的美女。那这时,虽然前景的花草离我们更近,但是因为它们偏离我们的对焦点(我们的臓并没有直接去
看这些花草),所以,这时候前景的花_们也是去做模糊处理的,甚至有的时候模糊度比远处的场景还要
明显。这个是需要了解的。们再看下海报中的虚实关系在网页中的应用。



重庆网站设计,网站设计公司

重庆网站设计,网站设计公司


通过上面的例子可以看出,把握好画面中的虛实层次,结合网页的内容,可以使页面看起来更加接近真
实场景,视觉体验上来说更加逼真。

氛围关系

重庆网站设计,网站设计公司

重庆网站设计,网站设计公司


图1通过烟雾来拉开女主与远处机器人的层次,烟雾既弱化了远处机器人,同时突出了女主,让两者有
一个明显的层级关系;图2中人物本身颜色较暗,背景也是暗色,这时候如果直接把人物置入,人物就会与
背景融为一体,这里利用人为添加的光效、碎片等氛围元素,凸显了人物的边缘轮廓,背光的效果使人物从
黑暗中分离出来;图3也是同理,只不过它通过光影和烟雾一起来区分众多人物之间的层次关系。那么氛围
关系运用到网页设计当中如下:



重庆网站设计,网站设计公司

重庆网站设计,网站设计公司


通过上面的例子可以看出,合理利用一些氛围元素的渲染,例如光、烟雾、云等素材,不仅可以起到烘
托页面气氛的作用,而且可以突出主体,同时弱化主体外的其他元素,成功地拉开主体与其他^主体元素之
间的层次关系。

二、网页设计色调

画面的色调,是传达画面所要表达倩感的有效途径。不同的色调可以给人带来不同的体验,正是因为有
了不同的色彩,才使得我们的设计更加丰富。

色调统一

重庆网站设计,网站设计公司


上两图中,左图统一的暖色调彰显了画面的热情激昂,而右图统一的冷色调则表现出画面的冷酷。在处
理时切记对画面中所有的元素都要进彳另充_的环境色处理,运用到网页设计当中如下:



重庆网站设计,网站设计公司


上面几个例子中,为了更进一步的融入大环境中,设计师都对原始素材进行了色调上的二次处理,整个
网页的风格在色调上保一。

冷暖对比

重庆网站设计,网站设计公司

重庆网站设计,网站设计公司


上图中,在色调处理上都运用了冷暖对比的形式,使画面的细节更加丰富,同时,冷暖的对比可以表
达出超强的对抗性。运用到网页设计当中如下:



重庆网站设计,网站设计公司

重庆网站设计,网站设计公司


通过上面的例子可以看出,冷暖的对比在网页的场景打造过程中,可以用来很好的表现"对抗〃和〃战
斗"方面的主题,另外,整个冷调的场景中适当加入些暖调,也可以起到突出主体的作用。

三、网页设计创意

丰富的海报创意不仅可以抓人眼球,而且可以很巧妙地表达出主题。大到整体的形式,小到文字或素材
的细爷处理,都是可以学习并且运用到网页iS计中的。

形式创新


重庆网站设计,网站设计公司


上左图通过人物躲在墙壁破裂的一角来体现画面的神秘感,而右图则通过破碎的玻璃来反射出一些跟男
主相关的人物或场景,运用到网页设计当中如下:



重庆网站设计,网站设计公司

重庆网站设计,网站设计公司


网页设计中素材的处理



重庆网站设计,网站设计公司


上左图对中间的复联英雄进行了类似剪影的处理,而右图则对人物的边缘进行了颗粒化的处理,运用到
网页设计当中如下:



重庆网站设计,网站设计公司

重庆网站设计,网站设计公司


网页设计中文字烘托


重庆网站设计,网站设计公司


上左图将书法的"武侠"二字作为画面主视觉进行处理,而右图则直接将死<寺坐在类^3d处理后的电影
名字上,很好的融入到了画面中。运用到网页设计当中如下:



重庆网站设计,网站设计公司

重庆网站设计,网站设计公司


下面是一些网页设计中banner大图的实例



重庆网站设计,网站设计公司


这里通过对原画的再次处理,加强了画面的对比度,进一步加强了冷暖对比,对距离远近不同的人物也
通过模糊、调色、添加烟雾及火光等素材进行了层次上的逬一步区分,同时添加了下雨及火炮等氛围元素。
页面的部分内容元素相对于人物做了4前后的处理,使得页面整体的层次得到了逬一步的加强。



重庆网站设计,网站设计公司


网页设计中banner大图的设计可以给我们的网站带来很多灵感,其实不止是banner大图,设计本身就是相通的,所以很多别的领域的设
计也可以让我们去学习。本文的讲解更偏重于游戏,而且由于本人水平有限,讲解涉及到的知识并不全面,
还望各位看官能够理解。最后送给大家一句话:设计源于生活,我们应该学会从生活中汲取灵感。



来源声明:本文【网页设计中如何设计出优秀的banner大图】由润雪科技编辑原创或采编整理,如需转载请注明来自润雪科技。以上内容部分(包含图片、文字)来源于网络,如有侵权,请及时与本站联系。

TAG标签:网站开发 网站设计

相关文章
  • 前端react项目使用prettier来格式化(美化)各种代码

    前端react项目使用prettier来格式化(美化)各种代码

    前端react项目使用prettier来格式化(美化)各种代码,包括javascript、php、java、typesctip、css、less、json、sql等都可以美化

  • php用Mpdf将html文档转为pdf

    php用Mpdf将html文档转为pdf

    php将html文档转成pdf保存到服务器

  • php用libreoffice将ppt转为pdf

    php用libreoffice将ppt转为pdf

    1、先安装libreoffice:yum install libreoffice;2、由于ppt中都是中文,执行命令转ppt的时候中文可能乱码,我的解决办法是在liunx系统中安装中文字体,把windows的字体直接全部拷贝到liunx服务器中,直接把所有字体都上传到服务器

  • php利用imagick扩展将pdf导出成图片

    php利用imagick扩展将pdf导出成图片

    需要先安装php的imagick扩展,两种方式,第一种是使用php,第二种是使用命令执行;随便用哪种执行需要修改nginx配置文件增加:proxy_read_timeout 600s;使其链接60秒后不断,不然pdf一旦过大60秒无法完成工作就断开链接了

  • apache配置转发,如使用workerman 或 webman等框架的时候配合apache

    apache配置转发,如使用workerman 或 webman等框架的时候配合apache

    在使用workerman 或 webman等框架开发应用的时候需要配合nginx 或 apache进行转发,官网的文档只有写nginx,下面的apache的配置,前提是apche需要开启这两个模块

  • 一个class类几个函数即可调用各种微信支付场景

    一个class类几个函数即可调用各种微信支付场景

    真在的只需要一个class类文件几个函数就可以调用微信的所有支付,不管是微信公众号、h5、app、小程序支付,加密方式都是一样的,对比下微信的支付文档,只需要修改第一步传入的参数不同,下单地址不同,加密方式都是一样的,所以只要看懂下面的第一个函数,将搞定微信的任何支付。

如果您感觉我们的案例非常不错,请与我们取得联系~
立即咨询
获取方案及报价 023-6288-5285
网站建设流程 需求沟通
网站建设流程 签订合同
网站建设流程 项目开发
网站建设流程 上线/运营维护

张经理

186-9655-6121

邹经理

188-1980-6503

润雪科技二维码
电话咨询 在线咨询 微信咨询
灵川县| 天峨县| 安阳市| 通榆县| 广河县| 盐边县| 云安县| 曲沃县| 左云县| 隆安县|