用户界面设计工具.ppt
2023/11/15,哈工大软件学院,1,本章主要内容4.1 用户界面设计工具简介4.2 平面设计工具Photoshop 4.3 可视化编程工具Delphi,第4章 用户界面设计工具,2023/11/15,哈工大软件学院,2,本章主要内容4.1 用户界面设计工具简介4.2 平面设计工具Photoshop 4.3 可视化编程工具Delphi,第4章 用户界面设计工具,2023/11/15,哈工大软件学院,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等,2023/11/15,哈工大软件学院,4,本章主要内容4.1 用户界面设计工具简介4.2 平面设计工具Photoshop 4.3 可视化编程工具Delphi,第4章 用户界面设计工具,2023/11/15,哈工大软件学院,5,Adobe公司推出的平面设计工具。强大的图形、图像绘制与处理功能。,4.2.1 图像与色彩模式 4.2.2 Photoshop重要概念 4.2.3 操作示例,第4章 用户界面设计工具4.2 平面设计工具Photoshop,2023/11/15,哈工大软件学院,6,1图像的类型,位 图：矢量图：,第4章 用户界面设计工具4.2 平面设计工具Photoshop,4.2.1 图像与色彩模式,又称栅格图，由许多像素组成 位图处理就是编辑像素不是图像本身 位图的清晰度与分辨率有关，缩放会失真 由数字对象定义的直线和曲线组成，由图形的几何 属性描述的图像 矢量图的清晰度与分辨率无关，可任意缩放不失真,2023/11/15,哈工大软件学院,7,2图像分辨率,（1）图像分辨率：（2）设备分辨率：（3）位分辨率：,第4章 用户界面设计工具4.2 平面设计工具Photoshop,4.2.1 图像与色彩模式,每英寸长度范围含像素点个数，单位是dpi 该分辨率同设备无关，是逻辑概念。每单位长度能够输出的图像点数，由设备硬件决定 例如显示器、打印机、数码相机等。又称位深，表示每个象素点的颜色数量信息 比如8位、16位、24位等？图像分辨率与显示器、打印机分辨率的关系,2023/11/15,哈工大软件学院,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,2023/11/15,哈工大软件学院,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 图像与色彩模式,2023/11/15,哈工大软件学院,10,1.图层2.路径与选区3.通道与蒙板4.滤镜,第4章 用户界面设计工具4.2 平面设计工具Photoshop,4.2.2 Photoshop重要概念,Photoshop功能非常强大，内容很多，本节只介绍几个重要概念。,2023/11/15,哈工大软件学院,11,第4章 用户界面设计工具4.2 平面设计工具Photoshop,4.2.2 Photoshop重要概念,图层操作：新建、复制、移动、隐藏图层、删除图层；合并可见图层、合并链接图层、像素化图层 图层样式,1.图层,图层就是用来绘制图像的透明画布，涂了颜色的地方变得不透明。多个图层叠加在一起便构成了一幅完整的图像。,2023/11/15,哈工大软件学院,12,第4章 用户界面设计工具4.2 平面设计工具Photoshop,4.2.2 Photoshop重要概念,路径：路径是封闭或不封闭的矢量几何曲线。Photoshop提供路径工具绘制这种曲线。路径是根据贝赛尔(Bezier)曲线理论进行设计 的。即曲线上有若干个点，每点有2个控制点，这样的3点组合可以决定曲线的弯曲方向和平 滑度，从而组成各种复杂的图形。路径是概念性工具，必须通过转换才能在某个 图层上得到想要的图形或图像。选区：在Photoshop中有许多局部操作，在进行操作前，必须明 确操作对象的范围。选区即是具有这种功能的图形区域。,2.路径与选区,2023/11/15,哈工大软件学院,13,第4章 用户界面设计工具4.2 平面设计工具Photoshop,4.2.2 Photoshop重要概念,通道：Photoshop可以将选区保存起来，可以重复使用多次。通道作用：（1）存储色彩信息；（2）保存选择区域。蒙板：图层上面可以增加若干个图层，成为蒙板，它能够遮挡 部分图像。通道操作：建立通道、载入通道、删除通道。4.滤镜 滤镜：滤镜就是一种处理图像的工具，它能够使选区内的图 像变化，产生另外一种视觉效果。,3.通道与蒙板,2023/11/15,哈工大软件学院,14,第4章 用户界面设计工具4.2 平面设计工具Photoshop,4.2.3 Photoshop制作几个例子,1.晴朗的天空2.夜色车光3.49M套叠裁边4.环形界面-简化例子,PS简单例子展示 3D Max作品展示,2023/11/15,哈工大软件学院,15,本章主要内容4.1 用户界面设计工具简介4.2 平面设计工具Photoshop 4.3 可视化编程工具Delphi,第4章 用户界面设计工具,2023/11/15,哈工大软件学院,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编码简要介绍,
