网页配色的方法与技巧

2024-09-18

网页配色的方法与技巧（精选4篇）

网页配色的方法与技巧篇1

随着互联网的广泛应用,网页制作已成为热门,一个好的网页既要内容翔实,又要视觉新颖,还要布局合理,既要把内容的层次性和空间性突出显示出来,又要使页面合理流畅、环环相扣。网页制作的工具有很多,但是利用Photoshop和Dreamweaver配合使用制作出来的网页布局更规范,页面更精美,因此深受网页制作者的推崇。

1 网页布局的原则

网页布局是决定网站美观与否的一个重要方面,通过合理的、有创意布局,才可以把文字、图像等内容完美地展现在浏览者前面。最好先用笔和纸将构思的草图画下来,不需要很详细,只需要画出页面的大体结构作为创作样本即可。布局的原则如下:

1)对称均衡:对称是一种美,能给人稳定感,但过度的对称就会给人一种呆板、死气沉沉的感觉,对称形式构成的网页具有重心稳定和庄重整齐的美感,均衡的网页生动活泼富于变化,具有变化美。

2)对比协调:对比使网页形式生动、个性鲜明,避免平淡无奇;对比协调则给人以柔和、亲切的美感。

3)比例适度:确立良好的比例关系,并非黄金分割,但一定要适度、协调,才能使整个页面和谐、匀称明朗。

4)疏密交错:网页上重复的形式过多,会使页面显得呆板,容易使浏览者产生视觉疲劳。因此不要整个网页一种样式,要通过留白、空格、改变行间距、字间距等变化来打破页面呆板、平淡的格局。

5)节奏韵律:韵律是使节奏富有律动感的变化美,将点、圆形、线条等沿一定的曲线重复排列时,就会产生韵律感,使画面显得轻盈而富有灵气。

2 在Photoshop中布局网页

1)首先在Photoshop中建一个1001×550像素的文件,这样在1024×768这种常规分辨率下,不会出现水平滚动条和垂直滚动条(长度1001像素是作者在多次实验中总结出的数据)。

2)一般情况下页面分头、中、底三个部分,如果看到别人的版面想借鉴的话,那就做个截图,然后把截图放在最底层,作为最初的草图。如果不想用别人的版面,最好也还是找一个同类网站借鉴一下。

3)参考线是布局网页的有效工具,先用横参考线将网页布局分成几大版块,然后再用竖参考线将每个板块按思路分为几个小板块,最后整体观察一下。需要注意的是网站的Logo和导航条等都是事先设计好的,有固定大小,在做这些区域时尺寸一定要按照这些元素尺寸设计,不能有丝毫差错,否则进入Dreamweaver整合时,则可能出现空边或撑开表格的现象。

4)导航文字的特殊字体要在Photoshop中直接添加上去,字体的颜色设置要考虑到整个页面效果,另外,如果想?制作出变化的导航效果,就复制对应的图层,设计好变化效果之后再隐藏该图层。将导航改变效果的图层进行切片的时候,保存另外一个名字存在另一个路径下,然后再将这些改变效果的图片拷贝到存放所有切片图片的路径下,为在Dreamweaver中替换图像做准备。

5)网页中的元素有很多,像Banner条、文本区域、文字、Logo等,尽量把这些相对独立的元素放在不同的图层中,这样方便以后的再编辑。

3 从Photoshop通向Dreamweaver的重要环节———“切片”

利用Photoshop设计网页之后,要进行“切片”,然后才能通过Dreamweaver进行加工制作。以下列举了切片的几个方法和技巧。

1)依靠参考线进行切片,在设计的时候用到参考线,在切图的时候也要用参考线,参考线能保证我们切出图在同一表格中的尺寸统一协调,有效避免“留白”和“爆边”。

2)Logo和导航条必须先切成图片,因为一般情况下,Logo和导航条都是特别设计的,尤其是导航条,只有必须经过切片后才能在Dreamweaver实现效果。

3)大图要切成小图,图片太大会影响网页浏览。把大的图切分均匀的小图,可以提高网页下载速度。

4)渐变效果一定要切,虽然渐变特效Dreamweaver可以实现,但其效果简单,无法给人以流畅的感觉,所以我们必须在导入Dreamweaver之前先切成图片,利用Photoshop的优势来美化。

5)虚线和转角形状必切,虚线和转角形状在Dreamweaver不能实现,因此只能使用Photoshop先切片,然后再通过Dreamweaver加工实现。

6)每个内容编辑区域可单独作为一个切片,在Dreamweaver中将该小“切片”删除后就是一个表格,可以在该表格中进行内容编辑。但并不是所有的图片都可以被删除。一般的做法是,图片被删除后,由于图片外围是表格,我们可以定义表格的长宽数值为图片的长宽数值,以保持整体图像的完整性。

7)有效存储切片。存储切片的文件夹必须位于站点的根目录下,文件夹名必须是英文名字。存储切片时用“文件—存储为Web所用格式”命令,选择路径通常在网站根目录下,保存文件名如index.html。这样切切后的图片都保存在了根目录下的images文件夹中。如果将导航改变效果的图层进行切片的时候,要将对应原图层隐藏,然后再执行一次“文件—存储为web所用格式”命令,保存另外一个名字如tihuan.html存在另一个路径下,然后再将这些改变效果的导航图片拷贝到根目录下的images中,为在Dreamweaver中替换图像做准备。

4 在Dreamweaver中加工网页

将切片后的网页在Dreamweaver中打开,如:index.html。其实整个网页是一个大表格,每个切片是个大表个划分的小表格。下面就进入网页制作阶段。以下列举了常用技巧:

1)在Dreamweaver中,如何输入一个空格呢?

Dreamweaver中对空格输入的限制是针对“半角”文字状态而言的,将中文输入法的“半角”摸时改称“全角”模式就可以了。

2)怎样才能够保证网页中文字不跟随浏览器字体大小设置而变动?

由于IE浏览器可以自由设置窗口内容字体的大小,这样由于用户的原因可能会导致显示上出现问题。怎样才能固定文字大小呢?办法就是通过CSS样式表对字体进行强制性控制,即不容许变化。新建一个样式表,选择“类型”,然后对文字的大小、字体、样式等进行修改,一般情况下,文字的大小选择12较为适宜。

3)怎么样才能为图片添加指定颜色的边框?

如果图片没有经过处理直接插在网页上,看上去很难看,这时如果给图片加上个边框,效果立马就不一样了。方法是新建一个CSS样式表,选择“边框”,然后对边框进行样式、宽度和颜色的修改。

4)怎样制作可以响应鼠标事件的翻转图片?

我们经常会在一些网页中看到当鼠标滑过时,能变成另外的样子。这是通过两张不同的图片来实现的,也就是所谓的“翻转图片”效果。方法是选择“行为”里的“交换图像”,然后点击“浏览”找到原文件和所对应的替换图片,当然你要提前准备两张大小完全一样的图片,这样才能保证翻转时不会产生视觉上的不适。

5)如何添加图片的提示信息?

在我们浏览网页时,当鼠标停留在图片对象或链接上时,在鼠标的右下有时会出现一个提示信息框进行注释说明,作用显而易见。方法是先选中图片对象,然后在属性面板中的“替代”输入框里输入需要提示的内容就可以了。

6)如何制作一个边框为1的表格?

如果是仅仅将“边框”值设为1,那么制作出来的表格要比1粗,并且看上去很不美观,如果将表格的“边框”、“填充”都设置为“0”,“间距”设置为“1”,并且设定整个表格的“背景颜色”如红色,同时设定单元格的“背景颜色”如白色,就制作出了一个边框为1的红格白底表格。

以上是对我多年设计网页的一个小结,通过Photoshop设计网页,通过Dreamweaver加工网页,以达到网页布局合理,页面精美的目的。综上,希望通过我的这些建议,可以对读者有所启发和帮助,实现自己的完美设计。

参考文献

[1]隋涌.网页布局之形式原理与设计要素[J].北京印刷学院报,2007(6).

[2]http://hi.baidu.com/cx901124/blog/item/1a6748513dbd726b8535248e.html.

[3]腾飞科技.Dreamweaver8完美网页制作基础、实例与技巧[M].北京:人民邮电出版社,2007.

探析电脑美术设计中的配色技巧篇2

在日常生活中, 世间万物均与色彩分不开。在印刷技术、动漫设计与制作、影视特效和建筑装潢等视效性强的行业中, 作品的好坏深受色彩的影响。人们经常在直觉的引导下选取和搭配颜色难免会有些不自信, 尽管国内外基于艺术及印刷行业的发展已经研发了电脑配色软件和色彩管理软件, 但作为设计师必须懂得色彩搭配的相关美学知识、色彩搭配心理、色彩搭配的地域文化、色彩搭配与人的性格气质的关系等, 才能更容易通过色彩去表达他们的设计理念, 设计出具有视觉冲击力的优秀作品。

2配色的技巧

利用色彩的色相、色调等因素重组后可以按照自己的意图准确地表达意象, 根据配色的种类提出配色设计的三个阶段。

2.1色彩的选择

第一阶段色彩的选择, 可细分为选择色相、选择色调、选择色相型以及选择色量率四种选择步骤。

(1) 选择色相

首先必须大概确定需要冷色还是暖色, 并选择基本色相。主色的色相能够决定配色的大部分, 因为主色是基本色中所占面积最大的颜色, 支配着配色的整体。色相可大致分成七色:红色、橙色、黄色、绿色、蓝色、紫色和洋红色。这七种颜色各代表不同的意象。首先必须大概确定需要暖色还是冷色。

(2) 选择色调

色调大致可分为纯色、明色、淡色、浊色、淡浊色、暗色、黑色及白色等八大类, 如图1所示。在这八种色调中, 先选出想表现意象的色调, 以及接近表现色调的一种色调, 将这两种色调作为占较大面积的配色中心色调与辅助色调。选择两种以上的色调混合时, 搭配的原则就是要区分主色与对比色的色调。面积最大的主色调应该是重点表现的色调, 而对比色调要选择作为辅助主色意象的色彩。色调的组合可以使所表达的意象更加丰富, 搭配适宜的话可扬长补短, 发挥出色调各自的优点、掩盖单一色调各自的缺点, 使人在观看时自然产生微妙的感觉。

(3) 选择色相型

在这个步骤中, 要选择基本色的色相型, 也就是说根据主色来确定对比色的色相。基本色是由主色与对比色构成的, 选择对比色色相的时候, 针对主色选择什么样的色相作为对比色, 就是确定色相型。色相型可分为八类:对比型、准对比型、三角形、全相型、微全相型、类似型、同相型、微对比型。

(4) 选择色量率

此步骤是选择色量率的高低。所谓色量率就是色彩强弱的尺度, 强弱由综合色调及明暗差所形成。如果没有选择好适当的色量率, 就会让人产生不快的感觉, 所以必须检查色调的强弱是否需要变化。相同的配色, 降低色量会带给人优雅高级的感觉。若提高色量则可给人充满活力的意象。

2.2样式的选择

选择完颜色以后, 接着就可选择配色的样式来稳固意象。同样的配色如果样式改变, 整个感觉都会改变, 所以样式的选择也是相当重要的。这个阶段又可分为三个步骤, 首先是选择配色的样式, 接着再选择背景色调以及色彩数量。

(1) 选择配色的样式

所有的配色都是通过三种样式所组合、构成的, 这三种样式分别为:对比型、散开型以及中心型。

A:对比型

配色版面的左右或上下分成两部分, 就可以表现出对比感。例如强调明亮的色彩对暗淡的色彩、冷色对暖色的正相对, 不加入任何中间色, 就可以表现出直爽、不浪费、不暧昧不明的感觉。散开型就是不受任何拘束的开放型配置。同样的色彩不集中在一处, 而是散布在画面四处。没有集中于中心或进行左右对比, 可以给人轻快自由的印象。中心型的配置就是将主角放在中央位置进行强调。中心型容易使人产生踏实、心情平静的感觉, 并可以表现出传统感以及带给人安心感。但要注意的是这种配置比较保守, 不适合用在表现生气勃勃的跳动感及轻盈的状态, 也不适合表现坚实的实用性。

(2) 选择背景色调

背景大致可分成三种类型, 分别是白色型、淡色型及深色型。白色型的背景给人干净舒畅、简单又不浪费的感觉, 可以正确传达出主角颜色本身的感觉, 亦可缓和强烈的颜色, 将白色当作背景使用的食品照片, 可以给人清洁新鲜的印象;淡色型的背景可呈现出柔和、自然优雅的感觉;深色型则可以表现激烈强力及神秘的感觉。若使用黑色作为背景, 可给人紧缩、主角颜色看起来较鲜艳、较一致的感觉。

(3) 选择色彩的数量

使用的色彩数量也会影响最终的效果, 一个画面中使用的颜色数量在三色以内属于少色数型, 少色数型可以让人感到舒畅, 简练以及一致性;至于色数不受限制的多色数型, 可以表现出热闹欢乐、有朝气、自由以及开放的感觉。

2.3配色与调整

第三个阶段时要突出主角色彩, 配色时要特别关注主角的强弱感。配色完成后, 最后还要进行检查及调整, 以免有些地方过于显眼, 或者有些呆板, 或是主题不够清晰, 检查修正后才算完成配色。

(1) 配色——突出主角

在准备配色时要确认主角的位置。配色的步骤是从较强的颜色开始配起, 即使是从背景色开始也没有关系, 但必须时常考虑到主角。只要能够使主角明确, 就能让人产生安心感。以下为六种能够强调主角的方法:提高彩度、增大明度差、增大色相差、增加色彩、抑制减弱其他色块和扩大领地, 前三种方法可以直接强调主角;后三种则可间接强调主角。

(2) 调整——强调与融合

配色完成后, 必须要重新审视画面, 如果发现一些问题, 例如有太过显眼或太过杂乱的地方, 都需要将配色进行融合及平淡化处理;相反太过平淡的配色需要加强。当两方面都取得平衡时, 配色才算完成。

配色可用上述三个阶段完成, 第一阶段选择颜色, 第二阶段选择样式。首先选择配置的样式, 接着选择背景色调以及色彩数量。第三阶段就是要突出主角色彩, 配色时要特别关注主角的强弱感。配色完成后, 最后还要进行检查及调整, 以免有些地方过于显眼或者有些呆板, 或是主题不够清晰, 检查修正后才算完成配色。

3总结

色彩是艺术作品中的一个十分重要的因素。良好的配色能够带给人视觉及心理上的好感, 若运用在美工设计上, 则设计出来的图像或产品则更加引人注目、易于接受。在美术设计中, 设计者要利用色彩的独特语言优势来创造并强化美术设计作品的主题思想, 利用色彩的感染力和艺术美感来呈现独一无二的作品个性和风格, 准确地传达产品信息, 展示创意, 让观众在舒适、愉悦的视觉享受中欣赏艺术作品。

参考文献

[1]王传东.设计色彩学[M].山东:山东美术出版社, 2007.

[2]韩国I.R.I色彩研究所编, 李红姬译.The Color for Designer给设计师的专业配色图典[M].北京:人民邮电出版社, 2010.

[3]朱天明.专业色彩搭配图典经典配色相似配色[M].北京:化学工业出版社, 2006.

[4]王勇, 董轩志.基于用户体验视角下的网页视觉传达设计研究[J].包装工程, 2013, (12) :14-17.

[5]李莉婷.色彩设计中单纯化配色原理的运用研究[J].装饰, 2005, (12) :095-096.

网页制作过程与技巧篇3

网络的快速发展,使得越来越多的信息和资源以网站的方式得以呈现,网页设计已成为相当热门的实用技术。而网页制作看似简单实则困难,它是一项从艺术设计到页面制作再到后台开发的系统工程[1]。因此,掌握网页制作的一般过程和技巧,在网页制作过程中能起到事半功倍的效果。

1 网页制作过程

要制作出一个让浏览者喜爱的网页,需要遵循以下步骤:

(1)网页主题定位。设计网页时,首要步骤是确定网站内容,即网站主题。优秀的网页不仅具有艺术性和可观性,更需要具备可浏览性,主题不明确的网站没有任何吸引力。

内容主题的选择要求小而精,一般根据现有能力和情况,进行市场分析和调查,确定自己网站的方向和浏览群体,寻找一个好的出发点。尽量不要尝试制作一个内容宽泛的站点,一是会导致自己的网站失去其特色,二是给后期的网站制作与更新维护带来困难。因此,将网站主题定位得相对小而精,是网页制作的第一步。

(2)网页风格设计。根据网页主题和浏览群来确定网页风格。风格是个抽象的概念,主要体现网站的整体形象,包括logo、banner、color、font等诸多因素,不同的浏览者由于其个体的原因,对于风格喜好会有所不同[2]。网页风格需要结合整个网站来设计,一个好的创意加上一定基础的美工,能更好地服务于主题,衬托出主题,提高网站访问率。总之,整个网页要注意风格一致,包括主色调、导航栏、字体与大小、版权信息、标题、注脚、版面布局。

(3)网页资料搜集。网页内容直接决定网站访问量,其选择应注重价值性,搜集资料贵在“精”而不在“多”。方式有两种:一是在互联网上搜集尽可能多的资料,然后根据一定的规则进行过滤和整理;二是由作者主导设计,主页内容是网站的根本所在,设计时要精心组织内容,突显自己的特色,以区别于其它网页。

(4)网页整体规划。一个网站的网页页面数目,每个网页的具体内容,都由网页设计者来决定。该设计规划工作类似于设计师设计大楼:先设计图纸,再建楼房[3]。网站设计规划内容包括网站结构、网页栏目、整体风格、颜色色调、网页布局、文字图片等,制作网站之前应先画结构图,制作时才能做到胸有成竹,驾轻就熟。

(5)网页设计制作。(1)Dreamweaver是目前最优秀的网页编辑和网站管理软件之一,其它网页辅助工具包括图片编辑工具Photoshop、Photoimpact等,动画制作工具如Cool 3d、Flash等;(2)根据结构图将自己的想法融入设计中,该过程比较复杂而细致,需要遵照一定的顺序,一般按先大后小、先简单再复杂的思路进行制作[4]。先大后小,指先设计好大的结构,再逐步完善小的结构设计;先简单后复杂,指先设计出简单内容,再设计复杂内容,这样出现问题时便于修改。另外,灵活运用网页模板,可大大提高网页制作效率。

(6)网页上传测试。网页制作完成后,需要上传并发布到Web服务器上,才可以在浏览器中访问到该网页。关于上传工具的选择,建议利用Dreamweaver本身自带的FTP功能,另外,也可以选择专门的FTP工具。上传成功后,应在浏览器中对相应链接进行测试,发现问题及时修改,然后上传再测试。

(7)网页后期维护。网页内容需要经常更新维护,一成不变很难吸引浏览者,应定期补充新的内容,才能提高访问量。

2 网页制作技巧

2.1 网页布局技巧

常用的网页布局大致分为“国”字型、拐角型、“T”字型、“L”字型、综合框架型、Flash型、变化型等。但这些布局方式比较传统,相比之下,F式布局是一种很科学的布局方法,其基本原理是通过大量的眼动研究,发现依赖视觉线索来“控制”用户的视觉路径,是当前最有效的布局方式[5]。一般而言,用户浏览网页的视觉轨迹是先看顶部,然后看左上角,再沿着左边缘顺势直下,而用户往往不太注意右边信息,这跟字母F相像,因而F布局应运而生。在F布局下,由于眼球的第一运动聚焦于网页左上角,因此应将重要元素诸如:头条、副题、热点放在左边,而右边一般放置一些对用户无关紧要的广告信息。

2.2 尺寸选择技巧

2.2.1 网页尺寸选择技巧

大多数初学者在制作网页时,并不知道如何设定网页界面的宽度尺寸。设计太窄不美观,设计太宽会出现水平滚动条,不利于用户浏览。

网页的页面宽度选择技巧如下:(1)如果在800*600屏幕分辨率下,网页宽度在778像素以内不会出现水平滚动条,高度则视版面和内容决定;(2)如果在1 024*768屏幕分辨下,网页宽度在1 002像素以内不会出现水平滚动条,高度在612~615像素之间不会出现垂直滚动条。

2.2.2 广告尺寸选择技巧

网页都会投放一些广告,宽尺寸的广告一般比纵向尺寸的广告效果好,因为其更符合读者的阅读习惯。读者阅读时一般按“思维单位”来摄取信息,该“思维单位”是指每次读取的词量[6]。较宽的尺寸使阅读者可以非常方便地一眼读到更多文字,但也不能一味地用大广告,关键是适合网页布局,且能将广告和网站内容进行融合。

常用的广告标准尺寸有:(1)120*120,适用于产品或新闻照片展示;(2)120*60,适用于LOGO;(3)120*90,适用于产品演示或大型LOGO;(4)125*125,适用于表现照片效果的图像广告;(5)234*60,适用于框架或左右形式主页的广告链接;(6)392*72,适用于有较多图片展示的广告条,用在页眉或页脚;(7)468*60,适用于普通广告条尺寸,用在页眉或页脚;(8)88*31,适用于网页链接,或网站小型LOGO。

2.3 网页速度提升技巧

访问网页时,网页下载速度是网站留住访问者的关键因素,如果访问者20~30s打不开一个页面,一般就会关闭当前访问的网页。浏览网页实质就是将网页内容下载到本地硬盘后,再用浏览器解释查看。网页空间越小,浏览速度就越快。因此,网页设计应遵循从简原则,如尽量不要使用太大的Flash动画、图片等[7]。

此外,尽量使用静态HTML页面,ASP、PHP、JSP等程序能实现网页的动态交互,运用这些语言能使网页的交互性更好,方便数据存取,如论坛、留言板等。但这些程序必须先执行处理、生成HTML页面后,才能在客户端供访问者浏览,这就会耗费一些资源。如果访问量大,网页显示速度更会受其影响。

2.4 图片处理技巧

同广告牌一样,图像比文字更能吸引浏览者眼球。在网页中使用图片,选择的尺寸应足够大,保证能够清楚地获取图像信息并看到细节。一般而言,较大体积的图片效果清晰度更好,更能吸引眼球,但这种图片不能使用太多,否则网页加载速度会受到影响。

如果图片偏大,可以用Photoshop将图片转换成适用于制作网页的格式,方法是:选择“文件”菜单中的“另存为”命令,将其存储为Web所用格式。若图片颜色不多,就存储为gif格式,若颜色比较复杂,就存储为jpg格式,这样保存出来的图片所占空间较小,图片质量损失小[8]。

2.5 文字处理技巧

网站文字如果太拥挤,容易使人视觉疲劳。网页中的文字必须具有可读性,而且应像广告牌上的文字,位置突出,周围留有足够空间。

太深色的文字背景仿佛让人处于非常狭窄的空间里,给人以压抑感,令人阅读困难。网页中的文字颜色也很重要,不同的浏览器对文字颜色的显示效果不同,有些浏览器能正常显示漂亮的颜色,而有些浏览器无法正常显示相应的文字颜色。制作网页时,可以选择一些漂亮的图片作为自己网页的背景,文字的颜色可以选择白色、蓝色、黄色等,这样搭配的网页典雅、大方且温馨。另外,也可以选择用背景色来搭配文字,常用搭配有浅绿色底配黑色文字、白色底配蓝色、红色底配白色文字、深的底色配黄色文字等[9]。

文字排版可参照报纸的编排方式,将网页内容分栏设计,两栏比一满页的视觉效果好,更方便访问者快速阅读。字体也会影响文字可读性,通用字体(Arial、Times New Roman、Garamond and Courier)最易阅读,特殊字体(Gothic、Script、Westminster、Cloister)用于标题效果较好,但不适用于正文。

2.6 颜色选择技巧

许多网站常常令人过目不忘,这主要归功于其色彩搭配。如何驾驭好网页颜色,对于网页制作者尤为重要。要制作出色彩协调的网页,除学习各种色彩理论和方法外,还应多借鉴一些知名网站的用色方法,以快速提高网页色彩搭配水平。

(1)注重公司形象的色彩选择。公司或企业一般都各自配置了一定的颜色标准,比如:新浪网的主色调介于浅黄和深黄之间,同时其形象宣传、海报、广告使用的颜色都与网站颜色一致;再比如,国富投资公司的主色调是C:100%,M:60%,Y:0%,K:0%,这种颜色使用到网站上显得网站色调自然、底蕴深厚[10]。

(2)注重公司风格的色彩选择。许多公司网站使用的颜色能凸显公司风格,如海尔使用的颜色是中性的绿色,即充满朝气又不失自己的创新精神;女性网站使用粉红色较多;大公司使用蓝色较多;等等,这些都是在突出自己的风格。

(3)注重个人习惯的色彩选择。这些网页的颜色使用大多凭个人爱好,以个人网站居多,比如自己喜欢红色、紫色、黑色等,在做网站时就倾向于这些颜色。每一个人都有自己喜欢的颜色,因此这种类型称为习惯色。

3 结语

要制作出优秀的网页必须注重原则和细节,比如主题定位、整体规划、颜色搭配、布局选择、尺寸大小、图片处理等,任何一点的疏忽都会影响到网页制作效果。掌握网页制作的一般过程和技巧,一定程度上可以帮助设计者提高网页设计质量,让网页的表达更为生动,吸引到更多的访问者。但是,初学者必须认识到,经验的积累和沉淀、内容和效果的创意,对于设计出优秀的网页更为重要,是资深网页设计师的必备素养。

摘要：随着网络应用的普及,越来越多的人开始接触到网页制作和网页维护,但多数初学者由于没有掌握网页制作过程和技巧,使得设计的网页很难达到预期效果。通过介绍网页制作的一般过程和常用技巧,使初学者对网页制作有更好的了解和掌握,进而提高网页设计质量。

关键词：网页设计,网页制作,Dreamweaver

参考文献

[1]陶颖.从设计角度探讨如何进行网站的制作[J].电脑知识与技术,2015(27):217-219.

[2]李忠明.浅谈网页设计的基本规范和常用技巧[J].电脑知识与技术,2008(23):1084-1085,1093.

[3]张成忠.PhotoShop网页设计的技巧研究[J].电脑知识与技术,2015(20):152-154.

[4]华冰.现代电子商务中网页设计的理性与感性研究[D].石家庄:河北师范大学,2010.

[5]陈烨.面向用户体验的网页界面优化设计方法研究[D].重庆:重庆大学,2010.

[6]刘利华.网页设计中视觉元素的运用研究[D].长沙:湖南师范大学,2009.

[7]刘丹.网页设计中的Flash动画视觉语言研究[D].合肥:合肥工业大学,2006.

[8]周婧.PhotoShop网页设计技巧[J].科技创新与应用,2012(5):38.

[9]杨旭兰.色彩在网页设计中的应用研究[D].南京:南京林业大学,2009.

网页配色的方法与技巧篇4

1 网页版式设计

1.1 网站制作流程

每个网站在主题、内容、规模、功能等方面都各有不同, 但是有一个基本的开发流程可以遵循。第一阶段是规划网站和准备素材;第二阶段是网站的总体设计和网页版式设计及具体制作;第三阶段是测试、发布、推广与维护网站。可见网页版式设计是网站制作过程中一个非常重要的环节。

1.2 网页版式设计步骤

网页版式设计就是我们在浏览器上看到的一个完整页面。设计师依据网站理念, 将造型、结构、信息、色彩等视听多媒体元素进行有机的排列组合, 将理性思维个性化地表现出来, 达到某种视觉效果, 从而形成网页风格的整体设计。它是网站风格的重要体现, 是决定网站外观的直接表现形式。用photoshop进行网页版式设计的步骤如下:

1.2.1 构思

根据网站的主题及访问群体确定网站整体风格, 并设计版面布局。常见的网页版面布局类型:T型布局、口型布局、三型布局、POP布局等。用哪种布局需具体情况分析。如内容多, 可用口型或T型布局;如展示型企业网站或个人风采的主页, 则POP布局是首选。

1.2.2 用photoshop进行页面整体设计

根据设想的网页页面布局, 用photoshop设计网页页面的效果图。这一步主要是把网站的标志、广告条、菜单、导航条、图象等信息

1.2.3 对页面图象切片并形成网页文件

页面整体效果图设计好后, 利用切片工具将图象文件切割成小图象并优化, 保存为网页文件。一般来说, 头部的色彩丰富, 中间和底部的色彩比较少。为尽量缩减文件大小, 可以在photoshop中分别选择头部、中间、底部分别处理裁切, 另存为几个不同文件, 然后切图。

2 实例设计

本实例以为博士伦眼镜进行网站主页设计为例。首先打开photoshop, 新建一个文件, 尺寸为978*600像素, 颜色为RGB模式, 背景颜色为深灰色。然后根据网站主题, 图片色彩确定白色和灰色为网页主色调, 局部使用绿色、棕红色, 简洁明了, 视觉效果好。最后通过布局模块, 元素整合等步骤, 简单制作出一个网页雏形, 如图1。

本实例主要使用矩形选框工具、椭圆选框工具、钢笔工具, 使用填充命令填充颜色, 然后用文字工具将网页名、导航栏上的菜单名等输出并加入准备好的图片素材, 即可达到以上效果。

3 应用技巧

用photoshop进行网页设计时, 适当运用一些小技巧, 可增加网页的美感。如对本实例中进行一些细节设置, 即可让页面更生动。

3.1 图层样式使用

图层样式的阴影、发光、斜面和浮雕等效果多次作用, 能让网页元素更有立体感, 如本实例中的多处文字和图片均使用到图层样式。用铅笔工具分别选取一个较背景色更深的颜色和较背景色更浅的颜色紧挨着分别画一条直线, 即可得到如图2B的凹进去的效果。

3.2直线设计

图2A中的上下端线条为多次使用矩形选框工具并填充颜色得到的效果, 缺乏立体感。

3.3 自然光照效果

图1中网页每个模块的颜色都是简单的纯色组合, 其效果显得死板不生动。为让页面色彩更加丰富有质感, 可使用白色的软画笔工具, 点击新建图层, 调整图层不透明度, 即可得到图3的自然光照效果。

通过以上各种细节效果设置, 最后得到效果图如下:

与图1相比, 图4显得整体效果更佳美观高档, 从细节处体现出品质和水平。

4 结束语