用戶界面設(shè)計(jì)工具.ppt

1、2020/10/7,哈工大軟件學(xué)院,1,本章主要內(nèi)容 4.1 用戶界面設(shè)計(jì)工具簡介 4.2 平面設(shè)計(jì)工具Photoshop 4.3 可視化編程工具Delphi,第4章 用戶界面設(shè)計(jì)工具,2020/10/7,哈工大軟件學(xué)院,2,本章主要內(nèi)容 4.1 用戶界面設(shè)計(jì)工具簡介 4.2 平面設(shè)計(jì)工具Photoshop 4.3 可視化編程工具Delphi,第4章 用戶界面設(shè)計(jì)工具,2020/10/7,哈工大軟件學(xué)院,3,2. 圖形圖像設(shè)計(jì)軟件工具,可以畫出用戶界面構(gòu)思、設(shè)計(jì)圖的工具： 如 Word、Powerpoint、Excel、Adobe Persuasion等,目前流行的可視化編程工具都包含界面設(shè)計(jì)

2、工具包，包含諸如窗口、菜單、編輯框、滾動條、按鈕等 Microsoft Visual C/C+ Microsoft Visual Basic Borland Delphi Sybase PowerBuilder 網(wǎng)頁界面制作工具： Microsoft Frontpage,Macromedia Dreamweaver,EXT框架等,第4章 用戶界面設(shè)計(jì)工具4.1 用戶界面設(shè)計(jì)工具簡介,3. 界面編程工具,1. 用戶界面描述工具,用來制作界面元素、界面效果圖的工具： 如 Photoshop、FreeHand、Coreldraw、3DMax等,2020/10/7,哈工大軟件學(xué)院,4,本章主要內(nèi)容 4

3、.1 用戶界面設(shè)計(jì)工具簡介 4.2 平面設(shè)計(jì)工具Photoshop 4.3 可視化編程工具Delphi,第4章 用戶界面設(shè)計(jì)工具,2020/10/7,哈工大軟件學(xué)院,5,Adobe公司推出的平面設(shè)計(jì)工具。 強(qiáng)大的圖形、圖像繪制與處理功能。,4.2.1 圖像與色彩模式 4.2.2 Photoshop重要概念 4.2.3 操作示例,第4章 用戶界面設(shè)計(jì)工具4.2 平面設(shè)計(jì)工具Photoshop,2020/10/7,哈工大軟件學(xué)院,6,1圖像的類型,位 圖： 矢量圖：,第4章 用戶界面設(shè)計(jì)工具4.2 平面設(shè)計(jì)工具Photoshop,4.2.1 圖像與色彩模式,又稱柵格圖，由許多像素組成 位圖處理就是

4、編輯像素不是圖像本身 位圖的清晰度與分辨率有關(guān)，縮放會失真 由數(shù)字對象定義的直線和曲線組成，由圖形的幾何 屬性描述的圖像 矢量圖的清晰度與分辨率無關(guān)，可任意縮放不失真,2020/10/7,哈工大軟件學(xué)院,7,2圖像分辨率,（1）圖像分辨率： （2）設(shè)備分辨率： （3）位分辨率：,第4章 用戶界面設(shè)計(jì)工具4.2 平面設(shè)計(jì)工具Photoshop,4.2.1 圖像與色彩模式,每英寸長度范圍含像素點(diǎn)個(gè)數(shù)，單位是dpi 該分辨率同設(shè)備無關(guān)，是邏輯概念。 每單位長度能夠輸出的圖像點(diǎn)數(shù)，由設(shè)備硬件決定 例如顯示器、打印機(jī)、數(shù)碼相機(jī)等。 又稱位深，表示每個(gè)象素點(diǎn)的顏色數(shù)量信息 比如8位、16位、24位等 ？圖

5、像分辨率與顯示器、打印機(jī)分辨率的關(guān)系,2020/10/7,哈工大軟件學(xué)院,8,3圖像色彩模式,（1）RGB色彩模式 （2）CMYK色彩模式 （3）HSB色彩模式 （4）Lab色彩模式,第4章 用戶界面設(shè)計(jì)工具4.2 平面設(shè)計(jì)工具Photoshop,4.2.1 圖像與色彩模式,Red(紅)：0255 Green(綠)：0255 Blue(藍(lán))：0255 Cyan(品藍(lán))： 0100 Magenta(品紅)：0100 Yellow(品黃)：0100 blacK(黑色)： 0100 Hue(色調(diào))： 0360（將色環(huán)分成足夠密的色調(diào)） Saturation(飽和度)：0100（濃度） Brightn

6、ess(亮度)： 0100 L：光亮度 0100 a：a分量(從綠到紅) -128+127 b：b分量(從藍(lán)到黃) -128+127,2020/10/7,哈工大軟件學(xué)院,9,4常見的圖像文件格式,PSD - Adobe公司推出，Photoshop文件格式 BMP - Microsoft公司推出，標(biāo)準(zhǔn)位圖格式 JPEG- 聯(lián)合圖象專家組(Joint Picture Expert Group)的英文縮 寫，是國際標(biāo)準(zhǔn)化組織(ISO)靜態(tài)圖象的壓縮編碼標(biāo)準(zhǔn) 有損壓縮，圖像質(zhì)量高，占有空間小 GIF - CompuServe公司推出，8位圖像、256色、支持動畫 TIF（標(biāo)簽圖像文件格式）、PCX、T

7、GA（光柵圖像文件格式）,第4章 用戶界面設(shè)計(jì)工具4.2 平面設(shè)計(jì)工具Photoshop,4.2.1 圖像與色彩模式,2020/10/7,哈工大軟件學(xué)院,10,1. 圖層 2. 路徑與選區(qū) 3. 通道與蒙板 4. 濾鏡,第4章 用戶界面設(shè)計(jì)工具4.2 平面設(shè)計(jì)工具Photoshop,4.2.2 Photoshop重要概念,Photoshop功能非常強(qiáng)大，內(nèi)容很多，本節(jié)只介紹幾個(gè)重要概念。,2020/10/7,哈工大軟件學(xué)院,11,第4章 用戶界面設(shè)計(jì)工具4.2 平面設(shè)計(jì)工具Photoshop,4.2.2 Photoshop重要概念,圖層操作：新建、復(fù)制、移動、隱藏圖層、刪除圖層； 合并可見圖層

8、、合并鏈接圖層、像素化圖層 圖層樣式,1. 圖層,圖層就是用來繪制圖像的透明畫布，涂了顏色的地方變得不透明。多個(gè)圖層疊加在一起便構(gòu)成了一幅完整的圖像。,2020/10/7,哈工大軟件學(xué)院,12,第4章 用戶界面設(shè)計(jì)工具4.2 平面設(shè)計(jì)工具Photoshop,4.2.2 Photoshop重要概念,路徑： 路徑是封閉或不封閉的矢量幾何曲線。 Photoshop提供路徑工具繪制這種曲線。 路徑是根據(jù)貝賽爾(Bezier)曲線理論進(jìn)行設(shè)計(jì) 的。即曲線上有若干個(gè)點(diǎn)，每點(diǎn)有2個(gè)控制點(diǎn)， 這樣的3點(diǎn)組合可以決定曲線的彎曲方向和平 滑度，從而組成各種復(fù)雜的圖形。 路徑是概念性工具，必須通過轉(zhuǎn)換才能在某個(gè) 圖

9、層上得到想要的圖形或圖像。 選區(qū)： 在Photoshop中有許多局部操作，在進(jìn)行操作前，必須明 確操作對象的范圍。選區(qū)即是具有這種功能的圖形區(qū)域。,2. 路徑與選區(qū),2020/10/7,哈工大軟件學(xué)院,13,第4章 用戶界面設(shè)計(jì)工具4.2 平面設(shè)計(jì)工具Photoshop,4.2.2 Photoshop重要概念,通道：Photoshop可以將選區(qū)保存起來，可以重復(fù)使用多次。 通道作用：（1）存儲色彩信息； （2）保存選擇區(qū)域。 蒙板：圖層上面可以增加若干個(gè)圖層，成為蒙板，它能夠遮擋 部分圖像。 通道操作：建立通道、載入通道、刪除通道。 4. 濾鏡 濾鏡：濾鏡就是一種處理圖像的工具，它能夠使選區(qū)內(nèi)的圖 像變化，產(chǎn)生另外一種視覺效果。,3. 通道與蒙板,2020/10/7,哈工大軟件學(xué)院,14,第4章 用戶界面設(shè)計(jì)工具4.2 平面設(shè)計(jì)工具Photoshop,4.2.3 Photoshop制作幾個(gè)例子,1. 晴朗的天空 2. 夜色車光 3. 49M套疊裁邊 4. 環(huán)形界面-簡化例子,PS簡單例子展示 3D Max作品展示,2020/10/7,哈工大軟件學(xué)院,15,本章主要內(nèi)容 4.1 用戶界面設(shè)計(jì)工具簡介 4.2 平面設(shè)計(jì)工具Photoshop 4.3 可視化編程工具Delphi,第4章 用戶界面設(shè)計(jì)工具,2020/10/7,哈工大軟件學(xué)院,16,第4章 用戶界面