第4章用户界面设计工具.ppt
2019/8/31,哈工大软件学院,1,本章主要内容 4.1 用户界面设计工具简介 4.2 平面设计工具Photoshop 4.3 可视化编程工具Delphi,第4章 用户界面设计工具,2019/8/31,哈工大软件学院,2,本章主要内容 4.1 用户界面设计工具简介 4.2 平面设计工具Photoshop 4.3 可视化编程工具Delphi,第4章 用户界面设计工具,2019/8/31,哈工大软件学院,3,2. 图形图像设计软件工具,可以画出用户界面构思、设计图的工具： 如 Word、Powerpoint、Excel、Adobe Persuasion等,目前流行的可视化编程工具都包含界面设计工具包， 包含诸如窗口、菜单、编辑框、滚动条、按钮等 Microsoft Visual C/C+ Microsoft Visual Basic Borland Delphi Sybase PowerBuilder 网页界面制作工具： Microsoft Frontpage,Macromedia Dreamweaver,EXT框架等,第4章 用户界面设计工具 4.1 用户界面设计工具简介,3. 界面编程工具,1. 用户界面描述工具,用来制作界面元素、界面效果图的工具： 如 Photoshop、FreeHand、Coreldraw、3DMax等,2019/8/31,哈工大软件学院,4,本章主要内容 4.1 用户界面设计工具简介 4.2 平面设计工具Photoshop 4.3 可视化编程工具Delphi,第4章 用户界面设计工具,2019/8/31,哈工大软件学院,5,Adobe公司推出的平面设计工具。 强大的图形、图像绘制与处理功能。,4.2.1 图像与色彩模式 4.2.2 Photoshop重要概念 4.2.3 操作示例,第4章 用户界面设计工具 4.2 平面设计工具Photoshop,2019/8/31,哈工大软件学院,6,1图像的类型,位 图： 矢量图：,第4章 用户界面设计工具 4.2 平面设计工具Photoshop,4.2.1 图像与色彩模式,又称栅格图，由许多像素组成 位图处理就是编辑像素不是图像本身 位图的清晰度与分辨率有关，缩放会失真 由数字对象定义的直线和曲线组成，由图形的几何 属性描述的图像 矢量图的清晰度与分辨率无关，可任意缩放不失真,2019/8/31,哈工大软件学院,7,2图像分辨率,（1）图像分辨率： （2）设备分辨率： （3）位分辨率：,第4章 用户界面设计工具 4.2 平面设计工具Photoshop,4.2.1 图像与色彩模式,每英寸长度范围含像素点个数，单位是dpi 该分辨率同设备无关，是逻辑概念。 每单位长度能够输出的图像点数，由设备硬件决定 例如显示器、打印机、数码相机等。 又称位深，表示每个象素点的颜色数量信息 比如8位、16位、24位等 ？图像分辨率与显示器、打印机分辨率的关系,2019/8/31,哈工大软件学院,8,3图像色彩模式,（1）RGB色彩模式 （2）CMYK色彩模式 （3）HSB色彩模式 （4）Lab色彩模式,第4章 用户界面设计工具 4.2 平面设计工具Photoshop,4.2.1 图像与色彩模式,Red(红)：0255 Green(绿)：0255 Blue(蓝)：0255 Cyan(品蓝)： 0100 Magenta(品红)：0100 Yellow(品黄)：0100 blacK(黑色)： 0100 Hue(色调)： 0360°（将色环分成足够密的色调） Saturation(饱和度)：0100（浓度） Brightness(亮度)： 0100 L：光亮度 0100 a：a分量(从绿到红) -128+127 b：b分量(从蓝到黄) -128+127,2019/8/31,哈工大软件学院,9,4常见的图像文件格式,PSD - Adobe公司推出，Photoshop文件格式 BMP - Microsoft公司推出，标准位图格式 JPEG- 联合图象专家组(Joint Picture Expert Group)的英文缩 写，是国际标准化组织(ISO)静态图象的压缩编码标准 有损压缩，图像质量高，占有空间小 GIF - CompuServe公司推出，8位图像、256色、支持动画 TIF（标签图像文件格式）、PCX、TGA（光栅图像文件格式）,第4章 用户界面设计工具 4.2 平面设计工具Photoshop,4.2.1 图像与色彩模式,2019/8/31,哈工大软件学院,10,1. 图层 2. 路径与选区 3. 通道与蒙板 4. 滤镜,第4章 用户界面设计工具 4.2 平面设计工具Photoshop,4.2.2 Photoshop重要概念,Photoshop功能非常强大，内容很多，本节只介绍几个重要概念。,2019/8/31,哈工大软件学院,11,第4章 用户界面设计工具 4.2 平面设计工具Photoshop,4.2.2 Photoshop重要概念,图层操作：新建、复制、移动、隐藏图层、删除图层； 合并可见图层、合并链接图层、像素化图层 图层样式,1. 图层,图层就是用来绘制图像的透明画布，涂了颜色的地方变得不透明。多个图层叠加在一起便构成了一幅完整的图像。,2019/8/31,哈工大软件学院,12,第4章 用户界面设计工具 4.2 平面设计工具Photoshop,4.2.2 Photoshop重要概念,路径： 路径是封闭或不封闭的矢量几何曲线。 Photoshop提供路径工具绘制这种曲线。 路径是根据贝赛尔(Bezier)曲线理论进行设计 的。即曲线上有若干个点，每点有2个控制点， 这样的3点组合可以决定曲线的弯曲方向和平 滑度，从而组成各种复杂的图形。 路径是概念性工具，必须通过转换才能在某个 图层上得到想要的图形或图像。 选区： 在Photoshop中有许多局部操作，在进行操作前，必须明 确操作对象的范围。选区即是具有这种功能的图形区域。,2. 路径与选区,2019/8/31,哈工大软件学院,13,第4章 用户界面设计工具 4.2 平面设计工具Photoshop,4.2.2 Photoshop重要概念,通道：Photoshop可以将选区保存起来，可以重复使用多次。 通道作用：（1）存储色彩信息； （2）保存选择区域。 蒙板：图层上面可以增加若干个图层，成为蒙板，它能够遮挡 部分图像。 通道操作：建立通道、载入通道、删除通道。 4. 滤镜 滤镜：滤镜就是一种处理图像的工具，它能够使选区内的图 像变化，产生另外一种视觉效果。,3. 通道与蒙板,2019/8/31,哈工大软件学院,14,第4章 用户界面设计工具 4.2 平面设计工具Photoshop,4.2.3 Photoshop制作几个例子,1. 晴朗的天空 2. 夜色车光 3. 49M套叠裁边 4. 环形界面-简化例子,PS简单例子展示 3D Max作品展示,2019/8/31,哈工大软件学院,15,本章主要内容 4.1 用户界面设计工具简介 4.2 平面设计工具Photoshop 4.3 可视化编程工具Delphi,第4章 用户界面设计工具,2019/8/31,哈工大软件学院,16,第4章 用户界面设计工具 4.3 可视化编程工具Delphi,Delphi简介 编程集成环境 Borland公司开发 版本 V1.0,V2.0,V3.0,V4.0, V5.0,V6.0,V7.0,V8.0,特点： Object-Pascal 界面元素丰富 适合C/S结构数据库应用软件开发,Delphi Pascal编码 简要介绍,
