网店美工教学课件Chapter10手机数码店铺的设计.ppt

淘宝美工教程 Chapter 10 手机数码店铺的设计 Chapter 10 手机数码店铺的设计 [技能要求] 针对不同的商品素材，选择使用“钢笔工具”进行抠图，或者通过更改图层混合模式来达到抠取图像的目的，利用“钢笔工具”、“矩形工具”和“椭圆工具”等形状工具绘制出所需的形状对画面进行修饰。 由于数码商品的外观色彩大部分都为黑色，因此为了表现出商品的质感和品质，在配色和布局中都较为讲究，但是设计的主要目的还是以突出商品形象为主。 [效果展示] Chapter 10 手机数码店铺的设计 蓝色调数码店铺设计 靓丽数码店铺设计 Chapter 10 手机数码店铺的设计 [设计理念] 在案例中使用蓝色作为主要的色调进行配色，可以营造出静谧的效果，提高顾客的兴趣，而不同明度的蓝色又可以使其主次清晰； 将明度较高的蓝色作为画面的背景，使其与黑色的数码产品形成强烈的明暗对比，能够给人一种高档质感，也使得产品的表现特别的突出； 设计中使用标签作为修饰元素，对商品进行合理的归类和描述，给人一目了然的视觉效果。 10.1 蓝色调数码店铺设计 本案例是为数码商品所设计的网店首页，制作中使用了不同明度的蓝色来进行色彩搭配，并通过具有引导作用的Z字形布局和修饰性的图形，其具体的设计效果如图所示。 Chapter 10 手机数码店铺的设计 [软件操作] 使用选区工具创建选区，为创建的选区填充上适当的前景色，为页面进行分区； 通过对照片的局部区域进行复制，并对复制的图像进行变形调整，扩大照片的显示范围，制作出宽幅的欢迎模块效果； 利用“描边”样式和“填充”选项的设置来制作出细窄的边框效果； 使用“变暗”混合模式对数码商品进行编辑，抠取所需的图像。 [主要操作步骤] 一、新建文档，绘制矩形，并添加上文字和Logo，然后绘制出收藏图像。 二、添加素材。 三、添加文字，并添加导航条的背景。 Chapter 10 手机数码店铺的设计 四、使用圆角矩形、横排文字工具等绘制出如图所示画面。 五、绘制出所需图形，并添加上适当的文字。 六、参考前面的方法，绘制出其余区域。 Chapter 10 手机数码店铺的设计 七、使用“矩形工具”绘制矩形，再为画面添加上所需的文字，将商品素材添加到适当的位置。 五、最后绘制收藏区域图像，并添加上文字。 Chapter 10 手机数码店铺的设计 [配色扩展] 如图10-83所示是为画面中增添淡黄色后的效果，这种色调会带来特殊的视觉冲击和亲和力，由于画面偏黄，还会给人怀旧、复古的感觉，使用蓝黄色进行配色让画面风格与当下流行摄影风格相似，更增添了一份潮流、时尚的感觉。 如图10-84所示将画面的背景设计为放射状的渐变效果，通过白色和粉红色的搭配来完成渐变的形成，使得画面更加的生动、活泼，也让画面显得更有力度。 Chapter 10 手机数码店铺的设计 10.2 靓丽数码店铺设计 本案例是为数码商品所制作的网店首页效果，画面中使用了多种不同的色块进行布局，将整体划分为了多个等距的区域，每个区域放置了不同的数码产品，由此呈现出干净、利落的视觉效果，其具体如图所示。 [设计理念] 为了让画面整体有种整洁、稳定之感，使用水平分割的方式进行阶梯形布局，并将商品摆放成Z字形，具有引导视线的作用且让画面不会显得枯燥乏味； 案例中使用了多种颜色进行搭配，让整个画面立刻鲜活起来，使得数码商品的形象更加的活泼和具有生命力，可以很快的吸引浏览者的注意，避免大面积使用单色而产生虚浮的感觉； 设计中使用平台和阴影对商品和文字进行修饰，模拟出现实中展台的效果，同时营造出较为高档的氛围，给人生动之感。 Chapter 10 手机数码店铺的设计 [软件操作] 使用形状工具绘制所需的形状，填充上纯色绘制渐变色，绘制出画面所需的元素； 使用“横排文字工具”添加画面中所需文字，使用图层样式进行修饰； 通过“矩形工具”绘制矩形，利用“斜切”命令进行变形，制作出平台的形状； 使用“钢笔工具”沿着数码产品的边缘创建路径，在“路径”面板中将路径转换为选区，反选选区后将选区中的图像删除，从而抠选出数码产品。 Chapter 10 手机数码店铺的设计 [主要操作步骤] 一、新建文档，填充背景色且绘制出多个不同角度的三角形。 二、添加文字和素材，并绘制适 当的图形。 三、选择工具箱中的“矩形工具”制作 出展示平台图形，然后添加文字、绘制 其他图形。 Chapter 10 手机数码店铺的设计 四、参照前面制作商品展示台的方法，绘制出其余区域图像。 Chapter 10 手机数码店铺的设计 [配色扩展] 如图10-136所示是