《(1.5.5)--5.4首页制作与测试.ppt》由会员分享，可在线阅读，更多相关《(1.5.5)--5.4首页制作与测试.ppt（22页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、互联网视觉营销互联网视觉营销项目五项目五 建构品牌视觉识别力建构品牌视觉识别力任务四任务四 首页制作与测试首页制作与测试教学目标知识目标：1.了解首页各模块的信息要素。2.了解构图基础。3.了解图片高级合成基础。能力目标：1.能够进行首页整体版式布局。2.能够进行板块局部构图。3.能够进行首页的制作4.能够进行首页评测授课提纲首页制作与测试制作基本流程制作与测试首页制作与测试之制作基本流程制作基本流程页面制作基本流程：1框架布局，2模块实现，3组装测试。基于篇幅考虑，框架布局选择图5-8所示的简化版，主要包括店招导航、海报等几个板块。常规分类导航时令色彩诗文场景活动等八月双城记首页信息店招大类
2、导航首焦底部导航常用分类导航热推品类导航常规分类导航导航预售新品特辑活动展示区外景专辑推荐新品特辑特别推荐陈列区产品陈列区分类陈列区品牌名/时令色彩图5-8西缺八月双城记信息架构首页制作与测试之制作与测试制作与测试5.5.2 店招模块任务描述：通过店招模块制作，感受店招在视觉设计中的营销意图的体现细节。效果图如图5-52所示。素材准备：导航背景.PSD、西缺店名.PSD。技能准备：文件基本操作、文件置入、自由变换、文本工具、颜色填充、图层基本操作、组基本操作。图5-52店招效果图首页制作与测试之制作与测试制作与测试5.5.3海报模块制作任务描述：通过海报模块制作，感受海报在店铺视觉设计中的营销
3、意图的体现细节。效果图如图5-53所示。素材准备：西缺店名.PSD、新品宣传图.PSD。技能准备：文件基本操作、置入文件、颜色填充、文本工具、图层样式、图层基本操作、组基本操作。图5-53海报效果图首页制作与测试之制作与测试制作与测试5.5.4专题模块制作任务描述：该模块是因时令变化而设置的专栏，橱窗式展示,是继首焦后的重要区域，是首页设计的重要区域，主要分标题区与内容区。1标题栏设计效果图如图5-54所示。素材准备：长发姑娘素材.PSD技能准备：文件基本操作、置入文件、文字工具、颜色填充、图层基本操作、组基本操作。图5-54夏天来了模块标题栏效果图首页制作与测试之制作与测试制作与测试5.5.
4、4专题模块制作任务描述：该模块是因时令变化而设置的专栏，橱窗式展示,是继首焦后的重要区域，是首页设计的重要区域，主要分标题区与内容区。2产品陈列1设计效果图如图5-55所示。素材准备：绣花细节素材.PSD、背景素材.PSD技能准备：文件基本操作、置入文件、文字工具、图层基本操作、自定形状工具、多边形套索工具、颜色填充、组基本操作。图5-55夏天来了模块产品陈列1效果图首页制作与测试之制作与测试制作与测试5.5.4专题模块制作任务描述：该模块是因时令变化而设置的专栏，橱窗式展示,是继首焦后的重要区域，是首页设计的重要区域，主要分标题区与内容区。3产品陈列2设计效果图如图5-56所示。素材准备：背
5、景素材.PSD、蓝色衬衣.PSD、细节素材.PSD技能准备：文件基本操作、置入文件、文字工具、水平翻转、图层基本操作、图层样式、画笔工具、自由变换、组基本操作。图5-56夏天来了模块产品陈列2效果首页制作与测试之制作与测试制作与测试5.5.5优惠券区模块制作任务描述：通过优惠券区模块的制作，体验优惠券视觉设计中营销意图的体现细节。效果图如图5-57所示。素材准备：无技能准备：文件基本操作、填充工具、自定形状工具、文字工具、图层基本操作、组基本操作、对齐分布。图5-57优惠券区效果图首页制作与测试之制作与测试制作与测试5.5.6客服专区模块制作任务描述：通过客服专区模块的制作，体验客服专区视觉设
6、计中营销意图的体现细节。效果图如图5-58所示。素材准备：无技能准备：文件基本操作、颜色填充、文字工具、矩形工具、多边形工具、置入对象、图层基本操作、组基本操作。图5-58客服专区效果图首页制作与测试之制作与测试制作与测试5.5.7导航专区模块制作任务描述：通过导航专区模块的制作，体验导航分类视觉设计中营销意图的体现细节。效果图如图5-59所示。素材准备：热卖素材.PSD、夏季新品素材.PSD、防晒专辑素材.PSD技能准备：文件基本操作、颜色填充、置入对象、图层基本操作、组基本操作。图5-59导航专区效果图首页制作与测试之制作与测试制作与测试5.5.8复古偏执者模块制作任务描述：通过复古偏执者
7、模块的制作，体验创意产品视觉设计中营销意图的体现细节。效果图如图5-60所示。素材准备：产品图1.PSD产品图4.PSD技能准备：文件基本操作、颜色填充、文字工具、直线工具、椭圆工具、置入对象、图层基本操作、组基本操作。图5-60复古偏执者模块效果图首页制作与测试之制作与测试制作与测试5.5.9分类导航专区模块制作任务描述：通过分类导航区模块的制作，体验分类导航视觉设计中营销意图的体现细节。效果图如图5-115所示。素材准备：多肉素材1.JPG、多肉素材2.JPG技能准备：文件基本操作、置入文件、图层蒙版、文字工具、单列选框工具、描边、颜色填充、矩形选框工具、自定形状工具、图层基本操作、自由变
8、换、组基本操作。图5-61分类导航区模块效果图首页制作与测试之制作与测试制作与测试5.5.10 星空之上陈列模块制作任务描述：通过星空之上陈列模块的制作，体验产品陈列视觉设计中营销意图的体现细节。效果图如图5-62所示。素材准备：产品1素材.PSD”“产品8素材.PSD技能准备：文件基本操作、置入文件、椭圆工具、直线工具、文字工具、颜色填充、图层基本操作、自由变换、组基本操作。图5-62星空之上陈列模块效果图首页制作与测试之制作与测试制作与测试5.5.11人气新品模块制作任务描述：通过人气新品陈列模块的制作，体验产品陈列视觉设计中营销意图的体现细节。效果图如图5-63所示。素材准备：新品1素材
9、.PSD”“新品8素材.PSD技能准备：文件基本操作、置入文件、文字工具、颜色填充、图层基本操作、对齐、组基本操作。图5-63人气新品陈列模块效果图首页制作与测试之制作与测试制作与测试5.5.12进店必选产品模块制作任务描述：通过进店必选产品模块的制作，体验产品陈列视觉设计中营销意图的体现细节。效果图如图5-64所示。素材准备：产品图1.PSD产品图8.PSD技能准备：文件基本操作、置入文件、文字工具、颜色填充、图层基本操作、对齐、组基本操作。图5-64进店必选产品模块效果图首页制作与测试之制作与测试制作与测试5.5.13 页尾模块制作任务描述：通过页尾模块的制作，体验页尾区域视觉设计中营销意
10、图的体现细节。效果图如图5-65所示。素材准备：无技能准备：文件基本操作、文字工具、颜色填充、斜切、矩形工具、直线工具、自定形状工具、图层基本操作、对齐、组基本操作。图5-65页尾模块效果图首页制作与测试之制作与测试制作与测试5.5.14上线测试上线测试在前面各个模块完成后，店铺首页的合成、调试与运行测试，需在前面各个模块完成后，店铺首页的合成、调试与运行测试，需要按如下基本步骤进行。具体步骤详见二维码要按如下基本步骤进行。具体步骤详见二维码1 PhotoShop CS5环境首页合成与调试环境首页合成与调试2 PhotoShop环境应用切片工具切图环境应用切片工具切图3 DreamWeaverCS5环境复制代码环境复制代码4源码粘贴至淘宝店铺装修后台谢谢 谢！谢！