我是老王的老婆i
范文一：《易语言图形界面设计》D
《易语言图形界面设计》
2006年第一版
常用网址
易语言官方网站,欢迎下载易语言最新版:http://www.dywt.com.cn
易语言全国资格证书管理中心:http://www.cclg.cn
引 言
一个程序如果不好看, 使用的人一定不爽, 会有视觉疲劳。 因此一个功能强大且界面漂 亮、易于操作的软件才是人们真正需要的软件。
本书每一课以一个实际制作图形的任务完成教学工作,不仅提高了编程的辅助技术技 能,学习 Photoshop 的使用方法,还可以进入图形设计的大门。
一般学习编程的书很少有对如何设计程序的图形界面进行专门介绍, 因此学习后, 很多 用户对于程序界面设计还不能很好的掌握。 而学习程序界面设计有的编程爱好者是通过学习 图像制作软件而得来的,如 Photoshop ,但还不够具体进行程序界面设计。
一个有着漂亮界面的程序一定比界面普通的程序更会让人感觉上更专业一些, 让人眼睛 一亮。 在当今竞争激烈的市场环境下,客户越来越挑剔, 对创意有着较高的要求。 现在的经 济也有人称为吸引人眼球的经济, 不得不承认有些程序在界面设计上所花的功夫并不比程序 设计的少,有的设计精美的程序实在是让人难以忘怀的。
本书即是一种教大家如何学习设计漂亮的易语言应用程序界面的专业书籍。 书中介绍了 易语言界面设计方法, 采用 Photoshop7.0作为教学工具。 有的读者会说是不是杀鸡用牛刀了, 但你能用“画板”画出水晶按钮吗 ? 由于程序界面设计涉及的内容非常多,如果用其他的软 件进行教学也许会达不到预期的目标,因此使用 Photoshop 无疑是首选工具。再加上 Photoshop 的确是设计行业中的老大,不仅从它的易操作性方面来说,还是从它那强大的功 能 , 以及众多的滤镜等, 都一定不会让读者失望。 本书以 Photoshop 7.0为讲解对象, 同样也 适合于 Photoshop 的其他所有的版本。
同时本书是一本速成的书,因此没有先去了解 Photoshop 的基本知识,而是直接进行操 作,从操作中再去了解 Photoshop ,一共 8课学会,效果更好。
本书适合中学课本中对图形图像的学习,可以安排 16课时。
本书同时适合学习易语言编程的爱好者美化自己的程序。
为易语言资格认证考试易语言程序设计师指导用书。
本教材参加易语言在中小学试点项目的老师们可任意参考使用。
目 录
引 言 ....................................................................................................................................... 1目 录 ....................................................................................................................................... 2第一课 制作一个图形窗口 . .................................................................................................... 5
一.图形设计软件的安装 . .............................................................................................. 5
二.抓图的方法 . .............................................................................................................. 5
三.新建图片 . .................................................................................................................. 6
四.图层的概念 . .............................................................................................................. 9
五.图层面板 . ................................................................................................................ 13
六.制作窗口标题 . ........................................................................................................ 16 作业 1:. ......................................................................................................................... 18
七.选择区 . .................................................................................................................... 19
八.快捷键 . .................................................................................................................... 22
九.缩放工具 . ................................................................................................................ 22
十.选择区增减 . ............................................................................................................ 23 十一.切割 /拉伸图形 . ................................................................................................... 23 十二.旋转与翻转 . ........................................................................................................ 27 十三.合并图层 . ............................................................................................................ 28 十四.填充图形 . ............................................................................................................ 29 十五.保存图片格式 . .................................................................................................... 31 作业 2:. ......................................................................................................................... 32 作业 3:. ......................................................................................................................... 32 第二课 图形按钮制作 . .......................................................................................................... 33
一.底图制作 . ................................................................................................................ 34
二.图层效果 . ................................................................................................................ 35
三.按钮加字 . ................................................................................................................ 37
三.不同风格 . ................................................................................................................ 38
四.调色工具 . ................................................................................................................ 39 作业 1:. ......................................................................................................................... 41 作业 2:. ......................................................................................................................... 42 作业 3:. ......................................................................................................................... 42 作业 4:. ......................................................................................................................... 42 作业 5:. ......................................................................................................................... 42 第三课 工具条图片组制作 . .................................................................................................. 42
一.信息面板查看尺寸 . ................................................................................................ 44
二. CTRL+R 标尺操作 . ............................................................................................... 44
三.调整“刻度”单位 . ................................................................................................ 45
四.窗口标题右键可以弹出“图片大小” 、 “画布大小” ......................................... 45
五.举 1个工具条的例子 . ............................................................................................ 45
六.第 2个工具条的例子 . ............................................................................................ 49
七.取透明背景色 . ........................................................................................................ 52
八.参考线的使用 . ........................................................................................................ 53
十.放大、缩小;切割、图像大小、 CTRL+T .......................................................... 54 十一.导入、导出 EIL 图片组文件 . ............................................................................ 55 作业 1:. ......................................................................................................................... 55 作业 2:. ......................................................................................................................... 56 作业 3:. ......................................................................................................................... 56 第四课 播放条制作 , 包装盒制作 . ......................................................................................... 56 一.演示一个制作好的播放进度条 . ............................................................................ 56 作业 1:. ......................................................................................................................... 57 二.演示制作一个包装盒 . ............................................................................................ 58 作业 2:. ......................................................................................................................... 64 三.演示抠图 . ................................................................................................................ 64 作业 3:. ......................................................................................................................... 66
四.讲一下工具盘 . ........................................................................................................ 66
五.选择区和通道 . ........................................................................................................ 75
六.路径 . ........................................................................................................................ 77 作业 4:. ......................................................................................................................... 80 作业 5:. ......................................................................................................................... 80 第五课 菜单、滤镜 . .............................................................................................................. 80
一.保存与图形格式 . .................................................................................................... 80
二.预置 . ........................................................................................................................ 84
三.常用图像模式 . ........................................................................................................ 85
四.演示几个滤镜 . ........................................................................................................ 86 作业 1:. ......................................................................................................................... 89 作业 2:. ......................................................................................................................... 90 作业 3:. ......................................................................................................................... 90 第六课 ICO 图标、鼠标光标制作 . ...................................................................................... 90
一.制作 ICO 图标 . ....................................................................................................... 90
二.制作 CUR 光标 ...................................................................................................... 99
三.制作 ANI 动画光标 . ............................................................................................. 102 作业 1:. ....................................................................................................................... 104 作业 2:. ....................................................................................................................... 104 作业 3:. ....................................................................................................................... 104 第七课 用 ImageReady 制作 GIF 动画 .............................................................................. 104
一.动画鼠标与 GIF 动画的实质 .............................................................................. 104
二.由 Photoshop 向 Imageready 引用 ....................................................................... 105
三.制作第一个 GIF 动画 —— 简单改动颜色 ........................................................... 106
四.如何保存为 GIF 动画文件 .................................................................................. 109
五.制作蝴蝶 GIF 动画 .............................................................................................. 109 作业 1:. ....................................................................................................................... 111 作业 2:. ....................................................................................................................... 112 第八课 用 Photoshop 制作网页 . ......................................................................................... 112
一.进行网页设计 . ...................................................................................................... 112
二.切割 . ...................................................................................................................... 114
四.存为 HTML 文件 ................................................................................................. 116
五.添加动画 . .............................................................................................................. 118
六.改动 HTML 文件 ................................................................................................. 119 作业 1:. ....................................................................................................................... 119 结束语 ................................................................................................................................... 120
第一课 制作一个图形窗口
本课的任务:本课将抓取别人制作的一个窗口图片,制作成适合自己软件尺寸的窗口。 一.图形设计软件的安装
本书采用的软件是 Photoshop 7.0,同样适合 8.0和 9.0版本。
Photoshop 的安装方法略,若你手中的是 Photoshop 学习版,可能有些功能会不全,大 家最好安装 Photoshop 完全版进行学习。
二.抓图的方法
一般使用两种方法:(概念图)
一种是用键盘抓图,即键盘右上解有一个“ Print Screen”键,这就是抓图键,按过这个 键后,就可以将屏幕上显示的内容抓取存到内存中,可以在图形软件中粘贴后显示出来; 或安装专业屏幕抓图工具进行抓图,如:SnagIt ,现在是汉化 7.0版,非常好用,建议 大家去天空或华军下载一个。如下图所示 SnagIt 软件的经典界面:
本书为何从抓图说起呢, 因为很多时候, 大家不需要从头开始设计一个窗口的式样, 有 很多情况下大家可以通过抓取别人设计好的窗口图片,再改造成为具有个性的窗口式样。 一般将 SnagIt 的输入设置为 “窗口” , 表示可以选择在活动的窗口上抓图。 如下图所示:
输出可选择文件输出, 这样可以存为文件, 以利于以后在易语言中插入图片, 一般可存 为 BMP , GIF 图片即可。
三.新建图片
下面的任务是建立两幅图片, 一幅存放抓取别人窗口的图片, 另一幅根据自己需要窗口 的大小新建一个空白图片, 然后将第一幅图片的内容选择部分移动到第二幅图片中, 形成自
己尺寸规格的新图片。
例如:我们看中别人的一幅窗口图片,那么运行别人的程序后,就可以将它抓下来,如 下图所示。
1.抓图,所抓的图片进入内存;如果是用 SnagIt 抓图,请用“编辑”→“全选”菜单 功能,然后用 Ctrl+C拷贝到内存中。如下图所示。
上述抓到的图片,大家可以运行 Photoshop 后,通过“新建”菜单,将所抓到的内容作 为图片粘贴出来;或存为文件后,由 Photoshop 直接打开。
2.进入 Photoshop 后,再点 CTRL+N或选“新建”菜单。
3.在弹出新建窗口中点确定。
新建窗口中的图片尺寸是以 “像素” 等为单位的, 这里的 “像素” 就是代表屏幕的大小, 如常用的 1024×768所用的单位即是“像素” 。因此大家制作的易语言窗口尺寸一般为 800×600或 1024×768像素。
4.用 CTRL+V键粘贴内存中所抓的图片。如下图是抓取其他软件的窗口图片,然后粘 贴到 Photoshop 中的效果:
这时再新建一个自己所需尺寸的空白图片。用 CTRL+N弹出新建窗口。如输入 600×400像素大小的图片尺寸。如下图所示。
大家检查一下,现在 Photoshop 中有两个图片窗口了,一个图片窗口中是抓图的窗口, 一个是 600×400的空白窗口。
四.图层的概念
通过上述粘贴操作后,大家可以打开 Photoshop 的图层面板,可以看到粘贴过的第一幅 图片生成了两个图层。可点击 F7键或菜单“窗口”→“图层”打开图层面板。如下图所示。
在 Photoshop 中,有三个概念是必须要掌握的,那就是:图层、通道、路径。本书将逐 步介绍给大家。 (概念图)
那么什么是“图层”呢,下面用易语言来说明一下:
在易语言中,窗口是一个最大的图层,里面放一些组件就是其中的小图层;
在易语言中的图层表示
Photoshop 的图层面板
各图层之间是有上下级关系的;在易语言中可以将一个组件向下放置,在 Photoshop 中 可以将图层的上下位置重排,如下图所示为易语言中调整层。
在易语言中重排上下位置
下图为在 Photoshop 中调整图层。
Photoshop 中可以改变图层的上下位置
图层也可以被分组; 多个图层也可以合并为一个图层。 下图为易语言中利用容器类组件 进行的分组。
易语言中有容器类组件
下图为在 Photoshop 中的分组实现,采用了分组夹进行分组。
Photoshop 中用分组夹分类图层
我们去照相馆照相也同样如此, 我们的背后是一大红色的幕布, 这是一个图层, 前面是 人物, 这也是一个图层。 看皮影戏也是这样, 前面一块白布是一个图层,后面的皮影是另一 个图层。我们看的动画片同样也是由多图层组成的,如远处的背景,近处的小树, 前面的动 物形象,这些都是用图层表示的,因此很多时候, 我们肉眼所看到的, 就是一系列图层的组 合。
那么我们上面所抓的图在 Photoshop 中粘贴后就形成了两个图层, 一个是白色底子的背 景图层,一个是新建的图层 1,如下图所示 Photoshop 的图层。
五.图层面板
图层面板下方有一些按钮,分别可以进行效果、复制、新建、删除的操作。还可以在左 侧进行显示与隐藏图层的操作,以及右上角有一个下拉菜单进行合并图层等操作。
图层上的蓝色表示当前激活的图层。 很多初学者有时选取不到内容时, 这时就要先查看 图层是否选对了。
复制一个同样的图层的操作方法是:将要复制的图层拖到新建按钮上。
新建一个空白图层的操作方法是:直接点击新建按钮。
删除一个无用的图层的操作方法是:将图层拖到删除按钮上。
为图层加效果的方法是:激活要添加效果的图层后,点击效果按钮。
Photoshop 显示与隐藏图层面板中某图层的方法是:点击某图层左侧的眼睛按钮即可。
链接图层的方法是:点击某图层左侧的眼睛按钮后的链接按钮。
Photoshop 中合并图层的方法是:点击右上角的下接菜单按钮,找其中的合并子菜单 即可。可以全部合并为一个图层,也可以合并有链接关系的部分图层。
六.制作窗口标题
大家可以将窗口图片存为 BMP/GIF图片后导入到易语言的窗口中,再为这个窗口添加 标题。如果想生成一个很酷的窗口标题,那么也可以在 Photoshop 中直接制作。下面为大家 讲一下如何直接制作:
使用“文字工具 /T” ,在图层的标题位置点击一下,这样就可以写字进去了,如下图所 示:
写完后,可以加一些很酷的效果进去。如下图所示:
图层样式窗口
完成添加效果后的样子
这样会生成一个带文字的图层, 随着图层越来越多, 通过图层面板切换图层太慢了, 如 何快速选取呢。可以用“移动工具 /V”后,用鼠标右键就可以快速选择不同的图层了。
作业 1:
将工具箱中工具的快捷键抄下来, 并背熟。 大家可以将鼠标移动到工具箱上, 等待很短 的时间后就会出现文字提示, 其中的字母就是工具的快捷键, 在这里要求大家将这些文字记 录下来,将快捷键背熟,以后用到哪一个工具,只要一点快捷键就可以了。
七.选择区
Photoshop 有一些选择范围的工具,如:矩形工具,圆形工具,套索工具,魔术棒工具 等。如下图所示。
这些工具选择图片中的某个区域后, 起到的作用是两个, 一个是对选择区以外的地方进 行保护, 不能操作它们, 第二个作用是可对选择区内的进行任意操作, 而不会影响到其他的 地方。
例如下面图中所示用矩形工具选择了一个区域, 再用毛笔工具在上面绘画, 这时产生作 用的只有区域内的部分,而对外部并不起作用。
对选取的区域内,我们可以进行以下操作:绘画、移动、填充、自由变换等。
上图是进行了绘画操作,可以用画笔,以及擦皮等进行。
下图是使用移动工具进行了区域性的移动。
如果当前是选择工具, 那么在选区中, 可以用鼠标右击, 在弹出的菜单中进行填充与描 边等操作,如下图所示。
好了, 上述已了解了图层与选择区的作用, 下面的任务就是将第一幅图中的内容有选择 地移到第二幅空白图中,形成自己尺寸的窗口图片。
首先可以移动四个角,再移动四个边,最后将中间部分填充即可。
移动四个角的方法是:在第一幅图片中用矩形选择工具选取边角, 然后用移动工具移动 到第二幅空白图片中。如下图所示。
下图是四个边角移动好的样子。
八.快捷键
在前述为大家介绍了一些快捷键, 如单个的字母是代表某个工具, 而组合的快捷键是一 些常用的操作, 如:拷贝是 CTRL+C、 粘贴是 CTRL+V; 有时当有一个选择区时用一个 CTRL+J可代替 CTRL+C和 CTRL+V,直接生成一个新的图层。下面是显示使用 CTRL+J的效果:
当有一个选择区的情况下,按 CTRL+J会立即生成一个新的图层
基本上一步的 CTRL+J操作可代替 CTRL+C和 CTRL+V的两步操作。
还有常用的组合快捷键有:CTRL+N新建, CTRL+S保存, CTRL+A全选, CTRL+D取消选择, CTRL+O打开, CTRL+P 打印, CTRL+K预置等,这些快捷键大家可以在菜单 中找到,请记住吧,会加快制作的速度的。
九.缩放工具
在上述操作中,可以利用“缩放工具 /Z”来调节图片的大小,这种调节并非真正意义上
调节了图片文件的尺寸, 而只是让图片放大看得更加清楚而已。 “缩放工具 /Z”如下图所示。
在使用“缩放工具 /Z”时,可以用 ALT 键在放大与缩小之间切换。
另一个有用的工具是“抓手工具 /H” ,随时按下空格键,也可以快速切换到抓手工具。 抓手工具只是在放大一定程度后,移到画布的位置,并非改变了画布的尺寸和内容。
十.选择区增减
选择工具包括:矩形选择工具, 圆形选择工具,套索工具,这些工具选择一个区域后是 可以继续追加选取, 或从当前选择的区域减少选取的,具体要用快捷键的配合,如:同时按 下 SHIFT 进行选取是增加选区,同时按下 ALT 键进行选取是减少选区。
或者直接在工具选项面板中选择一种模式。如下图所示。
鼠标右键菜单可弹出 “变换选区” 子菜单, 这样选区也可以进行直接的缩放与旋转等操 作了。
十一.切割 /拉伸图形
画布尺寸的调节可以用“切割工具 /V” ,如果区域小,就会将画布切小, 如果拉大区域, 就会将画布切大。
下图是用裁切工具将画布切小。
下图是用裁切工具将画布切大。
或用菜单命令可以填入精确尺寸的画布进行缩放。如下图所示。
选择菜单后会弹出“画布大小”对话窗口。可在新建大小中填入你所需要的精确尺寸, 如果新尺寸比原图大,那么就会留出空,如果新尺寸比原图小,那么就会切去多余的内容。 如下图所示。
下面是画布切大后的样子。 为何原图在左上角呢, 因为在上述的对话窗口中, 将原图定 位在左上角了。如下图所示。
可能存在长度不够或太长的图形,那么我们可以通过“拉伸” (热键是 CTRL+T),来拉 动夹点。
好了,下面的任务就是将四边移动过来了,如下图所示:
移动到空白图片中的边图可能会小或大,于是可以用热键 CTRL+T进行拉伸,或多复 制几个图层移动到合适的位置。如下图所示。
下面是四个边制作成功后的样子:
十二.旋转与翻转
在选择区上,或图层上使用 CTRL+T后,可以使用鼠标右键弹出菜单进行左右翻转或
旋转的操作,这是对于可能存在对应图形进行的操作。如下图所示。
十三.合并图层
大家可以看一下图层面板,这时可能已产生了很多单一的图层,如下图所示。
在此可以点右上角的菜单按钮,用合并的选项合并成一个图层。
下面是合并后图层面板的样子:
十四.填充图形
大家再仔细看看, 这个窗口的中间乱七八糟的, 现在可以将中间用矩形工具选取后, 使 用吸管工具,或色盘选一种颜色后进行填充。
用吸管工具吸取理想的颜色后, 切换到选择工具, 点击鼠标右键后可以弹出菜单, 这里 选“填充”子菜单即可。
工具箱中也有调色的工具可用,如下图所示:
或用色板面板、颜色面板直接选取颜色。如下图所示。
十五.保存图片格式
最后每一次完成好的图片,大家都可以保存为文件,供易语言导入的窗口的 “底图”属 性中去。在 Photoshop 中使用以下菜单可实现保存“文件”→“存储” ,如下图所示。
Photoshop 中的保存菜单
常用的图片保存格式有:BMP 、 JPG 、 GIF 、 PSD 等。
GIF 图片格式的特点是:最多支持 256色索引色, 图片文件较小, 色彩数太小, 易失真。 易语言支持此格式,在要求不高的情况下推荐用此格式。
BMP 图片格式的特点是:保真通用,支持的软件多,但图片太大。易语言支持,如果 要求较高,可用此种文件格式。
JPG 图片格式的特点是:有损压缩,图片文件较小,但压缩比大的情况下失真严重。易 语言支持,为保真,推荐使用压缩比为 7-11之间。如下图所示。
PSD 图片格式的特点是:可以保存图层 \通道 \路径等信息的 Photoshop 专用格式,利于 下次打开再编辑,只有 Photoshop 支持,易语言不支持。
作业 2:
抓取别人制作的漂亮的窗口图片,在 Photoshop 中加工为自己需要的尺寸的窗口图片, 并且保存为一个 BMP 图片。找到本章的练习目录,其中有一些图片可供练习。
作业 3:
将上述制作好的图片导入到易语言程序窗口中,具体方法是修改窗口的“底图”属性, 并且将窗口标题去掉。如下图所示。
第二课 图形按钮制作
本课的目标是让大家可以自己动手制作图形按钮。 在开始本课之前大家先看看别人制作 的一些漂亮的图形按钮。 下图是在随书目录中的一个软件的界面, 可以看出它的四个按钮有 不同的造型,并且鼠标移动到上面及点击后都会有颜色上的改变,如下图所示。
下面是“千千静听” (www.ttplayer.com )的界面图片:
千千静听还可以更换多达 150种皮肤,请大家到它的主页上去下载安装。
其他比较漂亮的窗口还有大家常用的 QQ 等。
那么这些漂亮的按钮是如何制作出来的呢,下面就为大家讲解一下。
一.底图制作
下面的任务是建立一个凸出式样的横式按钮, 不仅如此, 我们还要让它在易语言中变换 不同的颜色式样。
1.新建一个按钮大小为 60×20象素的图片,横向长一些。
2.增加一个空白图层,我们准备在这个图层上制作一些效果出来。
用淡蓝色填充一下:填充使用 Alt+BackSpace组合键,或用漆桶工具填充。
二.图层效果
3.使用图层面板中的“添加图层样式”按钮,增加“浮雕效果” 。
完成浮雕效果后的样子:
三.按钮加字
4.选中工具箱中的打字工具,开始加字,注意字的风格,可以选为无效果, CTRL+T可设置颜色、字体与各种风格。
5.保存为 GIF 格式或 BMP 图片格式的文件备用。
此图片为放在图形按钮“正常图片”属性中的图片。
四.不同风格
易语言中,图形按钮组件可以设置不同的图片风格属性,如:
6.改变背景颜色,保存,此图片为点燃图片。
可再选颜色选择器,分别选黄色、深蓝色,作为按钮的背景色。如下所示:
7.再次改变背景颜色,保存,此图片为按下图片。
经过多次更换背景色之后,应该有多张图片了,如下所示。
将上述三张图片分别存入易程序图形按钮的属性中,然后运行易程序,大家就会发现, 这个图形按钮随着鼠标的移动及点按进行变化。
五.调色工具
实际上, 在上述操作中, 大家还可以再多制作一些图层, 将新生成的图层设置成不同的 颜色,使用同样的效果,这样,颜色固定下来后,就可以改不同的文字存起来,保证每个按 钮的底图色基本一样了。
浮雕效果也是可以复制到其他图层中的, 可以在图层面板中用鼠标右键点击, 可以选中 “复制图层效果” ,再在新图层中使用鼠标右键点击,选中 “粘贴图层效果” , 这样一个图层 效果就可以放到其他的图层中使用了。
当改变文字后,可以点图层左边的眼睛图标,以让不需要的图层暂时隐藏起来。 字的位置也可以动一动,这样按下时的字与普通情况下的字的位置不一样较好。 可以使用 ALT+BACKSPACE组合键,将工具箱中的颜色填充到当前图层。
8.调色工具:CTRL+B, CTRL+L, CTRL+M, CTRL+U
填充颜色是一种办法, 当然还有其他的办法可以改变当前图层的颜色, 这就是 Photoshop 的调整菜单。如图所示。
常用的有:色彩平衡 /CTRL+B,色阶 /CTRL+L,曲线 /CTRL+M,色相 /CTRL+U。 大家可以选中某个图层后, 再使用上述的四个工具试一下效果, 只要达到自己理想中的 就可以点确定按钮保存下来。
其中,色相 /CTRL+U调节中,下方有两个色条,上面的色条表示原来的颜色,下方的 色条表示调整色相后的对应颜色。如图所示。
色阶工具与其他工具之间又有连通作用。
如使用色阶工具调整中间色调,相当于曲线工具中的中间色调调整。
这些还需要大家多试一试,并且购买一本正规的 Photoshop 理论书好好看一看。 作业 1:
制作正方形的浮雕图形按钮。
使用渐变工具制作渐变式样的按钮。
作业 2:
制作一个圆形的图形按钮, 40×40象素。注意 SHIFT(规形 ) 与空白键 (起点 ) 的配合
作业 3:
制作一个圆角方形的图形按钮 .(菜单 :选择 -修改 -平滑
)
作业 4:
将以上制作的按钮图片保存并放在易语言程序中使用。
作业 5:
找一个播放器,用 SnagIt 抓取其中的图形按钮,制作到自己的易语言程序中。
注意透明度的调整,选择后使用菜单:图像→裁切→保存
第三课 工具条图片组制作
易语言中, 如工具条组件, 超级列表框组件、 超级菜单组件等都有一个特别的图片属性, 那就是图片组属性。
论坛上也可以找到现成的图片组 BMP 文件放到自己的程序中。
图片组是这样描述的:将一组同样大小尺寸的图片放在一张图片中, 通过统一的尺寸进 行分割成单个的图片,以做组件的不同需要。
下面以工具条组件的图片组制作为例,大家来学习是如何制作图片组的。
一.信息面板查看尺寸
从图片组设置的窗口中可以知道, 图片组中每张小图片的尺寸都是一样的, 因此我们一 定要对图片的尺寸有所了解。 除了在 PhotoShop 中新建窗口时可以看到尺寸, 在任何时候, 我们都可以查看尺寸。
首先可以看到有个信息面板:
二. CTRL+R 标尺操作
使用热键 CTRL+R后,就可以在图片子窗口中看到标尺了。再按一次 CTRL+R就可以 隐藏标尺。如图所示。
三.调整“刻度”单位
标尺上使用鼠标右键点击,可以调整“刻度”单位。
四.窗口标题右键可以弹出“图片大小” 、 “画布大小” 用鼠标右键点击窗口标题,可以弹出“图片大小” 、 “画布大小”的菜单。如图所示。
五.举 1个工具条的例子
现在由我举第 1个工具条的例子,首先新建一个空白窗口,尺寸为 80×20象素。如图 所示。
意味着我们要制作四个图标,每个图标的尺寸是 20×20象素,这样合起来就是 80×20象素了。请在图片中平均分配画一些图片,在这里我是写了四个数字, 以说明问题。如图所 示。
好了,将上述图片保存为 GIF 或 BMP 图文件,导入工具条组件。
打开易语言,新建一个易程序,将一个工具条放在上面。
点击图片组属性后,弹出一个对话窗口,在其中点击“加入” ,又弹出一个对话窗口,
这时选择上述保存的文件名,将单个图标的尺寸设置为 20×20象素,透明色就用自动获取 吧。如图所示。
加入后的样子如图所示。
确认以上后,回到属性面板,可以看到“图片组”属性中已出现“有数据”字样。点击 “工具条按钮”属性。如图所示。
点击后弹出一个对话窗口, 大家可以插入一些工具条的按钮, 并且选择图片索引。 确认 后返回。如图所示。
最终运行的效果如下图所示:
从上述操作中可以看出,一个图片组就是一组同样尺寸大小的小图标的集合。
六.第 2个工具条的例子
下面,跟着我来制作第 2个工具条吧。这个就实用一些了。
首先我们要确定工具条的尺寸,这次做一个 30×30象素的工具条吧。在 PhotoShop 中新建一个空白图片,尺寸为 30×30。这次为什么建立这么小的图片,而不是一开始就计 算好呢,因为我这里是教大家动态地增加图片组,而不是死板地先设计好尺寸再制作。 好,大家可以调出标尺,再打开我们想要制作图标的图片来,可能其他的图片太大了, 可以使用菜单调小一些后,再移动过来;或先移动到这张新建的图片中,再用 CTRL+T调 整尺寸到正好。如图所示。
通过上述,第一幅图片就建立好了。
下面要扩大画板的尺寸, 有两种方法, 一种是直接用切割工具可以增加图片大小, 第二 种方法是用改变画布菜单命令,改变画布大小。
切割工具的方法是:首先选择切割工具,如图所示。
然后框住全部图像,如图所示。
将切割框移向右侧,如图所示。
将切割框左边向左移,直到与图片左边对齐。如图所示。
双击后就完成了切割变大的任务,并且可以看到尺寸已改为 60×30象素了。
范文二：Java语言的图形界面设计
实验 2 Java 语言的图形界面设计 院(系):
1. 实验目的
初步掌握 Java 语言的图形界面设计的基本思想,重点掌握图形组件和事件模型。了解 图形用户界面基本组件窗口、按钮、文本框、选择框、滚动条等的使用方法,了解如何使用 布局管理器对组件进行管理,以及如何使用 Java 的事件处理机制。
2.1 程序运行结果:
2.2 程序清单:
import java.awt.*;
import javax.swing.*;
import java.awt.event.*;
import javax.swing.event.CaretListener;
import javax.swing.event.CaretEvent;
public class lable extends JFrame implements ActionListener {
private JTextField jtext; // 文本行
private JLabel jlabel; // 标签
private JButton jbutton; // 按钮
public lable() {
super(
this.setBounds(300,240,340,90);
this.setResizable(false);
this.setBackground(java.awt.Color.white);
this.setDefaultCloseOperation(EXIT_ON_CLOSE);
this.getContentPane().setLayout(new FlowLayout(FlowLayout.RIGHT));
jlabel = new JLabel();
this.getContentPane().add(jlabel);
jtext = new JTextField(20);
this.getContentPane().add(jtext);
jbutton = new JButton(
this.getContentPane().add(jbutton); jbutton.addActionListener(this);
this.setVisible(true);
}
public void actionPerformed(ActionEvent e) { if(e.getSource() == jbutton) {
try {
jlabel.setText(jtext.getText()); } finally{}
}
}
public static void main(String arg[]) {
new lable();
}
}
3.1 程序运行结果:
3.2 程序清单:
import java.awt.*;
import javax.swing.*;
import java.awt.event.*;
import javax.swing.event.CaretEvent;
import javax.swing.event.CaretListener;
public class DrawShape extends JFrame implements ActionListener { private JTextField text;
private int state;
private JComboBox combox;
PaintCanvas canvas = new PaintCanvas();
public DrawShape() {
super(
this.setBounds(300,100,800,600);
this.setResizable(false);
this.setBackground(java.awt.Color.white);
this.setDefaultCloseOperation(EXIT_ON_CLOSE); // 添加菜单
this.addMenu();
// 添加工具条
this.addToolBar();
// 添加画图面板
this.getContentPane().add(canvas);
this.setVisible(true);
state = 0;
}
// 设置菜单
public void addMenu() {
JMenuBar menubar = new JMenuBar();
this.setJMenuBar(menubar);
String menustr[] = {
menu[i] = new JMenu(menustr[i]);
menubar.add(menu[i]);
}
JMenuItem darwLine = new JMenuItem(
darwLine.addActionListener(this);
JMenuItem darwRect = new JMenuItem(
darwRect.addActionListener(this);
JMenuItem darwOval = new JMenuItem(
darwOval.addActionListener(this);
}
// 设置工具条
public void addToolBar() {
JToolBar toolbar = new JToolBar();
this.getContentPane().add(toolbar,
text = new JTextField(20);
toolbar.add(text);
text.addActionListener(this);
toolbar.add(new JLabel(
String colorstr[] = {
combox.setEditable(false);
combox.addActionListener(this);
toolbar.add(combox);
}
// 监听、处理事件
public void actionPerformed(ActionEvent e) {
// 监听菜单
if(e.getSource() instanceof JMenuItem) {
if(e.getActionCommand() ==
canvas.setState(1);
canvas.setClearState(state);
state = 1;
}
if(e.getActionCommand() ==
canvas.setState(2);
canvas.setClearState(state);
state = 2;
}
if(e.getActionCommand() ==
canvas.setState(3);
canvas.setClearState(state);
state = 3;
}
}
// 监听颜色设置组合框
if(e.getSource() instanceof JComboBox) {
String textColor = (String)combox.getSelectedItem(); if(textColor ==
canvas.setColor(Color.red);
}
if(textColor ==
canvas.setColor(Color.blue);
}
if(textColor ==
canvas.setColor(Color.green);
}
if(textColor ==
canvas.setColor(Color.black);
}
}
if(e.getSource() == text) {
String str = text.getText();
canvas.setText(str);
canvas.setState(4);
canvas.repaint();
}
}
public static void main(String arg[]) {
new DrawShape();
}
}
import java.awt.*;
import javax.swing.*;
import java.awt.event.*;
import javax.swing.event.CaretEvent;
import javax.swing.event.CaretListener;
public class PaintCanvas extends Canvas implements MouseListener, MouseMotionListener{ private int state; // 画图状态
private int clear_state; // 擦除状态
private Color textColor; // 文字颜色
private String str, str2; // 显示文字
private Point start, end, last; // 画图点
public PaintCanvas() {
state = 0;
str = null;
str2 = null;
start = end = null;
this.addMouseMotionListener(this); this.addMouseListener(this);
this.setBackground(Color.WHITE); }
// 设置文字颜色
public void setColor(Color textColor) { this.textColor = textColor;
}
// 设置画图状态
public void setState(int state) {
this.state = state;
}
// 设置擦除状态
public void setClearState(int state) {
this.clear_state = state;
repaint();
}
// 设置文字状态
public void setText(String str) {
this.str = str;
}
// 鼠标事件
public void mousePressed(MouseEvent e) { start = end = null;
start = new Point(e.getX(), e.getY()); }
public void mouseReleased(MouseEvent e) { end = new Point(e.getX(), e.getY()); repaint();
}
public void mouseClicked(MouseEvent e){} public void mouseEntered(MouseEvent e){}
public void mouseMoved(MouseEvent e){}
public void mouseDragged(MouseEvent e) {
last = end;
end = new Point(e.getX(), e.getY());
repaint();
}
public void paint(Graphics g) {
if(start != null && last != null) {
switch(clear_state) {
case 1:
g.setColor(this.getBackground());
g.drawOval(start.x, start.y, end.x-start.x, end.y-start.y); break;
case 2:
g.setColor(this.getBackground());
g.drawRect(start.x, start.y, end.x-start.x, end.y-start.y); break;
case 3:
g.setColor(this.getBackground());
g.drawLine(start.x, start.y, end.x, end.y);
break;
}
}
if(start != null && last != null) {
switch(state) {
case 1:
g.setColor(this.getBackground());
g.drawOval(start.x, start.y, last.x-start.x, last.y-start.y); g.setColor(Color.black);
g.drawOval(start.x, start.y, end.x-start.x, end.y-start.y); break;
case 2:
g.setColor(this.getBackground());
g.drawRect(start.x, start.y, last.x-start.x, last.y-start.y); g.setColor(Color.black);
break;
case 3:
g.setColor(this.getBackground());
g.drawLine(start.x, start.y, last.x, last.y);
g.setColor(Color.black);
g.drawLine(start.x, start.y, end.x, end.y);
break;
}
}
if(state == 4) {
if(str2 != null) {
g.setColor(this.getBackground());
g.drawString(str2, 100, 100);
}
g.setColor(textColor);
g.drawString(str, 100, 100);
str2 = str;
}
}
public void update(Graphics g) {
paint(g);
}
}
4 总结
对 Java 语言图形界面设计的基本思想, 多种布局管理器的特点以及 Java 的事件处理机制的 执行过程等进行总结。
范文三：易语言图形界面设计
易语言图形界面设计
《易语言图形界面设计》
2006年第一版
常用网址
易语言官方网站，欢迎下载易语言最新版:http://www.dywt.com.cn 易语言全国资格证书管理中心:http://www.cclg.cn
引 言
一个程序如果不好看，使用的人一定不爽，会有视觉疲劳。因此一个功能强大且界面漂亮、易于操作的软件才是人们真正需要的软件。
本书每一课以一个实际制作图形的任务完成教学工作，不仅提高了编程的辅助技术技能，学习Photoshop的使用方法，还可以进入图形设计的大门。
一般学习编程的书很少有对如何设计程序的图形界面进行专门介绍，因此学习后，很多用户对于程序界面设计还不能很好的掌握。而学习程序界面设计有的编程爱好者是通过学习图像制作软件而得来的，如Photoshop，但还不够具体进行程序界面设计。
一个有着漂亮界面的程序一定比界面普通的程序更会让人感觉上更专业一些，让人眼睛一亮。在当今竞争激烈的市场环境下，客户越来越挑剔，对创意有着较高的要求。现在的经济也有人称为吸引人眼球的经济，不得不承认有些程序在界面设计上所花的功夫并不比程序设计的少，有的设计精美的程序实在是让人难以忘怀的。
本书即是一种教大家如何学习设计漂亮的易语言应用程序界面的专业书籍。书中介绍了易语言界面设计方法，采用Photoshop7.0作为教学工具。有的读者会说是不是杀鸡用牛刀了，但你能用“画板”画出水晶按钮吗?由于程序界面设计涉及的录
引 言 1
目 录 2
第一课 制作一个图形窗口 5
一(图形设计软件的安装 5
二(抓图的方法 5
三(新建图片 6
四(图层的概念 9
五(图层面板 13
六(制作窗口标题 16
19 作业1:
七(选择区 19
八(快捷键 22
九(缩放工具 23
十(选择区增减 23
十一(切割/拉伸图形 24
十二(旋转与翻转 28
十三(合并图层 29
十四(填充图形 30
十五(保存图片格式 32
作业2: 33
作业3: 33
第二课 图形按钮制作 33
一(底图制作 34
二(图层效果 35
三(按钮加字 37
三(不同风格 38
四(调色工具 39
作业1: 41
作业2: 42
作业3: 42
作业4: 42
作业5: 42
第三课 工具条图片组制作 42
一(信息面板查看尺寸 44
二(CTRL+R 标尺操作 44
三(调整“刻度”单位 45
四(窗口标题右键可以弹出“图片大小”、“画布大小”
五(举1个工具条的例子 45
六(第2个工具条的例子 49
七(取透明背景色 52
八(参考线的使用 53
九(找素材 53
十(放大、缩小;切割、图像大小、CTRL+T 54 十一(导入、导出EIL图片组文件 55
作业1: 55
作业2: 56
作业3: 56
第四课 播放条制作,包装盒制作 57
一(演示一个制作好的播放进度条 57
作业1: 58
二(演示制作一个包装盒 58
作业2: 65
三(演示抠图 65
作业3: 67
四(讲一下工具盘 67 45
五(选择区和通道 76
六(路径 78
作业4: 81
作业5: 81
第五课 菜单、滤镜 81
一(保存与图形格式 82
二(预置 86
三(常用图像模式 87
四(演示几个滤镜 88
作业1: 91
作业2: 92
作业3: 92
第六课 ICO图标、鼠标光标制作 92
一(制作ICO图标 92
二(制作CUR光标 101
三(制作ANI动画光标 104
作业1: 106
作业2: 106
作业3: 106
第七课 用ImageReady制作GIF动画 106
一(动画鼠标与GIF动画的实质 106
二(由Photoshop向Imageready引用 107
三(制作第一个GIF动画——简单改动颜色. 108
四(如何保存为GIF动画文件 111
五(制作蝴蝶GIF动画 111
作业1: 113
作业2: 114
第八课 用Photoshop制作网页 114
一(进行网页设计 114
二(切割 115
三(添加超链接 116
四(存为HTML文件 117
五(添加动画 119
六(改动HTML文件 120
作业1: 120
结束语 121
大连大有吴涛易语言软件开发有限公司 教材组:王军 编写
技术指导:仲萃豪 吴涛
2006年10月31日第一版 电子稿
第一课 制作一个图形窗口
本课的任务:本课将抓取别人制作的一个窗口图片，制作成适合自己软件尺寸的窗口。
一(图形设计软件的安装
本书采用的软件是Photoshop 7.0，同样适合8.0和9.0版本。
Photoshop的安装方法略，若你手中的是Photoshop学习版，可能有些功能会不全，大家最
好安装Photoshop完全版进行学习。
二(抓图的方法
一般使用两种方法:(概念图)
一种是用键盘抓图，即键盘右上解有一个“Print Screen”键，这就是抓图键，按过这个键后，
就可以将屏幕上显示的内容抓取存到内存中，可以在图形软件中粘贴后显示出来;
或安装专业屏幕抓图工具进行抓图，如:SnagIt，现在是汉化7.0版，非常好用，建议大
家去天空或华军下载一个。如下图所示SnagIt软件的经典界面:
本书为何从抓图说起呢，因为很多时候，大家不需要从头开始设计一个窗口的式样，有很
多情况下大家可以通过抓取别人设计好的窗口图片，再改造成为具有个性的窗口式样。 一般将SnagIt的输入设置为“窗口”，表示可以选择在活动的窗口上抓图。如下图所示: 输出可选择文件输出，这样可以存为文件，以利于以后在易语言中插入图片，一般可存为BMP，GIF图片即可。
三(新建图片
下面的任务是建立两幅图片，一幅存放抓取别人窗口的图片，另一幅根据自己需要窗口的大小新建一个空白图片，然后将第一幅图片的内容选择部分移动到第二幅图片中，形成自己尺寸规格的新图片。
例如:我们看中别人的一幅窗口图片，那么运行别人的程序后，就可以将它抓下来，如下图所示。
1(抓图，所抓的图片进入内存;如果是用SnagIt抓图，请用“编辑”?“全选”菜单功能，然后用Ctrl+C拷贝到内存中。如下图所示。
上述抓到的图片，大家可以运行Photoshop后，通过“新建”菜单，将所抓到的内容作为图片粘贴出来;或存为文件后，由Photoshop直接打开。
2(进入Photoshop后，再点CTRL+N或选“新建”菜单。
3(在弹出新建窗口中点确定。
新建窗口中的图片尺寸是以“像素”等为单位的，这里的“像素”就是代表屏幕的大小，如常用的1024×768所用的单位即是“像素”。因此大家制作的易语言窗口尺寸一般为800×600或1024×768像素。
4(用CTRL+V键粘贴内存中所抓的图片。如下图是抓取其他软件的窗口图片，然后粘贴到Photoshop中的效果:
这时再新建一个自己所需尺寸的空白图片。用CTRL+N弹出新建窗口。如输入600×400像素大小的图片尺寸。如下图所示。
大家检查一下，现在Photoshop中有两个图片窗口了，一个图片窗口中是抓图的窗口，一个是600×400的空白窗口。
四(图层的概念
通过上述粘贴操作后，大家可以打开Photoshop的图层面板，可以看到粘贴过的第一幅图片生成了两个图层。可点击F7键或菜单“窗口”?“图层”打开图层面板。如下图所示。 在Photoshop中，有三个概念是必须要掌握的，那就是:图层、通道、路径。本书将逐步介绍给大家。(概念图)
那么什么是“图层”呢，下面用易语言来说明一下:
在易语言中，窗口是一个最大的图层，里面放一些组件就是其中的小图层;
在易语言中的图层表示
Photoshop的图层面板
各图层之间是有上下级关系的;在易语言中可以将一个组件向下放置，在Photoshop中可以将图层的上下位置重排，如下图所示为易语言中调整层。
在易语言中重排上下位置
下图为在Photoshop中调整图层。
Photoshop中可以改变图层的上下位置
图层也可以被分组;多个图层也可以合并为一个图层。下图为易语言中利用容器类组件进行的分组。
易语言中有容器类组件
下图为在Photoshop中的分组实现，采用了分组夹进行分组。
Photoshop中用分组夹分类图层
我们去照相馆照相也同样如此，我们的背后是一大红色的幕布，这是一个图层，前面是人物，这也是一个图层。看皮影戏也是这样，前面一块白布是一个图层，后面的皮影是另一个图层。我们看的动画片同样也是由多图层组成的，如远处的背景，近处的小树，前面的动物形象，这些都是用图层表示的，因此很多时候，我们肉眼所看到的，就是一系列图层的组合。 那么我们上面所抓的图在Photoshop中粘贴后就形成了两个图层，一个是白色底子的背景图层，一个是新建的图层1，如下图所示Photoshop的图层。
五(图层面板
图层面板下方有一些按钮，分别可以进行效果、复制、新建、删除的操作。还可以在左侧进行显示与隐藏图层的操作，以及右上角有一个下拉菜单进行合并图层等操作。
图层上的蓝色表示当前激活的图层。很多初学者有时选取不到内容时，这时就要先查看图层是否选对了。
复制一个同样的图层的操作方法是:将要复制的图层拖到新建按钮上。
新建一个空白图层的操作方法是:直接点击新建按钮。
删除一个无用的图层的操作方法是:将图层拖到删除按钮上。
为图层加效果的方法是:激活要添加效果的图层后，点击效果按钮。
Photoshop显示与隐藏图层面板中某图层的方法是:点击某图层左侧的眼睛按钮即可。 链接图层的方法是:点击某图层左侧的眼睛按钮后的链接按钮。
Photoshop中合并图层的方法是:点击右上角的下接菜单按钮，找其中的合并子菜单即可。可以全部合并为一个图层，也可以合并有链接关系的部分图层。
六(制作窗口标题
大家可以将窗口图片存为BMP/GIF图片后导入到易语言的窗口中，再为这个窗口添加标题。如果想生成一个很酷的窗口标题，那么也可以在Photoshop中直接制作。下面为大家讲一下如何直接制作:
使用“文字工具/T”，在图层的标题位置点击一下，这样就可以写字进去了，如下图所示: 写完后，可以加一些很酷的效果进去。如下图所示:
图层样式窗口
完成添加效果后的样子
这样会生成一个带文字的图层，随着图层越来越多，通过图层面板切换图层太慢了，如何快速选取呢。可以用“移动工具/V”后，用鼠标右键就可以快速选择不同的图层了。 作业1:
将工具箱中工具的快捷键抄下来，并背熟。大家可以将鼠标移动到工具箱上，等待很短的时间后就会出现文字提示，其中的字母就是工具的快捷键，在这里要求大家将这些文字记录下来，将快捷键背熟，以后用到哪一个工具，只要一点快捷键就可以了。
七(选择区
Photoshop有一些选择范围的工具，如:矩形工具，圆形工具，套索工具，魔术棒工具等。如下图所示。
这些工具选择图片中的某个区域后，起到的作用是两个，一个是对选择区以外的地方进行保护，不能操作它们，第二个作用是可对选择区内的进行任意操作，而不会影响到其他的地方。 例如下面图中所示用矩形工具选择了一个区域，再用毛笔工具在上面绘画，这时产生作用的只有区域内的部分，而对外部并不起作用。
对选取的区域内，我们可以进行以下操作:绘画、移动、填充、自由变换等。
上图是进行了绘画操作，可以用画笔，以及擦皮等进行。
下图是使用移动工具进行了区域性的移动。
如果当前是选择工具，那么在选区中，可以用鼠标右击，在弹出的菜单中进行填充与描边等操作，如下图所示。
好了，上述已了解了图层与选择区的作用，下面的任务就是将第一幅图中的内容有选择地移到第二幅空白图中，形成自己尺寸的窗口图片。
首先可以移动四个角，再移动四个边，最后将中间部分填充即可。
移动四个角的方法是:在第一幅图片中用矩形选择工具选取边角，然后用移动工具移动到第二幅空白图片中。如下图所示。
下图是四个边角移动好的样子。
八(快捷键
在前述为大家介绍了一些快捷键，如单个的字母是代表某个工具，而组合的快捷键是一些常用的操作，如:拷贝是CTRL+C、粘贴是CTRL+V;有时当有一个选择区时用一个CTRL+J可代替CTRL+C和CTRL+V，直接生成一个新的图层。下面是显示使用CTRL+J的效果: 当有一个选择区的情况下，按CTRL+J会立即生成一个新的图层
基本上一步的CTRL+J操作可代替CTRL+C和CTRL+V的两步操作。
还有常用的组合快捷键有:CTRL+N新建，CTRL+S保存，CTRL+A全选，CTRL+D取消选择，CTRL+O打开，CTRL+P 打印，CTRL+K预置等，这些快捷键大家可以在菜单中找到，请记住吧，会加快制作的速度的。
九(缩放工具
在上述操作中，可以利用“缩放工具/Z”来调节图片的大小，这种调节并非真正意义上调节了图片文件的尺寸，而只是让图片放大看得更加清楚而已。“缩放工具/Z”如下图所示。 在使用“缩放工具/Z”时，可以用ALT键在放大与缩小之间切换。
另一个有用的工具是“抓手工具/H”，随时按下空格键，也可以快速切换到抓手工具。抓手工具只是在放大一定程度后，移到画布的位置，并非改变了画布的尺寸和内容。
十(选择区增减
选择工具包括:矩形选择工具，圆形选择工具，套索工具，这些工具选择一个区域后是可以继续追加选取，或从当前选择的区域减少选取的，具体要用快捷键的配合，如:同时按下SHIFT进行选取是增加选区，同时按下ALT键进行选取是减少选区。
或者直接在工具选项面板中选择一种模式。如下图所示。
鼠标右键菜单可弹出“变换选区”子菜单，这样选区也可以进行直接的缩放与旋转等操作了。 十一(切割/拉伸图形
画布尺寸的调节可以用“切割工具/V”，如果区域小，就会将画布切小，如果拉大区域，就
会将画布切大。
下图是用裁切工具将画布切小。
下图是用裁切工具将画布切大。
或用菜单命令可以填入精确尺寸的画布进行缩放。如下图所示。
选择菜单后会弹出“画布大小”对话窗口。可在新建大小中填入你所需要的精确尺寸，如果新尺寸比原图大，那么就会留出空，如果新尺寸比原图小，那么就会切去多余的内容。如下图所示。
下面是画布切大后的样子。为何原图在左上角呢，因为在上述的对话窗口中，将原图定位在左上角了。如下图所示。
可能存在长度不够或太长的图形，那么我们可以通过“拉伸”(热键是CTRL+T)，来拉动夹点。
好了，下面的任务就是将四边移动过来了，如下图所示:
移动到空白图片中的边图可能会小或大，于是可以用热键CTRL+T进行拉伸，或多复制几个图层移动到合适的位置。如下图所示。
下面是四个边制作成功后的样子:
十二(旋转与翻转
在选择区上，或图层上使用CTRL+T后，可以使用鼠标右键弹出菜单进行左右翻转或旋转的操作，这是对于可能存在对应图形进行的操作。如下图所示。
十三(合并图层
大家可以看一下图层面板，这时可能已产生了很多单一的图层，如下图所示。
在此可以点右上角的菜单按钮，用合并的选项合并成一个图层。
下面是合并后图层面板的样子:
十四(填充图形
大家再仔细看看，这个窗口的中间乱七八糟的，现在可以将中间用矩形工具选取后，使用吸管工具，或色盘选一种颜色后进行填充。
用吸管工具吸取理想的颜色后，切换到选择工具，点击鼠标右键后可以弹出菜单，这里选“填充”子菜单即可。
工具箱中也有调色的工具可用，如下图所示:
或用色板面板、颜色面板直接选取颜色。如下图所示。
十五(保存图片格式
最后每一次完成好的图片，大家都可以保存为文件，供易语言导入的窗口的“底图”属性中去。在Photoshop中使用以下菜单可实现保存“文件”?“存储”，如下图所示。 Photoshop中的保存菜单
常用的图片保存格式有:BMP、JPG、GIF、PSD等。
GIF图片格式的特点是:最多支持256色索引色，图片文件较小，色彩数太小，易失真。易语言支持此格式，在要求不高的情况下推荐用此格式。
BMP图片格式的特点是:保真通用，支持的软件多，但图片太大。易语言支持，如果要求较高，可用此种文件格式。
JPG图片格式的特点是:有损压缩，图片文件较小，但压缩比大的情况下失真严重。易语言支持，为保真，推荐使用压缩比为7-11之间。如下图所示。
PSD图片格式的特点是:可以保存图层\通道\路径等信息的Photoshop专用格式，利于下次打开再编辑，只有Photoshop支持，易语言不支持。
作业2:
抓取别人制作的漂亮的窗口图片，在Photoshop中加工为自己需要的尺寸的窗口图片，并且保存为一个BMP图片。找到本章的练习目录，其中有一些图片可供练习。
作业3:
将上述制作好的图片导入到易语言程序窗口中，具体方法是修改窗口的“底图”属性，并且将窗口标题去掉。如下图所示。
第二课 图形按钮制作
本课的目标是让大家可以自己动手制作图形按钮。在开始本课之前大家先看看别人制作的一些漂亮的图形按钮。下图是在随书目录中的一个软件的界面，可以看出它的四个按钮有不同的造型，并且鼠标移动到上面及点击后都会有颜色上的改变，如下图所示。
下面是“千千静听”(www.ttplayer.com)的界面图片:
千千静听还可以更换多达150种皮肤，请大家到它的主页上去下载安装。
其他比较漂亮的窗口还有大家常用的QQ等。
那么这些漂亮的按钮是如何制作出来的呢，下面就为大家讲解一下。
一(底图制作
下面的任务是建立一个凸出式样的横式按钮，不仅如此，我们还要让它在易语言中变换不同的颜色式样。
1(新建一个按钮大小为60×20象素的图片，横向长一些。
2(增加一个空白图层，我们准备在这个图层上制作一些效果出来。
用淡蓝色填充一下:填充使用Alt+BackSpace组合键，或用漆桶工具填充。
二(图层效果
3(使用图层面板中的“添加图层样式”按钮，增加“浮雕效果”。
完成浮雕效果后的样子:
三(按钮加字
4(选中工具箱中的打字工具，开始加字，注意字的风格，可以选为无效果，CTRL+T可设置颜色、字体与各种风格。
5(保存为GIF格式或BMP图片格式的文件备用。
此图片为放在图形按钮“正常图片”属性中的图片。
四(不同风格
易语言中，图形按钮组件可以设置不同的图片风格属性，如:
6(改变背景颜色，保存，此图片为点燃图片。
可再选颜色选择器，分别选黄色、深蓝色，作为按钮的背景色。如下所示:
7(再次改变背景颜色，保存，此图片为按下图片。
经过多次更换背景色之后，应该有多张图片了，如下所示。
将上述三张图片分别存入易程序图形按钮的属性中，然后运行易程序，大家就会发现，这个图形按钮随着鼠标的移动及点按进行变化。
五(调色工具
实际上，在上述操作中，大家还可以再多制作一些图层，将新生成的图层设置成不同的颜色，使用同样的效果，这样，颜色固定下来后，就可以改不同的文字存起来，保证每个按钮的底图色基本一样了。
浮雕效果也是可以复制到其他图层中的，可以在图层面板中用鼠标右键点击，可以选中“复制图层效果”，再在新图层中使用鼠标右键点击，选中“粘贴图层效果”，这样一个图层效果就可以放到其他的图层中使用了。
当改变文字后，可以点图层左边的眼睛图标，以让不需要的图层暂时隐藏起来。 字的位置也可以动一动，这样按下时的字与普通情况下的字的位置不一样较好。
可以使用ALT+BACKSPACE组合键，将工具箱中的颜色填充到当前图层。
8(调色工具:CTRL+B，CTRL+L，CTRL+M，CTRL+U
填充颜色是一种办法，当然还有其他的办法可以改变当前图层的颜色，这就是Photoshop的调整菜单。如图所示。
常用的有:色彩平衡/CTRL+B，色阶/CTRL+L，曲线/CTRL+M，色相/CTRL+U。
大家可以选中某个图层后，再使用上述的四个工具试一下效果，只要达到自己理想中的就可以点确定按钮保存下来。
其中，色相/CTRL+U调节中，下方有两个色条，上面的色条表示原来的颜色，下方的色条表示调整色相后的对应颜色。如图所示。
色阶工具与其他工具之间又有连通作用。
如使用色阶工具调整中间色调，相当于曲线工具中的中间色调调整。
这些还需要大家多试一试，并且购买一本正规的Photoshop理论书好好看一看。 作业1:
制作正方形的浮雕图形按钮。
使用渐变工具制作渐变式样的按钮。
作业2:
制作一个圆形的图形按钮，40×40象素。注意SHIFT(规形)与空白键(起点)的配合 作业3:
制作一个圆角方形的图形按钮.(菜单:选择-修改-平滑)
作业4:
将以上制作的按钮图片保存并放在易语言程序中使用。
作业5:
找一个播放器，用SnagIt抓取其中的图形按钮，制作到自己的易语言程序中。
注意透明度的调整，选择后使用菜单:图像?裁切?保存
第三课 工具条图片组制作
易语言中，如工具条组件，超级列表框组件、超级菜单组件等都有一个特别的图片属性，那就是图片组属性。
论坛上也可以找到现成的图片组BMP文件放到自己的程序中。
图片组是这样描述的:将一组同样大小尺寸的图片放在一张图片中，通过统一的尺寸进行分割成单个的图片，以做组件的不同需要。
下面以工具条组件的图片组制作为例，大家来学习是如何制作图片组的。
一(信息面板查看尺寸
从图片组设置的窗口中可以知道，图片组中每张小图片的尺寸都是一样的，因此我们一定要对图片的尺寸有所了解。除了在PhotoShop中新建窗口时可以看到尺寸，在任何时候，我们都可以查看尺寸。
首先可以看到有个信息面板:
二(CTRL+R 标尺操作
使用热键CTRL+R后，就可以在图片子窗口中看到标尺了。再按一次CTRL+R就可以隐藏标尺。如图所示。
三(调整“刻度”单位
标尺上使用鼠标右键点击，可以调整“刻度”单位。
四(窗口标题右键可以弹出“图片大小”、“画布大小”
用鼠标右键点击窗口标题，可以弹出“图片大小”、“画布大小”的菜单。如图所示。
五(举1个工具条的例子
现在由我举第1个工具条的例子，首先新建一个空白窗口，尺寸为80×20象素。如图所示。 意味着我们要制作四个图标，每个图标的尺寸是20×20象素，这样合起来就是80×20象素了。请在图片中平均分配画一些图片，在这里我是写了四个数字，以说明问题。如图所示。 好了，将上述图片保存为GIF或BMP图文件，导入工具条组件。
打开易语言，新建一个易程序，将一个工具条放在上面。
点击图片组属性后，弹出一个对话窗口，在其中点击“加入”，又弹出一个对话窗口，这时选择上述保存的文件名，将单个图标的尺寸设置为20×20象素，透明色就用自动获取吧。如图所示。
加入后的样子如图所示。
确认以上后，回到属性面板，可以看到“图片组”属性中已出现“有数据”字样。点击“工具条按钮”属性。如图所示。
点击后弹出一个对话窗口，大家可以插入一些工具条的按钮，并且选择图片索引。确认后返回。如图所示。
最终运行的效果如下图所示:
从上述操作中可以看出，一个图片组就是一组同样尺寸大小的小图标的集合。
六(第2个工具条的例子
下面，跟着我来制作第2个工具条吧。这个就实用一些了。
首先我们要确定工具条的尺寸，这次做一个30×30象素的工具条吧。在PhotoShop中新建一个空白图片，尺寸为30×30。这次为什么建立这么小的图片，而不是一开始就计算好呢，因为我这里是教大家动态地增加图片组，而不是死板地先设计好尺寸再制作。
好，大家可以调出标尺，再打开我们想要制作图标的图片来，可能其他的图片太大了，可以使用菜单调小一些后，再移动过来;或先移动到这张新建的图片中，再用CTRL+T调整尺寸到正好。如图所示。
通过上述，第一幅图片就建立好了。
下面要扩大画板的尺寸，有两种方法，一种是直接用切割工具可以增加图片大小，第二种方法是用改变画布菜单命令，改变画布大小。
切割工具的方法是:首先选择切割工具，如图所示。
然后框住全部图像，如图所示。
将切割框移向右侧，如图所示。
将切割框左边向左移，直到与图片左边对齐。如图所示。
双击后就完成了切割变大的任务，并且可以看到尺寸已改为60×30象素了。
第二种方法是:使用菜单:“图像”?“画布大小”进行调整。如图所示。
弹出画布大小设计对话窗后，就可以调整具体的宽度了，特别是定位一栏，要将原图片标在左边，指明要扩大的方向。确定后，一个新的尺寸的图片就形成了。如图所示。 调整好尺寸后，就可以再追加一张图片进去了，如图所示。
可以继续追加其他的图片，形成一条。最后保存为GIF文件或BMP文件，在图片组属性中导入这些图片，尺寸设置为30×30象素。如图所示。
七(取透明背景色
吸管工具使用，去背景色。抄RGB颜色，填写在透明颜色一栏中。
八(参考线的使用
在标尺上用鼠标点击后拖动，就可以拖出一条一条的参考线，参考线类似于易语言中的对齐点，并没有实际的象素，也不会打印出来，只是作为对齐用的，这样大家可以每隔一个图标的距离就标识一下，新的图片就好加入了。如下图所示。
九(找素材
上述图片中，大家可以使用图片光盘中的素材，也可以到网上下载一些图片，或抓取别人软件中的图片，利用别人已制作好的ICO文件。
推荐一个很好的网上图片资源网“图酷网”下载。WWW.TUCOO.COM
十(放大、缩小;切割、图像大小、CTRL+T
放大图片使用放大镜，如果要缩小图片，就按住ALT键不放后，再使用放大镜，这时的放大镜就变成缩小镜了。
这里的放大与缩小不是对图像真实尺寸的放大缩小，而是为了方便看清楚而进行的操作，
不改变画布大小。因此，如果放大了，可以使用抓手工具，查看其他的位置。抓手工具的快捷方式是按空格键。
如果要改变画布大小可以有两种以上的方法:比如可以直接改变图像大小，或直接改变画布大小，以及直接用切割工具切割画布。如图所示。
十一(导入、导出EIL图片组文件
图片组源文件是GIF格式，或BMP格式，如果存入了图片组中，就变成了EIL格式，大家可以导出这个EIL格式，好处是以后可以直接导入这个文件，或合并EIL文件，方便操作，或在编程中使用命令动态导入图片组。
这就是为什么要提一下EIL文件的原因，有时你拿到别人手中的源代码，在没有GIF/BMP图片的情况下，也可以将图片组导出为EIL用于自己的程序之中。
作业1:
找一个软件(播放器)制作图片组或抓易语言窗口图片组，并放在自己写的易程序中。 作业2:
练习制作组件中带普通与热点的图片组，并应用在易语言程序中。
作业3:
试将丢失源图的EIL图片组文件还原为BMP图片。
第四课 播放条制作,包装盒制作
一(演示一个制作好的播放进度条
下面的几课将不带大家一步一步地去做了，而是将制作的原理告诉大家，然后大家自己动手来做，有什么不明白的，可以问问周围的同事。
下图是一个MP3播放器的软件，其中播放进度条和音量大小都是使用了多功能条组件。 下面选中多功能条组件，查看它的属性，可以看到，后台、前台、中台的图片组中都有数据。再点一下属性按钮，可以看到一一对应的关系:
后台对应的是最下方的底色图片，前台对应的是可改色调的那一部分，而中台表示的是中间的按钮图片组。这样一来，大家就应该知道如何加工制作自己的多功能条了吧。 下面是音量大小图片组属性所对应的图片示图:
作业1:
自己制作一个播放进度条，使用多功能条组件制作播放进度。
大家有了以前几课的基础，可以自己制作出一个使用多功能条组件制作的播放器的播放条来。有条件的写上代码。
二(演示制作一个包装盒
下面将要为大家讲解的是Photoshop的滤镜功能。滤镜，学过摄影的人都知道，是一种加在
照相机镜头前面的玻璃镜子，可以有各种颜色，以及可生成曲折图像，各种叠加效果等。在Photoshop中的滤镜就是为图片增加效果的一组功能菜单。如图所示。
下方的两个菜单是第三方厂家为Photoshop写的滤镜插件。在此大家可以上网找一找这些插件，同时打开一张无用的图片，用上述滤镜菜单的功能来实现你的想法，有时书上会列出一些效果来，其实只要你自己每个都尝试用一下，就自然知道效果是怎么样的了。 下面为大家讲一些特别的滤镜。一个是“3D变换”，一个是“抽出”功能。
大家看一下下面的图片，是一张包装的效果图，在这里，要学习的除了“3D变换”菜单，还可以学到如何使用[CTRL+T]进行图片的变形操作。
菜单如下图所示。在有些Photoshop的学习版中可能没有这个菜单，这样大家需要找完全安装版才行。
首先新建一个窗口，再将白底色变灰一些，如图中箭头所示。
使用菜单“3D变换”后弹出如下对话窗口。如图所示。
选择左侧的立方体工具，然后在中间图中拖出一个立方体。
接下来使用“直接选择工具”，将立方体调节一下，如图所示。
再使用“轨迹球工具”，将角度对直，如下图所示。
点“确定”按钮后，就生成了一个比较漂亮，带有透视效果的立方体盒子的形状了。如图所示。
接下来设计一张盒子的封面图片，如果自己没有能力设计，可以用网上的一些现成的图片贴上去即可。
下面是提供了一个软件设计的封面效果，大家在设计时可以再漂亮一些。
将上述封面图设计好后，可能是多图层的，这时可以合并所有图层，将封面部分移到包装盒的图片上。使用CTRL+T将调节框显示出来，然后再按住CTRL键不松，用鼠标拖动四个角的夹点，实现变形操作。如图所示:
然后将侧面图也加上去。
加好后，再将图片加深一些，以示区别。
最后，还可以修改一下边缘有问题的地方，删除这些地方，再加上一个阴影块，就制作完成了。如图所示。
上述图片大家在发布软件时，可以作为软件介绍图上传到网站上。
作业2:
按以上步骤，自己制作一个包装盒。
三(演示抠图
有时，一张单图层的图中，我们想利用其中的一块，要将这个图抠出来，有几种办法，有时可以使用套索工具，一点一点地圈出来，也可以使用魔术棒工具选择，或使用下面介绍的“抽出”工具，可以很方便地抠图出来。菜单如图所示。
使用“抽出”工具只需要简单地三步就可以了:
第一步:使用“边缘高光器”工具，将需要抠图的轮廓标识出来，这里如果是画直线，可以按住SHIFT键不松再划，可以实现画直线的效果。如下图所示。
第二步:使用“填充”工具，将要取的图标识出来。如下图所示。
最后按下确定按钮“好”钮，图片就被自动抠出来了。如下图所示。
这种抠图，一般是底图没有杂色的好抠一些，如果有杂色，那就只能用其他的方法抠图了。 作业3:
找一张能够进行抠图作业的图片，然后将内容抠出来。
四(讲一下工具盘
本书仅对为易语言程序配图时用到的Photoshop工具为重点介绍，他们是:
矩形工具
圆形工具
套索工具
切割工具
印章工具
文字工具
缩放工具
吸管工具
渐变工具
漆桶工具
前景色/背景色
模式切换
跳至ImageReady
下图是工具盘的列表。下面我们简要介绍这些工具的应用方法，并着重讲解一下这些工具在电脑制作照片时的实战应用与设置，而对于其他的工具、功能选项，本节从略。
这些实战应用与设置在电脑照片制作中是十分有用的，而本节中没有讲到的功能一般是电脑照片制作中不常用的设置。读者一定要在实际使用时多练习使用，举一反三，总结出自己的经验来。对于不常用的设置请参阅Photoshop自带的帮助文件或专用书籍。
图1-35 工具盘
1(“矩形工具/M/ ”
“矩形工具”可以选择一个矩形的区域，并且可以在这个区域之圆形工具面板
当样式选基为“约束长宽比”时:1:1时拉出正圆;
1:2或2:1时拉出有比例的椭圆。
当按住,Shift,键不松手，用鼠标拉出的选区也限定为正圆形。同理“矩形工具”也是这样。
3(“切割工具/C/ ”
“切割工具”在电脑照片制作中也有着广泛的应用，它不仅可以将图片进行裁剪，而且可以摆正一张放歪的图片。因此一定要用它的画布切割、旋转画布的功能。切割面板如图1-38所示
选项中一般不选固定的宽度与高度，也不设定分辨率。
在电脑制作照片中的应用:一般用来切割画布。可将画布切小，切大。还可以摆正一张放歪的图片。
图1-38 切割工具面板
4(“移动工具/V/ ”
“移动工具”可以让我们为易语言程序配图的制作中自由地调节操作层移动工具面板
5(“套索工具/L/ ”
“套索工具”有“多边套索工具/L/ ”、“手绘套索工具/L ” 和“磁性套索工具/L ”三种。 为易语言程序配图的制作中，“多边套索工具”是最重要的工具之一，当我们勾选区范围时，一定首先会想要用这个工具，这个工具可以勾取一些照片上重要的部位进行移动、上色等操作，还可以进行羽化，使制作更自然;所勾下来的选区还可以保存下来，让下次能够再被调用。操作面板如图1-40所示。
图1-40
我们一般选用“多边套索工具”为主要的制作工具，“手绘套索工具”不易掌握，容易将线条勾歪了，而“多边套索工具”定位很好，当我们说到“勾线工具”时，大家一定要采用“多边套索工具”来进行制作，除非本书中提到别的“勾线工具”。
“羽化”值为0时，所勾选的边缘正齐 ，为1以上时边缘过渡。
{勾后羽化}的概念:即是当有一个选择区后，我们再用,Ctrl+ALT+D,再次产生羽化效果，即是{勾后羽化}，它不同于,勾前羽化,，{勾前羽化}即在用“勾线工具”之前就设置好大于1以上的羽化值，而{勾后羽化}不论事先是否设定有羽化值。
在为易语言程序配图的制作中，一般采用{勾后羽化}，这样的好处就是可以自由控制羽化值，比{勾前羽化}方便。
6(“画笔工具/B/ ”
在Photoshop 6.0以前的版本中，“毛笔工具”与“喷枪工具”是分开的两个工具，现在7.0的
版本将这两个工具合并为“画笔工具” 了。
“画笔工具”模式为“正常”时，它可将不均匀的色彩平铺，在制作去除划痕的图片时用到，背景上有麻点也能用它喷。“画笔工具”面板如图1-41所示。
图1-41 画笔工具面板
不透明度:在1%~100%之间，值越大，颜色越深。
“画笔工具”的模式为“颜色”时，在电脑上色制作中起到了举足轻重的作用，一般在为照片上色时都会用到这个工具，
当模式为“颜色”时，当为黑白照片上色使用。画笔压力大小一般用35-100之间。
7(“印章工具/S/ ”
“印章工具”在为易语言配图片的过程中的地位是非常重要的，使用的频率很高，它有时可以代替其他的工具进行独立制作。比如代替“勾线工具”直接复制，如果选项为“颜色”，
可以代替“画笔工具”直接上色，但我们还是根据实际需要只用“印章工具”的复制功能，而用其他工具进行补充。印章工具面板如图1-42所示。
图1-42 印章工具面板
“印章工具”专门应用于照片的修复工作。模式一般选“正常”选项，可选项是“颜色”。 选项“用于所有图层”前面如果不打勾，只能在本图层上操作，在本图层上采样复制。如果前面打勾，则可以从所见到的所有图层中取样，而且所取的样图会出现在当前图层上，而其他图层图像没有变化。我们在制作中一般是取消勾的，但偶尔也会使用。
画笔直径大小一般选择35-100之间。在实际工作中是根据要修复区域的大小来选择笔尖压力的。
重要提示:“画笔工具”和“印章工具”都有“正常”选项和“颜色”选项。一般情况下，上颜色是用“画笔工具”而不是用“印章工具”。“印章工具”仅在“画笔工具”上色时漏上了色彩时，才利用“颜色”选项补充上色。“正常”选项一般是用在复制时使用。
8(“修复工具/J/ ”
“修复工具”是Photoshop 7.0新增加的工具。
在制作图片中，将“修复工具”当作“印章工具”的一个补充。在实际使用中，对于修补一些小的杂点，以及细的划伤，效果非常好，且保留了原照片上的退晕纹理，修补后不会模糊。 虽然这个工具可以智能化地将修复的边缘融合，但不能修补大片的区域，否则变化的结果将不是理想中的结果。建议只修补小范围的杂点或图片背景等不重要的地方。
图1-43 修复工具面板
9(“修补工具/J/ ”
“修补工具”是Photoshop 7.0新增加的工具。
图1-44 修补工具面板
在图片加工中，将这个工具作为“印章工具”的补充，对于修理较大片的破损时，效果较为理想，可以智能化的填充大片破损，使还原。
10(“橡皮擦工具/E/ ”
“橡皮擦工具”一般很少用于程序界面设计，如果程序配图需要去除，一般还是用套索工具勾出来后删除。擦皮擦面板如图1-45所示。
图1-45 “橡皮擦工具”面板
模式选项一般放在“画笔”选项上，共有三个选项:画笔，铅笔，块。
笔尖不透明度一般为35-100。可根据需要确定。
11(“背景橡皮擦工具/E/ ”
这个工具可以自动计算边界的色差，将背景擦除。作为选择范围的一个非常好的补充，只
是速度上会慢一些。
图1-46 背景橡皮擦工具面板
12(“魔术橡皮擦工具/E/ ”
这个工具可以自动计算边界的色差，并且一次性地将背景去除，速度非常快，但有时会擦不完全。
图1-47 魔术橡皮擦工具面板
13(“柔化工具/R/ ”
“柔化工具”一般在图片制作中是用做柔化边缘，如果有小的麻点也可以用它来淡化。柔化工具面板如图1-48所示。
模式选项一般采用“正常”选项。
选项中“用于所有层”前面没有打勾时，操作与其他图层无关，只模糊本图层;当有勾时，被模糊的其他图层也印到本图层上，只是操作还是在本图层内，其他各图层并没有被受影响。
图1-48 柔化工具面板
14(“指移工具/R/ ”
“指移工具”有的书也翻译成“调和工具”或“涂抹工具”，我们认为翻译成“指移工具”比较合适。
这个工具易产生模糊，较少使用。指移工具面板如图1-49所示。
“指移工具”不能经常使用，否则会将图片移模糊了。
图1-49 指移工具面板
15(“增亮工具/O/ ”
作用:增加图像局部的光线。工具面板如图1-50所示。
范围选项有:“暗调”，“中间调”，“高光”，一般用“中间调”。
图1-50 增亮工具面板
16(“加深工具/O/ ”
另译为:“遮光工具”。
作用:加深图像局部的光线。工具面板如图1-51所示。
选项有:“暗调”，“中间调”，“高光”。一般使用“中间调”。
加深眉毛时先用“中间调”选项加深，再用“高光”加深。
图1-51 加深工具面板
大家可以调出一张图片，然后分别用上述的“暗调”，“中间调”，“高光”三种形式进行加亮或加深，观察一下有什么区别。“海绵工具”也是同样可以自己试验看看。
17(“海绵工具/O/ ”
作用:去除局部的饱和度，或去除眼睛中的红色。工具面板如图1-52所示。
图1-52 海绵工具面板
在拍照中，会产生红眼的毛病，其实只要去除眼睛中的红色，就实现了去红眼的毛病。
18(“渐变工具/G/ ”
另有译为:“梯度工具”。
作用:形成不同风格的过渡效果。可用于更换背景等。如图1-53所示。
在风格下拉菜单中，我们看到，有很多的形式可以形成风格迥异的制作效果。
图1-53 渐变工具面板
19(“文字工具/T/ ”
“文字工具”可以为照片加上纪念性的文字。
图1-54 文字工具面板
20(“缩放工具/Z/ ”
缩放工具象一个放大镜一样，它不对照片进行改变，只是将图片的细节可以放大，也可以缩小以观察整体的效果。缩放工具面板如图1-55所示。
可选项中“调整窗口大小以满屏显示”如打勾，则窗口随着图片大小变化而变化，如果不打勾，则窗口不变而图像变化。在旧照制作过程中，最好打勾。
图1-55 缩放工具面板
五(选择区和通道
下面介绍Photoshop中最重要的三个概念:选区，图层，通道和路径。
1(什么是选区
先认识一下矩形工具吧，这个工具可以框住图片中的某一个区域。这个区域就是选区。 如图所示。
2(什么是图层
如果你在上述的矩形选后，使用Ctrl+J键后，就会生成一个新的图层，大家可以使用移动工
具移动新生成的图层。如图所示。
图层的概念也可以理解为以下，一个窗口是一个最下层，上层有按钮，或分组框，分组框上层有编辑框与标签组件，这样一个有层次的图片就是图层的概念。大家可以分别选择不同的组件，也就是相当于选择了某个层。
3(什么是通道
如果图片模式是RGB模式，那么通道面板中就显示这三种颜色及合成色的通道。如图所示。如果图片模式是CMYK模式，那么会显示四个单色通道和一个混合通道。
通道面板
上述选区如果被保存下来，就是一个通道。基本上在本书中不涉及通道的概念，不过如果你要学精一些，这几个概念是一定要领会的。因为通道的边缘不一定是很整齐的，他的作用相当于你所穿的衣服，只有你的脸被显示出来，未显示的部分是身体，身体被蒙住了。因此有时也称通道为“蒙板”。
保存选区为通道的菜单为:“选择”?“存储选区”。取出通道的菜单为:“选择”?“载入选区”。如果保存了选区，就可以在通道面板上看到多了一个通道。
通道的正规解释是:光线通过的地方。
大家也可以理解为以下:你看如果一个窗口中有一个选择夹，而此选择夹有众多个子夹，当程序运行时只能显示其中一个子夹，这时选择夹的范围就可以表示为一个通道，因为你选择子夹时只有夹内变切换显示了。因此一张图片可以有任意个通道。
4(什么是路径
选区可以通过菜单转换为路径，如图所示。
路径就是作用经过的地方，相当于你走过的路，或画过的线的路径。
他与选区不同，是可以不用以封闭的形式存在的。如一个开口的路径，如图所示: 创造这种路径可以用钢笔工具生成。但有时也可以由选区转换。
六(路径
下面将演示如何用“钢笔工具”的路径制作一个心形，大家可以仿照着作一个同样的，同时找一张人物图片，用“钢笔工具”的路径将人物的形状勾出来。
先选择“钢笔工具”，如图所示。
这时要注意选项面板中，要选第二种绘图模式:
接下来，就可以在图片中用这个钢笔工具画线了，大家不要用拖动鼠标的方式画，跟着我
用鼠标将关键点点出来即可，如下图所示:
下面将按住ALT键不松手，鼠标在左右夹点上拖动，转一下，就可以制作出较为圆滑的心形图案来了，如下图所示:
好了，大家可以在使用中体会这个工具是如何使用的了。同时还要告诉大家的是:这个路径是可以转换为选择区的。如下图所示。
也可以描边路径。如下图所示。
作业4:
用路径勾出一幅图中人像的轮廓。请多找一些图片练习勾图，勾取轮廓能让你熟练掌握路径工具的使用方法。
作业5:
用套索工具勾出一幅图中人像的轮廓。请多找一些图片练习勾图，勾取轮廓能让你熟练掌握套索工具的使用方法。
第五课 菜单、滤镜
一(保存与图形格式
如果要保存Photoshop中的图片成为一个文件存放，那么可以使用 Photoshop的“文件”?“存储”菜单，如图所示。
Photoshop的“文件”菜单
其中“存储”子菜单可以保存当前图片，如果以前已存过，就直接保存，如果以前没有保存过，就会弹出输入保存图片名的对话框。
“存储为”子菜单可将当前文件另外取名保存。
“存储为Web所用格式”可以保存为网页文件格式，如GIF或PNG格式。
易语言可以使用到的格式有:BMP、JPG、GIF图片格式。
其中，BMP是微软提供的通用图片格式，文件的尺寸较大。
JPG格式是有损压缩图片格式，有12种压缩比可供选，如果压缩率小的话，图片会失真严重，图片尺寸较小，建议压缩比为8-11之间。
GIF格式是网页图片格式，支持256种颜色及网页动画格式。文件尺寸较小，保存起来基本不失真。
例如，将一张打开的图片存为BMP格式，那么使用Photoshop菜单的“文件”?“存储为”命令。弹出一个保存对话框，如图所示。
存储为BMP格式图片
给图片起一个名字，然后点击“保存”按钮，将会弹出“BMP选项”对话框。如图所示。 “BMP选项”对话框
其中有一些选项，如“文件格式”是表示保存的图片将适用于哪一种操作系统，默认是Windows操作系统。深度是指色彩的表示位数，一般选默认的24位就可以了。
再将以上图片存为另两种图片格式进行比较一下，如存为JPG格式，会弹出“JPEG选项”对话框，如图所示。
存储为JPG格式图片
“JPEG选项”对话框
其中“品质”表示压缩比，在12之间，建议选8-11之间较好。格式选项默认是“基线”，这是标准格式。“大小”栏中是表示当下拉框中所选的网络传输时的传送时间。
如存为GIF图片，会弹出“索引颜色”对话框，如图所示。
存储为GIF图片格式
索引颜色对话框
GIF选项对话框
大家分别存储后，可以显示这三个文件的大小，比较一下，如图所示。
文件列表
一般推荐大家使用GIF和JPG格式的图片为易程序配图即可，只有在某些特别的场合下，才使用BMP图片，如“置外形图片()”方法中的第2个参数需要提供统一的颜色作为透明颜色，因此JPG图片格式会改变色彩的原色，在这时只能用BMP或GIF这样的图片格式。程序代码如下所示。
在讲ICO图片制作过程中。也有可能用到BMP图片格式。
PSD格式是Photoshop的图像专用格式，它可以保存图层信息，在后述章节的操作中，本书将经常以这种格式为基本保存格式，存放设计时图片，设计完成后再另存为BMP、JPG、GIF图片格式。关于图层的概念，后面就会介绍。
二(预置
在Photoshop中，有一个预置菜单，这个菜单可以为PhotoShop配置一些项目。如图所示。 下图中即是配置最大保存的历史记录数，如果数字大，就保存的步数多，以后可以用CTRL+ALT+Z进行无数次的恢复，或用CTRL+SHIFT+Z进行无数次的恢复。如图所示。
下图是将暂存盘预置到D盘等，这是因为Photoshop打开一张图片需要五倍于此图片大小的空间作为数据交换，如果与操作系统一个盘符，就会速度很慢，因此要尽量将暂存盘设置一个好一些的硬盘中，以打开尺寸较大的图片文件。同时本配置需要重启后才能生效。如下图所示。
三(常用图像模式
Photoshop的图像模式非常多，为简单起见，本书仅对于易语言编程中所用到的图像模式进行介绍。
使用Photoshop菜单“图像”?“模式”可以查看所有的图像格式，如图所示。 图像模式菜单
在易语言编程中，只使用到“索引颜色”和“RGB颜色”两种模式。
其中“索引颜色”表示将图片中所包含的色彩以索引表的形式保存，BMP、JPG、GIF三种图片格式都可以采用这种方式保存。GIF图片格式必须使用本种模式保存。
“RGB颜色”模式是采用红、绿、蓝三种色叠加颜色表示。
四(演示几个滤镜
1(演示模糊滤镜
下面演示了模糊滤镜中的“高斯模糊”滤镜的使用效果:
使用前 使用后
2(演示锐化滤镜
使用前 使用后
3(演示马赛克滤镜
使用前 使用后
作业1:
大家找一张图片，在上面使用每一个Photoshop滤镜，然后观察使用后的效果。记住一些自己喜欢的滤镜。大家再看看，哪一些滤镜可以用于易语言的编程中,
作业2:
本课根据以前所有所学，制作一个漂亮的软件界面出来。软件可以取自己以前所制作的内容。 作业3:
找一些小软件进行界面的美化。
第六课 ICO图标、鼠标光标制作
对于制作程序的图标来说，大家可以找一些现成的图标，不过一些好的图标别人使用了你再用，有版权的问题，而且没有个性，最好自行设计一个配合自己的图标。这就需要另外使用到图标制作的专用软件，与Photoshop配合才行。
这里向大家推荐两款图标制作软件，都是可以制作ICO、CUR、ANI图标的综合工具。 Microangelo，目前的版本是6.0，大小约7MB。这是一款老牌图标制作软件。但体积过于大了些，工程文件也是分开放的。在天空与华军都可以下载到。MicroAngelo 是一个可编辑和管理光标的工具，可让您轻易地浏览、管理和编辑 ICO、ICL、EXE、DLL 文件中的图示文件，支持单色，16 或者 256 颜色及 8×8 到 64×64 的图素尺寸。还能调整设定你的桌面，如布景主题、移除桌面图示捷径的箭头等。
还有一款是:AWicons Pro V9.4汉化版，大小2.6MB。这是一个综合的图标工具，只有一个主程序，而且是中文菜单，非常好用。Awicons 是一个搜索,创建,编辑,导入/导出,管理图标,光标,和小型图片的强力工具!具体功能如下:1.全面支持Windows XP的图标!2.支持包括ico,
cur, ani, png, gif, bmp, jpg在内的多种文件格式!3.支持所有的颜色格式!包括mono, 16, 256,
true-color, true-color with alpha!4.最大可以创建128 × 128 大小的图标!5.可以自动对硬盘里的图标,光标和图片进行扫描!6.自带多种画笔,多种强力虑镜,使你的编辑创建更加轻松自如!7.支持直接从dll,EXE文件中提取图标!8.支持图标库!9.等等。
一(制作ICO图标
1(认识Awicons软件
Awicons汉化版软件的界面很漂亮，打开后如下图所示:
这个软件有很多辅助的面板。其中有一个面板可以打开ICO包文件:
大家也可以在这里面选取一个现成的使用，不过不推荐哦。
2(制作一个简单的ICO图标
下面的第一个任务就是制作自己个性的图标了。
制作1个ICO图标，符合易语言要求的图标只需有以下条件:具有32×32大小256色，16×16大小256色的。最好也带个48×48大小的。
例如，你制作了一个小软件，软件的界面如下所示，你想直接将这个软件界面制作成图标: 现在在Photoshop中，建立一个48×48像素大小的新图片:
将窗口抓图下来，粘贴到这张空白图片上，并且调整大小为尺寸。
缩小的图有些模糊哎，可以用清晰化滤镜清晰化一下:
然后，[CTRL+A] 全选，进入图标制作工具，增加三个图标:32×32大小256色，16×16大小256色，48×48大小256色。将这个图粘贴到48×48图之中。
怎么样，这样一个图标就制作出来了。
下面，回到Photoshop中，将上述图标的尺寸缩小为32×32大小的，如图所示: 完成后，如果还是感觉图片有些模糊，也可以用清晰化滤镜处理一下。
然后重复以前的步骤，将这个图标粘贴到图标制作软件的32×32大小的图标内。如图所示。
好了，接下来还是在Photoshop中改图标大小为16。如图所示。
然后将图片存到16×16大小的图标工具中:
最后的工作就是保存结果了，要存为一个ICO文件，如图所示。
好了，图标就保存下来了。
3(导入易语言中查看效果
下面大家可以在易语言中导入上述制作好的图标。
打开一个易语言程序，然后点菜单:
在弹出的对话框中，将图标加入进去。
这时窗口中已看出图标的样子了。
大家也可以直接加入的窗口的“图标”属性中。
也可以编译后看可执行文件在电脑中的效果:
大家在以上制作中，也可以使用画笔工具，自己描添增改。
二(制作CUR光标
有时，我们看一些软件中，鼠标的形态变了，变得非常漂亮，如下图所示。
一个是手形光标，一个是帝国时代中的光标
这种光标图标文件格式是CUR格式，可以导入到易语言中使用。
下面就跟着我们制作吧。
1(制作1个CUR光标，保存为CUR光标
可以打开一个已有的CUR光标改改，也可以自己新建一个CUR光标。
绘图的过程我就不说了，与制作ICO图标的过程差不多的。
2(可直接在易程序组件的“鼠标指针”属性中添加
在易程序某个需要改变鼠标形态的组件的“鼠标指针”属性中添加。
注意:以前版本的易语言不支持彩色的鼠标指针，现在已全面支持了。
3(可以用API调用代码动态加载某个光标到易程序指针中
三(制作ANI动画光标
有时，我们看到的鼠标指针是动态的，这种鼠标指针是ANI动画光标。
下面，跟着本书学习ANI动画光标的制作方法。
1(制作1个ANI动画图标，保存为ANI文件
大家可以打开一个现成的ANI动画光标文件，也可以自己新建一个:
在这里，我打开了一个现成的动画光标文件，大家可以看到，小猪为什么会动，是因为有
一组形态不一样的图标在里面循环显示，上一张图中小猪是手放下不跳动的，下一张图片是
手向上，并且向上跳动的。
大家试一下，加两个不同的图标，保存后的效果如何。
2(可用API动态加载动画光标到易程序中
ANI动画光标文件应用在易语言中，必须使用API加载。代码如下:
作业1:
为自己的易程序制作一个有特色的ICO图标，并且加入到易程序中。
图案可以在自己以前的程序中找，也可以在网上找一个BMP图片或JPG图片，缩小了即
可。 作业2:
制作一个有特色的CUR图标。
作业3:
制作一个有特色的ANI图标。
第七课 用ImageReady制作GIF动画
有时，窗口只需要用到GIF动画形态的，活跃了软件死板的画面效果。制作GIF也是Photoshop的专长，ADOBE公司还提供了一个另一个网页制作软件ImageReady，一同配合起来制作。
一(动画鼠标与GIF动画的实质
Photoshop工具箱最下方有一个切换到ImageReady的按钮。如图所示。
点击后就可以打开ImageReady制作GIF动画了，这个工具同时也是可以制作网页的。 下面在ImageReady中打开一幅GIF动画文件，可以看到，GIF动画是由很多帧图组成的，在显示时就依次播放这些图片，就实现了动画的效果，与ANI动画光标的执行原理是一样的。
二(由Photoshop向Imageready引用
ImageReady的操作习惯基本上与Photoshop差不多，为何会这样呢，原来，Photoshop只负责平台设计，但可以制作多图层的文件，滤镜也比较多，而ImageReady负责动画设计与网页设计，可以利用Photoshop制作好的多图层文件，但滤镜少一些。看来是各有千秋呀。 从Photoshop中向ImageReady切换可以点击工具箱最下方的按钮。如图所示。
当然，从ImageReady中切换到Photoshop中，也可以使用ImageReady工具箱下方的按钮进行切换。如图所示。
三(制作第一个GIF动画——简单改动颜色.
直接在ImageReady中使用新建命令，新建一个100×100像素的图片。如图所示。
多复制几个图层，然后画一些圆、三角、五角星什么的。如图所示。
在动画面板中点击新建帧的按钮，新建多个帧。
然后激活第1帧。只设置显示其中第1个图层;
激活第2帧，只设置显示其中第2个图层;
激活第3帧，只设置显示其中第3个图层。如图所示。
最后，点击动画面板下方的播放按钮，就可以看到播放这个动画文件的效果了。大家可以看到，动画会依次显示圆、三角、五角，这样循环下去。如图所示。
其实，大家只要改改颜色，移动一下位置，就都可以形成动画了。
四(如何保存为GIF动画文件
可以使用菜单命令保存这个GIF动画图片了。如图所示。
五(制作蝴蝶GIF动画
这次，我们是在Photoshop中操作的。
在Photoshop中，打开一张蝴蝶的图片，同时将这张图片缩小，缩小到自己想要图片的大小，如:50×35像素。如图所示。
这时我们看到，只有一个图层:
接下来再复制一个图层，然后用CTRL+T组合键，将左右拉小一些。如图所示。
再复制一个图层，然后用CTRL+T组合键，将左右拉小一些。此步骤多做几次，直到很小为止。如图所示。
好了，下面切换到ImageReady中，增加四帧。如图所示。
调整每一帧只显示其中一个图层。保存前可点播放按钮看一下效果，最后就可以保存为GIF动画文件了。
在Photoshop中的多图层文件，大家可以保存为PSD文件备档。以备下次再打开修改制作之用。
作业1:
自己制作一个GIF动画，保存为GIF动画文件。例如:蝴蝶的制作
作业2:
在易语言中使用这个GIF动画。即导入到图片框组件中，并且将图片框组件“播放动画”属性设置为真。
第八课 用Photoshop制作网页
软件设计好了，应该发布到网上供大家下载哦，一个好看的网页也是你的软件的门面之一哦，网页显得专业一些，下载注册使用的人也会多一些。除了可以用上述制作一个包装盒来显示你的产品型态，还可以直接用Photoshop制作HTML网页文件，下面看看是如何制作的吧。
一(进行网页设计
网页怎么安排，怎么设计，那是你自己的事，一般可以参考其他现成的网站格局。 在Photoshop中将网站最终形成的样式都表现出来。
为了照顾800×600屏幕大小的用户，你的网页的宽度不能超过800像素。如果不考虑那么多，也不要超过1024像素。
如下图是在Photoshop中设计好的易乐谷软件主页的全图。尺寸为:800×1500像素。 下图是某公司的网页。尺寸是900×1900像素。
大家感觉好的话，可以找到很多设计上有独到之处的网站，将LOGO和软件小图换为自己的软件图片，就可以拿来用了。
二(切割
下一步最重要的环节就是为你的产品下载页，或介绍页增加超链接。在这里大家可以使用Photoshop的切片工具。
下面用这个工具将需要添加超链接的地方切出来。如下图所示。
切片时注意，从超链接的左上角拖动鼠标到右下角再松鼠标。可以对齐切片。
三(添加超链接
上述切片好了之后，就可以加入超链接了。在你想要添加超链接上方点击鼠标右键，会弹出一个菜单，选其中的“编辑切片选项”。如图所示。
下面会弹出一个“切片选项”对话框，在第二项URL标签后写上你要添加的超链接，可以是软件下载地址，或软件的介绍HTML页面网址。如图所示。
四(存为HTML文件
下面，要将PSD图片存储为WEB所用格式，即HTML格式，使用下图中的菜单命令: 点击菜单命令后，将弹出一个对话窗口。如图所示。
直接点存储按钮后，就可以保存了，这时又弹出一个存储的对话框，要求输入一个文件名，请将文件名写为index.html文件，这是默认网页首页的文件名，大家也可以取其他的名字。如图所示。
按保存按钮后，就可以保存在一个目录中了。大家看一下保存后的样子，index.html是网页文件，images目录是所使用到的图片存放目录。如图所示。
五(添加动画
大家可以打开上述保存的images目录，可以看到是一个一个的GIF文件，大家如果想再制作成动画GIF的，也可以在这里改其中的普通GIF为动画GIF文件。如图所示。
六(改动HTML文件
完成以上后，就可以在IE浏览器中看一下效果了。
结果可能是图像太偏左了。这时可以将index.html文件改名为TXT文件，然后用记事本打开，改其中的一行，如图所示。
原句:
<TABLE WIDTH=902 BORDER=0 CELLPADDING=0 CELLSPACING=0>
改为:
<TABLE WIDTH=902 BORDER=0 align="center" CELLPADDING=0
CELLSPACING=0> 以上改动保存后，再还原为index.html文件名即可。
将以上index.html文件及目录全部上传到你的网页空间中，就可以查看网页效果了。同时如果有多个页面，也可以这样制作，然后用超链接将他们链接起来。
大家设计好以上网页后，也可以嵌到易语言的“超文本浏览框”组件中打开哦，很漂亮的～ 设计网页有很多种工具与方法，以上方法可能并不适合你，也可以选用其他工具制作。 作业1:
自己参考上述内容设计制作一个网页。
将上述网页用易语言打开显示。
结束语
Photoshop实在是博大精深，如果确实想要学好它，应用于易语言中，还需要多下一番苦功夫的。有机会大家可以购买市面上有关Photoshop的专业书籍，进行系统的学习。 最后，祝大家学有所成，制作出美观、漂亮的软件来。
范文四：图形界面设计
图形界面设计 -1
一、单项选择题 (每小题 1分 )
1. 在以下 Swing 的类中,属于容器的是 ( )
A.JApplet B.JButton
C.JTextArea D.JMenu
2.以下是关于 FlowLayout 布局组件排列顺序的叙述,正确的是 ( )
A .从上到下排列 B .从左到右排列
C .从下到上排列 D .从右到左排列
3.要为程序的子窗口设定一个由字符串 s 指定的名字,可以采用的代码是() A . JFrame(s) B. window(s)
C . new JFrame(s) D. super(s)
4. 以下不属于
... AWT 库中定义的类是 ( )
A.Component B.Container
C.Images D.Graphics
5.在 Swing 中,它的子类能用来创建框架窗口的类是 ( )
A . JWindow B . JFrame
C . JDialog D . JApplet
6. 以下关于 AWT 与 Swing 之间关系的叙述,正确的是 ( )
A.Swing 是 AWT 的提高和扩展
B. 在写 GUI 程序时, AWT 和 Swing 不能同时使用
C.AWT 和 Swing 在不同的平台上都有相同的表示
D.AWT 中的类是从 Swing 继承的
7. 在以下 Swing 组件中,能为它指定布局管理器的是 ( )
A.JScrollBar 对象 B.JMenuBar 对象
C.JComboBox 对象 D.JDialog 对象
二、填空题 (每小题 2分 )
1. 在 Swing 中,带有滚动条的面板的类名是 ______。
2.一个基于 Swing 的应用程序可能在任何平台上都会有相同的 ______。
3. _________布局使容器的多个组件拥有同一个显示空间,某一时刻只能显示一个组件。
4. 在 Swing 中,面板有两种,一种是 JPanel ,另一种是 _________。
5. 对话框的默认布局是 _________。
6.某程序用代码“JTextField text=new JTextField () ; ”创建了一个文本框,并对这个 文本框注册了监视器,则在监视器处理方法 actionPerformed(ActionEvent e)中,判定是 在这个文本框上发生事件的条件表达式是 __________。
7. 在实现接口 ActionListener 的方法 actionPerformed()中, 常用的有两个获得事件源的 方法,它们是 getActionCommand()和 _________。
三、简答题 (每小题 3分 )
1. 请写出空布局安置组件的两个步骤。
2. 在 java.awt.event 中, 用来检测并对事件做出反应的模型涉及三种对象。 请写出这三种 对象。
3. 请写出程序处理文本框输入结束事件 (回车) 添加监视器的方法, 以及监视器类必须实现 的接口方法。
4. 请写出 JFrame 、 Frame 以及 Window 这三个类的继承关系 (按照从父类到子类顺序排列 ) 。
5.请写出 Java 语言编写事件处理程序的两种主要方案。
6. 请写出将文本区 text 放置于滚动面板 jsp , 并将滚动面板 jsp 添加到 JFrame 窗口 myFrame 的 Java 语句。
四、程序填空题 (每空 2分 )
1. 某小应用程序窗口中有一个文本框, 一个 8行 10列的文本区以及一个按钮, 点击这个按 钮时,在文本框中输入的内容会追加到文本区中。
import java.applet.*;
import javax.swing.*;
import java.awt.event.*;
public class TextAPP extends Applet implements ActionListener {
JTextField input;
JTextArea display;
JButton append;
public void init() {
input = new JTextField(10);
display = new ;
append = new JButton(
add(input);
add(display);
add(append);
input.requestFocus();
display.setLineWrap(true);
append.addActionListener(this);
}
public void actionPerformed(ActionEvent e) {
display. (input.getText() +
}
}
2.某小应用程序窗口包含有文本区 dispArea ,以及一个带文字“追加”的按钮。当点击这 个按钮时, 程序弹出一个输入信息的对话框, 并将对话框中输入的内容追加到文本区中。 以下是其中相应“追加”按钮事件的方法。
public void actionPerformed(ActionEvent e){
if(e._____________.equals(
String result=(String)JOptionPane.showInputDialog(null,
JOptionPane.PLAIN_MESSAGE, null, null,null);
dispArea.__________(result +
}
}
3. 某程序的界面包含一个文本区 text1、 一个文本框 text2和一个按钮 button 。 实现在文本 区中输入整数序列后, 点击按钮, 程序响应按钮事件, 累计文本区输入的整数序列, 并将总 和输出在文本框中。这里给出的是其中相应按钮事件的方法。
public void actionPerformed(ActionEvent e) {
int sum;
if (e.getSource() == button) {
String s = text1.______________;// 获取 text1中的信息
StringTokenizer fenxi = new StringTokenizer(s);
int n = fenxi.countTokens();
double a[] = new double[n];
for (int i = 0; i < n;="" i++)="">
String temp = fenxi.nextToken();
a[i] = Double.valueOf(temp).doubleValue();
}
sum = 0;
for (int i = 0; i < n;="" i++)="">
_______________________________;
}
text2.setText(
}
}
4. 以下程序创建了一个窗口, 窗口内设置一个按钮, 单击该按钮, 其标题会显示单击的次数。 import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class BottonGUI {
public static void main(String[] args) {
CountButton myButtonGUI = new CountButton();
myButtonGUI.setVisible(true);
}
}
class CountButton extends JFrame implements ActionListener {
public static final int Width = 250;
public static final int Height = 200;
public int i = 0;
JButton myBtn = new JButton(String.valueOf(i));
CountButton() {
setSize(Width, Height);
setTitle(
Container conPane = getContentPane();
conPane.setLayout(new FlowLayout());
myBtn.addActionListener(this);
conPane. _________________________;
}
public void actionPerformed(ActionEvent e) {
if (e.getSource() == myBtn)
myBtn.______________(String.valueOf(++i));
}
}
五、程序分析题 (本大题共 5小题,每小题 4分,共 20分 )
1. 阅读下列程序,请写出该程序的功能。
import java.awt.*;
import javax.swing.*;
import java.applet.*;
import java.awt.event.*;
public class Classl extends Applet implements ActionListener { JTextField TextI = new JTextField(5);
JTextField Text2 = new JTextField(5);
JTextField Text3 = new JTextField(5);
JLabel Label1 = new JLabel(
JButton but = new JButton(
public void init() {
setLayout(new GridLayout(6, 1));
add(Label1);
add(TextI);
add(Text2);
add(Text3);
add(but);
add(Label2);
Label2.setFont(new Font(
but.addActionListener(this);
}
public void actionPerformed(ActionEvent e) {
int a, b, c;
a = Integer.parseInt(TextI.getText());
b = Integer.parseInt(Text2.getText());
c = Integer.parseInt(Text3.getText());
if (a + b < c="" ||="" b="" +="" c="">< a="" ||="" c="" +="" a="">< b)="">
Label2.setForeground(Color.red);
Label2.setFont(new Font(
}
else {
Label2.setForeground(Color.blue);
Label2.setFont(new Font(
}
}
}
import java.applet.*;
import javax.swing.*;
import java.awt.event.*;
public class Class2 extends Applet implements ActionListener { JTextField text1, text2;
public void init() {
text1 = new JTextField(10);
text2 = new JTextField(10);
setSize(200, 100);
add(text1);
add(text2);
text1.addActionListener(this);
}
public void actionPerformed(ActionEvent e) {
long n;
if (e.getSource() == text1) {
n = Long.parseLong(text1.getText());
text2.setText(String.valueOf(n * n));
}
}
}
import java.applet.*;
import javax.swing.*;
import java.awt.event.*;
import java.util.*;
public class StrC extends Applet {
static JTextField textl, text2;
S s = new S();
public void init() {
textl = new JTextField(20);
text2 = new JTextField(20);
setSize(400, 100);
add(textl);
add(text2);
textl.addActionListener(s);
}
}
class S implements ActionListener {
public void actionPerformed(ActionEvent e) {
if (e.getSource() == StrC.textl) {
String s = StrC.textl.getText();
String ss =
StringTokenizer pas = new StringTokenizer(s); while (pas.hasMoreTokens()) {
ss += pas.nextToken();
}
StrC.text2.setText(ss);
}
}
}
import java.applet.*;
import java.awt.*;
import javax.swing.*;
class MyPanel extends JPanel {
JTextField textl, text2;
MyPanel(String sl, String s2) {
textl = new JTextField(sl);
text2 = new JTextField(s2);
add(textl);
add(text2);
}
}
class MySubPanel extends MyPanel {
JTextField text;
MySubPanel(String sl, String s2, String s3) {
super(sl, s2);
text = new JTextField(s3);
add(text);
}
}
public class Test34 {
public static void main(String args[]) {
JFrame mw = new JFrame(
mw.setSize(350, 150);
Container con = mw.getContentPane();
con.setLayout(new BorderLayout());
MyPanel pl = new MyPanel(
MySubPanel p2 = new MySubPanel(
con.add(pl,
con.add(p2,
con.add(text,
mw.setVisible(true);
}
}
import java.applet.*;
import java.awt.*;
import javax.swing.*;
class MyPanel extends JPanel {
JButton button;
JLabel label;
MyPanel(String s1, String s2) {
this.setLayout(new GridLayout(2, 2)); button = new JButton(s1);
label = new JLabel(s2, JLabel.CENTER); add(button);
add(label);
add(new JLabel());
}
}
public class Class3 {
public static void main(String args[]) { JFrame mw = new JFrame(
Container con = mw.getContentPane(); con.setLayout(new BorderLayout());
MyPanel panel1, panel2;
panel1 = new MyPanel(
con.add(panel2,
con.add(button,
mw.setVisible(true);
}
}
六、程序设计题 (每小题 6分 )
1. 一个小应用程序,界面如下图所示,其功能为实现摄氏温度和华氏温度的相互转换。以 下是程序的大部分,请编写其中的监视器方法。
注:华氏温度 (F)=摄氏温度(C)×9/5+32
import java.applet.*;
import javax.swing.*;
import java.awt.event.*;
public class test38 extends Applet implements ActionListener {
JTextField textl, text2;
JButton c2f, f2c;
public void init() {
textl = new JTextField(5);
text2 = new JTextField(5);
c2f = new JButton(
f2c = new JButton(
add(textl);
add(text2);
add(c2f);
add(f2c);
textl.requestFocus();
c2f.addActionListener(this);
f2c.addActionListener(this);
}
public void actionPerformed(ActionEvent e) {
// 请在以下位置编写代码
}
}
2. 以下程序的界面有一个按钮 button 、 一个文本区 textA 和一个文本框 textF 。 程序运行 时, 在文本区中输入数字序列, 单击按钮, 则在文本框中显示数字序列的和。 以下是要 求你编写的 actionPerformed(ActionEvent e)方法的部分代码。
public void actionPerformed(ActionEvent e) {
if (e.getSource() == button) {
String s = textA.getText();
double sum =0;
StringTokenizer fenxi = new StringTokenizer(s);
//请在以下位置编写代码
}
}
3.一个 Java 小应用程序,界面有三个文本框和两个按钮,前两个文本框用于输入整数, 第三个文本框用于输出结果。两个按钮分别表示加和减运算。当前两个文本框输入整数后, 点击相应按钮, 程序就将计算结果输出在第三个文本框中。 以下是程序的大部分, 其中监视 按钮事件的方法未给出,试编写处理按钮事件的方法。
注:这里是给定部分的程序,你要编写的是 actionPerformed(ActionEvent e)方法。 import java.applet.*;
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
class Panel1 extends JPanel {
JTextField text1, text2, text3;
JButton addButton, subButton;
Panel1() {
text1 = new JTextField(10);
text2 = new JTextField(10);
text3 = new JTextField(10);
setLayout(new GridLayout(5, 1));
addButton = new JButton(
subButton = new JButton(
add(text1);
add(text2);
add(text3);
add(addButton);
add(subButton);
}
}
public class Classl extends Applet implements ActionListener {
Panel1 panel;
public void init() {
setSize(100, 200);
panel = new Panel1();
add(panel);
(panel.addButton).addActionListener(this);
(panel.subButton).addActionListener(this);
}
public void actionPerformed(ActionEvent e) {
// 这里是你要编写的代码
}
}
4. 一个小应用程序,界面如题 38图所示,其功能为比较两个文本框中输入的字符串是否相 同, 如果相同, 那么在下方显示“两个字符串相同”, 否则, 显示“两个字符串不同”。 按下“重置”按钮后清空文本框里面的内容。以下是程序的大部分,请编写其中的监视 器方法。
import java.applet.*;
import javax.swing.*;
import java.awt.event.*;
public class A38 extends Applet implements ActionListener { JTextField textl, text2;
JButton button1, button2;
JLabel label1;
public void init() {
textl = new JTextField(12);
text2 = new JTextField(12);
button1 = new JButton(
button2 = new JButton(
label1 = new JLabel(
add(textl);
add(text2);
add(button1);
add(button2);
add(label1);
textl.requestFocus();// 将光标自动定位到第一个文本框 button1.addActionListener(this);
button2.addActionListener(this);
}
public void actionPerformed(ActionEvent e) {
// 请在以下位置编写代码
}
}
5. 请设计实现如下用于输入学号和姓名的对话框界面, 其中空白格是文本框, 用于输入相应 的内容。
这 里 给 出 的 是 程 序 的 一 部 分 , 你 要 编 写 的 是 类 InputNoNameDialog 的 构 造 方 法 InputNoNameDialog(JFrame f, String s, JTextField t)。其中参数 f 是对话框的依赖窗 口, s 是对话框标题, t 是依赖窗口中显示对话框输入内容的文本框。
以下是类 InputNoNameDialog 的程序框架。
class InputNoNameDialog extends JDialog implements ActionListener {
JLabel title;
JTextField textl, text2, mainText;
JButton done;
InputNoNameDialog(JFrame f, String s, JTextField t) {
super(f, s, true);
mainText = t;
Container con = getContentPane();
title = new JLabel(s);
textl = new JTextField(10);
text2 = new JTextField(10);
con.setLayout(new GridLayout(3, 2));
con.setSize(200, 100);
setModal(false);
// 请在以下位置续写其余代码
}
public void actionPerformed(ActionEvent e) {
/* 输入结束按确定按钮后,将对话框中输入的学号和姓名在它
依赖窗口的文本框中显示。 */
mainText.setText(
dispose();
}}
6. 设计实现以下形式布局的 Java 小应用程序。
注 1:其中空白格是文本框,用于输入对应的内容。
注 2:这里给出的是程序的一部分,你要编写的是方法 MyWindow(String s)。
import java.applet.*;
import javax.swing.*;
import java.awt.*;
class MyWindow extends JFrame {
JTextField textl, text2, text3, text4;
public MyWindow(String s) {// 这个方法是你要编写的
}
}
public class Class2 extends Applet {
MyWindow myWindow;
public void init() {
myWindow = new MyWindow(
}
}
范文五：图形界面设计
6 图形界面设计
所谓图形用户界面 GUI ,简单地说,是指包括了各种图形控制对象,如图形 窗口,菜单,对话框以及文本框等内容的界面。利用这些用户界面,用户可以和 计算机之间进行信息交流。用户可以通过某种方式来选择或者激活这些图形对 象,运行一些特性的 M 文件,利用 MATLAB 提供的图形用户界面设计向导,用户可 以非常方便快捷地设计一个图形用户界面,就好像在 windows 的画图工具中进行 绘图一样。 利用该向导, 极大地方便了用户, 让用户能够在很短的时间内完成一 个非常复杂的图形界面外观设计。 一旦用户完成了该图形界面的外观设计, 确定 了所有按钮以及图形的位置,那么就可以利用 MATLAB 的回调程序编辑器来编写 MATLAB 的源程序代码,从而可使该图形界面能够完成特定的任务 [12]。
MATLAB7.5提供了非常强大的编写图形用户界面的功能,它为图形界面的设 计提供了新方法。 比如提供了更完善的标准联机帮助系统的设计方法以及提供的 标准对话框可以直接调用。该版本改进用户图形界面开发程序 Guide ,使得该软 件完全是可视的,在风格上与 Microcoft Windows 的作图软件窗口极其相似。可 以非常快捷、 非常方便的设计出友好的界面。 这是 FORTRAN 语言和 C 语言所不能比 拟的(虽然 C 语言(c++builder)也能设计出友好的界面,但仍较 MATLAB 复杂得 多)。本文就是利用 MATLAB7.5设计出图形用户界面,通过函数的调用来实现该 软件的功能。
6.1 步骤
(1)点击桌面上的 MATLAB7.5图标打开 MATLAB ,点击工具栏内的 GUI 图标就 可进入到 GUI 的开发环境下。
(2)把一个 Axes 控件、九个 Edit Text控件和十一个 Static Text、四个 Push Button 控件拖到控件布局编辑区并布局好。
(3) 按照设计需要依次选中各控件, 单击属性查看器按钮打开其属性列表。 在 String 、 Call back、 Tag 属性栏中依次输入所需要的字符串。
(4)根据需要为回调函数编写 M 文件(即为本次设计的主程序和子程序) 。
(5)点击 GUI 工具栏中的“保存”按钮保存设计的 GUI ,单击工具栏 M-file 按钮, 我们可以看到 M-file 文件生成。 再单击激活窗口按钮▲, 就可以运行我们 编写的程序了。这时桌面上就会弹出如图 6-1所示的界面。
图 6-1 PID控制器参数优化界面
说明:
二维坐标图用于显示所寻优的系统在寻优前后动态性能的对比。
输入数据框 1中, t 为系统周期, numdk 为 G(s)函数的分子项, denda 为 G(s)函数分母项的第一个乘式项, dendb 为 G(s)函数分母项的第二个乘式项。
保存按钮,用于把输入框输入的数据以字符形式保存到预定的 mat 文件中, 需要用时再从该文件中载入。依靠 pid_build_save函数实现其功能。
从上面可以看出, 实现寻优功能的是内部程序, 界面只是起联系用户和内部 程序的作用,为用户提供简便的操作。
输入数据框 2用于输入寻优的必要数据, 其中 n 为寻优参数个数, x0为寻优参 数初值, l 为寻优步长, u 为扩张因子, v 为收缩因子, e 为寻优允许误差, k1为用 户设定的寻优次数。
运行状态框,当程序运行时显示“正在运行”,当程序运行完毕时显示“运 行完毕”。
输出结果包括仿真次数、 Kp 、 Ti 、 Td 、完成拍数和超调量。只有在运行完毕 时才显示。
载入按钮, 功能是把输入框的数据载入到程序中, 其功能的实现是依靠调用 pid_load函数实现的。
执行按钮, 运行寻优程序, 实现本软件的所有计算功能, 是本软件的核心部 分,依靠调用 pid_count2函数程序实现其功能。
关闭按钮,是用来关闭程序,依靠调用 pid_close函数实现其功能。
6.2 利用属性编辑器来添加属性内容
(1)编辑文本框 [12]
把属性“ String ”设置为空。此外,打开属性编辑器,把标签属性“ Tag ”设 置为“ pid_edit”。“ Call back”设置为“ pid_edit” , 这表明用户在输入数据时, 就执行回调函数 pid_edit。 实际上可以为回调函数 pid_edit编写一个 M 文件, 打开文 件编辑器,在编辑框中输入如下命令:
%input data
function pid_edit
ct=get ( findobj (gcbf ,'tag', 'pid_edit' ), 'string' );
%获得当前图形窗口的标签为“ pid_edit”的句柄对象。
%findobj : 寻找具有指定属性的对象图表。
%gcbf:返回包含回叫对象的句柄。 Matlab help里的解释 :Get handle of figure containing object whose callback is executing.
save indata ct;
%把获得的变量 ct 保存在 indata.mat 文件中。
(2)下载按钮
把属性 “ String ” 设置为 “下载” 。 此外, 打开属性编辑器, 把标签属性 “ Tag ” 设置为“ pid_load”。“ Call back”设置为“ pid_load” , 这表明用户在输入数据 时,就执行回调函数 pid_load。实际上可以为回调函数 pid_load编写一个名为 “ pid_load.m” M 文件,打开文件编辑器,在编辑框中输入如下命令:
%get the user's data
function pid_load
ct=get ( findobj (gcbf ,'tag', 'pid_load' ), 'string' );
%获得当前图形窗口的标签为“ pid_load”的句柄对象。
%findobj : 寻找具有指定属性的对象图表。
%gcbf : 返回包含回叫对象的句柄。 Matlab help里的解释 :Get handle of figure
containing object whose callback is executing.
save indata ct;
(3)运行按钮
把属性 “ String ” 设置为 “运行” 。 此外, 打开属性编辑器, 把标签属性 “ Tag ” 设置为“ pid_count2”。“ Call back ”设置为“ pid_count2” , 这表明用户在输入 数据时,就执行回调函数 pid_count2。实际上可以为回调函数 pid_count2编写一 个 M 文件,打开文件编辑器,在编辑框中输入如下命令:(附录 I )
(4)关闭按钮
把属性 “ String ” 设置为 “关闭” 。 此外, 打开属性编辑器, 把标签属性 “ Tag ” 设置为“ pid_close”。“ Call back”设置为“ pid_close” , 这表明用户在输入数据 时,就执行回调函数 pid_close。实际上可以为回调函数 pid_close编写一个 M 文件, 打开文件编辑器,在编辑框中输入如下命令:
%close the figure
function pid_close
close(gcbf); %关闭当前窗口
(5)保存按钮
把属性 “ String ” 设置为 “保存” 。 此外, 打开属性编辑器, 把标签属性 “ Tag ” 设置为“ pid_build_save”。“ Call back”设置为“ pid_build_save” , 这表明用户 在输入数据时,就执行回调函数 pid_build_save。实际上可以为回调函数
pid_build_save编写一个 M 文件,打开文件编辑器,在编辑框中输入如下命令: %save g(s) function data
function pid_build_save
gs=get ( findobj (gcbf ,'tag', 'pid_edit_1' ), 'string' );
%获得当前图形窗口的标签为“ pid_edit_1”的句柄对象。
%findobj :寻找具有指定属性的对象图表。
%gcbf :返回包含回叫对象的句柄。 Matlab help里的解释 :Get handle of figure containing object whose callback is executing.
save gsdata gs;
%把获得的变量 gs 保存在 indata.mat 文件中。
close(gcbf);
7 仿真及其调试结果
7.1 调试步骤
不管使用何种软件,一般都应该进行以下测试
[17]:
1. 编辑框接受命令能力的测试
一般分为三种类型:
(1)单行命令、多行命令。
(2)二维图形命令、三维图形命令。
(3)静态图形命令、动态图形命令。
2. 空间能力的测试
一般可分为三个方面:
(1)缺省设置是否合理。
(2)变化控件选项,界面表现是否正常。
(3)是否有多项选择能力。
3. 菜单能力测试
应该对每一个菜单项单独进行测试,看是否达到设计要求。 7.2 Matlab 调试指令
通过使用 Matlab调试指令对程序进行调试,可以得到一个分析报告,我们 可以了解到我们所编写的程序的每一个部分所花费的时间, 这样我们就可以根据 这些资料对已有程序进行改进,可以提高我们所编写的程序的效率。充分利用 Matlab 系统提供的调试命令, 更快地发现问题, 及时解决问题, 会大大减轻以后 的编程与调试工作。
7.3 举例仿真及调试结果
已知一个控制系统:输入信号为 r(t)=1;零阶保持;目标函数为 dt t e t Q
?∞=0) ( (7-1) 被控对象传递函数为: ) 112. 0() 144. 0(1
) (2++=s s s G (7-2)
采用 PID 控制器; 采样周期为 T=0.1s, 输入参数初值为:比例系数 kp=1.2;积分系数 ti=0.56;微分系数 td=0.11;扩张因子 u=1.75;收缩因子 v=0.75;步长 l=0.05;允许误差 e=0.01。
仿真结果图如图 7-1所示:
图 7-1 仿真结果图
由以上仿真图可知, 经过 12次寻优:Kp=1.11736,Ti=0.749583,Td=0.11625。 说 明参数寻优使系统的动态特性得到了较大的提高。 由此我们可以看出, 用 MATLAB 语言编写优化程序, 不但程序简单, 而且得到的结果直观, 具有很好的使用价值。
转载请注明出处范文大全网 » 《易语言图形界面设计》D
