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