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

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

1、第11章满版型页面设计知识目标：掌握满版型页面效果图的设计要点了解饮食类页面的设计要点能够进行满版型页面的设计与制作能够利用Photoshop设计本类型网页页面能力目标：第11章满版型页面设计项目描述11.1项目分析11.2项目制作11.3授课安排切片与优化11.4类似页面11.5实训项目11.6项目描述11.1“coffee”是一家以出售咖啡为主的时尚饮品店，它力求营造一种温馨、时尚的营销理念，面对的主要客户群包括时尚人群、成功人群、知识分子等。并致力于打造联盟经营策略，愿与有志之士共同发展与进步。项目分析11.2从项目描述中可以看出：coffee网站因为文字信息量比较有限，图片信

2、息量比较充足，不适合像传统的标准网站版式那样划分成规整的区域块。因此在设计中要把握一个明确的主题，图片多，少量文字、色彩强烈火、开放的空间，利用宽松的版式、温暖的色彩，达到吸引浏览者的目的。Part111.2.1网页类型基础饮食类网站描述饮食类网站一般用于宣传和促销的作用，在版式上要灵活，区域形状要圆滑、柔和，同时在色彩设计上多采用暖色系作为主色调，要合理开放空白的空间，达到留白的效果。2.coffee网站需求分析coffee网站正是咖啡屋的网络形象，传播咖啡文化，传播文明、时尚，正是网站最终要达到的效果。下面将客户需求细化如下：需求项目需求项目内容建站目的提升企业形象；进行产品宣传

3、、品牌传播；LOGO设计请帮助设计网站风格浪漫，温馨，视觉设计新潮、冲击力强网站色调暖色调(红、黄、绿、有活泼、大方、视觉冲击力强等特点)网站栏目内容较少coffee网站正是咖啡屋的网络形象，传播咖啡文化，传播文明、时尚，正是网站最终要达到的效果。下面将客户需求细化如下：表1客户需求分析表Part111.2.2网页布局分析1.版式分析本项目采用的是满版型结构。主要以图像为诉求点，通过整个图片满版到背景或是局部满版到背景，也可将部分文字压置于图像之上。满版型以舒展、大方，内容紧凑，气氛表达充分，适合温馨和暖性思维的表达，具有视觉传达效果直观而强烈。图1本项目版式图图2主色Part111

4、.2.2网页布局分析2.色彩设计分析含蓄时尚的棕色，典雅沉静的烟色，亲近自然的褐色，雍容大气的驼色……这些统称为咖啡色系的颜色。咖啡色诠释着平和安宁、细致、悠然自得、温厚低调的意境，用粉红，浅绿，鹅黄，乳白……与之相配，衬托出委婉和别致。选择牛奶融入了咖啡的瞬间，在色彩设计中浅金的金属光泽，搭配牛奶乳白色的韵味，一如香醇浓郁的味道，仿佛能深入心肺，抚平心里的每一层褶皱。3.网页内容设计分析（如下图）1）背景设计：满版型页面布局的特点就是以图片为主体，在coffee网页的设计中，为了体现coffee的主流文化，选择了咖啡豆图片（dou.jpg）作为主背景图，绘制了咖啡色的形状作为内容区

5、域，确定了页面的主色调。2）页眉设计coffee网页的页眉由LOGO站标、导航栏两部分组成，由于满版型页面中主图片要占据绝对的地位，因此页眉设计要围绕主图片，相互映衬，形成一个整体。LOGO设计采用奶白色椭圆形状作为背景，小标志设计成水滴形状，字体采用了Bauhaus93，字体大小为24点，为了突出网站标志添加了光晕效果。导航栏采用了圆弧形梯状排列设计，圆绕在内容区域左侧，为了突出导航，在导航栏下加了暗纹加以修改饰。即突出了主图片的中心效果，同时加强导航栏的浏览强度。同时为了加强服务特性，增加了“welcome”区域，表达了对浏览者的敬意。3）内容区域设计coffee网页的内容区域由

6、两部分组成，第一部分是主形象区域，利用大面积的咖啡图片（sweet.jpg），并对sweet.jpg图片添加了滤镜等特殊效果，形成色彩的强对比，电影的光轮效果，使整个图片呈现梦幻般的意境，安宁、淡雅的韵味。第二部分是品牌产品展示区，采用带有小脚丫印迹、白色背景的环形区域，展示各种强色彩的果汁、冰淇淋、咖啡，彰显了本店的产品特色、企业形象。为了加强服务，还提供了服务电话等细节设计。4）页脚设计coffee网页页脚部分设计比较简单，传达了关于服务热线、版权等相关的信息。Part111.2.3网页效果图项目制作(流程简介)11.311.3.1绘制页面结构图11.3.2背景设计11.3.3页

7、眉设计11.3.4内容区域设计11.3.5页脚设计切片与优化11.411.4.1背景切片11.4.2页眉切片11.4.3内容区域切片11.4.4页脚切片类似页面11.5图11-23鑫宝主页本网页是一个电影传媒类网站，采用满版型版式设计，利用圆形轮廓和神秘的黑色充分体现出了影视类网站的艺术特性，吸引浏览者的好奇心。图11-24Dior主页本网页是一个产品宣传类的网站，采用了满版型版式设计，设计理念首先是利用夸张手法设计人物形象作为衬托，然后利用放大了Dior