项目9 婚纱移动端店铺首页的设计

项目九婚纱移动端店铺首页的设计网店美工项目实战教程CONTENTS目录婚纱移动端店铺首页的设计9.1拓展酷豆母婴用品店铺首页的设计9.2课后思考9.39.1.1设计理念9.19.1.2工具方法9.1.3实现过程婚纱移动端店铺首页的设计本项目为婚纱店辅的装修，需要调出温馨浪漫、唯美的视觉效果，否则会影响顾客的浏览欲望，项目以玫瑰粉与紫红色为主色调，体现出女人味及高贵典雅的特性，凸显婚纱的品质与情调。如右图所示，为婚纱移动端店铺首页效果图从上至下的三个部分，分别是店招与海报、焦点图、新品上架与销售排行。9.1婚纱移动端店铺首页的设计9.1.1设计理念店招与商品海报将出现在手机端的第一屏上，它们的作用尤为重要，店招LOGO以百合花为原型，两层共六片花瓣，中间结合字母B为百字的首字母，百合花素有“云裳仙子”之称，外表高雅纯洁，又有百年好合的寓意，非常应景。店辅名称中英文结合，配以简单的横条与花朵装饰、体现店辅高端大气。商品海报是产品信息的大图展示区，通过模特展示婚纱效果，辅以描述性文字，并在文字正文配上半透明的矩形框，体现唯美意境。设计两张焦点图，分别以左图右文，右图左文的形式形成对比，同时根据焦点图展示的婚纱类型搭配不同的字体，文字设计标题、副标题、说明文字、活动信息，使用不同的字体、字号，颜色，修饰形状进行排版，展示婚纱的风格。定制专区罗列了当季销量最多的产品与新品样式，顾客可以根据需要直接联系客服定制，使用剪贴蒙版来限制图片的大小，使该区域图片的大小一致，风格统一。9.1.2工具方法使用AI来绘制LOGO形状，简单方便，与PS衔接性好。通过图层蒙版来控制素材图片的显示效果，使用椭圆工具绘制形状并用高斯模糊产生商品阴影。利用“渐变叠加”、“投影”等图层样式对绘制的形状进行修饰，使其更视觉多样化。9.1.3实现过程新建文件，绘制参考线，确定布局，在AI中绘制店招并拖入PS，并在PS中绘制收藏区，置入素材百合花。完成导航部分的制作9.1.3实现过程加入海报图片素材，制作阴影，使用形状制作右侧修饰。9.1.3实现过程在AI中制作优惠券。并拖入PS海报区域，完成海报部分的制作。9.1.3实现过程制作模块分隔条，在下方拖入模特图片，并在左边绘制梯形，添加文字案例，完成焦点图制作。9.1.3实现过程复制分隔条与焦点图图层，拖到下方，调整文字与位置，制作光线效果，完成焦点图2部分的制作。9.1.3实现过程复制分隔条，调整文字，使用剪贴蒙版制作模特图片的展示，添加半透明形状，并加入文字，完成新品展示部分制作。9.1.3实现过程复制分隔条，调整文字；制作圆角矩形工作，拖入模特图片，用剪贴蒙版限制展示部分，添加文字案例，制作销量排行。9.1.3实现过程使用圆角矩形与文字制作“查看全部宝贝”按钮，完成整个案例的制作。9.2拓展酷豆母婴用品店铺首页的设计9.2.1设计理念9.2.2实现过程9.2.1设计理念本案例中在色彩搭配上使用了蓝色与绿色两种主色调，绿色突出健康，生机，蓝色又体现科技时尚感，烘托出店名酷豆中的酷字，栏目用色两种主打色交替出现，色彩合用和谐又不显得单调。店辅LOGO简洁明了，图形部分用小孩形状线框图标设计，配合文字变形，豆字中的偏旁配上调皮吐出的舌头，紧贴主题。移动端首页效果如右图所示。9.2.2实现过程在AI中制作店铺LOGO部分。拖入PS，完成店招制作9.2.2实现过程在店招下方置入背景素材，并添加色相饱和度图层，使用剪贴蒙版来控制其显示色调。加入儿童节图片与文字素材，图层建组，取名“海报”。9.2.2实现过程在海报下方绘制圆角，置入背景素材，并添加色相饱和度图层，使用剪贴蒙版来控制其显示色调。绘制收藏有礼、客服等区域,图层建组，取名“收藏客服区”9.2.2实现过程在AI中绘制形状。将其粘贴到PS中，置入背景素材。绘制四个正圆，置入素材，使用剪贴蒙版创作新品导航，编辑效果如图所示，将图层编组命名为“新品导航”。9.2.2实现过程使用椭圆工具绘制云的形状，置入背景素材，用剪贴蒙版创建底图，合用饱和度图层调整色调，座板与产品素材，绘制圆角矩形，添加文字信息。新建图层组“新品”。9.2.2实现过程使用钢笔工具绘制底图形状，置入背景素材，用剪贴蒙版创建底图，合用饱和度图层调整色调，拖入杯子素材，再绘制正圆，拖入儿童图片，与正圆报建剪贴蒙版，绘制其他形状与文字素材。创建图层组，取名为“大牌1”。9.2.2实现过程使用同样的文法，制作大牌2。9.2.2实现过程绘制形状，拖入素材，创建剪贴蒙版，制作产品陈列图，创建图层组，取名“产品组”。9.2.2实现过程绘制形状，制作按钮，插入LOGO，制作底部，创建图层组，取名“底部”。9.3课后思考9.3.1思政思考9.3.2技能思考9.3.1思政思考移动端店辅首页内容较多，制作起来比较繁琐，每个模块都需要精雕细刻，同时制作的时候又要用大局观，整个页面在用色布局的时候都要做到合理、合规、视觉统一，所以在平时大家就要通过大量的案例观看来积累提升自己的审美能力，并且要掌握基本的配色方法与页面对齐布局的技巧。职业素养概括的说包含以下四个方面：（一）职业道德（二）职业思想（意识）（三）职业行为习惯（四）职业技能，前三项是职业素养中最根基的部分。而职业技能是支撑职业人生的表象内容。道德我们前面已经强调了很多，在这个案例中，希望大家能注重职业意识与职业行为习惯的培养，只有不停的训练，不断的积累，才能很好的的提升自己的职业技能。淘宝平台