网站效果图设计 教学课件 作者 刘心美教材--第15章综合实训一.ppt

《网站效果图设计 教学课件 作者 刘心美教材--第15章综合实训一.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第15章综合实训一知识目标：掌握骨骼型页面效果图的设计要点了解布艺装饰类页面的设计要点熟练掌握Photoshop相关技术应用能够进行骨骼型页面的设计与制作能够利用Photoshop设计各类网页页面能力目标：综合实训一：布艺装饰类网页页面效果图项目描述15.1项目分析15.2项目制作15.3授课安排切片与优化15.4类似页面15.5实训项目15.6项目描述15.1星宝布艺有限公司1998年成立，是一家有着13年专业性窗帘、布艺系列产品销售加工企业。经营的产品定位于中高档，代理经销国内外各式产品，包括窗饰、窗帘杆

2、、软包、电动开合帘、壁纸、工艺品、饰品画、花艺等，凭借对窗帘产业独到的领悟和创新，以高雅、优质的窗帘布艺产品在激烈的市场洪流中独树一帜。今后，星宝布艺将继续秉承“温馨布艺、全心全意”的服务理念，紧随国际时尚脚步，为更多的消费群体造就美的生活真谛！项目分析15.2从项目描述中可以看出，星宝布艺有限公司的产品力求高雅，且注重服务价值，因此需要设计出给人温馨、舒适感并且有很强服务性的主页效果图，以达到吸引浏览者的目的。Part115.2.1网页类型基础1.布艺装饰类网站描述布艺装饰类网站一般用于宣传和促销的作用，以

3、布艺装饰企业和几乎所有的家庭为客户群。版式设计较自由，区域形状应让人感觉亲切不生硬，色彩设计根据其所面对的客户群体以及所售产品特点而定，以温馨舒适为主。2.星宝布艺网站需求分析作为经营布艺装饰类产品的企业，星宝公司的网站除具备上述特点以外，还应该具有符合其企业文化的个性，那就是“温馨布艺、全心全意”的服务理念，给人以温馨、时尚、富有现代感、实用的网站体验效果。Part115.2.2网页布局分析1.版式分析本项目采用的是骨骼型结构。骨骼型的网页版式是一种规范的、理性的分割方法，通常有竖向或横向通栏、双栏、3栏、

4、4栏等几种，一般以竖向分栏为最多，如果综合运用这几种分栏形式效果会更好。图1本项目版式图图2主色Part115.2.2网页布局分析2.色彩设计分析为了实现企业建站目的，本项目主要采用紫色搭配白色，尤其是渐变的使用更突出了温馨的氛围。紫色充满艺术性，是高贵、优雅的代表，也是很多女性的最爱，给人柔美舒适的感觉，更加能引导着时尚的潮流，给人以富于现代感的视觉体验。3.网页内容设计分析（如下图）1）背景设计：本页面采用黑色带花纹图案做背景。背景图案的纹理恰恰来源于布艺，是众多布艺产品中较精致的一种花纹样式，表现出古典

5、沉稳的艺术效果，与页面的靓丽时尚相得益彰。2）页眉设计页眉由LOGO站标、横向通栏、导航条三种元素组成，其中含有两个横向通栏，以紫色与白色搭配为主色。Logo整体设计由“公司中文名称+公司英文名称”搭配够成。3）内容区域设计骨骼型的页面布局较规范，内容区域主要在横向上分为左、中、右三部分。左侧以导航的形式对公司产品进行了分类展示，中间部分主要包括公司简介、布艺知识、成功案例几部分。右侧主要是代理品牌的Logo链接。4）页脚设计网页页脚部分设计力求简单实用，列举了公司的基本信息、该网站版权情况以及技术支持单位，

6、增强了网站的实用性。Part115.2.3网页效果图项目制作(流程简介)15.315.3.1绘制页面结构图（1）新建photoshop文件：名称为星宝布艺，画布为985*945像素（2）打开photoshop的标尺，使用辅助线构建页面布局15.3.2背景设计（1）打开素材“001.jpg”，全选并复制到星宝布艺.psd，将增加了的“图层1”改名为“背景层”。（2）复制“背景层”，使其充满整个画布。15.3.3页眉设计（1）新建图层文件夹，命名为“页眉”，存放所有页眉区域所涉及的图层。（2）打开图片“页眉右侧.

7、jpg”，复制到“星宝布艺.psd”的“页眉”组，重命名该图层为“页眉右侧”，调整图片位置，输入文字并设置文字样式。（3）在“页眉右侧”上方，新建“Logo”组，用以存放所有设计Logo所涉及的图层。（4）新建图层并重命名为“Logo背景”，绘制选区并设置渐变（参数参照教材），输入文字后调整文字样式。（5）新建组“导航”，存放所有导航区域所涉及的图层。（6）新建图层“导航”，绘制938*34的选区，填充白色背景，输入导航条文字并设置样式。（7）新建组“banner”。打开“banner.jpg”,复制到“星宝

8、布艺.psd”，新增图层命名为“banner图片”，与导航条右对齐。（8）新建图层“左侧渐变”，在左侧空余位置画出矩形选区，设置并横向填充渐变，输入文字后设置样式。项目制作15.315.3.4内容区域设计（1）新建图层文件夹，命名为“内容区域”，存放所有内容区域所涉及的图层。（2）新建图层，命名为“产品展示”。绘制200*503px的矩形选区，并填充白色。（3）制作产品展示部分的浅灰色标题栏。（4）