H5面创意设计课件 项目7 综合案例：活动运营H5面的设计与制作

项目7综合案例：活动运营H5页面的设计与制作综合案例：活动运营H5页面的设计与制作近年来，随着国潮文化的兴起与数字化传媒的普及，如何以创新形式弘扬优秀传统文化、增强年轻群体对传统文化的认同感，成为文化传播领域的重要课题。莫昀传媒公司是一家专注于文化创意与数字营销的企业，其用户群体为18~45周岁的人群，该企业始终致力于通过新媒体技术推动传统文化与现代生活的融合。基于上述背景，莫昀传媒公司计划推出以元宵节为主题的互动型H5页面，旨在实现文化传播与品牌推广的双重目标。右图所示为元宵节活动H5页面。7.1制作元宵节活动H5页面的前期准备7.2元宵节活动H5页面的设计7.3元宵节活动H5页面的动效、音效添加与发布目录Content7.4项目实训7.1.1使用AI构思元宵节活动H5页面在着手设计之前，要先对与元宵节相关的各类信息进行系统梳理，包括挖掘元宵节的历史渊源、了解各地不同的元宵节民俗活动、分析目标用户群体的特征等。根据这些信息整理并构思元宵节活动，最后生成设计方案。其具体操作如下。生成的元宵节活动详细信息7.1.1使用AI构思元宵节活动H5页面生成构思方案生成的元宵节活动H5页面设计方案7.1.2使用AI生成元宵节活动H5页面原型图完成构思后，可开始进行H5原型图的绘制，此时可直接使用墨刀AI工具来完成。其具体操作如下。元宵节活动H5页面原型图7.1.3搜集元宵节活动H5页面素材1.使用AI生成H5页面素材设计人员在设计元宵节活动H5页面时可将一些民俗活动图片作为素材添加到背景中，这些图片可使用AI直接生成，如舞龙、汤圆、猜灯谜图片等。其具体操作如下。输入提示词并生成图片7.1.3搜集元宵节活动H5页面素材元宵节活动H5页面素材7.1.3搜集元宵节活动H5页面素材2.搜集H5页面其他素材根据设计方案，除了生成的素材，还需要搜集灯笼、放鞭炮、花灯等图片，这里可直接到素材网站中下载，也可直接绘制，使其符合设计需求。下图所示为元宵节活动H5页面的其他素材，通过组合这些素材可以实现最终效果。输入提示词并生成图片7.1制作元宵节活动H5页面的前期准备7.2元宵节活动H5页面的设计7.3元宵节活动H5页面的动效、音效添加与发布目录Content7.4项目实训7.2.1设计元宵节活动标题页本小节将制作元宵节活动标题页。根据元宵节活动H5页面设计方案，标题页以红色为背景色，以灯笼、烟花等素材为主，塑造喜气洋洋的节日氛围，然后通过添加文字来展现活动主题。其具体操作如下。添加渐变颜色

添加烟花素材添加金色渐变添加背景素材7.2.1设计元宵节活动标题页添加灯笼素材

输入文字调整色阶值7.2.1设计元宵节活动标题页设置“斜面和浮雕”参数

设置“渐变叠加”参数7.2.1设计元宵节活动标题页粘贴图层样式添加印章和文字输入文字

绘制竖线

7.2.1设计元宵节活动标题页设置“斜面和浮雕”参数

设置“描边”参数7.2.1设计元宵节活动标题页设置“内阴影”参数

设置“投影”参数7.2.1设计元宵节活动标题页输入文字设置描边参数

最终效果7.2.2设计元宵节活动内容页内容页主要用于介绍元宵节的习俗，其背景制作还是采用活动标题页的制作方式，只是布局不同。其具体操作如下。制作背景减去绘制的圆

绘制矩形

减去其他3个角上绘制的圆7.2.2设计元宵节活动内容页设置“斜面和浮雕”参数

设置“内发光”参数7.2.2设计元宵节活动内容页设置“投影”参数

完成后的效果7.2.2设计元宵节活动内容页绘制圆角矩形

为圆角矩形添加内阴影7.2.2设计元宵节活动内容页输入文字

设置“斜面和浮雕”参数绘制圆角矩形

7.2.2设计元宵节活动内容页设置“内发光”参数完成后的效果输入文字7.2.3设计元宵节活动红包页红包页主要采用转盘的形式进行展示。由于转盘可在后期添加互动动效时直接添加，因此这里不单独制作，本例主要制作背景和标题文字。其具体操作如下。制作背景绘制形状

复制并调整形状7.2.3设计元宵节活动红包页绘制矩形

调整弧度绘制其他形状调整斜切效果7.2.3设计元宵节活动红包页设置“投影”参数

调整并合并图层7.2.3设计元宵节活动红包页输入文字调整变形文字添加素材输入其他文字

7.2.4设计元宵节活动介绍页完成活动红包页的制作后，还需要设计活动介绍页，以帮助用户掌握活动规则。本例将先制作页面背景，然后制作好友邀请栏和活动规划栏。其具体操作如下。添加背景素材绘制圆角矩形

设置“描边”参数7.2.4设计元宵节活动介绍页设置“投影”参数

绘制形状合并形状7.2.4设计元宵节活动介绍页设置“描边”参数设置“内阴影”参数7.2.4设计元宵节活动介绍页设置“投影”参数

输入文字添加素材7.1制作元宵节活动H5页面的前期准备7.2元宵节活动H5页面的设计7.3元宵节活动H5页面的动效、音效添加与发布目录Content7.4项目实训7.3.1为元宵节活动H5页面添加动效操作时，首先需要在人人秀中导入PSD图像文件，然后依次添加动效。在添加动效的过程中需要为活动红包页添加转盘互动，并进行内容的设置。其具体操作如下。创建活动单击“Ps”按钮7.3.1为元宵节活动H5页面添加动效“PSD导入”对话框7.3.1为元宵节活动H5页面添加动效添加并调整其他页面为灯笼添加动效

7.3.1为元宵节活动H5页面添加动效为“元”文字添加动效为其他文字添加动效

7.3.1为元宵节活动H5页面添加动效设置触发事件为中间形状添加动效

7.3.1为元宵节活动H5页面添加动效为“认识元宵节”添加动效为其他文字添加动效

7.3.1为元宵节活动H5页面添加动效为小孩添加动效输入并调整文字7.3.1为元宵节活动H5页面添加动效为“习俗展示”添加动效

设置页面背景颜色7.3.1为元宵节活动H5页面添加动效添加素材输入文字为文字添加动效

7.3.1为元宵节活动H5页面添加动效设置“点击触发”选择活动类型

基本设置7.3.1为元宵节活动H5页面添加动效修改奖品设置

编辑其他奖品设置7.3.1为元宵节活动H5页面添加动效为页面最上方文字添加动效7.3.2为元宵节活动H5页面添加音效为元宵节活动H5页面添加完动效后，还可根据页面内容为其添加音效。本例将添加音乐库中自带的音效。其具体操作如下。添加翻页箭头添加音乐7.3.3发布元宵节活动H5页面为元宵节活动H5页面添加音效后，即可发布完成后的H5页面。发布前可对翻页方式进行设置，然后设置分享标题，并生成二维码，方便页面的传播。其具体操作如下。高级设置分享设置7.1制作元宵节活动H5页面的前期准备7.2元宵节活动H5页面的设计7.3元宵节活动H5页面的动效、音效添加与发布目录Content7.4项目实训实训一

制作活动邀请H5页面实训要求运用本项目所学知识，使用Photoshop制作活动邀请H5页面。该H5页面主要由4个页面组成，包括邀请函首页、活动介绍页、活动流程页和联系方式页。制作时，需要体现出活动的主题和相关信息，且效果要美观。完成后的参考效果如右图所示。实训一

制作活动邀请H5页面制作思路（1）制作活动邀请H5页面1。（2）打开“活动邀请素材.psd”素材文件（配套资源：\素材\项目7\活动邀请素材.psd），将背景1和矢量图拖曳到页面1中，调整大小和位置。（3）选择“横排文字工具”，输入文字，设置“字体”为“方正粗倩简体”，调整文字大小、位置和颜色。（4）使用“直线工具”、“多边形工具”在文字的对应区域绘制直线和三角形。（5）制作活动邀请H5页面2。实训一

制作活动邀请H5页面（6）在打开的“活动邀请素材.psd”素材文件中将背景2和图片拖曳到页面2，调整大小和位置。（7）制作活动邀请H5页面3。新建“名称”“宽度”“高度”“分辨率”分别为“活动邀请H5页面3”“750”“1453”“72”的图像文件。（8）制作活动邀请H5页面4。新建“名称”“宽度”“高度”“分辨率”分别为“活动邀请H5页面4”“750”“1453”“72”的图像文件。使用相同的方法添加背景图片，并输入文字，然后设置“字体”为“方正粗黑宋简体”，调整文字大小、位置和颜色。最后添加二维码，完成后保存所有文件。实训二

制作活动邀请H5页面动效实训要求运用本项目所学知识，使用人人秀制作活动邀请H5页面动效，要让页面更具动感。完成后的参考效果如右图所示。实训二

制作活动邀请H5页面动效制作思路（1）登录人人秀官方网站，进入人人秀首页，单击“工作台”按钮，在打开的页面中，单击“新建”按钮，打开“立即创建”页面，单击“H5”超链接。（2）进入编辑页面，此时左侧列表将显示空白的页面，添加3个相同的空白页面。（3）在右侧列表中单击“Ps”按钮，打开“PSD导入”对话框，单击“上传PSD文件”按钮，打开“打开”对话框，分别将“活动邀请H5页面1.psd”“活动邀请H5页面2.psd”“活动邀请H5页面3.psd”“活动邀请H5页面4.psd”文件添加到页面中，调整图像位置。实训二

制作活动邀请H5页面动效（4）选择第1页，选择中间形状，在页面右侧列表中选择“动画”选项卡，然后单击“添加”按钮，在“动画”下拉列表中选择“呼吸”选项，设置“延迟”为“1”，“持续”为“2”。（5）选择形状下侧的文字，在页面右侧列表中选择“动画”选项卡，然后单击“添加”按钮，在“动画”下拉列表中选择“飞入”选项，并设置箭头方向为向左，设置“延迟”为“0”，“持续”为“2”。（6）选择第2页，在页面右侧列表中选择“动画”选项卡，然后单击“添加”按钮，在“动画”下拉列表中选择“刹车”选项，设置“延迟”为“0”，“持续”为“2”。实训二

制作活动邀请H5页面动效（7）选择第3页，选择“会议流程”文字，在页面右侧列表中选择“动画”选项卡，然后单击“添加”按钮，在“动画”下拉列表中选择“转轴”选项，并设置箭头方向为向左，设置“延迟”为“0”，“持续”为“2”。（8）选择下侧第1个文字，在页面右侧列表中选择“动画”选项卡，然后单击“添加”按钮，在“动画”下拉列表中选择“飞入”选项，并设置箭头方向为向左，设置“延迟”为“0”，“持续”为“1”。（9）选择下侧第2个文字，在页面右侧列表中选择“动画”选项卡，然后单击“添加”按钮，在“动画”下拉列表中选择“飞入”选项，并设置箭头方向为向左，设置“延迟”为“1”，“持续”为“1”，使用相同的方法为其他文字添加动画，注意“延迟”数值主要根据文字持续增大。实训二

制作活动邀请H5页面动效（10）选择第4页，为文字和图片添加动画，在“动画”下拉列表中选择“落下抖动”选项，并设置“延迟”为“2”，“持续”为“3”。