【导语】以下是小编为大家准备的制作整洁漂亮网页的4个原则（共4篇），仅供参考，大家一起来看看吧。
篇1：制作整洁漂亮网页的4个原则
英文原文：www.myinkblog.com//03/21/4-principles-of-good-design-for-websites/
我最喜欢的设计书籍之一就是《Robin Williams Design Workshop》.它深入实际的设计理论，并且包含许多极棒的设计实例，其中一个值得关注的地方就是4项主要的设计原则，它们已经在设计中为我所用。这4项原则就是：反差, 重复, 排列, 和分类。
本文将讨论这4项与web设计相关的原则。只要在脑海中牢牢记住了这4项原则，你就一定可以设计出更加整洁漂亮的网页。
1.反差效果
好的反差效果设计可以给用户一个极好的第一印象，
如果用户的眼睛没有焦点，注意力就会在处处是相同尺寸的元素和排版界面中迷失。设计师需要设计出很明显的突出视觉元素来引导用户的体验。你可以通过选择图片、颜色和字体等来形成良好的反差效果。
图片反差
当需要在很多小元素后面展示一个大尺寸的插图时，这种方法很有效。嗯，我的意思就是，比如：
The Invoice Machine
这个网页利用一张大图片来吸引用户的注意。而同时网页很自然的单色又让很少的蓝色应用有了更好的效果。
Instabox
当你眼睛看到这个页面的时候，首先你会注意到什么？最有可能的就是盒子上面的那个星星了。跟 The Invoice Machine 一样，它们都是通过用一张大图片和很少的颜色来制造一个视觉焦点。
篇2：Fireworks设计制作漂亮网页
总有人在那里炫耀自己的ps(photoshop)技术，好象是平面就要用ps做，结果很多做网页的设计师也用ps做平面图然后切割导图，再做网站，今天我就来说说用fireworks一样可以做出好的网页设计，只要你有心!
先看最终效果图:
下面开始讲解:
1.布局
先来说一下 我们制作网页一般的大小
高度：
没有一个固定值，因为每个人的浏览器的工具栏不同，我见过有的浏览器工具栏被插件占了半个屏幕，所以高度没有确切值。
宽度：
1、在IE6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。
2、在Firefox下，宽度的分率辨减19。比如1024的宽度-19就变成1005
3、在Opear下，宽度的分率辨减23。比如1024的宽度-23就变成1001
注：Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。
所以如果是1024的分辨率，你的网页不如设成1000安全一点。
如果是800的分辨率一般都设成770。
这些需要明白并且牢记，不然很可能做出来不符合浏览器要求，不过一般我们都回设定的再稍微小一点，应为有些浏览器加了插件或者其他的东西宽度会有变化 所以 800的分辨率一般设定760左右，1024的设定990左右.
我这样用辅助线和标尺把大概范围划分出来，注意我的划分，正好是770，和1000的地方，应为我要做的网站是1024分辨率下的，但是考虑到依然可能存在800分辨率的用户，所以我回把主要的内容和菜单都放置在770以内，770-1000的地方放一些辅助的东西，这个习惯特别是在做一些门户网站设计的时候更要考虑以下，毕竟改善用户体验也是我们要考虑的问题.
2.开始工作
我们继续讲解，现在我们来画上部菜单部分的内容，其实很简单拉，就是画一个方框，一个圆，然后组合，加上渐变就可以了，如下图设置
3.下面我们来画哪个类似徽章的东西
其实也很简单，创意是类似奖状上贴的哪个获奖标志一样，会让网站生动一点，嘿嘿.
我们选择多边形，如图:
设置如下，继续贴图，大家要注意一下图层顺序，拖动到下层就好了
恩 要注意，这个图层我们固定了以后通常就不动了，所以要锁定，不然鼠标晃来晃去很容易把图移位，注意图层那里点一下就多了一个小锁子，方便吧，这下他就彻底不干扰我们了!
好的我们继续，其实其他的东西都大同小异
我们来研究一下细节.
我最喜欢的就是firewroks超级多的纹理，在ps里面有些纹理要自己做真的好麻烦啊!
我最喜欢的对角线，恩
看页面左边的渐变部分，其实就是拉出来了一个矩形，然后加上线性的渐变，然后加上对角线的纹理，稍微调整一下透明度，就这么简单，效果却很好看，嘿嘿
下一个小地方，就是产品资讯的背景框，其实也很简单
就是一个矩形，然后外框为红色，矩形加一个内部发光，发浅灰色的光，就这样就成了
下一个地方 就是右上角大家可以看到一个类似网格的底纹
其实就是一个矩形，再加上一个蒙版，一个渐变，就ok了，现在看起来是不是生动很多，嘿嘿
OK，看图
就这样一个网站的平面设计三下五除二的就搞定了，嘿嘿，怎么样fireworks方便不!
OK，今天就到这里，再欣赏一下我们的作品吧，不错吧!
篇3：PS制作漂亮质感网页导航按钮
FEVTE编注：更多鼠绘教程讨论交流和鼠绘作业提交请进入论坛PS鼠绘交流区：bbs.fevte.com/forumdisplay.php?fid=51&filter=type&typeid=90
具体的制作步骤如下：
1.填充背景为深灰色，设置远景色，新建图层1，绘制圆色矩形
2.为图层1添加图层样式(投影,内阴影,外发光,渐变叠加,描边);
3.选择图层1,使用滤镜>杂色>添加杂色(根据情况调整杂色的数目);
4.按CTRL键点击图层1,调出图层1的图形选区之后,新建图层2,填充任意色彩,选择矩形选框工具,按向上方向键,将选区向上移动1个像表的间隔,再按删除键删除选区内的色彩.再CTRL+D,取消选区.这样我们就得到了按钮底部的高光了
5.选图层2,添加图层样式(渐变叠加);
6.按CTRL键,点击图层1,调出层1选区,再新建图层3,使用渐变工具(径向渐变,白到玄色,从按钮的上中位置拖到按钮的下右位置),CTRL+D取消选区,改变层3的图层样式;如图设置
7.选择圆角矩形工具,建立与按钮同等宽度的圆色矩形路径,再选用转换点工具,移动右下角两个节点.使其变成梯形,新建图层4,设置远景色为白色,进入路径面板,填充路径(白色).按CTRL键点击层1,选图层4,为图层4添加图层蒙板.再设置图层混合模式,产生按钮的高光效果
8.输入文字,添加图层样式
完成终极效果
FEVTE编注：更多鼠绘教程讨论交流和鼠绘作业提交请进入论坛PS鼠绘交流区：bbs.fevte.com/forumdisplay.php?fid=51&filter=type&typeid=90
篇4：数字媒体中网页设计原则与制作技巧分析论文
数字媒体中网页设计原则与制作技巧分析论文
在我国经济与社会快速发展的今天，数字媒体作为一种新兴工具，已经与我国网络紧密的结合在一定，这种结合使得数字媒体本身与与我国民众生活之间的联系日渐紧密，而为了保证数字媒体能够更好的为我国民众提供服务，本文就数字媒体中的网页设计原则与制作技巧进行了具体研究，希望这一研究能够在一定程度上推动我国数字媒体网页设计的相关发展。
前言：
得益于计算机与智能手机的普及，我国网民数量已达7亿，而这一庞大的网民人口则标志着网络与我国民众生活之间联系的日渐紧密。我国当下数字媒体的发展速度不断提升，其本身也开始真正融入我国各行各业之中，但数字媒体本身在发展中也暴露出了一些问题，而本文就数字媒体中网页设计原则与制作技巧展开的研究目的，正是为了解决其中一部分问题。
1.数字媒体概述
为了能够较好的完成本文就数字媒体中网页设计原则与制作技巧展开的研究，我们首先就需要对数字媒体进行深入了解。结合相关文献资料与笔者自身对数字媒体的认知，本文将数字媒体定义为利用二进制数据处理和记录，采取数字通信的原理，收集、存储、传输各种矢量数字文本的过程，简单的说数字媒体就是一种图形、图像、视频、声音、动画等信息的载体与平台。对于数字媒体来说，其本身具备着高效相互性、灵活多变性以及强大融合性等三方面的特点，这些特点也是其能够较好发挥自身功能的原因所在。具体来说，高效相互性指的是数字媒体能够通过自身的载体与平台特性，使信息变为可感、可知、可管、可交互的状态，这就使得信息的传播的过程中能够较好的实现作者与受众的交流网络影视、网络游戏等都属于这一特点的具体表现；而在灵活多变性这一特点中，这一特点使得数字媒体能够将声音、图片、视频、音频、文字等创作要素进行较好的改变，这样相关信息就能够实现更好的创造；而在强大融合性这一特点中，这一特点使得数字媒体本身能够与各类艺术方式实现较好的融合，这种融合由于往往能够发挥“1+1＞2”的作用，就使得数字媒体能够更好的满足各类受众的需求[1]。
2.数字媒体中网页设计原则
上文中我们深入了解了各类数字媒体，而在下文中笔者将结合自身实际工作经验与相关文献资料，就数字媒体中网页设计原则进行详细论述，希望这一论述能够在一定程度上为我国数字媒体的进一步发展带来一定帮助。
2.1明确网页主题
在数字媒体的网页设计中，为了保证这一网页设计能够较好的为受众提供服务，我们首先就需要结合网页内容确认网页主题，而为了实现这一目标，网页设计人员需要进行充分的市场调查，最大程度上了解网页受众的情况，这样才能够较好的确定整个网页的风格与主题。而在确定了网页的主题后，设计人员还需要在设计的过程中保证网页本身的鲜明突出、要点明确，最终实现通过简单的网页页面传达不简单的信息这一追求。值得注意的是，网页还需要最大程度上保证自身的'即时性，这样才能够更好的实现信息的传达[2]。
2.2结合受众需求
除了明确网页主题外，网页设计人员在进行数字媒体的网页设计过程中，还需要细致了解网页受众人群的性别、年龄、职业以及受教育程度、生活习俗等方面的分布，并以此更好的结合网页向受众传达某种情感，这样就能够更好的提高数字媒体中网页信息的传播效率。例如，对网页受众年龄的把握，使得设计人员能够更好的抓住网页设计的侧重点，这样就能够保证该网页设计传达的信息更具备针对性，这自然就大大提高了网页本身信息的传达效率。值得注意的是，我们还需要在网页设计中参考受众的接受与理解信息的态度、愿望、需求以及情感等心理因素，这样才能够更好的为其提供服务[3]。
2.3保证风格统一
除了上述两方面的原则外，设计人员还必须保证数字媒体中网页设计的风格统一。具体来说，据笔者调查发现，我国当下很多数字媒体中的网页设计存在着文字设计影响网页质量、色彩运用与搭配影响网页主题风格、图片选用不合理等一系列问题，这些问题归根结底属于网页设计中风格出现的问题，而这一问题也对数字媒体中网页设计带来了种种负面影响，为此设计人员必须在文字选择、色彩搭配、图片选用等方面注意保持整个网页的风格统一，这样才能够更好的保证数字媒体中网页设计的整体质量[4]。
3.数字媒体中网页制作技巧
3.1首页设计技巧
在数字媒体中的网页设计中，网站的首页一般存在形象展示型与信息罗列型两种，一般来说信息罗列型较为适用于大、中型网站，也是我国当下最为主流的网站首页设计选择。在形象展示型的网站首页设计中，设计人员需要在突出网站本身形象的同时向受众传达相关形象与气氛；而在信息罗列型的网站首页设计中，设计人员需要结合自身信息传播特点，合理选择“国”字、拐角、标题正文、左右框架、上下框架、封面、变化等型号的版面布局方式，这样才能够实现相关信息的较好传达。
3.2风格统一技巧
上文中笔者提到了数字媒体中网页设计必须遵循风格统一这一原则，而为了真正实现这一风格的统一，设计人员就需要从网页设计的结构、色彩、导航栏等三个方面实现这一风格统一。具体来说，在网页设计的结构统一中，设计人员需要保证整个网站除特殊网页外，在网站布局、文字排版、装饰性元素出现的位置、图片的位置等方面呈现较高的统一性；而在色彩的统一中，设计人员需要尽量保证网站的主体色彩一致，并只在有需求的时候改变网站的部分色块；而在导航栏的统一中，导航栏的位置与背景必须在大小、明暗、位置等方面实现统一，这样才能够较好的提高网站本身的特点，使更多的受众对该网站产生深刻印象。
结论：
在本文就数字媒体中网页设计原则与制作技巧展开的研究中，笔者详细论述了数字媒体的概念、网页设计的原则以及网页的制作技巧，虽然受限于篇幅原因本文并未对数字媒体中网页设计进行较为深入的研究，但还是希望本文论述的内容能够在一定程度上推动我国数字媒体的相关发展。
引用：
[1]杨旭兰.色彩在网页设计中的应用研究[D].南京林业大学,2009.
[2]张燕.多媒体素材的无障碍设计研究[D].浙江师范大学,2009.
[3]黄晓乾,陈超.网页设计原则与制作技巧[J].中国科技信息,2010,07:95-96.
[4]鬲波飞.网络媒体的视觉传达设计研究[D].湖南大学,2002.
文档为doc格式
