资源简介

(共24张PPT)
第8章
佳诺店铺页面设计
8.2
店铺首页制作
本案例中的Banner描绘了一个空岛上的滤镜世界，目的是通过超现实的图像激发浏览者好奇心，从而使其产生购买欲望。下面讲解该Banner的制作过程。8.2.2制作Banner视频讲解在Photoshop中新建图像文档，设置尺寸为1 920×900像素，分辨率为72像素/英寸，颜色模式为RGB，文档名为“首页Banner”。步骤1按【Ctrl+O】组合键，打开本章案例素材“背景.jpg”“城堡.png”；将素材移至“首页Banner”文档中，然后更改图层名称为素材原始名称；使用“钢笔工具” 绘制空岛底座形状，如图8-10（a）所示；按【Ctrl+Enter】组合键将路径转换为选区，然后为“城堡”图层添加图层蒙版，效果如图8-10（b）和8-10（c）所示。步骤2图8-10 绘制空岛底座形状（a）（b）（c）按【Ctrl+J】组合键复制图层，然后按住【Ctrl】键单击“城堡”图层的缩览图制作选区，将选区填充为黑色；按【Ctrl+D】组合键取消选区，然后使用“移动工具” 将“城堡”图层向下垂直移动40像素，如图8-11所示。步骤3图8-11 制作空岛截面主体选择“城堡”图层的蒙版，然后使用“矩形选框工具”分别在截面的左端和右端绘制选区，并为选区填充白色，制作空岛截面，如图8-12所示。按【Ctrl+D】组合键取消选区。步骤4图8-12 绘制界面两端按【Ctrl+O】组合键打开本章案例素材“岩层切面.png”。将深色岩层图像移动至截面左侧，并将该图层剪贴至“城堡”图层上，效果如图8-13（b）所示；按此方法复制多次岩层切面，将截面铺满，效果如图8-13（c）所示。步骤5图8-13 填充截面（a）（b）（c）提 示由8-13（a）中的城堡图像可知，光源来自图像右侧，因此在填充截面图像时，应根据底座形状的转折，区分明暗面。此外，可为各岩层切面图层添加蒙版并使用“画笔工具” 编辑蒙版，以使各切面之间过渡自然。选择“城堡”图层，为其添加“投影”样式，如图8-14所示。选择除“背景”图层以外的所有图层，按【Ctrl+G】组合键编组，命名为“空岛”。步骤6图8-14 为空岛添加投影按【Ctrl+O】组合键打开本章案例素材“石像.png”，将其移动至“首页Banner”文档中城堡图像右侧，更改图层名称为“石像”；使用“快速选择工具” 选中石像下方的树林部分，然后为“石像”图层添加图层蒙版，再按【Ctrl+I】组合键将蒙版反向，遮挡石像底部图像，如图8-15所示。步骤7图8-15 添加并处理石像素材复制“空岛”图层组中的“图层1”图层，移至“石像”图层下方，将复制后的图像移动至石像处，添加图层蒙版并编辑，遮挡石像的多余部分，如图8-16所示，然后选中“石像”和“图层1拷贝7”图层，按【Ctrl+G】组合键编组，并命名为“石像”。步骤8图8-16 显示树林图像按【Ctrl+O】组合键打开本章案例素材“立体文字.png”，将其移动至“首页Banner”文档中城堡图像左侧，更改图层名称为“立体字”，然后选择“快速选择工具” ，设置画笔大小为5像素，选中“摄影大师的秘密”下方部分文字和树林区域，最后为该图层添加图层蒙版，按【Ctrl+I】组合键将蒙版反向，遮挡文字底部，如图8-17所示。步骤9图8-17 添加并处理立体文字素材提 示使用“快速选择工具” 选择上述区域时，可先选取一个大致的范围，然后按住【Alt】键在多选的区域上单击或拖动，减去多选的区域。使用“快速选择工具” 选中“滤镜的世界”文字下方的树林部分，然后在“图层”面板中展开“空岛”组，选择“城堡拷贝”图层，按【Ctrl+J】组合键复制选区中的图像，再使用“移动工具” 将“图层4”移动至“立体字”图层上方，如图8-18所示。选中“图层4”和“立体字”图层，按【Ctrl+G】组合键编组，并命名为“立体字”。步骤10图8-18 处理立体文字素材按【Ctrl+O】组合键打开本章案例素材“瀑布.jpg”，将其移动至“首页Banner”文档中城堡图像下方，添加图层蒙版，并使用“画笔工具” 涂抹瀑布图像中的树林部分，保留瀑布图像，如图8-19所示。步骤11图8-19 添加并处理瀑布图像按【Ctrl+O】组合键打开本章案例素材“滤镜.png”，将其移动至“首页Banner”文档中合适位置，添加图层蒙版，并使用“画笔工具” 涂抹遮盖城堡图像的部分，使滤镜与城堡形成穿插关系，如图8-20所示。步骤12图8-20 添加并处理滤镜图像新建图层并命名为“投影”，选择“画笔工具” ，调整前景色为黑色，画笔大小为50，画笔形状为柔边圆，在森林、石像、瀑布图像上绘制滤镜投影，然后调整图层“不透明度”为60，使投影更加柔和，如图8-21所示。步骤13图8-21 绘制滤镜投影按【Ctrl+O】组合键打开本章案例素材“鸟.png”“热气球.png”“云.psd”，将鸟和热气球素材移动至“首页Banner”文档中合适位置，再从“云.psd”文档中选择合适形状的云朵若干，使用“移动工具” 分别移动至空岛周围，效果如图8-22所示。步骤14图8-22 添加装饰素材按【Ctrl+O】组合键打开本章案例素材“光效.png”，将其移至“首页Banner”文档中，调整混合模式为“滤色”，然后为该图层添加蒙版，使用“画笔工具” 遮盖立体字图像处的光照效果，如图8-23（b）所示。步骤15图8-23 添加光照效果（a）（b）按【Alt+Ctrl+Shift+E】组合键盖印图像，使用“Camera Raw滤镜”处理图像，参数如图8-24（a）所示，然后单击“确定”按钮，效果如图8-24（b）所示。步骤16图8-24 调整图像（a）图8-24 调整图像（b）使用“移动工具” 将调整好的Banner图像移动至“店铺首页”文档中合适位置，再使用“矩形工具” 和“椭圆工具” 制作切换Banner图标，效果如图8-25所示。步骤17图8-25 制作Banner切换图标
THANK YOU!

展开更多......

收起↑