华体会新闻
第11章 化妆品店铺页面设计 本章将制作一个综合实例——化妆品店铺的首页设计。 在设计店铺首页前，可以多参考同类别的优秀店铺来获取灵 感，然后再根据自身店铺的受众人群和产品特点来搜集好相 关素材，规划好设计要求、思路和要展示的模块等。 11.1首页海报设计 案例名称 首页海报设计 素材文件 光盘/素材/11/模特.jpg、瓶子.png 效果文件 光盘/效果/11/首页海报.psd 视频文件 扫右侧二维码 首页海报是淘宝店铺首页第一屏显示的画面，可以是促 销活动海报，也可以是主推商品的海报。下面为化妆品店铺 制作首页海报。最终效果如图11-1 所示。 图1-1 ● STEP 1 新建一个尺寸为1920×4000 像素、分辨率为72 像素/英寸的的空白文件，设置红色系的渐变颜色，然 后将背景进行线性渐变填充，并拉出参考线确定店招、海 报的位置，如图11-2 所示。 渐变编辑路 恢设 名称(N): 自定 新安类型：实底 平普质(M):100 % 色标 确定 载入()… 存结(S). 新建(W) 图11-2 ● STEP2 新建图层，使用矩形选框工具工具绘制矩形选区， 然后使用渐变工具填充选区，如图11-3 所示。 ● STEP 3 新建图层，使用矩形工具绘制矩形，然后使用直 接选择工具调整锚点，并为其添加淡黄色的渐变叠加，如 图11 - 4 所示。 图11-3 图11-4 ● STEP 4 使用相同的方法绘制另外的矩形，并调整锚点位 置，然后分别对其设置不同的渐变颜色，如图11-5 所示。 ● STEP 5 新建图层，使用钢笔工具沿形状菱角绘制路径， 然后使用白色的画笔工具描边路径(描边时要选中“模拟 压力”复选框),如图11- 6 所示。 图11-5 图11-6 ● STEP6 使用相同的方法对竖着的边添加描边，如图11-7 所示。 ● STEP 7 使用钢笔工具绘制路径，然后填充为红色到深红 的渐变，如图11-8 所示。 图11-7图11-8 图11-7 ● STEP 8 设置前景色为浅一些的红色，取消选区后并新建 图层，使用画笔工具按【Shift】 键绘制一条红色的线条， 注意设置画笔的笔记大小，然后按【Ctrl+T】 组合键调整 该线条的角度，并按 【Ctrl+Alt+G】 组合键创建剪贴蒙版， 如图11-9 所示。 ● STEP 9 双击红色的图像图层，为其添加投影的图层样式， 如图11- 10 所示。 图11-9图11-10 图11-9 ● STEP 10 将除背景图层外的所有图层按【Ctrl+G 】 组合 键创建图层组。 ● STEP 11 绘制矩形并调整锚点位置，然后为该形状图层 设置渐变叠加，如图11-11 所示。 ● STEP 12 继续绘制矩形，调整锚点并为其设置不同的渐 变颜色，如图11-12 所示。 图11-11图11-12 图11-11 ● STEP 13 绘制矩形，使用直接选择工具调整锚点位置，并 设置渐变叠加，复制3 个形状矩形，分别调整锚点和更 改渐变叠加颜色，如图11-13 所示。 ● STEP 14 继续绘制矩形形状，使用直接选择工具调整锚点 位置，为其添加描边的图层样式，然后将图层内部不透明 度为0%,如图11 - 14 所示。 图11-14图11-13 图11-14 ● STEP 16 在右侧的面中绘制矩形，并为该形状图层设置渐 变叠加、内发光和外发光的图层样式，如图11- 16 所示。 新变叠加 新变 合模式： 正常 不透明度(P): 新资： 样式： 线性 角度(N) 输效(5): 设盖为默认值 与图层对齐W 重责对齐 复位为慰认值 不造明度(O) 品属 等高线： (A): 应为默认值设盖为出认值 应为默认值 图11-16 ● STEP 17 使用钢笔工具沿图像的边绘制形状路径，在整个立 体矩形的下方新建图层，然后设置黑色画笔描边路径(这里 不选中“模拟压力”复选框),如图11- 17 所示。 ● STEP 18 选择“滤镜/模糊/高斯模糊”命令，在打开的 “高斯模糊”对话框中设置模糊效果，完成后如图11-18 所 示。 图11-18图11-17 图11-18 ● STEP 19 将所有立体矩形的图层按【Ctrl+G 】 组合键建立 图层组。 ● STEP 20 使用相同的方法绘制其他的立体矩形，将其放在 图层组中，并放置在大的立体图形下方，如图11-19 所示。 ● STEP 21 复制红色的立体图层到画面右侧，放大图形后， 更改各个面的渐变叠加颜色，如图11-20 所示。 图11-19图11-20 图11-19 ● STEP 22 继续在红色的立体图形后面绘制长方立体图形， 并设置不同的渐变叠加颜色，然后调整图形和角度和位 置并为其绘制阴影效果，如图11-21 所示。 图11-21 ● STEP 23 使用钢笔工具绘制路径并使用白色的画笔工具描 边，并将关于该图形的所有图层创建图层组，如图11-22 所示。 ● STEP 24 新建图层，使用钢笔工具绘制阴影路径，将其转 换为选区后填充为黑色，如图11-23 所示。 图11-24图11-25 图11-24 ● STEP 27 选择最下方的两个面，使用直接选择工具调整锚 点，然后分别为其添加图层蒙版，再使用渐变工具将下半 部分图像隐藏，如图11-26 所示。 ● STEP 28 在所有图层最上方按【Ctrl+Alt+Shift+E 】 组合 键盖印图层，然后选择“滤镜/杂色/添加杂色”命令， 打开“添加杂色”对话框，在其中设置相关参数，完成后 如图11-27 所示。 添加杂色 顿览(P) 100% 数里(A): 分布 平 均 分 布(U) 高斯分布(G) 单色(M) 图11-27 ● STEP 29 使用矩形工具绘制矩形，然后使用直接选择工具 调整锚点，按 【Ctrl+Alt+T】 组合键后，按住【ALt】 键 向中心缩放形状图形，完成后将外面的矩形设置为淡黄色， 如图11-28 所示。 ● STEP 30 将素材文件“模特.tif” 拖动到图像文件中， 将其缩放至合适大小，然后按 【Ctrl+Alt+G】 组合键创建 剪贴蒙版，如图11-29 所示。 图 11-28 图11-29 ● STEP 31 双击里面的矩形，为其添加斜面和浮雕、内发光 的图层样式，完成后如图11-30所示。 斜面和泽瞳 结构 样 式 ：潮效果 平得 苹渡(0) 管素大小体 管素 软化( 阴影 使用全局光(G角度(: 使用全局光(G 高度： 光幸等高线： 有年据击() 高光模式： 不适明度(0) 辨式： 正片叠底 不透明度(C) 装会提式： 不适明度(0): 杂色( 图素 方法： 柔和 阳案(C) 大小(5) 范国( 操 0 设委为数认值 海据齿() 其位为默认值 图11-30 ● STEP 32 继续绘制矩形并调整锚点，设置填充颜色比相框 稍微深一些的黄，将其作为相框的厚度，如图11-31 所 示。 ● STEP 33 整体放大相框图像，使用前面相同的方法为其添 加阴影效果，如图11-32 所示。 图11-31图11-32 图11-31 ● STEP 34 将素材文件瓶子 .png 拖动到图像文件中，缩 放至合适大小后，使用橡皮擦工具擦除多余的图像，如图 11-33 所示。 ● STEP 35 在瓶子下方新建图层，使用同样的方法为瓶子绘 制投影，如图11-34 所示。 图11-34图11-33 图11-34 ● STEP 36 将素材文件“瓶子.png” 拖动到图像文件中， 缩放至合适大小后，将其放置在相框的下方，如图11-35 所示。 ● STEP 37 再在丝带下方新建图层，用同样的方法绘制阴影， 如图11-36 所示。 图11-35 图11-36 ● STEP 38 输入文字，设置字体后将文字图层复制两个。先 隐藏复制的文字图层，双击原文字图层，为其添加渐变叠 加和描边的图层样式，如图11-37 所示。 岁末好礼岁末好礼 图11-38图11-39 图11-38 ● STEP 43 将文字创建为图层组，然后按【Ctrl+T 】 组合键 调整文字斜切角度，并将其放置在丝带图层的下方(注意 调整丝带的位置，不要挡住文字),如图11-42 所示。 图11-42 11.2制作店招和导航 案例名称 店招和导航制作 素材文件 无 效果文件 光盘/效果/11/店铺首页.psd 视频文件 扫右侧二维码 店招可以单独制作，也可以直接在首页的页面上制作， 与海报成为一体，在店招上同样可以放置logo、 相关促销信 息等，这里只是把店招位置预留出来，直接制作导航。最终 效果如图11-43 所示。 图11-43 ● STEP1 拉出参考线确定店招和导航的位置，如图11-44 所示。 图11-44 ● STEP 2 使用圆角矩形工具绘制1200×30 像素的圆角矩 形(可在工具属性栏中将圆角半径设置大一些),居中对 其画布后，双击该形状图层，为其添加渐变叠加的图层样 式，如图11-45 所示。 新变叠加 新资 混合模式： 正常 不透明度(P): 新变： 样式： 线性 角度(N: 编数(5): 设置为默认值 与图层对齐(1) 重置对齐 复位为慧认值 图11-45 ● STEP 3 绘制矩形形状，为其添加红色系的渐变叠加颜色， 然后在上面输入文字，注意与导航条对齐，如图11-46 所示。 图11-46 ● STEP 4 隐藏参考线，然后依次在导航条上输入其他相关 文字
