H页面创意设计（AI协同）（全彩慕课版）（第3版）课件汇 项目5-9 页面的动效设计 -综合案例：企业招聘H页面的设计与制作

项目5H5页面的动效设计高等院校数字艺术精品课程系列教材目录Content5.1H5页面动效设计基础5.2H5页面的内页动效设计5.3

H5页面的转场动效设计5.4

项目实训5.1.1H5页面动效的作用动效具有渲染氛围、引导H5的功能进行展现、引导用户交互（如引导用户进行点击、翻页等）的作用，能吸引用户并让其视线长时间停留，增加用户对H5的好感。下图所示的H5页面采用多种纯色渐变作为背景，加上类似水波纹的效果，配合上古琴的声音，从视觉和听觉上都让人很享受，仿佛在一个虚拟的空间中徜徉、漫步、飞翔。5.1.2H5页面动效的主要类型在H5页面中，内页动效常用于依次展现H5页面的内容，使整个内容更具有动感和趣味。下图所示为使用淡入的内页动效，整个H5页面具有趣味性。1.内页动效5.1.2H5页面动效的主要类型在H5页面中，转场动效常用于内容的承上启下、描述场景的过渡或空间的转换，能让内容过渡得更加自然、用户体验更加流畅。右图所示为招聘H5页面的转场动效，将上页内容和下页内容进行自然地转换。2.转场动效5.1.2H5页面动效的主要类型3.内容动效无交互内容动效有交互内容动效AB无交互内容动效指以动画或是视频的形式，将动效置入H5页面中，使其按照制作的特定效果进行播放。有交互内容动效在无交互内容动效的基础上加入了交互的按钮或是动作，让用户的操作与H5页面的动效产生关联，以增加页面的互动性。5.1.2H5页面动效的主要类型辅助动效在H5页面中所占比例较小，具有持续时间短、渲染力强、突出细节的作用，能增强页面细节的表现力，提升整个H5页面的趣味性。右图所示的H5页面采用辅助动效，在内容的展现中添加闪烁的星光等，增强整个页面的细节表现力。4.辅助动效5.1.2H5页面动效的主要类型功能动效常用于测试类H5页面，起到内容引导和提示的作用，具有持续时间短、展示面积小、动效效果弱的特点。右图所示的H5页面采用功能动效。该H5页面中的“点击进入”按钮、“女声诊室”按钮、“男声诊室”按钮、点击选中按钮等都属于功能动效，这些按钮不仅具有引导性，而且能增加用户与页面的互动性。5.功能动效目录Content5.1H5页面动效设计基础5.2H5页面的内页动效设计5.3

H5页面的转场动效设计5.4

项目实训5.2.1内页的动效选择在制作内页动效前，设计人员需要先选择合适的动效。根据对象大小选择动效内页动效需要根据对象的大小来选择，设置动效的对象面积越大，设置的动效速度越慢，动效幅度越小，反之对象面积越小，设置的动效速度越快，动效幅度也就越大。根据使用场景选择动效在H5页面中，动效的作用是吸引用户的注意力、调动情绪，使其跟随内容情节的推进而产生变化。根据对象的物理特征选择动效除了根据对象大小和使用场景之外，设计人员还可以根据现实中对象的物理特征选择动效。5.2.2内页动效的层级设计人员在编辑内页动效时，往往会需要一组一组地展现内容，使内容流畅而赋有动感，此时就需要设计人员确定内容的展现顺序，如可将展现的内容分为不同的组，根据分组的先后顺序进行动效的展现，再根据展现的内容来调整展现速度的快慢。另外，在展现时，每个动效的展现时间最好控制在2~5秒，不要过于迅速，避免信息展示过快，造成用户无法完整查看；也不要过于缓慢，避免让用户感觉拖沓，留下不好的印象。5.2.3设计案例：制作微信红包H5页面的内页动效本例将使用MAKA制作微信红包H5页面的内页动效。在生成过程中可添加动效，使页面更具吸引力。在添加内页动效前需要先将红包页面导入H5编辑器中，进行动效的设计与制作。具体操作如下。创建“翻页H5”5.2.3设计案例：制作微信红包H5页面的内页动效选择“导入PSD文件”选项导入文件5.2.3设计案例：制作微信红包H5页面的内页动效调整图像位置选择图层设置动画5.2.3设计案例：制作微信红包H5页面的内页动效设置红包动画设置金币动画5.2.3设计案例：制作微信红包H5页面的内页动效设置大红包动画预览效果目录Content5.1H5页面动效设计基础5.2H5页面的内页动效设计5.3H5页面的转场动效设计5.4

项目实训5.3.1设计转场动效的注意事项设计人员在设计转场动效时，需要注意以下3点。转场过渡自然转场速度要合适转场动效样式要与H5内容相符5.3.2设计案例：制作微信红包H5页面的转场动效完成单个内页的动效设计后，可添加其他内页，并制作转场动效，让内页与内页间过渡自然。本例将在微信红包H5页面中添加其他页面，并制作退场动效，然后添加音乐和转场效果，使整个微信红包H5页面更加完整。具体操作如下。继续编辑微信红包H5页面添加“H5红包页面2”素材文件选择退场动画5.3.2设计案例：制作微信红包H5页面的转场动效5.3.2设计案例：制作微信红包H5页面的转场动效添加“H5红包页面3”素材并设置动效5.3.2设计案例：制作微信红包H5页面的转场动效选择音乐

设置页面效果预览页面效果目录Content5.1H5页面动效设计基础5.2H5页面的内页动效设计5.3

H5页面的转场动效设计5.4项目实训实训

使用MAKA制作招聘H5页面动效实训要求运用本项目所学知识，使用MAKA制作招聘H5页面动效。在设计时需要凸显招聘内容，然后使用动效让整个页面更具动感。完成后的参考效果如右图所示。实训

使用MAKA制作招聘H5页面动效制作思路（1）登录MAKA官方网站，进入MAKA首页，在左侧列表中单击“我的作品”超链接进入创建作品页面，在左侧选择“创建”选项卡，在右侧的面板中选择“翻页H5”选项，单击”创建“按钮。（2）进入空白模板编辑页面，在页面左上角单击“文件”，选择“导入PSD文件”选项，打开“导入文件”对话框，将“H5招聘页面1.psd”素材文件（配套资源：\素材\项目5\H5招聘页面1.psd）添加到页面中，等待上传结束后，单击“完成”按钮。（3）在页面下方单击按钮，使用相同的方法添加“H5招聘页面2.psd、H5招聘页面3.psd”素材文件（配套资源：\素材\项目5\H5招聘页面2.psd、H5招聘页面3.psd）。（4）选择第2张页面，选择“周末双休”图层，在页面右侧列表中选择“动画”/“元素动画”选项卡，在“进场动画”栏中单击“添加动画”按钮，在打开的下拉列表中选择“淡入”选项，设置“速度”为“4”，“延迟”为“3”。实训

使用MAKA制作招聘H5页面动效（5）选择其他文字图层，设置“进场动画”为“向左飞入”，“速度”为“4”，“延迟”为“2”。（6）选择第3张页面，依次选择文字图层，在页面右侧列表中选择“动画”/“元素动画”选项卡，在“进场动画”栏中单击“添加动画”按钮，在打开的下拉列表中选择“淡入”选项，设置“速度”为“3”，“延迟”为“2”。（7）单击“页面设置”超链接，设置“翻页指示器”为第一个样式，设置“翻页动效”为“淡出淡入”，单击打开“自动播放”开关，设置“停留时长”为“2”。（8）在页面右上角单击“预览/分享”按钮，即可在打开的界面中预览H5作品，在右侧设置名称为“招聘H5页面”，可通过发布链接将其分享到微信、微博、QQ等社交平台。学习进步！高等院校数字艺术精品课程系列教材项目6H5页面的创意设计高等院校数字艺术精品课程系列教材6.1H5页面的交互创意设计6.2H5页面的动效创意设计目录Content6.3项目实训6.1.1使用H5+720°全景技术查看全景画面720°全景技术又被称为三维实景技术，是一种新兴的新媒体技术。该技术与视频、声音、图片等展现方式的显著区别是可操作、可交互。下图所示的H5页面利用720°全景技术，通过长卷寻宝和VR展馆的形式，展示黄河文明中的宝贵文化遗产，呼吁大家保护黄河文明，参与互动，了解非遗。6.1.2使用H5+人脸识别技术让内容更有趣人脸识别技术是指将人脸图像输入识别系统中，计算机根据人物的脸部特征进行人脸识别的技术。在下图所示的H5页面中，当用户点击“我要拍照”按钮后将进入合成毕业照界面，系统会调用手机摄像头，此时用户只需拍摄或选择照片，系统会自动识别用户的面部表情数据，并根据数据合成图像。6.1.3使用H5+物理引擎技术创建虚拟世界物理引擎技术是一种仿真程序技术，用于创建一种虚拟环境，在这个虚拟的环境中除了物体的相互作用（如运动、旋转和碰撞），还有施加到它们身上的力（如重力）。右图所示的H5页面通过让用户操作汽车躲避障碍进行游戏互动，其中躲避障碍的过程运用了物理引擎技术。6.1.4使用H5+重力感应技术让用户的互动体验更好重力感应原指对地球重力方向变化的感知技术，应用于H5页面中能提升用户体验，如赛车游戏中的左右转弯控制、屏幕横屏和竖屏切换等H5场景，都需要用到重力感应技术。如下图所示。6.1.5使用H5+手指跟随技术让操作更生动为了模拟原生应用的触控效果，大多数H5都运用了手指跟随技术，让操作变得更加生动，同时也加强了与用户的互动性。在右图所示的H5页面中，把鸡与鸭作为主角，让用户在游戏中锻炼眼力，在轻松热闹的卡通场景中释放压力，感受与萌宠互动的游戏乐趣。6.1.6设计案例：使用凡科微传单制作全景H5页面凡科微传单是一款简单易用的H5制作工具，使用该工具可以制作720°全景H5页面。本例将使用凡科微传单制作720°全景H5页面。在制作时先制作外景和内景，然后编辑内容，再设置样式。具体操作如下。创建页面6.1.6设计案例：使用凡科微传单制作全景H5页面单击“模板”按钮6.1.6设计案例：使用凡科微传单制作全景H5页面添加全景页面添加模板6.1.6设计案例：使用凡科微传单制作全景H5页面展开编辑全景6.1.6设计案例：使用凡科微传单制作全景H5页面设置背景颜色设计内圈背景6.1.6设计案例：使用凡科微传单制作全景H5页面添加素材图片6.1.6设计案例：使用凡科微传单制作全景H5页面添加按钮设置按钮样式并调整位置6.1.6设计案例：使用凡科微传单制作全景H5页面设置动画添加弹窗6.1.6设计案例：使用凡科微传单制作全景H5页面设置文字样式输入文字6.1.6设计案例：使用凡科微传单制作全景H5页面输入文字并保存设置点击音效6.1.6设计案例：使用凡科微传单制作全景H5页面添加“活动注意事项”按钮设置动画6.1.6设计案例：使用凡科微传单制作全景H5页面设置背景音乐设置分享样式6.1.6设计案例：使用凡科微传单制作全景H5页面完整的页面效果6.1H5页面的交互创意设计6.2H5页面的动效创意设计目录Content6.3项目实训6.2.1使用H5+快闪广告提升浏览体验快闪广告是指在短时间内快速闪过大量文字、图片的广告方式。设计人员可在快闪广告中直接插入活动内容或产品介绍，可有效提高用户转化率。制作快闪广告通常需要选材设计、视频剪辑、渲染输出3个步骤，较为复杂和费时。此外，快闪广告虽然拥有吸睛效果，但是信息闪现速度较快，可能会造成信息缺漏。下图所示的H5页面以快闪广告的形式展现，不但具有节奏感，而且更能突出主题。6.2.2使用H5+粒子特效提升视觉体验粒子特效指将大量的单个粒子组合，使其呈现出固定形态，并借由控制器、脚本来控制粒子整体或单个粒子进行运动，模拟出真实的动效。粒子特效常用于模拟现实中的水、火、雾、气等物质的效果。下图所示的H5页面采用科技风格，以浩瀚的宇宙为背景，应用粒子特效，通过星辰粒子的组合与聚散让整个页面效果充满科技感。6.2.3使用H5+视频提升内容的展现效果视频也是H5页面中常用的动效展现方式。设计人员可直接在H5页面中插入视频，并对视频进行设计，以提升内容的展现效果。右图所示的H5页面采用手绘动画的方式引入游戏场景，其中穿插相关影视视频，以此达到了推广游戏的目的。6.2.4使用H5+多屏互动提升营销的娱乐性多屏互动指用户在多个屏幕上体验活动，在每个屏幕上的操作都会同时反应到其他屏幕上，一般以双屏互动为主。在H5页面中使用多屏互动能实现手机、平板计算机、电视的互动，打造互动性更强的H5页面。下图所示的H5页面采用了双屏互动的动效设计。在页面的开始是一个人在黑白的孤岛上漫游，朋友扫码互动后，H5中的人物可以跨越至另一个屏幕，实现多屏互动。6.2.5使用H5+GIF动画让画面更生动动画是H5页面中重要的一部分，出色的动画能让H5页面更加生动。GIF动画是一种文件体积小、可压缩、制作成本低的动效类型，多用于小型动效的制作。下图所示为引入GIF动画的H5页面，其通过字体元素的变化，使页面更具动感。6.2.6设计案例：制作快闪广告H5页面快闪广告的制作方式多样，既可以通过专门的编辑器来完成，也能先利用即梦AI生成背景，再借助Photoshop和Premiere进行后续制作。本例先使用即梦AI生成背景素材，接着用Photoshop把文字分割成单独的页面，再通过Premiere制作动效，最后将各部分组合起来，从而完成整个快闪广告的制作。具体操作如下。生成的图片6.2.6设计案例：制作快闪广告H5页面去除部分内容

输入文字“变量”对话框6.2.6设计案例：制作快闪广告H5页面“导入数据组”对话框“将数据组作为文件导出”对话框6.2.6设计案例：制作快闪广告H5页面导入音乐放大音乐编辑界面6.2.6设计案例：制作快闪广告H5页面添加标记为其他区域添加标记6.2.6设计案例：制作快闪广告H5页面添加到时间轴上添加字幕6.2.6设计案例：制作快闪广告H5页面调整字幕选择“反转”效果

6.2.6设计案例：制作快闪广告H5页面添加完成添加“反转”效果6.2.6设计案例：制作快闪广告H5页面参考效果6.1H5页面的交互创意设计6.2H5页面的动效创意设计目录Content6.3项目实训实训

制作元旦GIF动画实训要求运用本项目所学知识，使用Photoshop制作元旦GIF动画。在元旦GIF动画中，不仅要以动画的形式展现文字，还要制作动态的老鼠图像，丰富动效。完成后的参考效果如右图所示。实训

制作元旦GIF动画制作思路（1）打开“元旦快乐动画.psd”素材文件（配套资源：\素材\项目6\元旦快乐动画.psd）。（2）选择“窗口”/“时间轴”命令，在工作界面底部打开“时间轴”面板，单击“时间轴”面板底部的“创建视频时间轴”按钮，创建一帧动画。（3）在时间轴上选择“旦”所在的图层，将鼠标指针移动到图层的最前方，当鼠标指针变为

形状时，向右进行拖曳，将图层调整至“1:00f”处。（4）在时间轴上选择“快”所在的图层，将鼠标指针移动到图层的最前方，当鼠标指针变为

形状时，向右进行拖曳，将图层调整至“2:00f”处。实训

制作元旦GIF动画（5）使用相同的方法将“乐”所在的图层调整至“3:00f”处。（6）在时间轴上选择“旦”所在的图层，单击鼠标右键，在弹出的快捷菜单中选择“旋转”命令，使用相同的方法为其他图层设置动效。（7）选择最下方的老鼠所在的图层，调整其动效位置，使用相同的方法调整其他图层位置，然后在“时间轴”面板底部单击按钮，可播放动效。（8）选择“文件”/“导出”/“存储为Web所用格式”命令，打开“存储为Web所用格式”对话框，将格式设置为“GIF”，单击“存储”按钮，保存文件（配套资源：\效果\项目6\元旦快乐动画.gif）。学习进步！高等院校数字艺术精品课程系列教材项目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”。（11）选择第1页，单击“更多样式”右侧的下拉按钮，单击打开“翻页箭头”开关，单击其下方的图片，打开“图片库”面板，选择“图片库”选项卡，然后在右侧选择向下的图标。（12）在页面的上方单击“音乐”按钮，在打开的下拉列表中单击“更换”按钮。（13）打开“音乐库”面板，选择“音乐库”选项卡，然后在上方选择“舒缓”选项卡，在下方单击按钮，可播放音乐，单击按钮完成音乐的添加。（14）在页面的顶部单击按钮，进入分享页面，可发现中间有二维码和网址，单击按钮，可复制链接进行分享。学习进步！高等院校数字艺术精品课程系列教材项目8综合案例：产品推广H5页面的设计与制作高等院校数字艺术精品课程系列教材综合案例：产品推广H5页面的设计与制作幽兰山茶的品牌名取自“幽兰生前庭，含薰待清风”，寓意着以茶为纽带，传递东方雅致生活的独特韵味，目标群体为25岁~60岁爱好喝茶的人群。下图所示为该茶叶推广H5页面。目录Content8.1制作产品推广H5页面的前期准备8.2产品推广H5页面的设计8.3产品推广H5页面的动效、音效添加与发布8.4项目实训8.1.1使用AI构思产品推广H5页面生成的产品推广方案生成的设计方案产品推广H5页面常包含有趣的页面和具有推广性的文字，为了提升构思的完整度，可直接使用AI来进行茶叶产品推广H5页面的构思。其具体操作如下。8.1.2使用AI绘制产品推广H5页面原型图原形图根据产品推广H5页面的设计构思，进行H5原型图的绘制，设计时可直接使用墨刀AI工具来完成。其具体操作如下。8.1.3搜集产品推广H5页面素材输入提示词并生成图片1.使用AI生成H5页面素材设计人员在设计产品推广H5页面时，可通过AI生成一些页面素材。其具体操作如下。生成产品推广H5页面其他素材8.1.3搜集产品推广H5页面素材搜集的其他素材2.搜集H5页面其他素材根据设计方案，设计人员除了生成的素材，还需要搜集山石、茶壶、茶叶等素材图片，这里可直接在网站下载图片，左图所示为搜集的其他素材。目录Content8.1制作产品推广H5页面的前期准备8.2产品推广H5页面的设计8.3产品推广H5页面的动效、音效添加与发布8.4项目实训8.2.1设计产品介绍首页填充渐变颜色

添加素材输入文字2产品介绍页首页主要用于对产品信息进行简单展示，包括产品的名称、主题。设计时以淡绿色为背景色，通过矩形、文字和素材的组合，使产品推广内容更加简明、直观。其具体操作如下。输入文字18.2.1设计产品介绍首页设置“内阴影”参数设置“外发光”参数

完成后的效果8.2.2设计产品产地信息介绍页添加素材输入文字1完成后的效果产品产地信息介绍页主要展示茶叶的产地信息，设计时将直接以茶园实景图，搭配产地文字体现。其具体操作如下。输入文字28.2.3设计制茶工艺介绍页添加背景素材添加制茶工艺素材完成后的效果制茶工艺介绍页主要用于讲解茶叶的制作工艺，从采茶、摊晾、炒茶、晾茶4个方面展开，搭配人物制茶场景图，让工艺直观地体现在H5页面中。其具体操作如下。输入文字8.2.4设计产品冲泡介绍页输入文字1输入文字2完成后的效果该页面主要用于展示茶叶的冲泡方式，搭配介绍文字，提升消费者对该茶叶的了解，从而提高茶叶销售量。其具体操作如下。添加素材8.2.5设计产品推广H5页面尾页绘制矩形

设置“图案叠加”参数尾页位于H5页面的结尾，主要用于展示二维码和店铺名称，设计时可添加促销文字，号召消费者购买茶叶。设计时可以像素图块作为设计创意点，先制作带有像素图块的背景，然后输入文字并设置像素风格的字体，使其形成像素填充效果。其具体操作如下。8.2.5设计产品推广H5页面尾页添加网格效果输入文字完成后的效果添加二维码目录Content8.1制作产品推广H5页面的前期准备8.2产品推广H5页面的设计8.3产品推广H5页面的动效、音效添加与发布8.4项目实训8.3.1为产品推广H5页面添加动效选择“指纹开屏”选项产品推广H5页面的前3个页面属于互动页面，因此在为产品推广H5页面添加动效前需要先在人人秀中制作这3个页面，可直接通过添加组件和背景图片的方式来完成，然后通过上传PSD文件的方式上传其他页面并添加动效。其具体操作如下。8.3.1为产品推广H5页面添加动效选择背景图片输入文字并调整图层8.3.1为产品推广H5页面添加动效添加信息1添加信息28.3.1为产品推广H5页面添加动效添加其他信息高级设置8.3.1为产品推广H5页面添加动效添加文字添加特效8.3.1为产品推广H5页面添加动效设置“弹跳”动画

设置“渐入”动画8.3.1为产品推广H5页面添加动效设置特效8.3.1为产品推广H5页面添加动效设置颜色设置圆角矩形动效8.3.2为产品推广H5页面添加音效添加翻页箭头为产品推广H5页面添加完动效后，还可根据页面内容为其添加音效。本例将添加音乐库中自带的音效。其具体操作如下。添加音乐8.3.3发布产品推广H5页面高级设置为产品推广H5页面添加完音效后，即可发布制作完成的H5页面。发布前可设置翻页方向，然后设置分享标题，并生成二维码，方便页面的传播。其具体操作如下。分享设置目录Content8.1制作产品推广H5页面的前期准备8.2产品推广H5页面的设计8.3产品推广H5页面的动效、音效添加与发布8.4项目实训实训一

制作口红推广H5页面实训要求运用本项目所学知识，使用Photoshop制作口红推广H5页面。该H5页面主要由4个页面组成，包括口红推广H5页面的首页、产品介绍页、引导购买页等页面。完成后的参考效果如右图所示。实训一

制作口红推广H5页面制作思路（1）启动Photoshop，新建“宽度”“高度”“分辨率”分别为“640”“1240”“72”的图像文件，新建图层，填充渐变颜色为“#d12d41~#890f1e”的径向渐变。（2）新建图层，设置前景色为“#000000”，按【Alt+Delete】组合键填充图层，然后设置“图层混合模式”为“叠加”，“不透明度”为“90%”。（3）选择“横排文字工具”，输入文字，并设置“字体”为“方正黑体简体”，调整文字大小、位置和颜色。（4）打开“口红推广H5页面素材.psd”素材文件（配套资源：\素材\项目8\口红推广H5页面素材.psd），将其中的盒子素材添加到背景中，调整位置和大小。实训一

制作口红推广H5页面（5）选择“横排文字工具”，在矩形的顶部输入“当红不让”文字，调整字体、文字大小、间距、位置和颜色。（6）选择“矩形工具”，在文字下侧的中间位置处绘制350px×40px的矩形，并设置“填充”为“#000000”。选择“横排文字工具”，输入文字，调整字体、字号、颜色。（7）在打开的“口红推广H5页面素材.psd”素材文件中，将口红添加到页面中，调整位置和大小，保存文件（配套资源：\效果\项目8\口红推广H5页面1.psd）。（8）新建“名称”“宽度”“高度”“分辨率”分别为“口红推广H5页面2”“640”“1240”“72”的图像文件。（9）新建图层，设置前景色为“#bd0713”，填充前景色。实训一

制作口红推广H5页面（10）选择“直线工具”，在“哑光

显色”文字下方绘制直线，并设置“描边”为“#fdefe2”。（11）在打开的“口红推广H5页面素材.psd”素材文件中，将口红素材添加到对应位置，调整位置和大小。（12）新建“名称”“宽度”“高度”“分辨率”分别为“口红推广H5页面3”“640”“1240”“72”的图像文件。（13）新建图层，设置前景色为“#bd0713”，填充前景色。在打开的“口红推广H5页面素材.psd”素材文件中，将口红和纹理素材添加到H5页面中，调整位置和大小。（14）选择“直排文字工具”，输入文字，调整字体、文字大小、间距、位置和颜色。实训一

制作口红推广H5页面（15）为“媚染”文字添加“投影”图层样式，保存文件（配套资源：\效果\项目8\口红推广H5页面3.psd）。（16）新建“名称”“宽度”“高度”“分辨率”分别为“口红推广H5页面4”“640”“1240”“72”的图像文件。（17）新建图层，设置前景色为“#bd0713”，填充前景色。在打开的“口红推广H5页面素材.psd”素材文件中，将口红和涂抹素材添加到页面中，调整位置和大小。（18）选择“横排文字工具”，输入文字，调整字体、文字大小、间距、位置和颜色。（19）选择“直线工具”，在“花之骄子

烈焰玫瑰”文字下方绘制直线，并设置“描边”为“#fdefe2”。实训二

制作口红推广H5页面动效实训要求运用本项目所学知识，使用人人秀制作口红推广H5页面动效。在设计时需要先添加开屏动效，然后将制作的页面效果通过动效凸显出来。完成后的参考效果如右图所示。实训二

制作口红推广H5页面动效制作思路（1）登录人人秀官方网站，进入人人秀首页，单击“工作台”按钮，在打开的页面中单击“新建”按钮。（2）在“指纹开屏”面板中，单击“图片”按钮，打开“图片库”面板，单击“上传图片”按钮，在打开的对话框中选择要上传的图片，这里选择“背景.jpg”素材文件。（3）单击“添加页面”按钮，添加7个相同的空白页面。选择第2页，选择“互动”选项卡，打开“互动”面板，在左侧的列表中选择“趣味”选项卡，然后在右侧的列表中选择“微信对话”选项。实训二

制作口红推广H5页面动效（4）返回主页面，单击“微信对话设置”按钮，打开“基本设置”页面，单击“添加信息”超链接，打开“添加信息”面板，在“发送者”下拉列表中选择“对方”选项，在“消息内容”文本框中输入“听说你们店铺要上新口红了呀？”文字，单击“保存”按钮，使用相同的方法添加其他文字。选择“高级设置”选项卡，在其中设置图片和昵称，单击“确定”按钮。（5）选择第3页，在右侧列表中单击“Ps”超链接，打开“PSD导入”对话框，单击“上传PSD文件”按钮，打开“打开”对话框，将“口红推广图素材.psd”素材文件，调整图像位置。（6）选择页面右侧的“动画”选项卡，然后单击“添加按钮，在“动画”下拉列表中选择“摇晃”选项，设置“延迟”为“1”，“持续”为“3”，“次数”为“2”，单击打开“重力感应”开关，设置“感应强度”为“3”。实训二

制作口红推广H5页面动效（7）单击“组件”选项卡，在右侧的列表中选择“特效”选项，为图像添加特效。（8）选择第4页，选择最上方的文字，选择页面右侧的“动画”选项卡，然后单击”添加“按钮，在“动画”下拉列表中选择“弹跳”选项，设置“延迟”为“1”，“持续”为“2”，“次数”为“1”。（9）选择矩形，选择页面右侧的“动画”选项卡，然后单击”添加“按钮，在“动画”下拉列表中选择“飞入”选项，设置动画样式为“←”，设置“延迟”为“3”，“持续”为“2”，“次数”为“1”。使用相同的方法为其他文字设置与矩形相同的动效。（10）选择第5页，选择“组件”选项卡，在右侧的列表中选择“擦一擦”选项，为图像添加特效。实训二

制作口红推广H5页面动效（11）在右侧“擦一擦”面板中选择第二张图片，然后设置“透明度”为“45”，“涂抹比例”为“25”。（12）选择第6页，选择文字“媚染”，选择页面右侧的“动画”选项卡，然后单击”添加“按钮，在“动画”下拉列表中选择“落下抖动”选项，设置“延迟”为“1”，“持续”为“2”，“次数”为“1”，使用相同的方法设置其他文字的动效。（13）选择第7页，选择文字，选择页面右侧的“动画”选项卡，然后单击”添加“按钮，在“动画”下拉列表中选择“滑动”选项，设置动画样式为“↓”，设置“延迟”为“1”，“持续”为“2”，使用相同的方法设置其他文字的动效。实训二

制作口红推广H5页面动效（14）选择第1页，在右侧单击打开“翻页箭头”开关，选择其下方的“图片”选项卡，打开“图片库”面板，选择“图片库”选项卡，然后在右侧选择向下的图标，单击“应用到所有页面”超链接，完成翻页箭头的添加。（15）在页面的上方，单击“音乐”按钮，在打开的下拉列表中单击”更换“按钮，打开“音乐库”面板，选择“音乐库”选项卡，然后在上方选择“舒缓”选项卡，在下方单击按钮播放音乐，单击按钮完成音乐的添加。（16）进入分享页面，可发现中间有二维码和网址，用户只需扫描二维码即可进行H5页面的分享，单击”复制“按钮，可复制链接进行分享。学习进步！高等院校数字艺术精品课程系列教材项目9综合案例：企业招聘H5页面的设计与制作高等院校数字艺术精品课程系列教材综合案例：企业招聘H5页面的设计与制作幸福加苑地产有限公司是一家综合性房地产企业，业务涵盖房地产开发、物业管理及商业运营三大领域。本例将制作带有炫酷效果的企业招聘H5页面，下图所示企业招聘H5页面完成后的效果。目录Content9.1制作企业招聘H5页面的前期准备9.2企业招聘H5页面设计9.3企业招聘H5页面的动效、音效添加与发布9.4项目实训9.1.1使用AI生成企业招聘H5页面设计构思企业招聘H5页面设计要符合企业需求，在进行页面构思时可直接向AI提出明确的要求，让AI生成相关结果以供参考。其具体操作如下。生成的企业招聘H5页面设计构思生成的企业招聘H5页面设计方案9.1.2使用AI制作企业招聘H5页面原型图根据企业招牌H5页面的设计方案，进行H5原型图的绘制，设计时可直接使用墨刀AI工具来完成。其具体操作如下。企业招聘H5页面原型图9.1.3整理企业招聘内容并搜集素材1.搜集H5页面素材搜集的素材根据设计方案，可先收集背景、剪影等素材图像，这里可直接使用网站下载。除此之外，还需要企业提供相关图片，如办公场景。右图所示为搜集的素材。9.1.3整理企业招聘内容并搜集素材2.使用AI生成H5页面素材输入提示词并生成图片设计人员在设计企业招聘H5页面时，可通过AI生成一些背景素材。其具体操作如下。9.1.3整理企业招聘内容并搜集素材抠取文字

制作投影高斯模糊完成后的效果9.1.3整理企业招聘内容并搜集素材其他文字目录Content9.1制作企业招聘H5页面的前期准备9.2企业招聘H5页面设计9.3企业招聘H5页面的动效、音效添加与发布9.4项目实训9.2.1导入企业招聘H5页面素材导入素材图片导入前，先创建空白H5页面，然后将搜集的企业招聘素材依次添加到页面中，为后期的制作做准备。其具体操作如下。9.2.2制作一镜到底企业招聘H5页面首页添加趣味页面在制作时将先添加一镜到底趣味页面，然后将素材依次添加到场景中，使其形成一镜到底的效果。其具体操作如下。添加模板9.2.2制作一镜到底企业招聘H5页面首页添加背景添加文字图片9.2.2制作一镜到底企业招聘H5页面首页添加“寻找”文字添加“闪亮的”文字9.2.2制作一镜到底企业招聘H5页面首页添加“YOU”文字再次添加背景9.2.3制作企业招聘H5页面内页导入素材图片在制作时先制作企业介绍页面，然后依次制作福利待遇、招聘岗位、招聘流程、登记信息页面。其