浅谈广告设计之网页设计

第一篇：浅谈广告设计之网页设计

浅谈广告设计之网页设计

内容提要：浅谈广告设计里的网页设计，通过这几个学期的学习和实践，总结了一些关于网页界面设计的个人看法和实践中得到的一些经验。

关键词：网页设计 理念 色彩搭配 留白 细节 注意事项

21世纪是一个信息化的时代。网络这一信息时代的产物，使我们的生活更加丰富多彩，同时它也造就了一门新的艺术“网页设计”。随着时代的进步，科技和文化的发展，信息化社会及多元化时代的到来，网页设计随着时代的变迁而不断的革新。我们应该挣脱惯常、理性、逻辑的纵向思维，尝试与研习横向、发散、逆向、悖理等思维方式，多种思维方式的相互补充与综合使用会显著提高效率。我认为不管是做平面设计还是做网页设计的人都应该具有良好的审美能力。那么平面设计和网页设计有什么不同呢？

（一）设计理念的不一样

平面设计的核心是品牌。它主要以品牌为出发点去设计，要在视觉上100％体现品牌的魅力。而网页设计的核心是用户。网站的目的是与用户100％沟通，那么网页设计其实是一种UI设计，也就是所谓的界面设计，要以用户的操作习惯为出发点去设计，换句话说也就是要设计得人性化，让用户使用得更方面。

（二）颜色运用的区别

平面设计可以使用成千上万种颜色，换句话说可以使用所有颜色，但是网页设计不行！网页设计中规定了240种安全色，也就是说只能使用这240种颜色才能使网页更加漂亮，更加有兼容性。

（三）特殊的要求

网页设计不仅仅是在做设计，更多的是要考虑网页的打开速度、兼容性等问题。所以有时候不得不为了照顾这些特殊的要求而牺牲美观。我们往往看到门户站的网页都是大量的文字，这其实是为了减少页面的打开时间。韩国的网站喜欢用大量的图片、FLASH，那是因为韩国的网络带宽全球第二，它有那个条件去大量的实现视觉冲击！而目前的中国不行。

我们平时看到很多品牌的网站，很绚丽、很好玩、甚至很有创意，那其实是网络广告而已，虽然那表面上是个网站。网络广告的目的跟其他广告一样，为的就是宣传品牌形象、介

绍产品功能等等。但是网站不一样，一个网站是要实现某些具体的功能，也就是说网站是要功能>美观，而网络广告是要美观>功能。

随着信息时代的发展，网络成为了人们生活中不可或缺的一部分。我们从事设计的人员应不断创新，挣脱惯常、理性、逻辑的纵向思维，尝试与研习横向、发散、逆向、悖理等思维方式，来提升自己的设计水平。

一、网页设计，——细节重要

不管是平面设计还是网页设计，细节是非常重要的。

我们的眼睛和感觉总是非常敏锐的，即使是完全不了解网页设计技术的人也能够从一堆拙劣的设计作品当中挑选出那一个优秀的设计作品。虽然他说不出来为什么这件东西比那些都好，但是直觉会告诉他他自己喜欢哪一个。

如果别人向我们问起为什么这件作品要优于其它呢？我们的回答是“很大一部分原因是因为优秀的设计作品总是充满了丰富的细节。”

（一）像素的衬线

当你做网页的时候，1像素在访客的眼里可能不会太在意，但是在一个设计师眼里，那却是很大的失误。衬线可以体现物体在2D效果上的立体感。而立体感的体现必须要有阴影和高光。阴影我们通常使用图层样式来实现，而高光效果的实现，最常用的技巧之一就是使用衬线了。如果能合理的利用好1像素衬线，那网页可以在瞬间提升一个档次。

（二）细微的材质 坑坑洼洼凹凸不平的材质可以让你的网页更具质感，让访客感觉更加的真实。但是过于醒目和复杂的背景材质不仅不能为设计增色，反而由于分散读者的注意力而是整个设计品质降低。所以最好的策略就是让你的背景材质保持细微而柔和。

（三）柔和的渐变

柔和的渐变可以使网页变得更加的生动真实，不会显得呆板。在渐变的使用中需要注意的是，除某些特殊情况外，不要使用太过强的渐变，不论是色向上还是亮度上还是饱和度上都不可跨度太过强。因为这样强烈的过度根本不带真实感，给人一种很不舒适的感觉。

（四）微妙的阴影

我们可以使用CSS3中的text-shadow属性来完成文字的投影设计，代替了在Photoshop中完成此项工作。而且使用CSS3来给文字添加阴影自由度更高，在浏览器支持的情况下，你可以给任意文字添加你想要的阴影效果。当然IE8以下版本的浏览器是不支持此项属性的，这是我们在设计中需要注意的地方。另外，和前面提到的其它设计细节一样，阴影的效果也要足够柔和，不可过于强烈，不然很容易让整个设计看起来有一种脏脏的感觉，显得不够精致。

细节能体现一个网页设计师的水平高低，更能体现出设计师的工作态度。

二、网页也需要“呼吸”——留白 网站页面设计留白在网页设计中，寻求设计在不同角度的精致表现，力求把设计延伸到每一个角落，无论从哪一个角度审视，都展现出完美的设计魅力，从而达到局部带动整体的设计目的。

一是网页顶部（头部）留白。保留传递网站的类型、风格的logo和提供简单明了导航链接。二是页面背影留白。去除阻碍视线顺畅流动的底纹等装饰性元素，根据实际需要设计好页面边空。三是简化标题表现，去除题花等装饰性元素，特别是头条、置顶、图版等，不作围框、流动、色彩变换等特效重复强调。

四是版块分离用空白而不是表格或线条。

网页设计是Web设计中最直接可见的部分，简洁、单纯、可用是当代Web标准网页设计的主流，迅速、有效地传达信息，少用装饰，强调虚实、留白的运用成为网页设计的时尚追求。在网页设计中有效运用留白的技法和观念，无疑是对Web标准网页设计技术与艺术思维的极大丰富和拓展，也必将促使我们对这一思维方法展开更高层次的研究和探索。“留白”是中国传统绘画艺术千锤百炼的结晶，这种艺术思想源于传统的中国哲学思想，基于阴阳辩证、虚实相生的原理。虚与实作为我国古代美学的一对范畴，在古代哲学思想中有很深渊源。网页设计通过网页上的文字、图形、音视频、动画等元素向用户传达信息，把各种网页元素做艺术而合理的处理，让用户在接受信息的同时享受到美感，获得良好的用户体验。虚实与留白是网页设计要遵循形式美的法则之一。

网页设计留白的内涵包括三个方面：

（一）页面的空白部分

“白色是一切色彩中最完美的颜色，我们几乎找不到白色有消极意义的情境。”如logo区的空白、标题区的空白、内容和图片周围的空白、网页背景空白等等。

（二）大面积的有色范围 如在页面设计中只放置极少的必要元素，背景则用大面积的单纯色彩渲染，利用单纯色彩的力量来突出和烘托网页上的主要元素。

（三）页面主要设计元素背景重复出现 页面主要设计元素的背景是重复出现的、在视觉上呈现出整体性的规则图形的组合。这种为突出主体而留下的“白”，在网页设计中只要处理得当，依然会成为网页设计留白的典范。在网页设计中，无论是页面的空白，还是大面积的有色范围，或是规则图形的组合背景，都是页面的“虚”，是为了强调主体，明晰层次，突出主要的、关键的元素这个“实”的。

留白是一种艺术形式，利用留白来达到页面平衡，使整个页面布局松紧有度，形成虚实、浓淡、动静、轻重的效果，给人以跌宕起伏之感。与其他艺术形式不同的是，网页设计是以传达页面信息为主要目的的，留白更多的是服务和服从于网页的可用性。无数的可用性研究证实了一个事实：在Web中，用户对网页信息是进行浏览，而不是阅读。简洁明快、富于美感的页面更具有可浏览性，可使用户获得更加良好的浏览体验。

（一）可用性体现

1.突出设计主题 人们在完整地接收平面元素信息时，视线会形成一个习惯性的流动顺序：视点先落入视觉焦点，后随个元素间的强弱变化而作有序流动，最后完成对全部分元素信息的吸收。如在主题文字的周围留出恰当的空白空间，会比更改变主题文字大小和色彩更显突出，同时也使的页面在统一性上更易处理。

2.简洁页面元素 少就是多，简洁就是丰富，单纯就是饱满。在单纯中求丰富，在简练中求明快。适当合理的留白空恰似一个心灵歇息的驿站，让我们的神经得到了有效的缓和，从而使用户轻松浏览。当下网站建设中，功利色彩非常浓厚，网页上堆积的信息可以“多”、“挤”、“满”、“乱”形容，从视觉的角度解决办法之一就是运用网页留白，这种留白可以是空白，也可以是大面积的单纯色彩，或者是规则图形的组合，无一例个地，它使文字之间、图形之间形成页面节奏感、版块层次感、内容主次感，创造“透气”的感觉，以化解大量信息聚集起来造成的压迫感，寻求心理释放，给浏览者带来轻松、愉悦的享受和无限的想象空间，最大限度地激发他们的艺术想象力，从而更好地体会页面信息中所潜藏的深刻含意。这正是网页留白在更高层次上的艺术韵律之美。

在版面设计中，处理好大与小、主与次、疏与密、虚与实，都是美的比例基础，可谓是一种既可浏览又可休闲的两全其美的艺术享受。但对留白如果不加控制的任意使用，它不仅不能有效发挥作用，反而会造成版面混乱，影响整个页面设计。Web标准网页设计留白可从两个方面把握。留白作为一种经典的传统平面设计语言，已经延伸到当今设计的各个领域。它正在从设计的思维方法上给我们更多的思维空间。网页设计留白是网页艺术性的需要，更是网页可用性的要求。在网页设计中以无衬有，以有衬无，适应Web标准网页设计的要求，是无的可用，无的艺术。无论作为网页设计者，还是网页用户，都应当把看待“留白”提升到一个新的高度。在这样一个多元、开放的时代，它一定会拥有更大的应用空间。

三、网页设计——颜色搭配

打开一个网站，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理的版面布局，而是网站的色彩。色彩对人的视觉效果非常明显，一个网站设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。因为网页设计属于一种平面效果设计，在排除立体图形、动画效果之外，在平面图上，色彩的冲击力是最强的，它很容易给用户留下深刻的印象。因此，在设计网页时，我们必须要高度重视色彩的搭配。

色彩搭配既是一项技术性工作，同时它也是一项艺术性很强的工作，因此，设计者在设计网页时除了考虑网站本身的特点外，还要遵循一定的艺术规律，从而设计出色彩鲜明、性格独特的网站。

（一）艺术规律包括以下几个方面

1.特色鲜明

一个网站的用色必须要有自己独特的风格，这样才能显得个性鲜明，给浏览者留下深刻的印象。

2.搭配合理

网页设计虽然属于平面设计的范畴，但它又与其它平面设计不同，它在遵从艺术规律的同时，还考虑人的生理特点，色彩搭配一定要合理，给人一种和谐、愉快的感觉，避免采用纯度很高的单一色彩，这样容易造成视觉疲劳。

3.讲究艺术性

网站设计也是一种艺术活动，因此它必须遵循艺术规律，在考虑到网站本身特点的同时，按照内容决定形式的原则，大胆进行艺术创新，设计出既符合网站要求，又有一定艺术特色的网站。

（二）色彩搭配要注意的问题

1.使用单色

尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度和透明度也可以产生变化，使网站避免单调。

2.使用邻近色

所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。

3.使用对比色

对比色可以突出重点，产生了强烈的视觉效果，通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。

4.黑色的使用

黑色是一种特殊的颜色，如果使用恰当，设计合理，往往产生很强烈的艺术效果，黑色一般用来作背景色，与其它纯度色彩搭配使用。

5.背景色的使用

背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。

6.色彩的数量

一般初学者在设计网页时往往使用多种颜色，使网页变得很“花”，缺乏统一和协调，表面上看起来很花哨，但缺乏内在的美感。事实上，网站用色并不是越多越好，一般控制在三种色彩以内，通过调整色彩的各种属性来产生变化。网站是企业向用户和网民提供信息（包括产品和服务）的一种方式，是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。可见网页的界面美化是多么重要，我们应该在学习中启发想象引发访客的注目与加深记忆。

第二篇：经典教程：Photoshop制作网页banner广告设计

导言：

在这篇Photoshop教程中，我将教给你如何制作一个专业的banner广告。教程浅显易懂，你一定可以做得到的。

下面教程开始

我们这篇教程的效果如下。（图01）

图01

好了，让我们开始吧，在Photoshop中，新建一个文档，尺寸是500×300px，白色背景。（图02）

图02

选择圆角矩形工具，圆角半径设为5px，在你的画布中画出一个圆角矩形，填充绿色#6d9e1e。（图03）

图03

双击图层面板中的该图层缩略图，弹出图层属性面板，设置渐变叠加。参数如下图。（图04）

图04

现在的效果应该是如下图的样子。（图05）

图05 好了，这一步就完成了。然后我们开始创建banner的“头部”。按住Ctrl用鼠标左键单击图层缩略图，载入图层选区；点击矩形选区工具，消减掉下面一部分选区（按住Alt进行拖拽即可）。剩余的部分填充白色，如下图。（图06）

图06

点击Ctrl＋D去掉选区。改变这个图层的图层渲染模式为叠加，透明度设置为20%。（图07）

图07

好了，进入下一步吧。我希望在我们的头部中，有一个小的图形。在网上我找到了一个小的钟表的图标，打开图片，把它拷贝到我们的文件中，按住Ctrl＋T把图形变小一些。（图08）

图08 用锐化工具稍微让图形清晰一些。（图09）

图09

接下来，我们用文字工具写下了头部的标题。（图10）

图10

在这里，我用的字体是Myraid Pro，白色。但是实际上你可以选择你喜欢的字体。打开图层属性面板，设置投影，参数如下图。（图11）

图11 效果如下。（图12）

图12

好了，头部的部分我们就已经完成了。我希望给我们的banner添加更多的设计元素。选择用户自定义形状，选择一个Photoshop里面自带的一个形状，如下图。（图13）

图13

在我们的banner上面添加两个白色的形状。（图14）

图14 合并两个形状到一个图层中。好了，我们把banner外面的形状要删除。如何做到这点呢？按住Ctrl左键点击形状的那个图层缩略图，载入选区。然后按Ctrl＋Shif＋I将选区反选，按一下Delete就可以删除我们不需要的部分了。（图15）

图15

点击Ctrl＋D取消选区。设置形状图层的渲染模式为柔光，透明度为20%。（图16）

图16

现在，我们需要一个干净的头部，我们要把头部这一部分的图形形状删除掉。利用矩形选区工具可以进行这个操作。如下图。（图17）

图17 添加更多的文字。（图18）

图18

好了，剩下最后一部分了。但是之前我想要在下面放一个按钮。利用圆角矩形工具，圆角半径为2px，拖拽一个颜色为绿色#69990d的圆角矩形，如下图。（图19）

图19

好了，在按钮上面添加一些文字。（图20）

图20

Ok，我们的教程就完成了。效果看上去很不错。（图21）

图21

第三篇：网页设计之个人简介表代码

“http://1/DTD/xhtml1-transitional.dtd”>