网页横幅广告的制作教学设计
如何使用Photoshop设计精美的网络横幅广告
如何使用Photoshop设计精美的网络横幅广告Photoshop作为一款专业的图像处理软件，广泛应用于设计师、摄影师等创意行业。
在设计网络横幅广告时，Photoshop提供了许多有用的功能和工具，可以帮助我们创建精美、吸引人的横幅广告。
本文将带您一起了解如何使用Photoshop设计精美的网络横幅广告。
第一章：准备工作在开始设计之前，我们需要明确广告的目的和受众群体。
这将有助于我们确定横幅广告的风格、颜色和内容等关键元素。
此外，为了提高工作效率，我们还需要准备一些素材，如品牌标志、产品图片和文字等。
第二章：选择和调整画布大小在Photoshop中，我们可以根据广告平台的要求选择和调整画布大小。
例如，如果我们要在社交媒体上发布广告，我们可以设置画布大小为1200像素宽和628像素高。
通过调整画布大小，我们可以确保广告在不同设备上都能正常显示。
第三章：选择合适的背景选择合适的背景是设计横幅广告的重要步骤。
我们可以使用颜色渐变、纹理、图片或插图等元素作为背景。
同时，我们应该确保背景与广告的主题一致，并且不会干扰到文字和其他重要的视觉元素。
第四章：添加品牌元素品牌元素是横幅广告中的重要组成部分，可以帮助我们加强品牌形象和认可度。
我们可以添加品牌标志、品牌色彩和字体等元素来展示品牌特色。
此外，我们还可以使用特定的布局和排版方式来突出品牌的个性。
第五章：优化图片和插图如果广告中包含产品图片或插图，我们需要确保它们具有高品质和适当的尺寸。
Photoshop提供了许多图像处理工具，例如调整亮度和对比度、裁剪、调整颜色等。
通过优化图片和插图，我们可以提高广告的吸引力和视觉效果。
第六章：设计引人注目的标题标题是吸引受众注意力的关键元素之一。
我们可以使用Photoshop的文字工具来设计独特而有吸引力的标题。
在选择字体时，我们应该考虑与品牌一致，并确保标题易于阅读。
使用特殊效果如阴影、描边和拉伸等，可以使标题更加突出。
网页效果图的制作公开课教案
网页效果图的制作——制作网页标志横幅课程：电子商务网页制作班级：09电商3+2时间：12月16日第三节授课教师：李晓琳教学目标：知识目标：1、能描述创建网站主页的目的2、能列举网页应包含的内容3、了解网页标志横幅的作用技能目标：1、能绘制网站主页的网页标志横幅2、掌握fireworks工具属性的设置方法情感目标：对操作过程中遇到的问题能主动思考具有较强的网页设计创意思维、艺术设计素质。
教学重点：1、Firewoks中矩形工具、文字工具、直线工具、库命令的使用2、Firewoks中元件转换为按钮的操作难点：元件转换为按钮及库命令的使用教学方法：任务驱动教学法一、导入提问：同学们平时的休闲方式有哪些呢？——影视文化通常是我们茶余饭后的谈资，平时也会去电影院看电影是吧？特别是大片，往往去了电影院要排长队，而且还不一定买的到票，在电子商务迅速发展的推动下，网上订票为我们消除了排队买票的烦恼。
那网上订票是基于什么样的平台呢？下面我们来看下我们德清的大地数字影院的网络平台——“哈票网”。
二、新授任务一：网页横幅的制作——1、“哈票网”网站的展示，分析引出一个网页应包含哪些内容。
提问：看了这个页面，请你说出一个网页包含哪些元素呢？（学生回答，教师补充）——引出网页横幅的重要性2、为什么要制作网页横幅？在一个简单的网页中，上方的横幅是最重要的视觉元素。
在很多博客网页中，它甚至是唯一的视觉元素。
所以它的作用可以说是相当大的。
它必须能够与网站的风格配合，并能传达视觉上的信息。
它必须让人看上一眼就让人知道这个网站是属于什么类型，风格是什么。
（展示不同网站的不同网页横幅效果图，说明网页横幅是可以多种形式展现的。
）3、提出任务，教师演示：效果图展示，操作示范（1）新建一个文档：宽1200像素，高为600像素。
（2）矩形工具、圆角矩形工具、椭圆工具、文字工具、直线工具的使用及属性设置4、学生活动：按所给效果图及素材制作网页横幅（根据男女生兴趣偏好不同，男女分组操练：男生做NBA网页横幅、女生做淘宝门户网的网页横幅）操作步骤: （1）新建一个文档：新建一个文档：宽1200像素，高为600像素。
项目4网页横幅广告
踏实，奋斗，坚持，专业，努力成就 未来。2 0.11.2920.11.29Sunda y, November 29, 2020
弄虚作假要不得，踏实肯干第一名。1 7:04:3417:04:3 417:041 1/29/2020 5:04:34 PM
安全象只弓，不拉它就松，要想保安 全，常 把弓弦 绷。20. 11.2917: 04:3417 :04Nov -2029- Nov-20
追求卓越，让自己更好，向上而生。2 020年1 1月29日星期 日下午5 时4分3 4秒17:04:3420. 11.29
严格把控质量关，让生产更加有保障 。2020年11月 下午5时 4分20.1 1.2917: 04Nove mber 29, 2020
重规矩，严要求，少危险。2020年11 月29日 星期日5 时4分3 4秒17:04:3429 November 2020
好的事情马上就会到来，一切都是最 好的安 排。下 午5时4分34秒 下午5时 4分17: 04:3420.11.29
每天都是美好的一天，新的一天开启 。20.11. 2920.11. 2917:0417:04:3 417:04: 34Nov- 20
务实，奋斗，成就，成功。2020年11 月29日 星期日5 时4分3 4秒Sun day, November 29, 2020
为“形状补间动画”。
5
三、相关理论
动画的元素
形状补间动画可以实现两个图形之间颜色、形状 、大小、位置的相互变化。
其变形的灵活性介于逐帧动画和动作补间动画二 者之间。
如果使用图形元件、按钮、文字，则必须先“分 离”才能创建变形动画。
6
三、相关理论
形状补间动画在时间轴上表现
网页横幅广告的制作教学设计（五篇范文）
网页横幅广告的制作教学设计（五篇范文）第一篇：网页横幅广告的制作教学设计网页横幅广告的制作科任：谢志滨一、教材与学情1【教材分析】本课是选自高等教育出版社——《photoshop cs4网页设计》第四章第5节。
始终贯穿的一个理念就是“练中学，练中教”，本堂课也是基于此理念设计的。
本节以制作网页的横幅广告为例安排主题任务活动，要求学生综合运用photoshop的基本知识和技能，主动探索完成横幅广告的制作。
本节共3课时，这堂课是第三课时，前面初步学习了文字工具、渐变色填充工具及抠图的操作方法,简单LOGO的制作；本堂课利用制作横幅广告的过程中，进一步深入学习插入立体字、横幅广告制作的要点的操作方法；提升学生对这些知识点的运用能力。
2【学情分析】教学对象是13级计算机的学生，他们在本学期中已经学习过了网页制作的知识以及photoshop的一些相关知识点。
他们对动手操作方面比较感兴趣，而且对利用photoshop制作网页比较感兴趣，学习网页广告的制作是对他们综合运用能力的考察。
因此，我通过小组合作与自主探究的方法来考察他们对之前知识点的掌握情况，也培养他们团队合作的精神。
3【教材处理】我对教材内容进行了一些处理，设计了几个网页中使用到横幅广告的展示，激发学生的学习热情，然后提出本堂课的学习任务，让学生们能够有效的利用PS软件操作技能进行设计。
教学任务由浅入深，在教学中做到教、学、练、情四合一，让学生练有所思，学有所悟。
二、教学大纲1【教学目标】知识与技能：1、掌握立体字的制作方法，能够使用多个图层的方法制作出立体字。
2、理解魔术棒工具的作用，掌握抠图的方法。
3、能运用PS的相关知识独立设计美观大方的版面。
情感态度与价值观：1．养成勇于探究、团结合作的习惯。
2、锻炼学生的动手操作能力和独立思考问题的习惯。
3、培养学生发现美、感受美的艺术能力。
2【教学重点与难点】重点：（1）制作横幅广告的注意要点（2）魔术棒工具的使用,渐变工具的使用。
教案11制作悬停按钮和横幅广告
制作2种悬停按钮——
要求：以横幅广告素材中得前2个图片为素材，分别用“格式—DHTML效果”、“插入—组件—悬停按钮”2种方法制作同一效果得按钮。
这是一个横幅广告：这是一个标准悬停按钮：这是一个用DHTML效果制作的悬停按钮：
演示
网页基础第课时教案月日第周星期
课题
制作悬停按钮和横幅广告
课型
新授
教时
2节
教学目的
对比理解3种网页特效——悬停按钮、横幅广告、DHTML效果
教学重点
学习3种网页特效的制作方法
课
前
准
备
软件
图片
准备
教学难点
合理使用3种网页特效
教学环节
教学过程
教师
活动
学生
活动
复习
引入
1、检查学生对用画图自制按钮的记忆程度。
2、请学生说出目前已掌握的几种网页特效技术。
抽查
作品
提问
学生
演示
回答
教学环节
教学过程
教师活动
学生活动
授
课
用网页来演示制作“悬停按钮”的两种方法的全过程。
*制作目的：1、学会制作简单的演示性网页或课件的技术,是为了别人学习该技术而制作；
2、体会面对很多网页素材应该用什么方法来保存处理它们；
3、掌握制作基本类似网页的方法（共用部分网页元素）
巡回
检查
纠错
实践
制作
理解
修改
总结
注意点：（1）图片大小必须相同；（2）要学会调整图片顺序、增加图片、设置属性。
总结
强调
理解
记忆
网页广告设计与制作讲义
讲义2009年－2010学年第二学期课程名网页广告设计制作任课教师李欣欣目录学习情境一广告的基础设计任务一字体设计任务二图形设计任务三版式编排设计任务四广告色彩的设计任务五广告创意任务六广告设计的表现技法学习情境二广告的媒体设计项目一报纸广告项目二杂志广告项目三招贴广告项目四pop广告设计项目五户外广告项目六 DM 广告2010年广告设计讲义任务一广告的文字设计文字设计的意义和原则广告设计包括三部分的设计：即文字、图形、色彩，可见文字设计在广告设计中占有重要的成份，文字设计的好坏，直接影响广告版面的视觉效果，所以提高文案诉求力，是赋予广告版面审美价值的一种构成技术。
文字设计的研究在于探讨文字造型的基本理论及表现技巧、具体研究文字的不同字体的特性、笔画、自架、行间的书写准则和编排组合技术。
一、文字设计的基本原则1、文字的适合性信息传播是文字设计的一大功能，也是最基本的功能。
文字设计重要的一点在于要服从表述主题的要求，要与其内容吻合一致，不能相互脱离，更不能相互冲突，破坏了文字的诉求效果。
尤其在商品广告的文字设计上，更应该注意任何一条标题，一个字体标志，一个商品品牌都是有其自身内涵的，将它正确无误地传达给消费者，是文字设计的目的，否则将失去了它的功能。
抽象的笔画通过设计后所形成的文字形式，往往具有明确的倾向，这一文字的形式感应与传达内容是一致的。
如生产女性用品的企业，其广告的文字必须具有柔美秀丽的风采，手工艺品广告文字则多采用不同感觉的手写文字、书法等，以体现手工艺品的艺术风格和情趣根据文字字体的特性和使用类型，文字的设计风格大约可以分为下列几种：（1）秀丽柔美。
字体优美清新，线条流畅，给人以华丽柔美之感，此种类型的字体，适用于女用化妆品、饰品、日常生活用品、服务业等主题。
（2）稳重挺拔。
字体造型规整，富于力度，给人以简洁爽朗的现代感，有较强的视觉冲击力，这种个性的字体，适合于机械科技等主题。
（3）活泼有趣。
《网络广告》教案
《网络广告》教案一、教学目标1. 了解网络广告的定义、类型和特点。
2. 掌握网络广告的设计原则和创意方法。
3. 了解网络广告的投放策略和效果评估。
4. 培养学生的网络广告创作能力和策划能力。
二、教学内容1. 网络广告概述：网络广告的定义、类型和特点。
2. 网络广告设计：设计原则、创意方法、视觉元素。
3. 网络广告投放：投放策略、平台选择、投放流程。
4. 网络广告效果评估：评估指标、评估方法、数据分析。
5. 网络广告案例分析：成功案例解析、失败案例分析。
三、教学方法1. 讲授法：讲解网络广告的基本概念、原理和技巧。
2. 案例分析法：分析成功和失败的网络广告案例，引导学生思考和总结。
3. 实践操作法：学生动手设计制作网络广告，提高实际操作能力。
4. 小组讨论法：分组讨论网络广告的设计和投放策略，促进学生互动和合作。
四、教学准备1. 教材：网络广告相关教材或资料。
2. 投影仪：用于展示案例和教学内容。
3. 网络：用于查找相关资料和案例。
4. 设计软件：如Photoshop、Illustrator等，用于学生实践操作。
五、教学过程1. 导入：介绍网络广告的定义和重要性，引起学生兴趣。
2. 网络广告概述：讲解网络广告的类型和特点，让学生了解基本概念。
3. 网络广告设计：讲解设计原则和创意方法，引导学生思考设计思路。
4. 网络广告投放：介绍投放策略和平台选择，让学生了解广告投放流程。
5. 网络广告效果评估：讲解评估指标和方法，培养学生分析数据的能力。
6. 案例分析：分析成功和失败的网络广告案例，让学生从中学习和总结。
7. 实践操作：学生动手设计制作网络广告，培养实际操作能力。
8. 小组讨论：分组讨论网络广告的设计和投放策略，促进学生互动和合作。
9. 总结与反馈：总结本节课的重点内容，对学生进行点评和反馈。
10. 作业布置：布置相关作业，让学生巩固所学知识。
六、教学评价1. 学生参与度：观察学生在课堂上的积极参与情况，包括提问、回答问题、小组讨论等。
网店运营教案---网店招牌banner制作
教学方法与
学习指导
点击PS工具列下端转换Adobe ImageReady，创建帧。第一帧用紫色边框，第二帧用蓝色边框，具体只需点击不想要显示的图层前眼睛图标即可隐藏图层，点击动画窗口的新建帧按钮，将时间设置成0.5秒。
完成后可点击动画栏下面的播放工具预览效果，之后再保存即可。
三、学生演练
年 月 日
星期
第 节
班级
级 班
第4页
时间安排
教学内容、教学过程
教学方法与
学习指导
任务四：利用PS设计店招。
打开PS软件，新建一个大小为950*151像素的文档，分辨率设置为72，背景色设置为白色，颜色模式是RGB。
打开选好的底图进行裁切修整，用仿制图章工具将图片上的水印部分抹掉，用钢笔工具勾出指示牌，勾出想要的招牌后可以使用“投影”效果让它更显立体。
在店招上添加文字，使用“手写体”更能给人一种亲近温暖的感觉，还可以使用使用了浮雕和投影效果。
制作闪动的文字，对店名进行闪动效果装饰。
通过店招的设计进一步强化学生所学的PS知识，将理论与实践结合起来。
掌握店招设计的技巧。
***学校网店运营科教案（乙）
授课时间
年 月 日
星期
第 节
班级
级 班
第5页
时间安排
六、课后作业
利用课后时间美化自己店铺中的店标。争取所有学生的教师评分都为满分。
在“评测成绩”下查看“项目四：网店装修”下任务二的教师评分和修改建议。
教师在后台给每位学生进行星级评分，并给出相应的修改。
以班级排名的方式激发学生继续学习的兴趣和完善任务的动力。
知识小结，回顾本次课的重点和难点。
完善店招设计制作建议。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页横幅广告的制作
科任：谢志滨
一、教材与学情
1【教材分析】
本课是选自高等教育出版社——《photoshop cs4网页设计》第四章第5节。
始终贯穿的一个理念就是“练中学，练中教”，本堂课也是基于此理念设计的。
本节以制作网页的横幅广告为例安排主题任务活动，要求学生综合运用photoshop 的基本知识和技能，主动探索完成横幅广告的制作。
本节共3课时，这堂课是第三课时，前面初步学习了文字工具、渐变色填充工具及抠图的操作方法,简单LOGO的制作；本堂课利用制作横幅广告的过程中，进一步深入学习插入立体字、横幅广告制作的要点的操作方法；提升学生对这些知识点的运用能力。
2【学情分析】
教学对象是13级计算机的学生，他们在本学期中已经学习过了网页制作的知识以及photoshop的一些相关知识点。
他们对动手操作方面比较感兴趣，而且对
利用photoshop制作网页比较感兴趣，学习网页广告的制作是对他们综合运用能
力的考察。
因此，我通过小组合作与自主探究的方法来考察他们对之前知识点的掌握情况，也培养他们团队合作的精神。
3【教材处理】
我对教材内容进行了一些处理，设计了几个网页中使用到横幅广告的展示，激发学生的学习热情，然后提出本堂课的学习任务，让学生们能够有效的利用PS 软件操作技能进行设计。
教学任务由浅入深，在教学中做到教、学、练、情四合一，让学生练有所思，学有所悟。
二、教学大纲
1【教学目标】
知识与技能：
1、掌握立体字的制作方法，能够使用多个图层的方法制作出立体字。
2、理解魔术棒工具的作用，掌握抠图的方法。
3、能运用PS的相关知识独立设计美观大方的版面。
情感态度与价值观：
1．养成勇于探究、团结合作的习惯。
2、锻炼学生的动手操作能力和独立思考问题的习惯。
3、培养学生发现美、感受美的艺术能力。
2【教学重点与难点】
重点：（1）制作横幅广告的注意要点
（2）魔术棒工具的使用,渐变工具的使用。
（3）立体字的制作。
难点：（1）多个图层制作出立体字。
（2）运用PS的相关知识独立设计美观大方的横幅。
3【课时】:1课时
三．教法学法
1【教法】:通过观察、提问、讨论、上机探索、小组共学互教，掌握页面设置、报头制作、正文编辑的方法。
在课堂导入环节，我采用情景教学法，课堂核心环节上，以任务驱动法为主，实现新旧课程的结合应用，重在学以致用。
并通过讲解示范、自主探究、计论交流等手段，突出重点，突破难点。
2【学法】:自主探究法、分析协作法、总结归纳法
四．教学过程
1【课前准备】
（1）学生分组
课前给学生分好组，每组5人、共5组，每组安排一名平时动手能力较强、做得较快的学生当小组长，在自主学习的过程当中，在自己完成的前提下辅助其他组员完成学习任务。
设计意图：期望以优带差，优劣互补，团结协作，互相激励，共同进步。
（2）材料分发
课前几分钟把本堂课的学习材料分发到每台学生机的桌面上。
设计意图：便于学生课上进行探究式学习。
2【课堂环节】
（1）创设情景，导入新课
1、横幅广告页面欣赏
先让学生们欣赏课本中介绍制作好的横幅广告页面样例，头脑中有个横幅广
告的概念与框架。
2、启发学生回忆旧知
通过欣赏横幅广告页面，让学生回忆之前学过的知识点，对横幅广告页面有
个新的认识。
（2）讲解知识，分析制作要点
1.横幅广告简介
横幅广告，英文叫banner,一个表现商家的广告内容，放置在网页的页面上，是
互联网广告中最基本的广告形式，格式主要有flash动画和图片。
2．横幅广告尺寸
a、横幅:468*60728*90950*90760*90760*60
250*60234*60120*60950*250950*410
b、竖幅:160*600120*600120*240
c、方幅:336*280300*250250*300
250*250200*200180*250
3.制作横幅广告制作要点
a、顾及网站内容的定位
因为包含内容不同，门户网站各个频道有着不同的风格，所以设计师们做设
计的时候也要考虑到如体育频道的运动感，财经频道的国际和高端等。
b、顺应用户的浏览习惯
我们知道大多数的用户在浏览网页的时候都是从上到下，从左到右的浏览。
为了
使banner更容易被用户浏览,我们应该顺应用户这样的浏览习惯，糟糕的设计会
让用户无所适从，焦点到处都是。
c、明白文字在Banner中占主导地位
从构成上讲，一个banner分为2个部分，一为文字，二为辅助图。
辅助图虽然
占据大多数的面积，但是不加以文字的说明，很难让用户知道这个banner要说
明什么。
要读一个人的喜怒哀乐，只要读其五官即可。
在一个banner里面，标
题文字起着五官一样的作用，所以个人觉得文字才是整个banner的主角。
所以
对于文字的处理，显得尤为重要。
d、横幅广告中文字处理的两个技巧
技巧1:如果主标太长，需求方不舍得删文字的情况下，对主标中重要关键字进行
权重，突出主要的信息，弱化‘的’、‘之’、‘和’‘年’‘第X届’这种信息量不
大的词。
技巧2：如果需求方整体文字太短，画面太空，可以用一些加入一些辅助信息丰富画面。
如加点英文，域名，频道名等。
（3）布置任务，明确目标
实训——模仿小米网站上的促销广告完成效果图
要求：（1）制作一个以“hello春天”为主题的促销广告。
（2）主题突出，内容结构合理，版面美观，有创意。
（3）独立完成，完成后保存，用姓名命名，提交作业。
1、新建文件：大小950*410,分辨率72，背景白色。
2.选择渐变工具：白色到天蓝径向渐变，填充背景。
3.制作”HELLO春天！“立体字，字体为黑体，多个图层实现。
4．制作“踏青必备配件特惠专场”文字及底色，可以考虑做倒影字，效果会更
好。
5．制作仅一周的文字。
6.利用魔术棒工具抠出花草放在底部。
（4）讨论交流，评价反馈
从整体效果、创意性、艺术性、完整性、技术性等方面进行评价，同时让学生参与主动的评价。
最后引导学生提出一些改进的意见，并互相学习与互相借鉴。
（5）课堂小结
“学到了什么？”本堂课我们一起回顾一下知识点，介绍了什么是横幅广告，横幅广告的尺寸，重点是制作横幅广告的四个要点,最后完成模仿小米网站上商品促销广告的实例，通过这个实例对前面知识点的映衬及加深理解。
分析一下。
（6）扩展技能
1.上网看看网页中的横幅广告，想想自己能不能制作出来？
2.抓住春天尾巴，周末出去踏青。
五、教学反思
教学中导入要有创意，有利于提高学生的注意力。
实践操作过程中学生按学习计划一步步完成任务。
加强对学生的个别指导，发挥学生自主探索学习的能动性。
学生是上机课的主角都有着各不相同的思维方式、学习方法和认识水平。
学勤劳的蜜蜂有糖吃
生展示操作要多，对学生作品进行适当评价。