Photoshop第17章综合实训三：--旅游类网页设计.pptVIP

* 知识目标： 掌握曲线型页面效果图的设计要点 了解旅游类网站的页面效果图描述与设计要点。 熟练掌握Photoshop相关技术应用 能够进行曲线型页面的设计与制作 能够利用Photoshop设计各类网页页面 能力目标： 第17章 综合实训三：旅游类网页设计 项目描述 17.1 项目分析 17.2 项目制作 17.3 授 课 安 排 切片与优化 17.4 类似页面 17.5 实训项目 17.6 项目描述 17.1 随着人们生活水平的提升，旅游成了很多人的爱好，根据有关数据统计，仅仅2010年，国内的旅游类网站的产值就超过了300多亿，而2011年几乎在前面的半年里面就完成了去年的八成的销售任务，增长趋势令人震惊。可见，现在旅游类的网站已经进入了快速发展阶段。 东北旅游网是以东北旅游为依托。按照突出特色优势和差异化的发展思路，提升中国优秀旅游城市和重点旅游景区的品质。 项目分析 17.2 从项目描述中可以看出：从项目描述中可以看出，旅游类网站在界面设计上不要过于单调，要注意色彩搭配的协调。因为旅游类网站是服务性的，因此在用户体验方面要做到“人文关怀”，一切以人为本。旅游类网站在栏目设计上不易过多。毕竟旅游网不是门户网站，过多的栏目会让访问者感觉到自己深陷大海之中，迷失方向，并导致投入过于浪费，资金太大。论坛、博客、SNS、留言本等网站的互动功能不要过多，这回带来人员使用上的浪费。 Part 1 17.2.1 网页类型基础 旅游类网站描述 旅游网是以提供旅游服务为主，面向全国乃至国外的旅游爱好者。在设计上要求新颖时尚，操作简单方 便。在设计风格上要给人新颖、别致的感觉。在栏目设计上要以用户体验为主，实现贴心服务。 2. 东北旅游网需求分析 作为服务性网站，东北旅游网把用户需求放在第一位，以公众体验效果为依据，进行网站风格、栏目及 内容的设定及制作。 网站内容包括：旅游资讯、景观介绍、民俗文化、在线服务、旅游线路、车票服务、酒店预订、联系我 们等。 Part 1 17.2.2 网页布局分析 版式分析 本项目采用的是曲线型结构，如图1所示。骨骼型的网页版式是一种规范的、理性的分割方法。 图1 本项目版式图 图2 主色 Part 1 17.2.2 网页布局分析 2. 色彩设计分析 为了实现东北旅游网建站目的，本项目在色彩上采用蓝色、白色及蓝白渐变色，如图所示。运用各种图片素材处理及整体组合突出网站新颖、别致的效果。 3. 网页内容设计分析（如下图） 网页内容 LOGO 导航栏 横向通栏 内容区域 页脚 1）页眉设计 网页的页眉由LOGO站标、横向通栏、导航条三种元素组成，在设计上背景包含多幅图片的处理及曲线形状的运用，颜色上采用以蓝色与白色搭配的渐变色为主。 Logo整体设计由圆角矩形背景加上“东北旅游”每个字的第一个拼音字母的大写组成即“DBLY”。 2）内容区域设计 东北旅游网内容区域中的栏目是按照功能的实际需求进行设定的。在布局上东北旅游网整体采用曲线型的页面布局。在内容区域设计上相对较为规整。横向上大体分为左、中、右三部分，在内容区域各部分功能中左侧包括“在线服务”和“旅游咨询”两个栏目。中间部分包括“吉林风光”、“辽宁美景”、“黑龙江风情”和“民俗文化”四个部分。他们都属于“景观介绍”中的栏目。右侧包括“经典景观集锦”和“旅游线路”、“车票服务”、“酒店预订”四个栏目，其中“经典景观集锦”是以Flash动画效果展示的。 3）页脚设计 网页页脚是页面不可缺少的组成部分，设计上力求简单实用。东北旅游网在页脚处放置了站内搜索功能，更 加方便用户的查找。在右下角处重新放置了导航，更加方便用户对网站的操作。同时也放置了版权、联系方式等 基本信息。 Part 1 17.2.3 网页效果图 项目制作(流程简介) 17.3 16.3.1 绘制页面结构图 （1）新建photoshop文件：名称为天马社区网。画布为900*900像素。 （2）打开photoshop的标尺，使用辅助线构建页面布局。 16.3.2 页眉设计 项目制作 17.3 16.3.3 内容区域设计 项目制作 17.3 16.3.4 页脚设计 切片与优化 17.4 此曲线型页面效果图的背景主要是页眉中的图片背景，为了提高加载速度，可将大图片分割成几块，以大图片为基准，对其它内容进行 定位，切片时顺序是由背景到前景，页面由上而下。可以通过DIV+CSS样式设置得到的效果，则不需要切片。 16.4.1 页眉切片 （1）将东北旅游网.psd效果图中页眉背景显示出来，隐藏其它内容。 （2）选择工具箱中