Photoshop平面設(shè)計（第二版）課件：界面設(shè)計

Photoshop平面設(shè)計（第二版）0102控件設(shè)計手機界面設(shè)計

界面設(shè)計Photoshop平面設(shè)計03智能終端界面設(shè)計能力目標能設(shè)計各種風(fēng)格的圖標能制作不同類型的功能控件能進行不同的手機應(yīng)用界面的設(shè)計能進行不同智能設(shè)備交互界面的設(shè)計知識目標掌握基本圖形的繪制掌握圖形樣式的添加掌握濾鏡的使用教學(xué)目標01UI控件設(shè)計項目描述

一個手機界面會為用戶提供大量控件，使用戶可以通過這些控件快速地完成一些操作或瀏覽信息的界面元素。

項目分析

設(shè)計控件時要會繪制各種幾何圖形，掌握路徑的操作及圖層、蒙版、濾鏡等技術(shù)的靈活運用。

任務(wù)1圖標設(shè)計任務(wù)2切換器設(shè)計任務(wù)3滾動條設(shè)計任務(wù)4搜索框設(shè)計任務(wù)1圖標設(shè)計

制作技巧

圖標是具有明確“指代”意義的圖形，一枚精美絕倫的圖標可以輕易地吸引用戶進行點擊。這里要求使用Photoshop設(shè)計一款清新風(fēng)格的微扁平化相機圖標。

參考效果制作步驟（略）一、圖層樣式的設(shè)置1。投影圖層樣式2。斜面和浮雕圖層樣式3。漸變疊加圖層樣式4。光澤圖層樣式5。顏色疊加圖層樣式6。圖案疊加圖層樣式7。外發(fā)光圖層樣式8。描邊圖層樣式

知識鏈接二、形狀工具1。矩形工具、圓角矩形工具和橢圓工具

“矩形工具”、“圓角矩形工具”、“橢圓工具”分別用來繪制矩形、圓角矩形和橢圓形的路徑或形狀圖層。

2。多邊形工具

“多邊形工具”主要用來繪制多邊形或星形，由選項欄的“邊”文本框來設(shè)置多邊形的邊數(shù)。

知識鏈接任務(wù)2切換器設(shè)計

制作技巧

運用形狀工具繪制圖形，通過圖層樣式添加外觀效果。

參考效果制作步驟（略）任務(wù)3滾動條設(shè)計

制作技巧

運用形狀工具繪制圖形，制作時注意對齊圖層。

參考效果制作步驟（略）任務(wù)4搜索欄設(shè)計

制作技巧

以圓角矩形為主，搜索按鈕在左側(cè)，要有清空按鈕。

參考效果制作步驟（略）項目總結(jié)

本項目以控件為主線，介紹了Photoshop在控件制作的設(shè)計和制作。

界面設(shè)計中手機界面的設(shè)計是重點，但手機界面又是由多個控件元素組成的，因此，設(shè)計好控件是進行界面設(shè)計的基礎(chǔ)。控件除了上面介紹的4個外，還有狀態(tài)欄、導(dǎo)航欄、工具欄、標簽欄、選擇欄等，控件的制作離不開形狀工具的使用和圖層的應(yīng)用，因此，要學(xué)會靈活使用這些工具。02手機界面設(shè)計項目描述

手機用戶界面是用戶與手機系統(tǒng)、應(yīng)用交互的窗口，手機界面的設(shè)計必須基于手機設(shè)備的物理特性和系統(tǒng)應(yīng)用的特性進行合理的設(shè)計。

項目分析

手機界面設(shè)計分為手機操作系統(tǒng)界面設(shè)計和手機應(yīng)用界面設(shè)計，手機操作系統(tǒng)界面設(shè)置分為時鐘、聯(lián)系人、鎖屏、顯示等主要系統(tǒng)設(shè)置和用戶根據(jù)主題程序進行的主題界面設(shè)置。

任務(wù)1手機鎖屏界面設(shè)計

任務(wù)2手機主題界面設(shè)計

任務(wù)3手機應(yīng)用界面設(shè)計任務(wù)1手機鎖屏界面設(shè)計

制作技巧首先使用“油漆桶工具”填充界面背景，然后結(jié)合各種形狀工具繪制出手機鎖屏界面中的戲曲人物主體矢量圖形，并通過樣式增強圖形的立體感，最后添加和編輯文字元素。

參考效果制作步驟（略）自定形狀工具

自定形狀工具可以用來繪制Photoshop預(yù)設(shè)的路徑或形狀圖層知識鏈接任務(wù)2手機主題界面設(shè)計

制作技巧使用“油漆桶工具”填充界面的背景，然后結(jié)合畫筆工具點綴背景效果，使用鋼筆工具和各種形狀工具繪制界面中的旗袍主體矢量圖形，合理調(diào)整路徑，最后使用文字工具添加文字元素。

參考效果制作步驟（略）任務(wù)3手機應(yīng)用界面設(shè)計

制作技巧首先使用漸變工具填充界面的背景，然后結(jié)合各種形狀工具繪制出手機應(yīng)用界面中的圖標矢量圖形，使用樣式增強圖形的立體感，并使用文字工具添加和編輯文字。

參考效果制作步驟（略）畫筆工具

畫筆工具可以在空白的畫布中繪制圖畫，也可以在已有的圖像中對圖像進行再創(chuàng)作。掌握好“畫筆工具”的使用可以使設(shè)計的作品更精彩。1。選擇畫筆工具2。設(shè)置畫筆工具

知識鏈接項目總結(jié)本項目分別介紹了鎖屏界面、主題界面和應(yīng)用界面的設(shè)計和制作方法。無論是哪種功能的界面，首先應(yīng)對界面的分辨率、尺寸及各個控件的尺寸有明確的認知，然后合理選擇界面的主色和輔助色。制作時先規(guī)劃出各個功能區(qū)的大致框架，然后逐步刻畫每個細部，這種從整體到局部的刻畫方法可以保證整體效果的美觀。03智能終端界面設(shè)計項目描述

隨著移動互聯(lián)網(wǎng)的普及，特別是5G網(wǎng)絡(luò)的發(fā)展，人工智能得到了飛速的發(fā)展，這就促使智能終端設(shè)備越來越多，我們的工作和生活也全面進入智能時代。而智能時代離不開智能終端設(shè)備的使用。智能終端設(shè)備的普及網(wǎng)絡(luò)的廣泛應(yīng)用是數(shù)字化時代的重要特征。項目分析

智能終端設(shè)備以其新穎的界面設(shè)計、便捷的交互功能、簡單的操作體驗征服了廣大的用戶。本項目通過智能電視主界面和智能汽車中控大屏界面的設(shè)計制作來學(xué)習(xí)智能終端界面的設(shè)計技巧和制作技術(shù)。

任務(wù)1智能電視主界面設(shè)計

任務(wù)2智能汽車中控大屏界面設(shè)計

任務(wù)1智能電視主界面設(shè)計

制作技巧制作“主界面”背景，并通過參考線確定節(jié)目尺寸，然后通過矩形工具、樣式、蒙版、文字等技術(shù)依次制作頂部左側(cè)內(nèi)容、頂部右側(cè)、導(dǎo)航欄、中間內(nèi)容區(qū)等內(nèi)。

參考效果制作步驟（略）任務(wù)2智能汽車中控大屏界面設(shè)計

制作技巧首先制作“主界面”背景，并通過參考線確定節(jié)目尺寸，然后通過矩形工具、樣式、蒙版、文字等技術(shù)依次制作頂部左側(cè)內(nèi)容、頂部右側(cè)、導(dǎo)航欄、中間內(nèi)容區(qū)等內(nèi)容。

參考效果制作步驟（略）項目總結(jié)

本項目分別介紹了小米智慧電視主屏幕和比亞迪智慧中控大屏的設(shè)計和制作方法。對于智慧電視