网站效果图设计 作者 刘心美 教材--第14章焦点型页面.pptVIP

* 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 知识目标： 掌握焦点型页面效果图的设计要点 了解体育用品类页面的设计要点 熟练掌握Photoshop相关技术应用 能够进行焦点型页面的设计与制作 能够利用Photoshop设计各类网页页面 能力目标： 第14章 焦点型页面效果图 项目描述 14.1 项目分析 14.2 项目制作 14.3 授 课 安 排 切片与优化 14.4 类似页面 14.5 实训项目 14.6 项目描述 14.1 纪航体育用品有限公司是中国体育用品行业的中坚力量， “热爱并服务于中国体育事业”是该公司成立的初衷，他的目标是成为代表中国且具有东方元素的国际知名运动品牌公司。该公司所售产品充分体现了体育品牌所蕴涵的团结、活力和进取精神。此页面是纪航体育用品有限公司成立10周年之际专门设计的主题页面。 项目分析 14.2 从项目描述中可以看出：体育品牌也代表着一种体育精神：团结、不断进取、充满活力。因此需要设计出一个能带给人强烈的现代感、视觉冲击力的主页效果图，以达到吸引浏览者的目的。 Part 1 14.2.1 网页类型基础 1. 体育用品类网站描述 体育用品类网站一般用于宣传和促销的作用，专门针对体育行业企业和体育爱好者。在版式上要灵活，区域形状让人感觉充满潜能，却又刚劲有力。色彩设计根据其所面对的客户群体以及所售体育用品颜色而定，最大程度上取悦于浏览者即可。 2. 纪航公司网站需求分析 作为经营体育用品的公司，纪航公司的网站除具备上述特点以外，还应该具有符合其企业文化的个性。该公司注重每个部门紧密协作、奋力向前，所有的员工合力同心，因此适合做成焦点型页面。运动让人更加自信、超越自我，区域形状的设计应让人感觉充满潜能、充满活力，而该公司的Logo以红色为主色调，造型简单却富于立体感，因此页面中其它位置的色彩设计以冷色调或者中间色为主，用以与Logo形成鲜明对比，给人以宽广开阔、富于现代感的视觉体验。 Part 1 14.2.2 网页布局分析 1. 版式分析 本项目采用的是焦点型结构。此类页面通过对视线的诱导，使网页具有强烈的视觉效果。 图1 本项目版式图 图2 主色 Part 1 14.2.2 网页布局分析 2. 色彩设计分析 为了与以红色为主的Logo形成鲜明对比，本项目主图片采用墨绿色和深紫色，墨绿色是比较深沉的颜色，具有宽广的深度，为了理想能包容许多非理想的事物。墨绿色也是忠贞和执着的代表，更加能引导着时尚的潮流，充满霸气，独一无二，可以给人以宽广开阔、富于现代感的视觉体验。配以充满艺术性的深紫色，可以说刚柔并济，是非常理想的色彩组合。 3. 网页内容设计分析（如下图） 网页内容 背景颜色 Logo 主图片 导航栏 页脚部分 1）背景设计： 灰色介于黑与白之间，是世界上最深颜色（黑）与最浅颜色（白）的和体，属于中间色，代表了和谐、公平，公平竞争是全世界所共同倡导的体育精神。 2）页眉设计 页眉由LOGO站标、Jihang电子商务(可链接到子页)两部分组成。 Logo整体设计由汉语拼音”Ji”和”Hang”的第一个大写字母”J”和”H”的变形构成,主色调为红色,造型简单却富于动感和现代意味，充分体现了体育品牌所蕴涵的活力和进取精神。 3）内容区域设计 本案例特意将背景设置成单纯的浅灰色，以突出用以表现网站主题的焦点图片。立方体造型给人以坚固的视觉印象，仿佛在立方体的内部充满无限潜力与力量，等待被激发出来，代表坚韧的毅力和进取精神。 导航的设计来源于“太阳系”，这给了作者以启发：由4个小立方体引领着导航菜单围绕着中心的大立方体图片弧形排列，给浏览者以空间感，同时示意着纪航公司各个部门合力同心，通过团结合作使公司向更好更远的方向发展。 4）页脚设计 Jihang网页页脚部分设计力求简单实用，不抢焦点图片锋芒。与Logo相对应，页脚采用了红色，与白色搭配，使整体页面的搭配更加和谐，链接到官方商城、官方微博、互动社区、纪航团购，增强了网站的实用性，同时也传达了关于服务热线、版权等相关的信息。 Part 1 14.2.3 网页效果图 项目制作(流程简介) 14.3 14.3.1 绘制页面结构图 （1）新建photoshop文件：名称为Jihang 画布为1000*800像素 （2）打开photoshop的标尺，使用辅助线构建页面布局 14.3.2 背景设计 （1）单击工具栏【排列文档】?【使所有内容在窗口中浮动】，使文件Jihang.psd浮动在当前窗口中以便于编辑。 （2