“网页中的图形图像加工”教学设计

无锡市第一中学　夏燕萍　214031

一、设计背景

1.模块：高中信息技术必修模块《信息技术基础》

2.年级：高中一年级

3.所用教材章节：中国地图版教材第四单元第二节“创作电子作品”中的“图像信息加工”

4.学时数：3

5.学校状况：我校信息技术课在多媒体网络教室进行。教室内有一台教师机，一台服务器和五十六台学生机，通过百兆交换机组建成星型局域网，教师机上安装多媒体电子教室软件。学生可以通过局域网访问教师自主开发的信息技术学习网站，了解学习内容、获取学习资源、记录学习感受、提交学习成果。教师可以通过大屏幕投影仪创设学习情境，也可以通过多媒体网络教学系统进行必要的集体讲解和演示操作。

二、教材分析

信息技术必修模块是按照信息获取、信息加工、信息集成和交流的主线来安排的。在教学实践中，我们要求学生围绕研究性学习的课题，体验信息获取、加工、集成和交流的整个过程。在“信息获取”单元中，学生已经收集好与课题相关的所有信息（如文字、图片、音视频等）。而在下一个“信息集成和交流”单元，我们将要求学生完成课题汇报网站的制作。因此，在信息加工阶段的图像加工部分，教学目标就集中在网页图片的设计制作上，起到一个承前启后的作用。

三、教学目标

知识与技能

1、了解图形图像的两种基本类型，并能列举两类图片的特点、常见类型和常用编辑软件；

2、初步了解网页图片的色彩、构图等基本原则；

3、学会使用图片编辑软件对图片进行旋转、缩放、裁切、格式转换等简单加工。

过程与方法

1、能够结合自身的兴趣、爱好和特长，搜索、选择适应主题表达需求的图片素材；

2、学会应用简单的网页图片设计原则，对图片素材进行加工处理；

3、能够根据表达的主题，合理应用所学的技术，设计个性化的网页图片。

情感态度与价值观

1、学会欣赏和评价优秀的网页图片作品，由此激发创作欲望和学习兴趣；

2、通过自行设计网页图片，体验创造的乐趣和成功的喜悦。

四、学生情况分析

高一学生对画图软件很熟悉，对office中的剪贴画也是耳熟能详，对图片的分类和特点比较容易理解。而ACDSee作为一款常用的看图软件，也早已为学生所熟练掌握。通过入学时的学生调查，我们也发现学生对PhotoShop、Flash等平面设计软件具有浓厚的兴趣。

我校学生的学习通过学习网站进行。网站上有相关的软件使用教程、操作动画演示。除了学习网站，大部分同学还可以跟随老师的同步讲解和示范进行学习。学习进度较快或较慢的学生，可以借助网站进行自主学习。

五、教学重点、难点

重点：

1．掌握常用的图片加工方法；

2．体验图片设计的基本过程。

难点：

1．根据主题需要，合理选择图片及加工方式；

2．在图片设计中体现一定的创新性、观赏性和艺术性。

六、教学策略

网页中的图片主要有Logo、Banner、欢迎页图片等。每个课时分别完成一张图片的设计制作。

第一课时，从简单模仿开始。以百度网站的Logo图片为例，主要讲解图形、文字工具的简单使用。学生只要选择不同的图形和文字，就能初步设计出自己的网站Logo。

第二课时，巩固已有技能，尝试独立操作。学生自行选择图片素材，进行裁切、缩放，添加文字和特效。教师提供了其他加工技巧供学生选用。

第三课时，感受设计的乐趣。简单介绍构图原则和图像合成技巧，给学生留有更多的创作空间和时间，亲历平面设计的过程，品尝创造的喜悦。

七、教学过程

第一课时

“图形图像基本知识和简单Logo设计”

一、引入

教师：在前面的课上，我们已经收集了很多文字、图片素材，准备制作一个与研究性学习有关的主题网站。大家在浏览别人的网站时，有没有想过图形、图像在其中所起的作用呢？先请大家看一组图片，然后讨论回答老师的问题。（教师提供一组网站的logo、banner、背景、按钮图片）

学生讨论回答：图形图像在表达信息、交流信息具有生动直观的视觉特点。它们既能充分地展示主题，又能启发思维，引起共鸣，因而被广泛应用在网页中。

二、类型和特点

教师：首先，我们来了解一下图形、图像的两种基本类型：向量图（矢量图）和点阵图（位图）。请大家比较下面两幅图：（左图是点阵图，放大了有锯齿状；右图是矢量图，放大后不会失真）。

教师：我们可以用下面的表格来对两类图像进行比较：

大家对SWF文件熟悉吗？它就是FLASH动画的格式，我们可以打开一个FLASH动画，看看放大后是否失真；再用AcdSee打开我们计算机上的“图片收藏”，选一张BMP图片，放大试试，加深印象。

学生操作验证。

三、欣赏与构思

教师：今天，我们先学习一个简单的图片设计。大家知道下面几张图吗?

  

对了，这些都是网站的标志图片，我们简称为“LOGO”图片。在大家的计算机里还有很多典型的LOGO图片，大家可以欣赏一下，看看标志图片通常由哪些元素构成？

学生：由色彩不同的中英文、简单的符号、图形等构成。

教师：你们能否从中获得一些灵感，设计构思一下自己的网站标志呢？

学生可以讨论、交流、设计、构图……

四、制作与交流

教师：下面，老师将使用PHOTOSHOP教大家一些最简单的图像设计工具，你们可以在学会使用这些工具后，设计自己的网站LOGO图片。我以百度的LOGO为例，讲解制作过程。

教师演示操作过程：

1.新建LOGO文档，宽200像素，高80像素；

2.添加图形：使用形状工具，右击工具箱中的“矩形工具”，单击选择“自定形状工具”，在“形状”选项中，选择“爪印（猫）”，把颜色改为蓝色；在画布上画出“猫爪印”，【图层-栅格化-形状】，把形状变成图片；（学生可以选择自己喜欢的形状进行设计）

3.位置调整：使用 “移动工具”，先选中相应图层，单击工具箱中的移动工具，对图片进行位置调整；

4.添加文字：使用工具箱中的文字工具，在画布上合适的位置添加中英文文字；可以自行调整字体、大小、颜色等选项，还能对文字进行变形处理；（提醒学生注意图层面板中的变换，解释图层概念）

5.手绘图形或文字：使用画笔工具，选择合适的画笔粗细、颜色、不透明度和模式，在画布上加上个性化的内容；

6.保存：【文件-存储为web所用格式】，保存成GIF或JPEG格式。

学生运用工具设计自己的网站LOGO图片，上传到服务器上互相交流。

教学反思

成功之处：

1、以典型图片为例，对照点阵图和矢量图，使学生对两者的不同有了较深刻的印象；

2、用各种logo图片范例来启发学生创作欲望和灵感，并借助自定形状工具和画笔工具设计出自己的个性标志图片。

改进之处：

1、新建文档时，可以提醒学生设置图片背景（如透明）；

2、由于学生初次接触PhotoShop，对文字的修改、图层的移动还需要做一些演示和说明。

学生作品：

 

 

第二课时

“网站横幅（Banner）设计”

一、引入

教师：上节课，我们学习了图形图像的基本知识，初步学会了使用PhotoShop设计网站Logo图片的方法。我们先来欣赏一下同学们的作品，大家可以发表一些评论和建议。（教师展示一些优秀作品）。

学生交流评价，教师参与。

教师：那么Logo图片在网页中一般放在哪些位置呢？下面，我们来看几个网站实例，请同学们仔细观察Logo图片的大小和位置。

网站1：http://www.thmz.com/

网站2：http://www.xinhuanet.com/（首页及无锡频道）

学生：Logo图片一般放在网页左上角或网页顶部中央，经常跟导航栏放在一起。图片大小与导航栏的高度或横幅的高度有关。

教师：网页上除了Logo图片外，比较醒目还有横幅，一般称为Banner。今天，我们就要着手来设计自己的网站横幅了。

二、欣赏与构思

教师：仔细观察以上两个网站的横幅，大家认为横幅的作用有哪些呢？

学生：我认为横幅图片和Logo图片一样，能够代表网站的形象。

学生：很多横幅上都是些广告。

教师：你们说得很对，横幅能够代表网站的形象，而且经常有广告，由于要吸引浏览者的眼球，它就必须设计得色彩和谐、文字醒目。下面，请大家欣赏两个优秀作品，我们讨论一下它们的特色。

学生：第一幅图片以绿色为主，感觉色彩和谐统一，意境深远。文字配以白色背景，大小错落有致。

学生：第二幅图片以蓝色为主，两幅倾斜的风景图片特别醒目，给画面带来了灵动的感觉，文字旁边的小图案也使画面右边显得不那么单调。

教师：大家还能在本地机上“图片收藏”中找到很多Banner的例子，从中或许可以得到些启发，设计出各自的网站横幅。（请注意查看这些横幅的宽度和高度，大致确定自己的横幅宽度和高度。）

三、横幅的设计原则

教师：看了这么多例子，我们可以总结出一些横幅设计的原则。

例如，如果横幅的底色较深，那么文字的颜色就要浅些；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容。

请大家打开本地计算机上的“我的文档-My ebooks”文件夹，运行名为Banner的电子书，学习其中的设计技巧。

学生浏览教学资源。

教师：大家从这本电子书中学到了哪些技巧呢？

师生共同归纳：原则有三条：

1、选择合适的字体，文字旁边要保留足够的空间，使它们更醒目

2、如有特别需要引起注意的内容，一定要放在画面的突出位置（如左边）

3、文字内容最好简洁而富有乐趣，引起浏览者的兴趣

教师：横幅中的文字是体现网站形象的重要元素。这就是网站的宣传标语，也可以说是网站的精神，网站的目标。用一句话甚至一个词来高度概括。类似实际生活中的广告金句。例如：鹊巢的“味道好极了”； Intel的“给你一个奔腾的心”。大家有没有想好你们的网站宣传语呢？

学生：环保标语：“保护环境，从身边做起”

学生：2008奥运会：“同一个世界，同一个梦想”

学生：……

四、制作与交流

教师：下面，老师将使用PHOTOSHOP和大家一起设计网站的横幅Banner图片。在我开始操作前，我先等两分钟。请大家从自己搜集的素材图片中挑选一张，作为横幅图片的原始素材，再用PhotoShop打开。

学生挑选图片并打开

教师：我以下面的Banner为例，讲解制作过程。

教师演示操作过程：

1、裁切图片：打开原始图片，使用矩形选择工具选取相应部分，并执行【图像-裁切】；（提醒学生横幅的宽度应该等于网页的宽度，在760-950像素左右，如果要和Logo并排放，则应减去Logo的宽度）

2、改变图像大小：如有需要可以执行【图像-图像大小】，改变图像的宽度和高度

3、文字工具：添加绿色文字，右击该文字图层，设置“混合选项”，效果“描边”；在远离绿色文字的地方添加突出文字，设置“混合选项”，效果“投影、内阴影、外发光”，再移动到合适的位置（提醒学生注意选择相应的文字图层调整文字的位置）；

4、保存文件：执行【文件-存储为web所用格式】命令，将图片存储成gif或jpeg等文件格式。

教师：如果有同学对横幅二和教材范例中的技术感兴趣，可以参考学习网页上“拓展资源”，完成相应操作：

1、画笔工具（星星的画法）：可以使用画笔工具，选择相应的画笔形状，在背景图层上绘制（提醒学生注意切换到背景图层）

2、图片叠加：使用PhotoShop打开需叠加的图片文件，先改变图像大小，再【全选】、【拷贝】、【粘贴】到当前文件中，执行【编辑-变换-旋转】

3、绘制直线：使用“单行（列）选框”工具绘制线条，执行【编辑-填充】，改变线条颜色；

4、绘制曲线：使用“椭圆选框工具”，制作选区，执行“编辑/描边”，宽度1像素，选择颜色填充；

5、使用滤镜：执行【滤镜】中的相应效果，修改其中的选项，达到自己想要的画面效果；

学生自行设计网站横幅图片，上传到服务器上互相交流。

教学反思

成功之处：

1、先从网页中观察Logo和Banner，让学生了解两种图片在网页中的作用，从而引入主题。学生观察图片的大小也在为后续的设计做准备。

2、通过作品欣赏激发学生灵感，同时总结设计原则，再通过学习电子书加深印象。

3、教师制作的Banner比较简单，目的使初尝设计的学生能够基本完成作品。对于学有余力的学生，则准备了“拓展学习资源”，介绍画笔、图片叠加、绘制直线和曲线、使用滤镜等各种技术，供学生选用。

不足之处：

1、设计时未考虑到学生选择的图片可能是Gif图片，不能使用滤镜和文字工具，发现问题时，才讲解改变图片模式的方法，只能亡羊补牢了。

2、学生需要撤销多步操作时，不能使用【编辑-还原】，教师又补充了使用“历史记录”面板的方法。

学生作品：

第三课时

“构图与主题图片的设计”

一、引入

教师：通过两节课的学习，我们初步学会了使用PhotoShop设计网站Logo和Banner图片的方法。我们先来欣赏一下同学们的作品，大家可以发表一些评论和建议。（教师展示一些优秀作品）。

学生讨论交流。

教师：今天，我们要设计网站的主题图片了，这张图片一般放在网站的欢迎页上。

二、欣赏与构思

教师：下面，请大家比较两张网站的欢迎页面， 它们有什么相同和不同的地方呢？

学生：两张页面都使用了图片，还配有文字。

学生：第一幅以图片为主，呈左右结构，第二幅以文字为主，用诗歌点明主题，是上下结构。

教师：我认为，这两张图都把画面按水平方向分割成两部分，而且都在接近黄金分割的位置。水平分割的构图能够给人带来平静、广阔的感觉。第一幅中的北极熊和第二幅中的地球都使画面具有了变化，产生了视觉中心。那么，这两个页面上的图片能用我们学过的技术实现吗？

学生：第一幅图左上角图片的边缘透明效果，不知道怎么实现的？

学生：第二幅图中间的渐变效果不错，那个地球也很有创意！好像没学过……

教师：我们今天就要试着设计一张网站的主题图片。在着手制作之前，请大家先学习一下“拓展资源”部分关于构图的一些方法和原则，构思自己的欢迎图片。

学生浏览学习资源。

教师：下面，我们请同学说一下常用的构图方法和原则。

学生：常用的构图方法有三分构图法、三角形构图法、S形构图法、对称式构图法和对角线构图法。

学生：构图的原则主要有两点：

1、“完整”的原则。要求画面饱满、舒适，形象完整、主题突出。

2、“变化统一”的原则。变化统一是构图的手段，构图的美学原则主要是既要有对比和变化，又要能和谐统一。画面如果有聚散疏密和主次对比，有内在的接合及非等量的面积和形状的左右平衡，就会产生生动、多变、和谐统一的画面效果。

教师：是的，如果大家掌握了这两个原则，那我们的构图就可以千变万化，并展现其特有的魅力。请大家可以浏览一下学习网站中的“作品展示”部分，每个主题图片都是别出心裁的。主题图片一般是用若干图片和文字合成的。

学生浏览欢迎图片，进一步构思自己的欢迎图片，准备素材（如背景图，叠加图等）。

三、制作与交流

教师：现在，老师以下面的欢迎图片为例，讲解主题图片合成用到的技术。大家可以用自己的素材图片，达到图片合成，边缘融合的效果。

教师演示操作过程：

1、打开背景图片，调整图像大小：主题图片可以小一点，一般在500-700像素左右（提醒学生背景图片尽量色彩柔和、淡雅为好）；

2、打开叠加图片，进行羽化：先用选框工具（选择规则图形）或套索工具（选择不规则图形）选中所需图片区域，执行【选择-羽化】，设置羽化半径，执行【编辑-拷贝】；

3、叠加图片：切换到背景图片，执行【编辑-粘贴】，把粘贴的图像移动到适当位置，还可以执行【编辑-变换】进行缩放、旋转等操作；

4、边缘修整：两幅图片融合时，总是有部分边缘过渡太明显，可以使用“橡皮擦”工具，选择合适的画笔形状对边缘进行擦除，使边缘过渡更自然；

5、调整不透明度：图片叠加时，还可以调整图层的“不透明度”，使背景图层隐约可见，从而达到更佳的融合效果。选择叠加图层，调整图层面板上的“不透明度”即可；

6、添加文字：为相应的文字选择合适的颜色和效果，（提醒学生注意英文字体的选择）；

7、保存文件：执行【文件-存储为web所用格式】命令，将图片存储成gif或jpeg等文件格式。

学生自行设计主题图片，上传到服务器上互相交流。

教学反思：

成功之处：

1、通过欢迎页图片的欣赏，开阔学生的思路，激发创造灵感；

2、通过自主学习拓展资源，学生可以了解常用的构图方法和构图的原则，为后面的设计作了有益的铺垫；

3、介绍了套索、橡皮擦工具，使学生的图片加工更具特色；通过羽化、橡皮擦和不透明度的调整使图片合成效果更好。

不足之处：

1、由于学生还未学到网页制作和布局，有些可以在网页中实现的功能（如较多的文字）都在PhotoShop中完成，会使主题图片的体积较大；

2、在一课时内要完成主题图片的创作是有点难度的，所以教师讲课要尽量精炼，留给学生充足的时间。

学生作品：

八、教学后记

在本单元的教学中，教师的作用是引领、帮助和指导。虽然每节课上教师只演示一个作品的设计过程，但是教师的每一个操作都具有普遍性和指向性，教师应该适时地提醒学生操作的注意点和创作的发散点，不断激发学生的设计灵感，发挥他们的创造性。

教学资源的提供也是必不可少的。教师讲解的例子虽具有典型性，但往往不能面面俱到。所以，凡是学生可能遇到的问题和学生需要的学习支持（如电子教程、动画演示等），教师应尽量考虑周到，提供在网页中。教学中也应及时反思、不断总结，使教学网站真正起到支持学生自主学习的作用。

由于将网页图片设计与研究性学习整合，使得学生的学习任务明晰，学习兴趣浓厚，主观创作欲望强烈。而且，研究性学习也把小组合作带到了信息技术课堂，学生们在资源共享、交流评价中，品尝到了合作学习的乐趣。

虽然，涉及的技术不多，学生设计的图片也还略显稚嫩。但是，就整个学习过程而言，学生能够很好地掌握图形图像的基本知识，熟练地使用图像处理工具，基本掌握图片加工的一般方法，亲自体验了图片设计的基本过程，学会了欣赏和评价图片作品……这些都为学生选修多媒体模块作了技术与素养的铺垫。