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

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

一個(gè)手機(jī)界面會(huì)為用戶提供大量控件，使用戶可以通過這些控件快速地完成一些操作或?yàn)g覽信息的界面元素。

項(xiàng)目分析

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

任務(wù)1圖標(biāo)設(shè)計(jì)任務(wù)2切換器設(shè)計(jì)任務(wù)3滾動(dòng)條設(shè)計(jì)任務(wù)4搜索框設(shè)計(jì)任務(wù)1圖標(biāo)設(shè)計(jì)

制作技巧

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

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

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

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

2。多邊形工具

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

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

制作技巧

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

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

制作技巧

運(yùn)用形狀工具繪制圖形，制作時(shí)注意對(duì)齊圖層。

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

制作技巧

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

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

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

界面設(shè)計(jì)中手機(jī)界面的設(shè)計(jì)是重點(diǎn)，但手機(jī)界面又是由多個(gè)控件元素組成的，因此，設(shè)計(jì)好控件是進(jìn)行界面設(shè)計(jì)的基礎(chǔ)?？丶松厦娼榻B的4個(gè)外，還有狀態(tài)欄、導(dǎo)航欄、工具欄、標(biāo)簽欄、選擇欄等，控件的制作離不開形狀工具的使用和圖層的應(yīng)用，因此，要學(xué)會(huì)靈活使用這些工具。02手機(jī)界面設(shè)計(jì)項(xiàng)目描述

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

項(xiàng)目分析

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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