淘宝天猫美工一本通第11章-化妆品店铺页面设计.ppt

1、 本章将制作一个综合实例本章将制作一个综合实例化妆品店铺的首页设计。化妆品店铺的首页设计。在设计店铺首页前，可以多参考同类别的优秀店铺来获取灵在设计店铺首页前，可以多参考同类别的优秀店铺来获取灵感，然后再根据自身店铺的受众人群和产品特点来搜集好相感，然后再根据自身店铺的受众人群和产品特点来搜集好相关素材，规划好设计要求、思路和要展示的模块等。关素材，规划好设计要求、思路和要展示的模块等。首页海报是淘宝店铺首页第一屏显示的画面，可以是促首页海报是淘宝店铺首页第一屏显示的画面，可以是促销活动海报，也可以是主推商品的海报。下面为化妆品店铺销活动海报，也可以是主推商品的海报。下面为化妆品店铺制作首页海

2、报。最终效果如图制作首页海报。最终效果如图 11-1 11-1 所示。所示。图图 1-1l STEP 1 STEP 1 新建一个尺寸为新建一个尺寸为 1920 19204000 4000 像素、分辨率为像素、分辨率为 72 72 像素像素/英寸的的空白文件，设置红色系的渐变颜色，然英寸的的空白文件，设置红色系的渐变颜色，然后将背景进行线性渐变填充，并拉出参考线确定店招、海后将背景进行线性渐变填充，并拉出参考线确定店招、海报的位置，如图报的位置，如图 11-2 11-2 所示。所示。图图 11-2l STEP 2 STEP 2 新建图层，使用矩形选框工具工具绘制矩形选区，新建图层，使用矩形选框工

3、具工具绘制矩形选区，然后使用渐变工具填充选区，如图然后使用渐变工具填充选区，如图 11-3 11-3 所示。所示。l STEP 3 STEP 3 新建图层，使用矩形工具绘制矩形，然后使用直新建图层，使用矩形工具绘制矩形，然后使用直接选择工具调整锚点，并为其添加淡黄色的渐变叠加，如接选择工具调整锚点，并为其添加淡黄色的渐变叠加，如图图 11-4 11-4 所示。所示。图图 11-3 图图 11-4l STEP 4 STEP 4 使用相同的方法绘制另外的矩形，并调整锚点位使用相同的方法绘制另外的矩形，并调整锚点位置，然后分别对其设置不同的渐变颜色，如图置，然后分别对其设置不同的渐变颜色，如图 11

4、-5 11-5 所示。所示。l STEP 5 STEP 5 新建图层，使用钢笔工具沿形状菱角绘制路径，新建图层，使用钢笔工具沿形状菱角绘制路径，然后使用白色的画笔工具描边路径（描边时要选中然后使用白色的画笔工具描边路径（描边时要选中“模拟模拟压力压力”复选框），如图复选框），如图 11-6 11-6 所示。所示。图图 11-5 图图 11-6l STEP 6 STEP 6 使用相同的方法对竖着的边添加描边，如图使用相同的方法对竖着的边添加描边，如图 11-7 11-7 所示。所示。l STEP 7 STEP 7 使用钢笔工具绘制路径，然后填充为红色到深红使用钢笔工具绘制路径，然后填充为红色到深

5、红的渐变，如图的渐变，如图 11-8 11-8 所示。所示。图图 11-7 图图 11-8 l STEP 8 STEP 8 设置前景色为浅一些的红色，取消选区后并新建设置前景色为浅一些的红色，取消选区后并新建图层，使用画笔工具按【图层，使用画笔工具按【ShiftShift】键绘制一条红色的线条，】键绘制一条红色的线条，注意设置画笔的笔记大小，然后按【注意设置画笔的笔记大小，然后按【Ctrl+TCtrl+T】组合键调整】组合键调整该线条的角度，并按【该线条的角度，并按【Ctrl+Alt+GCtrl+Alt+G】组合键创建剪贴蒙版，】组合键创建剪贴蒙版，如图如图 11-9 11-9 所示。所示。l

6、 STEP 9 STEP 9 双击红色的图像图层，为其添加投影的图层样式，双击红色的图像图层，为其添加投影的图层样式，如图如图 11-10 11-10 所示。所示。图图 11-9 图图 11-10l STEP 10 STEP 10 将除背景图层外的所有图层按【将除背景图层外的所有图层按【Ctrl+GCtrl+G】组合】组合键创建图层组。键创建图层组。l STEP 11 STEP 11 绘制矩形并调整锚点位置，然后为该形状图层绘制矩形并调整锚点位置，然后为该形状图层设置渐变叠加，如图设置渐变叠加，如图 11-11 11-11 所示。所示。l STEP 12 STEP 12 继续绘制矩形，调整锚点

7、并为其设置不同的渐继续绘制矩形，调整锚点并为其设置不同的渐变颜色，如图变颜色，如图 11-12 11-12 所示。所示。图图11-11 图图 11-12l STEP 13 STEP 13 绘制矩形，使用直接选择工具调整锚点位置，并绘制矩形，使用直接选择工具调整锚点位置，并设置渐变叠加，复制设置渐变叠加，复制 3 3 个形状矩形，分别调整锚点和更个形状矩形，分别调整锚点和更改渐变叠加颜色，如图改渐变叠加颜色，如图 11-13 11-13 所示。所示。l STEP 14 STEP 14 继续绘制矩形形状，使用直接选择工具调整锚点继续绘制矩形形状，使用直接选择工具调整锚点位置，为其添加描边的图层样式

8、，然后将图层内部不透明位置，为其添加描边的图层样式，然后将图层内部不透明度为度为 0%0%，如图，如图 11-14 11-14 所示。所示。图图 11-13 图图 11-14l STEP 15 STEP 15 新建图层，使用钢笔工具绘制路径，设置前景色为新建图层，使用钢笔工具绘制路径，设置前景色为白色，然后使用白色，然后使用 10 10 像素的画笔工具描边路径，如图像素的画笔工具描边路径，如图 11-15 11-15 所示。所示。图图 11-15l STEP 16 STEP 16 在右侧的面中绘制矩形，并为该形状图层设置渐在右侧的面中绘制矩形，并为该形状图层设置渐变叠加、内发光和外发光的图层样

9、式，如图变叠加、内发光和外发光的图层样式，如图 11-16 11-16 所示。所示。图图 11-16l STEP 17 STEP 17 使用钢笔工具沿图像的边绘制形状路径，在整个立使用钢笔工具沿图像的边绘制形状路径，在整个立体矩形的下方新建图层，然后设置黑色画笔描边路径（这里体矩形的下方新建图层，然后设置黑色画笔描边路径（这里不选中不选中“模拟压力模拟压力”复选框），如图复选框），如图 11-17 11-17 所示。所示。l STEP 18 STEP 18 选择选择“滤镜滤镜/模糊模糊/高斯模糊高斯模糊”命令，在打开的命令，在打开的“高斯模糊高斯模糊”对话框中设置模糊效果，完成后如图对话框中设

10、置模糊效果，完成后如图 11-18 11-18 所所示。示。图图 11-17 图图 11-18l STEP 19 STEP 19 将所有立体矩形的图层按【将所有立体矩形的图层按【Ctrl+GCtrl+G】组合键建立】组合键建立图层组。图层组。l STEP 20 STEP 20 使用相同的方法绘制其他的立体矩形，将其放在使用相同的方法绘制其他的立体矩形，将其放在图层组中，并放置在大的立体图形下方，如图图层组中，并放置在大的立体图形下方，如图 11-19 11-19 所示。所示。l STEP 21 STEP 21 复制红色的立体图层到画面右侧，放大图形后，复制红色的立体图层到画面右侧，放大图形后，

11、更改各个面的渐变叠加颜色，如图更改各个面的渐变叠加颜色，如图 11-20 11-20 所示。所示。图图 11-19 图图 11-20l STEP 22 STEP 22 继续在红色的立体图形后面绘制长方立体图形，继续在红色的立体图形后面绘制长方立体图形，并设置不同的渐变叠加颜色，然后调整图形和角度和位并设置不同的渐变叠加颜色，然后调整图形和角度和位置并为其绘制阴影效果，如图置并为其绘制阴影效果，如图 11-21 11-21 所示。所示。图图 11-21l STEP 23 STEP 23 使用钢笔工具绘制路径并使用白色的画笔工具描使用钢笔工具绘制路径并使用白色的画笔工具描边，并将关于该图形的所有图

12、层创建图层组，如图边，并将关于该图形的所有图层创建图层组，如图 11-22 11-22 所示。所示。l STEP 24 STEP 24 新建图层，使用钢笔工具绘制阴影路径，将其转新建图层，使用钢笔工具绘制阴影路径，将其转换为选区后填充为黑色，如图换为选区后填充为黑色，如图11-23 11-23 所示。所示。图图 11-22 图图 11-23l STEP 25 STEP 25 取消选区后，选择取消选区后，选择“滤镜滤镜/模糊模糊/高斯模糊高斯模糊”命令，在打开的对话框中设置模糊效果，然后将该图层命令，在打开的对话框中设置模糊效果，然后将该图层的不透明度设置为的不透明度设置为 30%30%，将图层

13、放置在相应的图形下面，将图层放置在相应的图形下面，如图如图 11-24 11-24 所示。所示。l STEP 26 STEP 26 使用相同的方法在其他位置绘制投下的阴影效使用相同的方法在其他位置绘制投下的阴影效果，然后分别放置在相应图层下方，如图果，然后分别放置在相应图层下方，如图 11-25 11-25 所示。所示。图图 11-24 图图 11-25l STEP 27 STEP 27 选择最下方的两个面，使用直接选择工具调整锚选择最下方的两个面，使用直接选择工具调整锚点，然后分别为其添加图层蒙版，再使用渐变工具将下半点，然后分别为其添加图层蒙版，再使用渐变工具将下半部分图像隐藏，如图部分图

14、像隐藏，如图 11-26 11-26 所示。所示。图图 11-26l STEP 28 STEP 28 在所有图层最上方按【在所有图层最上方按【Ctrl+Alt+Shift+ECtrl+Alt+Shift+E】组合】组合键盖印图层，然后选择键盖印图层，然后选择“滤镜滤镜/杂色杂色/添加杂色添加杂色”命令，命令，打开打开“添加杂色添加杂色”对话框，在其中设置相关参数，完成后对话框，在其中设置相关参数，完成后如图如图 11-27 11-27 所示。所示。图图 11-27l STEP 29 STEP 29 使用矩形工具绘制矩形，然后使用直接选择工具使用矩形工具绘制矩形，然后使用直接选择工具调整锚点，按

15、【调整锚点，按【Ctrl+Alt+TCtrl+Alt+T】组合键后，按住【】组合键后，按住【ALtALt】键】键向中心缩放形状图形，完成后将外面的矩形设置为淡黄色，向中心缩放形状图形，完成后将外面的矩形设置为淡黄色，如图如图 11-28 11-28 所示。所示。l STEP 30 STEP 30 将素材文件将素材文件“模特模特.tif”.tif”拖动到图像文件中，拖动到图像文件中，将其缩放至合适大小，然后按【将其缩放至合适大小，然后按【Ctrl+Alt+GCtrl+Alt+G】组合键创建】组合键创建剪贴蒙版，如图剪贴蒙版，如图 11-29 11-29 所示。所示。图图 11-28 图图 11-

16、29l STEP 31 STEP 31 双击里面的矩形，为其添加斜面和浮雕、内发光双击里面的矩形，为其添加斜面和浮雕、内发光的图层样式，完成后如图的图层样式，完成后如图 11-30 11-30所示。所示。图图 11-30l STEP 32 STEP 32 继续绘制矩形并调整锚点，设置填充颜色比相框继续绘制矩形并调整锚点，设置填充颜色比相框稍微深一些的黄，将其作为相框的厚度，如图稍微深一些的黄，将其作为相框的厚度，如图 11-31 11-31 所所示。示。l STEP 33 STEP 33 整体放大相框图像，使用前面相同的方法为其添整体放大相框图像，使用前面相同的方法为其添加阴影效果，如图加阴影

17、效果，如图 11-32 11-32 所示。所示。图图 11-31 图图 11-32l STEP 34 STEP 34 将素材文件将素材文件“瓶子瓶子.png”.png”拖动到图像文件中，缩拖动到图像文件中，缩放至合适大小后，使用橡皮擦工具擦除多余的图像，如图放至合适大小后，使用橡皮擦工具擦除多余的图像，如图 11-33 11-33 所示。所示。l STEP 35 STEP 35 在瓶子下方新建图层，使用同样的方法为瓶子绘在瓶子下方新建图层，使用同样的方法为瓶子绘制投影，如图制投影，如图 11-34 11-34 所示。所示。图图 11-33 图图 11-34l STEP 36 STEP 36 将

18、素材文件将素材文件“瓶子瓶子.png”.png”拖动到图像文件中，拖动到图像文件中，缩放至合适大小后，将其放置在相框的下方，如图缩放至合适大小后，将其放置在相框的下方，如图 11-35 11-35 所示。所示。l STEP 37 STEP 37 再在丝带下方新建图层，用同样的方法绘制阴影，再在丝带下方新建图层，用同样的方法绘制阴影，如图如图 11-36 11-36 所示。所示。图图 11-35 图图 11-36l STEP 38 STEP 38 输入文字，设置字体后将文字图层复制两个。先输入文字，设置字体后将文字图层复制两个。先隐藏复制的文字图层，双击原文字图层，为其添加渐变叠隐藏复制的文字图

19、层，双击原文字图层，为其添加渐变叠加和描边的图层样式，如图加和描边的图层样式，如图 11-37 11-37 所示。所示。图图 11-37l STEP 39 STEP 39 显示选择上方的文字图层，为其设置稍微深一些显示选择上方的文字图层，为其设置稍微深一些的颜色，然后右移文字，并将该图层放置原图层下方，如的颜色，然后右移文字，并将该图层放置原图层下方，如图图 11-38 11-38 所示。所示。l STEP 40 STEP 40 再选择显示上方的文字图层，为其设置黑色，将再选择显示上方的文字图层，为其设置黑色，将文字图层栅格化，然后选择文字图层栅格化，然后选择“滤镜滤镜/模糊模糊/高斯模糊高斯

20、模糊”命令，在打开的对话框中设置模糊程度（若设置后的阴影命令，在打开的对话框中设置模糊程度（若设置后的阴影太深，可适当调整图层的不透明度），完成后将图层放置太深，可适当调整图层的不透明度），完成后将图层放置在所有文字图层下方并右移，如图在所有文字图层下方并右移，如图 11-39 11-39 所示。所示。图图 11-38 图图 11-39l STEP 41 STEP 41 选择所有文字图层按【选择所有文字图层按【Ctrl+GCtrl+G】组合键创建图层】组合键创建图层组，然后按【组，然后按【Ctrl+TCtrl+T】组合键调整文字的切斜角度，如图】组合键调整文字的切斜角度，如图 11-40 11

21、-40 所示。所示。l STEP 42 STEP 42 使用相同的方法输入小的文字，并设置阴影（小使用相同的方法输入小的文字，并设置阴影（小的文字可直接设置颜色即可），如图的文字可直接设置颜色即可），如图 11-41 11-41 所示。所示。图图 11-40 图图 11-41l STEP 43 STEP 43 将文字创建为图层组，然后按【将文字创建为图层组，然后按【Ctrl+TCtrl+T】组合键】组合键调整文字斜切角度，并将其放置在丝带图层的下方（注意调整文字斜切角度，并将其放置在丝带图层的下方（注意调整丝带的位置，不要挡住文字），如图调整丝带的位置，不要挡住文字），如图 11-42 11-

22、42 所示。所示。图图 11-42 店招可以单独制作，也可以直接在首页的页面上制作，店招可以单独制作，也可以直接在首页的页面上制作，与海报成为一体，在店招上同样可以放置与海报成为一体，在店招上同样可以放置logologo、相关促销信、相关促销信息等，这里只是把店招位置预留出来，直接制作导航。最终息等，这里只是把店招位置预留出来，直接制作导航。最终效果如图效果如图 11-43 11-43 所示。所示。图图 11-43l STEP 1 STEP 1 拉出参考线确定店招和导航的位置，如图拉出参考线确定店招和导航的位置，如图 11-44 11-44 所示。所示。图图 11-44l STEP 2 STE

23、P 2 使用圆角矩形工具绘制使用圆角矩形工具绘制 1200 120030 30 像素的圆角矩像素的圆角矩形（可在工具属性栏中将圆角半径设置大一些），居中对形（可在工具属性栏中将圆角半径设置大一些），居中对其画布后，双击该形状图层，为其添加渐变叠加的图层样其画布后，双击该形状图层，为其添加渐变叠加的图层样式，如图式，如图 11-45 11-45 所示。所示。图图 11-45l STEP 3 STEP 3 绘制矩形形状，为其添加红色系的渐变叠加颜色，绘制矩形形状，为其添加红色系的渐变叠加颜色，然后在上面输入文字，注意与导航条对齐，如图然后在上面输入文字，注意与导航条对齐，如图 11-46 11-4

24、6 所示。所示。图图 11-46l STEP 4 STEP 4 隐藏参考线，然后依次在导航条上输入其他相关隐藏参考线，然后依次在导航条上输入其他相关文字，并设置字体与颜色，如图文字，并设置字体与颜色，如图11-47 11-47 所示。所示。l STEP 5 STEP 5 将关于导航的所有图层创建为图层组，并将图层将关于导航的所有图层创建为图层组，并将图层组名称更改为导航。组名称更改为导航。图图 11-47 在制作宝贝陈列区之前，要先规划的要展示的内容，如在制作宝贝陈列区之前，要先规划的要展示的内容，如视频、热推产品、爆款单品等。下面制作宝贝的热推商品陈视频、热推产品、爆款单品等。下面制作宝贝的

25、热推商品陈列和相关单品陈列，最终效果如图列和相关单品陈列，最终效果如图 11-48 11-48 所示。所示。图图 11-48l STEP 1 STEP 1 为了在操作时不影响其他图层，可将所有图层组为了在操作时不影响其他图层，可将所有图层组锁定。锁定。l STEP 2 STEP 2 绘制矩形，并设置形状填充颜色为深红色，将该绘制矩形，并设置形状填充颜色为深红色，将该形状图层放置在背景图层的上方，如图形状图层放置在背景图层的上方，如图 11-49 11-49 所示。所示。l STEP 3 STEP 3 绘制矩形，使用直接选择工具调整锚点，然后为绘制矩形，使用直接选择工具调整锚点，然后为形状图层添

26、加图层蒙版，使用渐变工具将矩形下半部分显形状图层添加图层蒙版，使用渐变工具将矩形下半部分显示透明，如图示透明，如图 11-50 11-50 所示所示图图 11-49 图图 11-50l STEP 4 STEP 4 绘制矩形，使用直接选择工具调整锚点，然后为绘制矩形，使用直接选择工具调整锚点，然后为该形状图层添加渐变叠加的图层样式，如图该形状图层添加渐变叠加的图层样式，如图 11-51 11-51 所示。所示。l STEP 5 STEP 5 使用相同的方法绘制立体图形的其他两个面，并使用相同的方法绘制立体图形的其他两个面，并设置较深一些的渐变叠加颜色，然后为其添加图层蒙版，设置较深一些的渐变叠加

27、颜色，然后为其添加图层蒙版，使用渐变工具将矩形下半部分显示透明，如图使用渐变工具将矩形下半部分显示透明，如图 11-52 11-52 所所示。示。图图 11-51 图图 11-52l STEP 6 STEP 6 将该立体图形中所有矩形图层创建为图层组，然后复将该立体图形中所有矩形图层创建为图层组，然后复制图层组，并缩放其大小，移动到相应位置，如图制图层组，并缩放其大小，移动到相应位置，如图 11-53 11-53 所所示。示。l STEP 7 STEP 7 选择相应的图层，分别对图层的渐变颜色进行更改，选择相应的图层，分别对图层的渐变颜色进行更改，再分别调整各个行政图层的图层蒙版，如图再分别调

28、整各个行政图层的图层蒙版，如图 11-54 11-54 所示。所示。图图 11-53 图图 11-54l STEP 8 STEP 8 继续复制一个图层组到画面的右侧，如图继续复制一个图层组到画面的右侧，如图 11-55 11-55 所示。所示。l STEP 9 STEP 9 显示参考线，绘制一个白色矩形，将视频的位置显示参考线，绘制一个白色矩形，将视频的位置预留出来，如图预留出来，如图 11-56 11-56 所示。所示。图图 11-55 图图 11-56l STEP 10 STEP 10 绘制矩形，为其添加浅灰到深灰的渐变叠加图层绘制矩形，为其添加浅灰到深灰的渐变叠加图层样式，如图样式，如图

29、 11-57 11-57 所示。所示。l STEP 11 STEP 11 绘制矩形，为其添加深灰到浅灰的渐变叠加图层绘制矩形，为其添加深灰到浅灰的渐变叠加图层样式，然后按【样式，然后按【Ctrl+TCtrl+T】组合键进入变换状态后，再按】组合键进入变换状态后，再按【Ctrl+Alt+ShiftCtrl+Alt+Shift】组合键将鼠标移到变换点上，向中心】组合键将鼠标移到变换点上，向中心变换，完成后将该形状图层放置在刚刚绘制的矩形后面，变换，完成后将该形状图层放置在刚刚绘制的矩形后面，如图如图 11-58 11-58 所示。所示。图图 11-57 图图 11-58l STEP 12 STEP

30、 12 设置前景色为浅灰色，使用画笔工具并选择柔边设置前景色为浅灰色，使用画笔工具并选择柔边的笔尖形状，先将矩形形状载入选区，然后新建图层，使的笔尖形状，先将矩形形状载入选区，然后新建图层，使用画笔工具进行涂抹，如图用画笔工具进行涂抹，如图 11-59 11-59 所示。所示。l STEP 13 STEP 13 取消选区后，在使用矩形绘制变换矩形的厚度，取消选区后，在使用矩形绘制变换矩形的厚度，为其设置相应的渐变叠加效果，如图为其设置相应的渐变叠加效果，如图 11-60 11-60 所示。所示。图图 11-59 图图 11-60l STEP 14 STEP 14 新建图层，设置前景色为白色，设

31、置画笔笔尖大新建图层，设置前景色为白色，设置画笔笔尖大小为小为 5 5 像素，然后使用钢笔工具沿矩形边缘绘制路径，使像素，然后使用钢笔工具沿矩形边缘绘制路径，使用画笔对路径进行模拟压力描边，如图用画笔对路径进行模拟压力描边，如图 11-61 11-61 所示。所示。图图 11-61l STEP 1STEP 15 5 选择上面的黑色矩形，为其添加斜面和浮雕的图选择上面的黑色矩形，为其添加斜面和浮雕的图层样式，完成后隐藏参考线，如图层样式，完成后隐藏参考线，如图 11-62 11-62 所示。所示。图图 11-62l STEP 1STEP 16 6 将关于黑色的所有矩形创建为图层组。将关于黑色的所

32、有矩形创建为图层组。l STEP 1STEP 17 7 绘制矩形，并按【绘制矩形，并按【Ctrl+TCtrl+T】组合键后再按【】组合键后再按【Ctrl+Ctrl+Alt+ShiftAlt+Shift】组合键对矩形进行变形，然后为其设置渐变叠】组合键对矩形进行变形，然后为其设置渐变叠加，如图加，如图 11-63 11-63 所示。所示。图图 11-63l STEP 1STEP 18 8 继续绘制矩形，并设置相应的渐变叠加颜色，如继续绘制矩形，并设置相应的渐变叠加颜色，如图图 11-64 11-64 所示。所示。图图 11-64l STEP 1STEP 19 9 新建图层，设置前景色为白色，设置

33、画笔笔尖大新建图层，设置前景色为白色，设置画笔笔尖大小为小为 3 3 像素，然后使用钢笔工具沿矩形边缘绘制路径，像素，然后使用钢笔工具沿矩形边缘绘制路径，使用画笔对路径进行模拟压力描边，如图使用画笔对路径进行模拟压力描边，如图 11-65 11-65 所示。所示。图图 11-65l STEP STEP 20 20 将关于红色图形的所有图层创建为图层组，然后将关于红色图形的所有图层创建为图层组，然后对其整体缩放，并放置在相应位置，如图对其整体缩放，并放置在相应位置，如图 11-66 11-66 所示。所示。图图 11-66l STEP 2STEP 21 1 将海报中的产品图层组复制到编辑的位置上

34、方，将海报中的产品图层组复制到编辑的位置上方，并缩放其大小（为了便于区分可以将产品图按【并缩放其大小（为了便于区分可以将产品图按【Ctrl+ECtrl+E】组合键合并），如图组合键合并），如图 11-67 11-67 所示。所示。l STEP 2STEP 22 2 将素材文件将素材文件“面膜面膜.png”.png”拖动到图像文件中，拖动到图像文件中，并放置在需要的位置，如图并放置在需要的位置，如图 11-68 11-68所示。所示。图图 11-67 图图 11-68l STEP STEP 2323 选择工具箱中的自定义形状工具，在工具属性栏选择工具箱中的自定义形状工具，在工具属性栏中选择箭头图

35、形，在图像中绘制，然后将其旋转到一定角中选择箭头图形，在图像中绘制，然后将其旋转到一定角度，再为其设置相应的渐变叠加颜色，如图度，再为其设置相应的渐变叠加颜色，如图 11-69 11-69 所示。所示。l STEP 2STEP 24 4 选择工具箱中的直接选择工具，对箭头的锚点进选择工具箱中的直接选择工具，对箭头的锚点进行调整，如图行调整，如图 11-70 11-70 所示。所示。图图 11-69 图图 11-70l STEP 2STEP 25 5 输入文字，并设置不同的字体大小，将文字组合输入文字，并设置不同的字体大小，将文字组合放置在箭头形状上，如图放置在箭头形状上，如图 11-71 11

36、-71所示。所示。l STEP 2STEP 26 6 选择价格文字图层，为其添加金色的渐变叠加，选择价格文字图层，为其添加金色的渐变叠加，如图如图 11-72 11-72 所示。所示。图图 11-71 图图 11-72l STEP 2STEP 27 7 输入说明文字信息，将文字图层创建为图层组，输入说明文字信息，将文字图层创建为图层组，然后为图层组添加渐变叠加和投影的图层样式，如图然后为图层组添加渐变叠加和投影的图层样式，如图 11-73 11-73 所示。所示。图图 11-73l STEP 2STEP 28 8 绘制圆角矩形图形，为矩形添加描边、渐变叠加绘制圆角矩形图形，为矩形添加描边、渐变

37、叠加和投影的图层样式，如图和投影的图层样式，如图 11-74 11-74所示。所示。图图 11-74l STEP 2STEP 29 9 使用自定义形状工具绘制箭头图形，使用钢笔工使用自定义形状工具绘制箭头图形，使用钢笔工具删除尖角的锚点，然后为该形状图层添加渐变叠加和投具删除尖角的锚点，然后为该形状图层添加渐变叠加和投影的图层样式，如图影的图层样式，如图 11-75 11-75 所示。所示。图图 11-75l STEP STEP 30 30 在形状图形上输入相关的文字信息，然后分别为在形状图形上输入相关的文字信息，然后分别为文字设置相应的颜色，如图文字设置相应的颜色，如图11-76 11-76

38、 所示。所示。图图 11-76l STEP 3STEP 31 1 在之前的文字说明图层组中的原价格文字上绘制在之前的文字说明图层组中的原价格文字上绘制直线，将原件划掉，绘制的直线为直接应用设置的图层组直线，将原件划掉，绘制的直线为直接应用设置的图层组图层样式，如图图层样式，如图 11-77 11-77 所示。所示。图图 11-77l STEP 3STEP 32 2 继续输入相应的文字，并设置字体和大小，如图继续输入相应的文字，并设置字体和大小，如图 11-78 11-78 所示。所示。图图 11-78l STEP 3STEP 33 3 绘制圆形形状，为该形状图层设置红色的渐变叠绘制圆形形状，为

39、该形状图层设置红色的渐变叠加和白色的投影图层样式，如图加和白色的投影图层样式，如图11-79 11-79 所示。所示。l STEP 3STEP 34 4 按【按【Ctrl+Alt+TCtrl+Alt+T】组合键，将圆形向中心缩放，】组合键，将圆形向中心缩放，清除图层样式，并为其设置白色的描边，无填充颜色，如清除图层样式，并为其设置白色的描边，无填充颜色，如图图 11-80 11-80 所示。所示。图图 11-79 图图 11-80l STEP 3STEP 35 5 在圆形上绘制白色的直线，并输入白色的文字，在圆形上绘制白色的直线，并输入白色的文字，如图如图 11-81 11-81 所示。所示。

40、l STEP 3STEP 36 6 将产品、文字和背后的辅助图形全部创建为图层将产品、文字和背后的辅助图形全部创建为图层组，将图层组重命名为组，将图层组重命名为“宝贝推荐区宝贝推荐区”，如图，如图 11-82 11-82 所所示。示。图图 11-81 图图 11-82l STEP 3STEP 37 7 复制该图层组，将其放置在原图层组下方，并调复制该图层组，将其放置在原图层组下方，并调整灰色的辅助图形，如图整灰色的辅助图形，如图 11-83 11-83所示。所示。l STEP 3STEP 38 8 新建图层，设置前景色为深灰色，调整画面笔尖新建图层，设置前景色为深灰色，调整画面笔尖大小，在交接

41、处绘制，然后按【大小，在交接处绘制，然后按【Ctrl+Alt+GCtrl+Alt+G】组合键创建】组合键创建剪贴蒙版，如图剪贴蒙版，如图 11-84 11-84 所示。所示。图图 11-83 图图 11-84l STEP STEP 3939 在视频区域和下面的宝贝区域之间的空隙中，使在视频区域和下面的宝贝区域之间的空隙中，使用制作海报文字的方法制作标题文字，如图用制作海报文字的方法制作标题文字，如图 11-85 11-85 所示。所示。l STEP STEP 4040 在文字两侧绘制直线，为图层创建图层蒙版，使在文字两侧绘制直线，为图层创建图层蒙版，使用渐变工具将外侧部分变为透明，如图用渐变工

42、具将外侧部分变为透明，如图 11-86 11-86 所示。所示。图图 11-85图图 11-86l STEP STEP 4141 将产品推荐区整体往上移。将产品推荐区整体往上移。l STEP 4STEP 42 2 选择选择“图像图像/画布大小画布大小”命令，在打开的命令，在打开的“画画布大小布大小”对话框中将画布高度调整为对话框中将画布高度调整为 4200 4200 像素，并设置像素，并设置在下方扩展，如图在下方扩展，如图 11-87 11-87 所示。所示。l STEP 4STEP 43 3 选择底部的红色背景，使其铺满整个画布。选择底部的红色背景，使其铺满整个画布。l STEP 4STEP

43、 44 4 使用矩形工具绘制矩形，并设置不同的填充颜色，使用矩形工具绘制矩形，并设置不同的填充颜色，然后分别调整相应矩形的锚点，完成后再为各个矩形设置然后分别调整相应矩形的锚点，完成后再为各个矩形设置相应的渐变颜色，如图相应的渐变颜色，如图 11-88 11-88 所示所示图图 11-87 图图 11-88l STEP 4STEP 45 5 在上方绘制一个矩形，设置无填充颜色，描边为淡红在上方绘制一个矩形，设置无填充颜色，描边为淡红色，粗细为色，粗细为 8 8 像素，如图像素，如图11-89 11-89 所示。所示。l STEP 4STEP 46 6 在继续绘制一个与描边颜色相同的矩形，如图在

44、继续绘制一个与描边颜色相同的矩形，如图 11-90 11-90 所示。所示。图图 11-89 图图 11-90l STEP 4STEP 47 7 打开素材文件打开素材文件“产品产品.psd”.psd”，将相关产品图拖，将相关产品图拖动到图像文件中，缩放至合适大小，如图动到图像文件中，缩放至合适大小，如图 11-91 11-91 所示。所示。l STEP 4STEP 48 8 在产品下方输入输入文字，并设置字体和大小，在产品下方输入输入文字，并设置字体和大小，如图如图 11-92 11-92 所示。所示。图图 11-91 图图 11-92l STEP 4STEP 49 9 在文字下方绘制圆角矩形

45、，设置白色的填充颜色，在文字下方绘制圆角矩形，设置白色的填充颜色，淡黄色的描边，然后复制一个圆角矩形，使用直接选择工淡黄色的描边，然后复制一个圆角矩形，使用直接选择工具调整锚点，并设置填充颜色为红色，如图具调整锚点，并设置填充颜色为红色，如图 11-93 11-93 所示。所示。l STEP STEP 5050 选择红色的圆角矩形形状图层，为其添加投影的选择红色的圆角矩形形状图层，为其添加投影的图层样式，如图图层样式，如图 11-94 11-94 所示。所示。图图 11-93 图图 11-94l STEP STEP 5151 在圆角矩形上方输入相关的文字，如图在圆角矩形上方输入相关的文字，如图

46、 11-95 11-95 所示。所示。l STEP 5STEP 52 2 将该模块的所有图层创建为图层组，然后复制图将该模块的所有图层创建为图层组，然后复制图层组并更改里面的图片和文字，如图层组并更改里面的图片和文字，如图 11-96 11-96 所示。所示。图图 11-95 图图 11-96 在店铺首页上的视频一般是在海报的下方，在设计首页在店铺首页上的视频一般是在海报的下方，在设计首页是可以将视频的部分预留出来，然后在后期上传处理好的视是可以将视频的部分预留出来，然后在后期上传处理好的视频。最终效果如图频。最终效果如图 11-97 11-97 所示。所示。图图 11-97l STEP 1

47、STEP 1 回到视频预留区域，将白色矩形缩小，然后复制一回到视频预留区域，将白色矩形缩小，然后复制一个矩形，使用直接选择工具调整锚点，如图个矩形，使用直接选择工具调整锚点，如图 11-98 11-98 所示。所示。图图 11-98l STEP 2 STEP 2 选择外面的矩形，为其添加渐变叠加和投影图层选择外面的矩形，为其添加渐变叠加和投影图层样式，如图样式，如图 11-99 11-99 所示。所示。图图 11-99l STEP 3 STEP 3 绘制一个同等宽度的矩形，设置浅金色，按【绘制一个同等宽度的矩形，设置浅金色，按【Ctrl+Ctrl+T T】组合键后再按【】组合键后再按【Ctrl

48、+ALt+ShiftCtrl+ALt+Shift】组合键变换矩形，如】组合键变换矩形，如图图 11-100 11-100 所示。所示。图图 11-100l STEP 4 STEP 4 选择背景上的立体图形的图层组，复制图层组到选择背景上的立体图形的图层组，复制图层组到相应位置，并放大图形，如图相应位置，并放大图形，如图 11-101 11-101 所示。所示。图图 11-101l STEP 5 STEP 5 在所有图层上方新建图层，填充为接近黑色的深在所有图层上方新建图层，填充为接近黑色的深灰色，为其添加图层蒙版，使用黑色的画笔工具在蒙版上灰色，为其添加图层蒙版，使用黑色的画笔工具在蒙版上涂抹，加深整个页面的暗角，完成后将该图层放置在导航涂抹，加深整个页面的暗角，完成后将该图层放置在导航图层组的下方，如图图层组的下方，如图11-102 11-102 所示。所示。l STEP 6 STEP 6 在暗角图层上方新建图层，使用白色的画笔在海在暗角图层上方新建图层，使用白色的画笔在海报上进行涂抹（注意在工具属性栏中设置画笔的不透明报上进行涂抹（注意在工具属性栏中设置画笔的不透明度），设置图层的混合模式为叠加，不透明网为度），设置图层的混合模式为叠加，不透明网为 50%50%，如，如图图 11-103 11-103 所示。所示。图图 11-102 图图 11-103