2.3 制作炫酷的H5移动展示作品
目前H5设计领域还没有统一的设计工具，需要搭配多种软件来设计制作。本节将分别以Photoshop和手机设计工具为例，介绍制作炫酷H5作品的操作方法。
2.3.1 运用Photoshop制作H5作品
伴随着H5的兴起，多数H5背后的设计师都是从其他相关行业跨入这个领域的，因为专业的H5生成平台存在严重的同质化问题，很难做出理想的效果，所以即使是有设计功底的设计师，也得需要根据自身的优势来选择工具进行学习与制作，从而达到想要的H5效果。
其中，Photoshop是用于制造H5中的各种图形、图像和文字元素的不错工具，下面将利用Photoshop来设计一个“11.11”电商活动的H5单页效果，如图2-35所示。
图2-35 实例效果
1. 使用Photoshop制造H5单页
下面介绍使用Photoshop制作H5单页的背景、图片和文字等元素的方法。
（1）在Photoshop工作界面中，单击“文件”|“新建”命令，弹出“新建文档”对话框，①设置“名称”为“H5页面设计”、“宽度”为1080像素、“高度”为1920像素、“分辨率”为72像素/英寸、“颜色模式”为“RGB颜色”、“背景内容”为“白色”，如图2-36所示；②单击“创建”按钮，新建一个空白图像。
图2-36 设置各选项
（2）展开“图层”面板，新建“图层1”图层，选取工具箱中的渐变工具，打开“渐变编辑器”对话框，在渐变条上设置淡紫色到深紫色的渐变（RGB参数值分别为189、73、208；34、4、128），如图2-37所示。
图2-37 新建渐变预设
（3）选中“图层1”图层，在图像编辑窗口中，从图像最下方正中心往图像中心点垂直拖曳填充径向渐变，效果如图2-38所示。
图2-38 填充径向渐变
（4）按Ctrl＋O组合键，打开“舞台.jpg”素材图像，如图2-39所示。
图2-39 打开素材图像
（5）选取工具箱中的移动工具，将舞台图像拖曳至背景图像编辑窗口中的合适位置处，效果如图2-40所示。
图2-40 拖曳图像
（6）设置“图层2”图层的“混合模式”为“滤色”，效果如图2-41所示。
图2-41 设置混合模式
（7）为“图层2”图层添加一个图层蒙版，从上至下填充黑色到白色的线性渐变，隐藏部分图像效果，如图2-42所示。
图2-42 隐藏部分图像效果
（8）选取工具箱中的多边形工具，在工具属性栏中设置“选择工具模式”为“形状”、“填充”为无、“描边”为粉色（RGB参数值分别为229、0、126）、“边”为3，在图像编辑窗口中绘制一个多边形图像，效果如图2-43所示。
图2-43 绘制多边形
（9）按Ctrl＋T组合键，调出变换控制框，适当调整图像形状、大小及位置，效果如图2-44所示。
图2-44 调整图像
（10）展开“图层”面板，双击“多边形1”图层，弹出“图层样式”对话框，选中“描边”复选框，设置“颜色”为深紫色（RGB参数值分别为34、4、128），其他参数设置如图2-45所示。
图2-45 设置图层样式
（11）单击“确定”按钮，为图层添加描边，效果如图2-46所示。
图2-46 添加描边
（12）栅格化“多边形1”图层，运用橡皮擦工具适当擦除多边形图像3个边的部分图像，效果如图2-47所示。
图2-47 擦除图像
（13）选取工具箱中的横排文字工具，单击“窗口”|“字符”命令，在弹出的“字符”面板中，设置“颜色”为白色（RGB参数值均为255），其他参数设置如图2-48所示。
图2-48 设置字符各选项
（14）输入相应文本，并调整文字至合适的位置，效果如图2-49所示。
图2-49 输入文本
（15）在“字符”面板中，设置“颜色”为黄色（RGB参数值分别为240、255、5），其他参数设置如图2-50所示。
图2-50 设置字符各选项
（16）输入相应文本，并调整文字至合适的位置，效果如图2-51所示。
图2-51 输入文本
（17）在“字符”面板中，设置“颜色”为粉色（RGB参数值分别为229、0、126），其他参数设置如图2-52所示。
图2-52 设置字符各选项
（18）输入相应文本，并调整文字至合适的位置，效果如图2-53所示。
图2-53 输入文本
（19）展开“图层”面板，双击相应文字图层，弹出“图层样式”对话框，选中“描边”复选框，相关参数设置如图2-54所示。
图2-54 设置图层样式
（20）单击“确定”按钮，为图层添加描边，效果如图2-55所示。
图2-55 添加描边效果
（21）选取工具箱中的横排文字工具，单击“窗口”|“字符”命令，在弹出的“字符”面板中，设置相关参数，如图2-56所示。
图2-56 设置字符选项
（22）输入相应文本，并调整文字至合适的位置，效果如图2-57所示。
图2-57 输入文本
（23）在“字符”面板中，设置“颜色”为蓝色（RGB参数值分别为3、196、255），其他参数设置如图2-58所示。
图2-58 设置字符选项
（24）输入相应文本，并调整文字至合适的位置，效果如图2-59所示。
图2-59 输入文本
（25）选取工具箱中的渐变工具，打开“渐变编辑器”对话框，①在渐变条上设置青色到淡青色的渐变（RGB参数值分别为5、235、205；206、255、253）；②单击“新建”按钮，新建渐变预设，如图2-60所示。
图2-60 新建渐变预设
（26）选取工具箱中的自定义形状工具，在工具属性栏中设置“选择工具模式”为“形状”、“填充”为新建的渐变预设、“描边”为无、“形状”为“模糊点1”，在图像编辑窗口中绘制一个如图2-61所示的形状。
图2-61 绘制自定义形状
（27）在“字符”面板中设置“颜色”为白色（RGB参数值均为255），其他参数设置如图2-62所示。
图2-62 设置字符选项
（28）输入相应文本，并调整至适当的位置，效果如图2-63所示。
图2-63 输入文本
（29）在“字符”面板中设置“颜色”为白色（RGB参数值均为255），其他参数设置如图2-64所示。
图2-64 设置字符选项
（30）输入相应文本，并调整至适当的位置，效果如图2-65所示。
图2-65 输入文本
（31）选取工具箱中的钢笔工具，在工具属性栏中设置“选择工具模式”为“形状”、“填充”为无、“描边”为白色（RGB参数值均为255）、“描边宽度”为6像素，在图像编辑窗口中绘制一个形状，并适当调整位置，效果如图2-66所示。
图2-66 绘制形状
（32）选取工具箱中的自定义形状工具，在工具属性栏中设置“选择工具模式”为“形状”、“填充”为“渐变”（在“渐变”选项区中选择“色谱”渐变色）、“渐变样式”为“线性”、“旋转渐变”为－27、“描边”为无、“形状”为“百合形状”，在图像编辑窗口中绘制一个如图2-67所示的形状。
图2-67 绘制形状
（33）在“字符”面板中设置“颜色”为白色（RGB参数值均为255），其他参数设置如图2-68所示。
图2-68 设置字符选项
（34）选取工具箱中的直排文字工具，输入相应文本，并调整至合适的位置，效果如图2-69所示。
图2-69 H5单页1
（35）用与上同样的方法，制作相应的文字内容，即可完成电商推广H5单页的设计，效果如图2-70所示。
图2-70 H5单页2
2. 将PSD文件导入H5页面中
相信做平面设计的人都非常熟悉PSD格式（Photoshop Document），它是Photoshop中的专用图形文件格式，也是默认的保存文件格式，可以用来存储Photoshop生成的图层、通道、参考线、注解和颜色模式等内容。在H5页面中运用各种PSD格式的画面元素，主要优势如图2-71所示。
图2-71 使用PSD格式的好处
使用人人秀平台可以快速地将PSD格式文件导入H5页面中，而且支持在Photoshop中进行H5设计，然后上传至人人秀平台一键生成H5页面。
下面以人人秀为例，介绍PSD一键导入H5的操作方法。
（1）登录人人秀官网，在右上角进入个人中心，如图2-72所示。
图2-72 单击“进入个人中心”按钮
（2）单击左侧＋号，创建新的H5页面，如图2-73所示。
图2-73 单击左侧＋号
（3）在弹出的窗口中可以选择创建空白模板，或者套用模板市场的模板，如图2-74所示。
图2-74 选择模板类型
（4）若选择“模板市场”，页面则会跳转到模板商店，用户可以在模板商店中选择自己喜欢的模板进行套用，如图2-75所示。
图2-75 模板商店
（5）这里只简单介绍上传PSD格式的一些基础操作，因而选择“空白模板”，进入人人秀H5编辑器，在顶部的工具栏中选择“PSD导入”工具，如图2-76所示，然后根据提示选择并上传文件即可。需要注意的是，在人人秀上传PSD格式时，需要先将其中的图层栅格化。
图2-76 选择“PSD导入”工具
（6）弹出“PSD导入”对话框，单击中间的“上传PSD文件”按钮，如图2-77所示。
图2-77 单击“上传PSD文件”按钮
（7）弹出“打开”对话框，选择要导入的PSD文件，如图2-78所示。单击“打开”按钮，即可开始上传PSD文件了。
图2-78 选择要导入的PSD文件
（8）上传PSD文件后，也可以打开“图层”面板，查看各个图层的对象，以及进行删除和调整顺序等操作，如图2-79所示，可以看到其商品图片、背景图片、文案以及促销图形等都使用了不同的图层进行存放，可以进行更加方便的编辑操作，而不会引起整体画面的改变。
图2-79 在“图层”面板中查看各个图层元素
营销人员可以在Photoshop中将H5页面的源文件设计好，并存储为PSD格式，然后直接导入人人秀平台上，即可得到与设计图对应的H5作品，可以节省大量的排版时间。
2.3.2 运用手机平台制作H5
随着时代进步，智能手机已经成为大众普遍使用的工具，而H5的主要载体便是智能手机，除了在智能手机端浏览H5成为一种需求外，手机制作H5也已成为H5发展的一个趋势，众多H5制作平台纷纷推出手机端制作H5，例如人人秀推出的小程序制作工具便能够很好地解决在手机端制作H5的用户需求。
下面介绍如何通过人人秀公众平台制作H5页面的方法。
（1）打开手机端微信程序，关注“人人秀”微信公众号，进入公众号界面，点击页面下方的“点我制作”按钮，如图2-80所示。
图2-80 人人秀微信公众号界面
（2）跳转到人人秀制作界面，点击相应的模板，如图2-81所示。
图2-81 选择相应模板
（3）执行操作后，跳转到模板预览界面，点击界面下方的“立即制作”按钮，如图2-82所示。
图2-82 点击“立即制作”按钮
（4）进入H5模板制作界面，点击相应的文本预览框，可以修改文本的内容，如图2-83所示。
图2-83 修改文本内容
【专家提醒】
在人人秀微信小程序中制作完成的H5，可以在完成设计保存时跳转到的页面中分享作品至其他相关平台，也可点击“返回我的作品”按钮，跳转至“我的作品”页面，单击“分享”按钮，同样可以完成相关平台的作品展示推广。
（5）向左滑动屏幕，进入第二个页面，在其中可以上传商品图片或者宣传图片，修改完成后单击下方的“保存”按钮，如图2-84所示。
图2-84 修改图片内容
（6）弹出信息框，用户可在其中更改封面图片、修改标题内容等，单击“保存”按钮，如图2-85所示。
图2-85 修改信息框内容
（7）执行操作后，即可发布刚制作的H5页面，效果如图2-86所示。
图2-86 发布分享H5页面