网站效果图设计 作者 刘心美 教材--第11章满版型页面.pptVIP

* 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 知识目标： 掌握满版型页面效果图的设计要点 了解饮食类页面的设计要点 能够进行满版型页面的设计与制作 能够利用Photoshop设计本类型网页页面 能力目标： 第11章 满版型页面设计 项目描述 11.1 项目分析 11.2 项目制作 11.3 授 课 安 排 切片与优化 11.4 类似页面 11.5 实训项目 11.6 项目描述 11.1 “coffee”是一家以出售咖啡为主的时尚饮品店，它力求营造一种温馨、时尚的营销理念，面对的主要客户群包括时尚人群、成功人群、知识分子等。并致力于打造联盟经营策略，愿与有志之士共同发展与进步。 项目分析 11.2 从项目描述中可以看出：coffee网站因为文字信息量比较有限，图片信息量比较充足，不适合像传统的标准网站版式那样划分成规整的区域块。因此在设计中要把握一个明确的主题，图片多，少量文字、色彩强烈火、开放的空间，利用宽松的版式、温暖的色彩，达到吸引浏览者的目的。 Part 1 11.2.1 网页类型基础 饮食类网站描述 饮食类网站一般用于宣传和促销的作用，在版式上要灵活，区域形状要圆滑、柔和，同时在色彩设计上多采用暖色系作为主色调，要合理开放空白的空间，达到留白的效果。 2. coffee网站需求分析 coffee网站正是咖啡屋的网络形象，传播咖啡文化，传播文明、时尚，正是网站最终要达到的效果。下面将客户需求细化如下： 需求项目 需求项目内容 建站目的 提升企业形象；进行产品宣传、品牌传播； LOGO设计 请帮助设计 网站风格 浪漫，温馨，视觉设计新潮、冲击力强 网站色调 暖色调 (红、黄、绿、有活泼、大方、视觉冲击力强等特点) 网站栏目内容 较 少 coffee网站正是咖啡屋的网络形象，传播咖啡文化，传播文明、时尚，正是网站最终要达到的效果。下面将客户需求细化如下： 表1 客户需求分析表 Part 1 11.2.2 网页布局分析 1. 版式分析 本项目采用的是满版型结构。主要以图像为诉求点，通过整个图片满版到背景或是局部满版到背景，也可将部分文字压置于图像之上。满版型以舒展、大方，内容紧凑，气氛表达充分，适合温馨和暖性思维的表达，具有视觉传达效果直观而强烈。 图1 本项目版式图 图2 主色 Part 1 11.2.2 网页布局分析 2. 色彩设计分析 含蓄时尚的棕色，典雅沉静的烟色，亲近自然的褐色，雍容大气的驼色……这些统称为咖啡色系的颜色。咖啡色诠释着平和安宁、细致、悠然自得、温厚低调的意境，用粉红，浅绿，鹅黄，乳白……与之相配，衬托出委婉和别致。选择牛奶融入了咖啡的瞬间，在色彩设计中浅金的金属光泽，搭配牛奶乳白色的韵味，一如香醇浓郁的味道，仿佛能深入心肺，抚平心里的每一层褶皱。 3. 网页内容设计分析（如下图） 网页内容 LOGO 导航栏 背景图片 主图片 版权和联系方式 1）背景设计： 满版型页面布局的特点就是以图片为主体，在coffee网页的设计中，为了体现coffee的主流文化，选择了咖啡豆图片（dou.jpg）作为主背景图，绘制了咖啡色的形状作为内容区域，确定了页面的主色调。 2）页眉设计 coffee网页的页眉由LOGO站标、导航栏两部分组成，由于满版型页面中主图片要占据绝对的地位，因此页眉设计要围绕主图片，相互映衬，形成一个整体。 LOGO设计采用奶白色椭圆形状作为背景，小标志设计成水滴形状，字体采用了Bauhaus 93，字体大小为24点，为了突出网站标志添加了光晕效果。 导航栏采用了圆弧形梯状排列设计，圆绕在内容区域左侧，为了突出导航，在导航栏下加了暗纹加以修改饰。即突出了主图片的中心效果，同时加强导航栏的浏览强度。 同时为了加强服务特性，增加了“welcome”区域，表达了对浏览者的敬意。 3）内容区域设计 coffee网页的内容区域由两部分组成，第一部分是主形象区域，利用大面积的咖啡图片（sweet.jpg），并对sweet.jpg图片添加了滤镜等特殊效果，形成色彩的强对比，电影的光轮效果，使整个图片呈现梦幻般的意境，安宁、淡雅的韵味。第二部分是品牌产品展示区，采用带有小脚丫印迹、白色背景的环形区域，展示各种强色彩的果汁、冰淇淋、咖啡，彰显了本店的产品特色、企业形象。为了加强服务，还提供了服务电话等细节设计。 4）页脚设计 coffee网页页脚部分设计比较简单，传达了关于服务热线、版权等相关的信息。 Part 1 11.2.3 网页效果图 项目制作(流程简介) 11.3 11.3.1 绘制