《网页美工设计》PPT课件.ppt

Photoshop职业应用项目教程,第7章 网页美工设计,Photoshop职业应用项目教程,第7章 网页美工设计,7.1网页美工设计的特点与思路分析网页美工的任务概述 网页美工顾名思义就是对网页的美化，其主要包括三方面:网站的创意规划，网站的版式布局规划和网站的色彩规划。网页美工设计一般要与企业整体形象一致。要注意网页色彩、图片的应用及版面规划，保持网页的整体一致性。网页美工既要熟悉图形创作软件，也要有较好的视觉功底，创意能力，才能创造出符合需求的美观的页面。网页美工不同于网站后台开发的编程人员，其核心是美工，即对网站整体形式美的把握。,Photoshop职业应用项目教程,第7章 网页美工设计,网页美工设计流程1需求分析 随着社会的不断发展，企业商家品牌意识的提高，现在的网站开发设计不仅仅是功能的实现，更强调整体外观的美化和整体形象品质。与客户的充分沟通，了解客户的需求是创作网页的前提。2网站项目规划 一个完整的网站应该具备整体布局、条理清晰、内容丰富的特点，因此网站项目的规划十分重要。必须要让所看网站的客户在第一时间找到需要的信息，并给以清晰的指示引导。我们在这里只介绍基本原则，既：先整体布局，再局部整理，力求做到条理清晰、内容明确。,Photoshop职业应用项目教程,第7章 网页美工设计,3网站设计通过前期的沟通与策划，使用图形软件实施创意，完成初步的作品设计。4客户反馈在提供客户小样后，设计师需要根据客户提出的修改建议修正设计作品。这一流程非常关键，设计的网页能否得到客户的认可与这一过程有很大的关系。,Photoshop职业应用项目教程,第7章 网页美工设计,网页构成及特点1网页的创意 创意的概念：什么是创意？简单的说就是具有新颖性和创造性的想法。创意的范围很广，网站的创意不同于一般的平面广告，既要考虑网页的新颖独特，同时更重要的是考虑所用创意是否符合所设计网页客户的行业特点及网页整体功能的实现。创意的表现：创意的完美实现需要具体的形式来加以表现，关键是找到合适的创意点。例如：设计可口可乐的网页，大家会马上想到可乐瓶子的外型，热情飞扬的红色彩带，所有和可口可乐相关的元素。,Photoshop职业应用项目教程,第7章 网页美工设计,Photoshop职业应用项目教程,第7章 网页美工设计,2网页版式规划 版式设计的范围涉及包装、广告、报纸、书籍、产品手册、宣传单、网页设计等许多设计形式。本章我们只针对网页设计研究版式。A网页版式设计的组织原则 鲜明主题的诱导力 形式内容的统一 强化整体布局B 网页版面的构成元素 世间百态千变万化，归纳这些事物的空间形态均由点、线、面等基本元素构成，它们彼此交互，有序构成了缤纷的世界。在设计中也是同样的道理，任何的版式设的基本元素归根结底都是点、线、面的和谐构成。,Photoshop职业应用项目教程,第7章 网页美工设计,3网页色彩规划A 色彩基本概念自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，而其他所有颜色均属于彩色。任何一种彩色具有三个属性：（1）色相（Hue）：是颜色的基本特征，反映颜色的基本面貌。（2）饱和度（Saturation）：指颜色的纯洁程度。（3）明度（Brightness）：体现颜色的深浅。非彩色只有明度特征，没有色相和饱和度的区别。B 三原色电脑屏幕的色彩是由RGB（红、绿、蓝）三种色光所合成的，调整这三个基色就可以调校出其它的颜色。在许多图像处理软件里，都提供有色彩调配功能，可以输入三原色的数值来调配颜色，也可直接根据软件提供的调色板来选择颜色。网页设计是以三色模式为标准。在Photoshop里也可直接选择WEB模式进行色彩编辑。,Photoshop职业应用项目教程,第7章 网页美工设计,Photoshop职业应用项目教程,第7章 网页美工设计,4网站配色的原则第一原则：先定主色，再配辅色。在网页美工设计中要想让网页美观大方，色彩和谐，达到视觉统一的效果是要经过严格的色彩规划的。在一个网站中主色直接决定网站的色彩风格，在网页色彩搭配中起主导作用，决定网页的整体色调。主色决定后就是辅色的搭配，辅色的搭配在主色的基础上进行，辅色在网页中的比例一般为主7辅3，或主6辅4，切忌出现主辅色面积比例相当的情况，进而造成色彩混乱，风格模糊的情况。第二原则：有效利用黑白灰色进行网页的色彩搭配。在网页美工设计中，任何漂亮绚丽丰富的色彩都需要黑白灰的有效搭配才能在视觉上达到主次分明、重点突出、和谐统一的效果。如果一个网站的页面全部都是丰富绚丽的色彩，效果必定杂乱无章、画面跳跃不定，眼睛会倍感疲劳。,Photoshop职业应用项目教程,第7章 网页美工设计,第三原则，注意色彩的对比。有对比才会有和谐，要注意色彩中的对比关系并有效控制这些对比关系。如色彩的明度对比，纯度对比，色相对比，冷暖对比，轻重对比，面积对比等等。只有有效控制这些对比关系，网页才会达到色彩明快、视觉和谐的效果。,Photoshop职业应用项目教程,第7章 网页美工设计,5色彩的象征意义 色彩牵涉的学问很多，包含了美学、光学、心理学和民俗学等等。心理学家近年提出许多色彩与人类心理关系的理论。他们指出每一种色彩都具有象征意义，当视觉接触到某种颜色，大脑神经便会接收色彩发放的讯号，即时产生联想，例如红色象征热情，于是看见红色便令人心情兴奋；蓝色象征理智，看见蓝色便使人冷静下来。经验丰富的设计师，往往能藉色彩的运用，勾起一般人心理上的联想，从而达到设计的目的。,Photoshop职业应用项目教程,第7章 网页美工设计,色彩象征 红血、夕阳、火、热情、危险 橙晚霞、秋叶、温情、积极 黄黄金、黄菊、注意、光明 绿草木、安全、和平、理想、希望 蓝海洋、蓝天、沈静、忧郁、理性 紫高贵、神秘、优雅 白纯洁、素、神圣 黑夜、死亡、邪恶、严肃,Photoshop职业应用项目教程,第7章 网页美工设计,但心理学家也留意到，一种颜色通常不只含有一个象征意义。正如上述的红色，既象征热情，却也象征了危险，所以不同的人，对同一种颜色的密码，会作出截然不同的诠释。除此之外，个人的年龄、性别、职业、他所身处的社会文化及教育背景，都会使人对同一色彩产生不同联想。这个色彩和心理联想的理论，对设计师来说又重要的指导意义。在选择运用何种色彩时，须得同时考虑作品面向的是那类群体，以免适得其反。我们一定要充分理解色彩的一般象征含义，才能正确有效的把握色彩应用色彩。,Photoshop职业应用项目教程,第7章 网页美工设计,网页框架结构1网页框架结构的内容组成 一个基本的门户型网页一般包括标志（Logo）设计、广告形象区域（Banner）设计、导航区域设计、网页主体内容显示区域或产品服务介绍区域，以及一些附加的消息栏、搜索区域、注册用户区域等。在基本构架完成后，我们可以充分发挥聪明才智，为客户合理的科学的展示他们需要展示的内容。,Photoshop职业应用项目教程,第7章 网页美工设计,2网站Logo设计规范 Logo的应用一直是CIS导入的基础和最直接的表现形式，网络标志的设计尤其如此。A标志的职能：作为独特的传媒符号，标志（Logo）一直成为传播特殊信息的视觉文化语言。无论从古时繁复的欧式徽标、中式龙纹，到现代洗练的抽象纹样、简单字标等都是在实现着标志被标志体的目的，即：通过对标志的识别、区别、引发联想、增强记忆，促进被标志体与其对象的沟通与交流，从而树立并保持对被标志体的认知、认同，达到高效提高认知度、美誉度的效果。作为信息时代的产物，网络Logo的设计，更应遵循CIS的整体规律并有所突破。,Photoshop职业应用项目教程,第7章 网页美工设计,B网络Logo设计的基本过程：一看、二挖、三总结。一看：看客户，准确定位要仔细分析客户是什么行业，其公司行业特征，产品服务特征是什么，只有做到定位准确才不会犯方向性错误。二挖，挖掘和客户行业、产品等有联系的、可以用来表现的想法，进行创意。在定位明确后既开始进入创意阶段，这个过程是思考的过程，挖掘的过程，不放过任何相关的想法点子，最后进行综合分析提炼创意。三总结，总结挖掘出的点子创意，并进行实施。这个过程是个总结的过程也是个实施的过程，把好的想法提炼选取出后进行制作，通过图形创作软件实现其最终效果。,Photoshop职业应用项目教程,第7章 网页美工设计,C网络Logo的表现形式：作为具有传媒特性的Logo，为了在最有效的空间内实现所有的视觉识别功能，一般是通过特示图案及特示文字的组合，达到对被标志体的出示、说明、沟通、交流，从而引导受众的兴趣、达到增强美誉、记忆等目的。,Photoshop职业应用项目教程,第7章 网页美工设计,表现形式的组合方式一般分为特殊图形，特殊字体，图文并貌。1、特殊图形：通过独特、醒目的图形来吸引观者的眼球，特殊图案本身易被区分、记忆，通过隐寓、联想、概括、抽象等表现方法表现被标志对象，更容易强化沟通和被理解。2、特殊文字：在沟通与传播活动中，将反复使用的被标志体的名称或其产品名称，用一种文字形态加以统一，并对文字进行独特设计变形，以加深观者的印象，达到传播的目的。3、图文并貌:指文字与图案结合的设计，兼具文字与图案的属性，更容易被观者所接受。,Photoshop职业应用项目教程,第7章 网页美工设计,D网络Logo的规范 设计Logo时，面向应用的各种条件作出相应规范，对指导网站的整体建设有着极现实的意义。设计时要规范Logo的标准色、辅助色等配色体系，同时要考虑其大小，色彩。如果企业有VI规范手册要按VI规范手册严格执行，大小依据网页的整体结构风格而定。,Photoshop职业应用项目教程,第7章 网页美工设计,3广告形象区域（Banner)设计 Banner的英文翻译有网幅广告的含义，指网幅广告、旗帜广告、横幅广告。4导航区域设计 导航区域是网页设计中不可缺少的部分，它是指通过一定的技术手段，为网站的访问者提供一定的途径，使其可以方便地访问到所需的内容，是人们浏览网站时从一个页面转到另一个页面的快速通道。利用导航条，可以快速找到要浏览的页面。导航条的目的是让网站的层次结构以一种有条理的方式清晰展示，并引导用户毫不费力地找到并管理信息，让用户在浏览网站过程中不至迷失。为了让网站信息可以有效地传递给用户，导航一定要简洁、直观、明确。,Photoshop职业应用项目教程,第7章 网页美工设计,5网页的框架结构类型网页的框架结构无疑就是网页的骨骼、筑“房”地基。网页版面布局以导航栏为界，大致可分为：上下、左右、上左右、上左中右、综合，不规则等。1）上下结构通常上方为导航条，或者动态的企业形象、广告区域。下方为正文、内容部分。通常在内容较少或简洁的企业网站或个人网站中出现。2）左右结构一般左侧是导航条，右侧是正文、内容部分或者公司企业形象展示。3）上左右结构上方为主要的菜单导航条，左侧为点击出现的细分栏目导航条，下方为较主要的栏目及小广告等，右侧为内容区域。这种结构形式是大中型企业较喜欢的框架形式。,Photoshop职业应用项目教程,第7章 网页美工设计,4）上左中右结构式同上左右框架式稍有区别的是中间部分为内容区域，右侧则是该网站较重要的内容导航区域，或是登录、搜索区域、Flash广告等。5）综合结构式特点是功能模块多，信息分类详细，因此根据需要采用区域版面结构较合适。信息储量大的门户网站较多应用这类结构。6）不规则结构式信息量少，通常在以产品宣传为目的的企业网站和个人网站中使用。,Photoshop职业应用项目教程,第7章 网页美工设计,7.2任务1个人网页设计,个人网站是指个人或团体因某种兴趣、拥有某种专业技术、提供某种服务或把自己的作品、商品展示销售而制作的具有独立空间域名的网站。个人网页可以充分体现个人的个性风格，形式自由灵活，受到广大电脑爱好着的青睐。制作个人网页或为别人设计个人网页不要盲目开始设计，一定要做好前期定位工作。要注意设计个人网页的风格。例如：男孩子可能一般喜欢简洁大方或是色彩个性，蓝色、灰色、黑色的网页风格，而女孩子可能多数还是喜欢颜色温柔漂亮艳丽活泼，风格唯美的网页风格，这些元素都直接影响最终的设计风格。同时也可以为个人网站加入一个自定的主题，如我心飞扬、浪漫满屋、E酷一族等等，这些主题也是进行网站创意的关键切入点。,Photoshop职业应用项目教程,第7章 网页美工设计,1将要设计网页最终效果如图所示，主题确定为我心飞扬，简洁大方的风格。,Photoshop职业应用项目教程,第7章 网页美工设计,2对所设计的个人网页进行整体规划。首先，为网站确定主题名称以便Logo的设计，然后确定所设计个人网页的尺寸大小，最后确定网站结构风格，最好能先画出结构草图以便科学合理的分布所表现内容。3确定主题：我心飞扬。新建文件并将文件命改为“我心飞扬”，页面大小为780 X580像素。,Photoshop职业应用项目教程,第7章 网页美工设计,4设计Logo。创意分析：为了表现飞翔、自由等概念，我们以翅膀为Logo设计的切入点。5打开图层面板，单击“创建新组”按钮，创建新组，将组命名为“Logo”。在新组中新建图层，命名为“翅膀”。选择工具箱中的钢笔工具，在工具选项栏中单击“路经”按钮，在文档中画出一支翅膀的外轮廓路径。,Photoshop职业应用项目教程,第7章 网页美工设计,6将路径转化为选区，将前景色设为#13cf24，填充选区。,Photoshop职业应用项目教程,第7章 网页美工设计,7在图层面板中复制“翅膀”图层，将复制的“翅膀副本”图层进行水平翻转，并放置于合适的位置。,Photoshop职业应用项目教程,第7章 网页美工设计,Photoshop职业应用项目教程,第7章 网页美工设计,8输入文字“我心飞扬”，字号38，字体选择华文中宋。英文文字“HEART FLY”，字号27，字体选择Arial Black。“王小明个人网站”，字号23，字体选择黑体。调整文字的位置与大小。,Photoshop职业应用项目教程,第7章 网页美工设计,9Logo设计完毕，将Logo图层暂时隐藏。10设计导航栏和广告形象区域（Banner）。先确定Logo、导航栏及Banner的整体比例和尺寸。先将Logo所占位置定位为整体页面左上角区域，宽度为200像素，高度为120像素，为方便操作可建立参考线。选择“视图”“新建参考线”。,Photoshop职业应用项目教程,第7章 网页美工设计,11打开Logo图层显示。将其中标志调整大小后放入所规定位置。,Photoshop职业应用项目教程,第7章 网页美工设计,12制作广告形象区域（Banner），首先导入示例图片，如图7-2-11。取其局部，删除其Banner区域之外部分。,Photoshop职业应用项目教程,第7章 网页美工设计,13选择菜单“滤镜”“模糊”“动感模糊”命令，对图片进行处理。,Photoshop职业应用项目教程,第7章 网页美工设计,14为了使网页结构严谨，在Logo和Banner区域的下方绘制两条色带，Logo下方色带宽242像素、高15像素，色值为#666666。Banner下方色带宽563像素高15像素，色值为#00cc33。,Photoshop职业应用项目教程,第7章 网页美工设计,15制作导航图标，先制作出宽95 像素高24像素的矩形。然后复制四块，间隔距离1像素即可。最后在上方加入导航文字：首页、文章、像册、留言、音乐，字号为14，色值为#a8b0a9。,Photoshop职业应用项目教程,第7章 网页美工设计,16继续装饰Banner区域，在其上方加入一条宽780像素、高13像素，色值为#336666 的色带。同时为Banner区域加上文字“WWWWANGXIAOMINGCOM”，字号为25，字体为Arial Black，色值为#ffffff。,Photoshop职业应用项目教程,第7章 网页美工设计,17制作内容显示区域，首先在左边制作个人简介区域。通过选区填充制作出宽123像素、高371像素的矩形，色值为#cccccc。在图层面板中设置图层透明度为70%。最后加入所需文字，文字大小可根据需要自行调节。,Photoshop职业应用项目教程,第7章 网页美工设计,18在图像右边制作装饰色带。首先制作宽556像素、高 31像素，颜色为#666666的矩形。为了装饰需要，右上角可删除一斜角，色带下方制作出一浅色带，高度可根据需要自定。加入导航文字：“文章/心路历程/为飞翔的心插上翅膀”，字号为12，色值为#cccccc。制作正文内容显示区域，先在导航文字的下方制作宽度556像素、高度329像素，色值为#ebeeeb的矩形，同时设置其透明度为60%。最后在其上方加入内容文字，字号12，色值#545754。,Photoshop职业应用项目教程,第7章 网页美工设计,Photoshop职业应用项目教程,第7章 网页美工设计,19在网页底部绘制矩形行色块，宽780像素、高55像素，色值#545754。一个完整的网页小样就制作完毕。,Photoshop职业应用项目教程,第7章 网页美工设计,73任务2商业网站设计 由于当今企业对自身形象的逐步重视，以及对网络广告宣传的青睐，几乎每个企业都拥有自己的企业网站，还有众多利用互联网以赢利为目的的网站，我们可以都将之称为商业网站。制作商业网站首先要定位行业，只有定位准确风格才能清晰，例如科技类网站，要考虑如何通过创意表现科技的现代感、科技感。风格可以以简洁为主，色调以蓝色调为主。接下来的例子是进出口贸易网站，整体网页设计采用简洁大方的风格，色彩以蓝色绿色为主，配以黑白灰色。,Photoshop职业应用项目教程,第7章 网页美工设计,Photoshop职业应用项目教程,第7章 网页美工设计,1新建文件，在对话框中将文件重命名为“商业网站”，设置文件宽度为780像素，高度为1050像素，分辨率为72像素/英寸。打开图层面板，新建图层。在画面顶部绘制一个宽780像素、高30像素的矩形，填充颜色为#898989。,Photoshop职业应用项目教程,第7章 网页美工设计,2制作Logo。在图层面板中新建组，组名称改为“Logo”。新建图层，使用多边形套索工具画出Logo图标。,Photoshop职业应用项目教程,第7章 网页美工设计,3加入英文和中文与Logo进行版式组合，并将其高度设为43像素。其中中文为黑体，英文均为Arial Black。,Photoshop职业应用项目教程,第7章 网页美工设计,4在Logo右边画出宽415像素，高16像素的矩形色块，色值为#194a87。,Photoshop职业应用项目教程,第7章 网页美工设计,5打开本章素材图001Jpg，选择菜单“滤镜”“模糊”“动感模糊”命令。,Photoshop职业应用项目教程,第7章 网页美工设计,6将经过动感模糊的图片移动到商业网站文档中，删除不需要的部分。,Photoshop职业应用项目教程,第7章 网页美工设计,7在Banner区域输入文字“JIEFENG 创造卓越！”，作为品牌广告语。同时在Logo和Banner区域下部加入两条矩形色带，上方为灰色，色值为#c9caca，宽780像素、高34像素，下方为绿色，色值为#009944，宽780像素、高24像素。,Photoshop职业应用项目教程,第7章 网页美工设计,8使用工具箱中的圆角矩形工具画出宽116像素、高39像素的矩形，色值为#666565，用来制作导航栏。,Photoshop职业应用项目教程,第7章 网页美工设计,9将矩形下方删除一部分，移动到上方灰色矩形条中，并进行连续复制，复制四个。将最右边的矩形颜色改为绿色，色値为#009944，宽度改为273像素，高度不变。,Photoshop职业应用项目教程,第7章 网页美工设计,10在导航栏中加入文字，字号为14，字体为黑体，在第五个宽度改为273像素的色带中加入白色色带，在其右侧加入文字“搜索”，字体为黑体，字号为12，制作搜索栏。,Photoshop职业应用项目教程,第7章 网页美工设计,11制作用户注册登陆框。首先利用前面使用过的方法制作高180像素 宽142像素的用户登陆栏，最后加入所需文字，字体黑体字号12。,Photoshop职业应用项目教程,第7章 网页美工设计,12制作内容板块区域。内容板块区域用于放置新闻标题或是企业产品图片，在一般的商业网站中大量用到，形式也多种多样。在此我们介绍最常用的也最简单的形式，即用单色矩形创建的方法，这种方法的优点是前台网页美工人员将页面设计好后，后台编程人员将很容易用网页编辑软件实现其效果。,Photoshop职业应用项目教程,第7章 网页美工设计,13通过同样方法制作出其它内容板块区域。,Photoshop职业应用项目教程,第7章 网页美工设计,在实际网页设计制作中，最常用到的知识点基本上是调色命令、路径、选择工具。而要做好网页，网页的结构与配色是关键问题，需要大家多分析、模仿优秀的设计作品，在这个过程中吸取优秀的设计经验，在设计中才能运用自如。,