浅析基于Photoshop的网页页面设计方法与流程.docVIP

浅析基于Photoshop的网页页面设计方法与流程 　　摘 要：互联网应用的飞速发展与普及，使网页设计形成了一个新兴领域，网站界面设计受到越来越多企业及开发者的重视，使用Photoshop来设计美观、简洁的网页界面是大部分专业设计师和爱好者的首选，本文通过网站页面设计前期的需求分析、以及使用Photoshop对网页中各元素的设计技巧、页面的整个结构布局的设计，全面的阐述了使用Photoshop设计网页页面的方法与流程。 　　关键词：Photoshop；页面设计；CI设计 　　中图分类号：TP393.092；TP317.4 　　随着网络技术的飞速发展，电子产品的不断更新换代，智能手机的不断普及，互联网应用达到了空前的繁荣。在互联网中，各种不同行业、不同种类、页面精彩吸人眼球的网站页面带给人们强大的视觉冲击力的同时也给人们的生活添加了色彩。在这些精彩页面诞生的最初，就是设计者根据用户需求应用Photoshop来不断完善并完成页面效果图的过程，下面就来阐述一下基于Photoshop的网页页面的设计方法与流程。 　　1 需求分析 　　设计者与客户签订合同之前，都要看设计者的网站页面效果图是否能达到客户的预期要求，那么怎样能设计出让客户满意的效果图，关键在于正确与全面的了解客户的需求。精确掌握客户需求应该从以下两方面着手： 　　1.1 确定网站类型。常见的网站分类分为如下几类：（1）综合性网站：以新浪为例，他的首页包括丰富的新闻、资讯、娱乐、体育等信息，包罗万象，种类非常丰富；（2）电子商务类网站：俗称购物网站，比如淘宝、聚美优品这一类网站都可以称为电子商务类网站；（3）娱乐资讯网站：在互联网上看电影、听音乐已经成为人们日常生活的一部分，土豆网、腾讯视频等都属于这类网站；（4）社交类网站：随着互联网时代的到来，人们的交流方式产生很大变化，网络交流平台给人们沟通学习带来了巨大的便利，微博、豆瓣、人人网等都是这类交互式的网站。 　　1.2 网站的CI设计需求分析。CI（Corporate Image）是指企业的形象，在网页设计中，色彩的选择和搭配结合Logo和Banner的设计，能够最有效的传达企业形象。（1）Logo设计：Logo即标志，是商标的一种体现，可以是中文，英文字母，可以是符号，图案，可以是动物或者人物等等，一个好的Logo能体现出网站的特色和内涵[1]；（2）网页的标准色彩：“标准色彩”是网站形象和内涵的延伸，一个网页的标准色彩不宜超过三种，太少则太单调，太多则让人眼花缭乱。一般来说，适合于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色[2]；（3）网页的标准字体：根据网站的内涵，选择适合的字体，一般网页的默认字体为宋体；（4）Banner设计：可以作为网页中的横幅广告，也是体现网站中心意旨、情感思想的宣传中心。 　　通过标志、色彩、字体、标语协调统一的设计，可以很好的树立网站的CI形象。 　　2 页面的基本组成部分与结构图 　　一般企业网站都包括六部分：logo、导航、banner、内容、友情链接、版权。根据不同网站的需求定位，这六个部分在体现形式上有着不同的延伸和变化，但不管是大型综合性网站还是小至个人博客网站，我们都会找到这六部分的身影。由这六部分组成的网页页面基本结构图如图1所示： 　　图1 网页基本结构图 　　3 在Photoshop中制作网页元素的技巧 　　3.1 Logo制作。Logo不仅仅是将某些颜色与线条的堆叠，它要比品牌的名称更具标识度。在设计过程中，要思考、艺术分析和系统规划。一个优秀的Logo作品，应该具备简单、动态、灵活、独特、有意义这五个特点，同时应注意颜色的重要性、不要标新立异Logo不是艺术品、不要低估定制字体、不要可预测的效果、不要落入俗套。 　　3.2 Banner制作。一个优秀的Banner作品的主题要明确、重点文字要突出、文字要符合阅读习惯、要在最短的时间激起点击的欲望、色彩不要过于醒目、产品数量不宜过多、信息数量要平衡、留空给图形文字以呼吸的空间。 　　3.3 导航栏制作。导航栏是继Logo之后用户第一个看到的组件，如何让导航栏更加优雅美丽，在设计过程中应主意两大要点。第一，不要使用一些繁杂的装饰来做突出，通过字体设计、悬停效果设计、页面留白可以设计出简约、优雅的极简主义导航栏[3]。第二，响应式导航设计更完美，根据用户终端设备的不同，按照屏幕尺寸来合理缩放页面，达到更好的阅读效果。 　　3.4 网页背景制作。网页背景设计目前还没有一套设计准则可遵循，根据总结，我们把网页背景大致分为六种类型：颜色背景、沙文背景、条状背景、照片背景、复合背景、局部背景。一般情况下，考虑到网站的下载速度和网页内容的显示效果，我们并不提倡使用图像作为网页