UI界面設計與制作 教案 第4章教案

教案編號：4

課題：第4章UI中的組件沒計

課時：12課時

授課類型：講授+實訓

項目目標：

?了解組件的基礎(chǔ)知識

?掌握導航欄的制作

?掌握標簽欄的制作

?掌握金剛區(qū)的制作

?掌握瓷片區(qū)的制作

項目重點：

?導航欄的制作

?標簽欄的制作

?金剛區(qū)的制作

?瓷片區(qū)的制作

項目難點：

導航欄、標簽欄、金剛區(qū)、瓷片區(qū)的規(guī)則

項目技能點：

導航欄的制作、標簽欄的制作、金剛區(qū)的制作、瓷片區(qū)的制作

項目教學技巧：

1.知識講解

2.案例實訓

項目過程：

（一）課前準備

1.授課前準備

準備好教學用具和教學設備

2.板書

課題：第4章UI中的組件設計

項目目標：

?了解組件的基礎(chǔ)知識

?掌握導航欄的制作

?掌握標簽欄的制作

?掌握金剛區(qū)的制作

?掌握瓷片區(qū)的制作

3.課程引入

通過課堂案例效果展示引入組件的概念

登錄有獎］

國慶去哪

導航欄

G0。囹③

首頁攻略消息行程我的

標簽欄

瓷片區(qū)

（二）課程內(nèi)容

4.1組件的初識

組件作為UI設計中常用控件或元素的集合，具有靈活使用、便于復用的特點。下面分別從組

件的概念及組件的獲取這兩個方面進行控件的基礎(chǔ)講解。

4.1.1組件的概念

組件是將圖片、圖形、圖標、文字等多個元素進行組合進行更好的信息傳遞，便于用戶進行

交互，如圖所示。

9

回

LJ

Htl收H

us**cas巾

S3

M??as。R*

陵cn左

?日好（X

ifi0

4.1.2組件的獲取

組件同控件一樣可以從iOS以及MaterialDesign官方網(wǎng)站進行獲取。UI設計師通常會在官方

組件的基礎(chǔ)之上再進行設計。

4.2導航欄的設計

導航欄作為UI設計中的常用組件之一,具有持久顯示、指導用戶的特點。下面分別從概念、

類型以及規(guī)則這三個方面進行按鈕控件的講解。

4.2.1導航欄的概念

導航欄(NavigationBar,Navbar),位于App頂部，狀態(tài)欄下方，提供了位置指示及功能操

作。Android中，MaterialDesign稱其為頂部應用欄(TopAppBar),如圖所示。

9：41.?il令一

＜郵箱收件箱編箱X已選擇1張心■:

李小海

您有一條新的郵件

123張照片

U敬的孫雙雙女士.您好！您目的的客尸星際為

★★★.可享積分永久，效,85址用卡費用免等…

王東東8/1/17?

您有一條新的郵件

尊敬的孫雙雙女士.您好??！?目前的客戶星際為

★★★,可享職分永久有效,基礎(chǔ)用卡費用緘免等…

向日葵

您有一條新的郵件

，敬的孫雙雙女士,您好！您目萌的一戶星際為

★★★,可享積分永久一效,二礎(chǔ)用卡費用一免3

iOS導航欄Android頂部應用欄

4.2.2導航欄的類型

1.常規(guī)導航欄

標題導航欄：常見于二級詳情界面或?qū)Ш胶唵蔚囊患壗缑妫饕f操作圖標與標題組成，如

圖所示。

18：16.■1令HZP

SZAOZU。造作新家Q

造作新家App

搜索框?qū)Ш綑冢涸黾铀阉骺颍コ龑Ш綐祟}，如圖所示。

18：20.Hl(E3-

輛易Q東京奧運如期舉行⑥0

網(wǎng)易新聞App

Tab/分段控件導航欄：Tab左右切換頂部導航欄的可選項可以擴展很多，并且可以左右滑動切

換。分段控件頂部導航欄一般有2~5個可選項，且不能左右滑動，如圖所示。

18：38-r.11令

故事美食時尚美妝游戲搞笑幽

微博App

2.通欄導航欄

常用在電商、旅游等界面復雜或是需要烘托氛圍的界面中，如圖所示。

小米有品App

3.大標題導航欄

簡約大氣，減少視覺噪音，讓內(nèi)容更加突出，如圖所示。

18:35

心愿單

愛彼迎App

有些APP也會折中使用，在常規(guī)導航欄高度下，放大字號，隱去分割線，使標題看起來更大,

如圖所示。

18：52.1令口

編輯選薦&

字里行間App

4.2.3導航欄的規(guī)則

1.標題導航欄

(1)標題導航欄尺寸

iOS標題導航欄寬度：375pt,高度：44pt。

Android標題導航欄寬度360dp,高度56dpo

(2)標題導航欄文字

標題文字尺寸：17~18pto

操作注釋尺寸：16pto

重要提示：文字層級字號對比＞2pi

(3)標題導航欄圖標

圖標設計尺寸：24出

如圖所示。

(75Cp*)

I-----------------------------1

,川令9:41AMJOptWOp哂It100%M

＜返回加一》1?標題o+

iPhone6/7/8

375Pt(n2$px)

I-------------------------------------------------------------------------------------------1

9：414?p＜O32in)pi|令

?標題44PM132PX)編轅

iPhoneX

360Pt|

頁面標題

-_L-

FTRHHH

16pt32p<24pt24pt16pt

標題導航欄尺寸示意圖

2.大標題導航欄

(1)大標題導航欄尺寸

iOS標題導航欄寬度：375pt,高度：96pt。

Android標題導航欄寬度360dp,高度128dp0

(2)大標題導航欄文字

標題文字尺寸：34pt。

操作注釋尺寸：32pt。

(3)大標題導航欄圖標

圖標設計尺寸：24pt0

如圖所示。

?■?今9:41AMI*100%

取消確定

大標題一，

iPhon?6/7/8

(TlUpa)

-------------------------------------------------------------------1

9:413W|H)1?I宅■

+編輯

大標題“a10OH12Mtlc

IPhoneX

360Pt|

口“

I2flp(

Android

24Pt24pt16pt

大標題導航欄尺寸示意圖

3.搜索框?qū)Ш綑?/p>

(I)搜索框?qū)Ш綑诔叽?/p>

搜索框尺寸：275*30pt

(2)搜索框?qū)Ш綑谖淖?/p>

搜索文字尺寸：14pi

圖標文字尺寸：9Pl

(3)搜索框?qū)Ш綑趫D標

圖標設計尺寸：24pt、20ptx16pt

重要提示：圖標設計的尺寸規(guī)律為4或8的倍數(shù)

(4)搜索框?qū)Ш綑陂g距

整體設計分布：8Ptl6Pt

重要提示：分布遵循五分原則等分原則

如圖所示。

10：4C"M令?:，

se

!3H13靄￡

U,"

搜索框尺寸示意圖

（5）搜索框?qū)Ш綑谛Ч?/p>

黑色遮罩：避免與背景顏色相同，影響閱讀，如圖所示。

飛豬App

搜索框微投影：凸顯搜索功能，如圖所示。

16：23-r.10Q

Q搜索目的地/景點/酒店等趨用

熱搜?西安長沙呼倫貝爾平遙古城西出

馬蜂窩App

4.2.4課堂案例一制作旅游類App導航欄

【案例設計要求】

1.運用軟件Photoshop制作導航欄，設計效果、展示效果如圖所示。

2.導航欄尺寸：750px（寬）x88px（高\

3.符合導航欄的設計規(guī)則。

【案例學習目標】學習使用軟件Photoshop制作導航欄。

9：41.ill令■

衣國慶去哪玩x登錄有金?

展示效果圖

【案例知識要點】使用圓角矩形工具繪制形狀，使用屬性面板制作彌散投影，使用置入嵌入對

象命令置入圖標，使用橫排文字工具輸入文字。

(I)按Ctrl+N組合鍵,彈出"新建文檔"對話框，將寬度設為750像素，高度設為98像素，

分辨率設為72像素硬寸，背景內(nèi)容設為淺藍色(126、212、229),如匿所示。單擊“創(chuàng)建"按鈕，

完成文檔新建。

(2)選擇"圓角矩形"工具Q,在屬性欄的"選擇工具模式”選項中選擇"形狀"，將"填

充"顏色設為白色，"描邊"顏色設為無，"半徑"選項設置為34像素。在圖像窗口中適當?shù)奈恢?/p>

繪制圓角矩形，在"圖層"控制面板中生成新的形狀圖層"圓角矩形\選擇"窗口＞屬性"

命令，彈出"屬性"面板，設置如圖所示，按Enter鍵確定操作，效果如圖所示。

(3)按Ctrl+J組合鍵，復制圖層，在“圖層"控制面板中生成新的形狀圖層"圓角矩形1拷

貝"。在屬性欄中將"填充"顏色設為深綠色(77、105、110、在"屬性"面板中進行設置，如圖

所示，按Enter鍵確定操作，效果如圖所示。

在"屬性"面板中單擊"蒙版"按鈕，設置如圖所示，按Enter鍵確定操作，效果如圖所示。

(4)在喝層"控制面板中將‘圓角矩形1拷貝"圖層的"不透明度”選項設為30%,并將其

拖曳到"圓角矩形1”圖層的下方，如圖所示，效果如圖所示。

8S

Q咕-Q?Tn3*

正nt-Ta明口

豌：3/*IS6耽：100%v

(5)使用瀏覽器打開Iconfont-阿里巴巴矢量圖標庫官網(wǎng)，單擊右側(cè)的“快捷登錄"按鈕，如圖

所示，在彈出的對話框中選擇登錄方式并登錄，如圖所示。在搜索框中輸入文字"搜索"，如圖所

示，并單擊右側(cè)的搜索按鈕，進入圖標頁面。

iconfont*■頁?**rawra除助曲3.??(—g^oAQ)&G?d

(6)在頁面中將鼠標指針放置在需要下載的圖標上，如圖所示。單擊下方的"下載"按鈕，在

彈出的對話框中設置需要的顏色，如圖所示。單擊"AI下載"按鈕，在彈出的對話框中設置文件

名及下載路徑，如圖所示，單擊"下載"按鈕，下載矢量圖標。

QQQQQQQQQ

99999909999

Q@QQQQQ

mmssft****Sntn

QQQQQQQQQ

QQQQQQQQQ

nnnasnnSK

QQQQQQQ

Itsm?*99MWffMI

Q

(7)在“圖層”控制面板中選中"圓角矩形1"圖層。選擇"文件>置入嵌入對象"命令，彈

出"置入嵌入的對象"對話框。選擇云盤中的"Ch04>制作旅游類App導航欄>素材>02"文

件，單擊“置入"按鈕，將圖片置入到圖像窗口中。將其拖曳到適當?shù)奈恢?，按Enier鍵確定操作,

在“圖層"控制面板中生成新的圖層并將其命名為“方形網(wǎng)格系統(tǒng)"。在“屬性”面板中進行設置，

如圖所示，按Enter鍵確定操作，效果如圖所示。

(7他擇"文件>置入嵌入對象"命令，彈出"置入嵌入的對象"對話框。選擇云盤中的"Ch04>

制作旅游類App導航欄>素材>01”文件，單擊"置入"按鈕，將圖標置入到圖像窗口中。將

其拖曳到適當?shù)奈恢貌⒄{(diào)整其大小，按Enter鍵確定操作，在"圖層"控制面板中生成新的圖層并

將其命名為"搜索:在"屬性"面板中進行設置，如圖所示，按Enter鍵確定操作,將圖標置于

圖標盒子中，效果如圖所示。

a］跌曲幅;m

w；E

X;SO像素Y：27ft(

Ol^ps

內(nèi)容

(8)單擊"方形網(wǎng)格系統(tǒng)”圖層左側(cè)的眼睛圖標?,隱藏圖層，如圖所示。選擇“橫排文字"

工具「，在適當?shù)奈恢幂斎胄枰奈淖植⑦x取文字，選擇"窗口＞字符"命令，彈出面板，將

"顏色"設為淺灰色(193、193、193),其他選項的設置如圖所示，按Enter鍵確定操作，效果如

圖所示，在“圖層"控制面板中生成新的文字圖層。

(9)選擇“圓角矩形”工具O.,在屬性欄中將"填充"顏色設為白色「描邊”顏色設為無,

"半徑"選項設置為34像素。在圖像窗口中適當?shù)奈恢美L制圓角矩形，在"圖層"控制面板中生

成新的形狀圖層"圓角矩形2"。在“屬性”面板中進行設置，如圖所示，按Enter鍵確定操作,

效果如圖所示。

1°國慶去哪玩XI】

(10)按Ctrl+J組合鍵，復制圖層，在“圖層"控制面板中生成新的形狀圖層"圓角矩形2拷

貝"。在屬性欄中將"填充"顏色設為深綠色(77、105、1101在"屬性"面板中進行設置，如圖

所示，按Enter鍵確定操作，效果如圖所示。在"屬性"面板中單擊"蒙版"按鈕，設置如圖所示,

按Enler鍵確定操作，效果如圖所示。

(11)在''圖層,'控制面板中將"圓角矩形2拷貝"圖層的"不透明度”選項設為30%,并將其

拖曳到"圓角矩形2”圖層的下方，如圖所示，效果如圖所示。

(%)在喝層”控制面板中選中“圓角矩形2"圖層。選擇"橫排文字”工具T.,在適當?shù)奈?/p>

置輸入需要的文字并選取文字，在"字符"面板中進行設置，將"顏色"設為深灰色(52、52、

52),其他選項的設置如圖所示，按Enter鍵確定操作，效果如圖所示,在“圖層"控制面板中生

成新的文字圖層。

(13)按住Shift鍵的同時，單擊"圓角矩形1拷貝"圖層，將需要的圖層同時選取。按Ctrl+G

組合鍵，群組圖層并將其命名為“導航欄"，如圖所示。旅游類App導航欄制作完成。

4.3標簽欄的設計

標簽欄作為UI設計中的常用組件之一，具有指導用戶、操作靈活的特點。下面分別從概念、

類型以及規(guī)則這三個方面進行按鈕控件的講解。

4.3.1標簽欄的概念

標簽欄(tab欄)，位于App的底部，提供了位置指示及頁面切換的作用。Android中，Material

Design稱其為底部應用欄(bottomAppBar),如圖所示。

4.3.2標簽欄的類型

1.背景樣式

(I)白色或淺灰

區(qū)分明顯，最常用，如圖所示。

Q0DQ

叮當快藥叮當商城清單列表我的

叮當快藥App標簽欄

(2)黑色或深灰

適用于短視頻、工具類型，如圖所示。

抖音App標簽欄

2.展示方式

(1)圖標+文字

識別高，多數(shù)App采用的展示方式，如圖所示。

。呂◎逑

發(fā)現(xiàn)書架看一看我

微信讀書App標簽欄

(2)圖標

識別性不高，適用于小眾文藝類，如圖所示。

?0na

花瓣App標簽欄

(3)圖標+文字+舵式

適用于社區(qū)型App,具有發(fā)布需求，如圖所示。

轉(zhuǎn)轉(zhuǎn)App標簽欄

(4)文字

樣式單一，適用于短視頻類型，如圖所示。

首頁商城消券,我

小紅書App標簽欄

4.3.3標簽欄的規(guī)則

1.標簽欄的尺寸

iOS標簽欄寬度：375pt,高度：49PL

Android標簽欄寬度：360dp,高度：56dp0

通用的圖標設計尺寸：24”。

FAB(浮動操作按鈕)設計尺寸：56pto

圖標下文字設計尺寸：10pto

如圖所示。

375p((750px)

]l9pK98px)

-3M6<)px>m固固固固

文字了文字文字文字

10p?20px)

IPhone6/7/8

375Pl(1125px)

1---------------------------

劭即［固?■固9E

文字羊文字文字文字83pK248px)

10pt(30px)

iPhoneX

+

|丁16Pt

56pt24pt1

|16Pt

HFTH

16pt56pt24pt16pt

標簽欄尺寸示意圖

2.標簽欄的布局

標簽欄個數(shù)在3~5個。

屏幕等分：最常用，計算方式，列寬=屏幕寬度/標簽個數(shù)。

邊距刪減等分：減去左右兩邊間距，再進行等分。

圖標左右間距相等：用于標簽數(shù)量為3個的時候。

如圖所示。

邊距刪減等分

圖標左右間距相等

3.標簽欄的圖標

（?）標簽欄圖標尺寸

通用的圖標設計尺寸：24%不同形狀的圖標會產(chǎn)生不同的視覺重量，為保持視覺平衡，不同

形狀的圖標設計尺寸可參考下圖。

方形：寬高I8px圓形:直徑20Px垂直矩形：高度20Px.寬度I6px水平矩形:高度16Px.寬度20px

（2）圖標的切換狀態(tài)

線性（未選中狀態(tài)）-面性（選中狀態(tài)），反饋最強烈，最常用，如圖所示。

?笆▽陽久

首頁理財口碑朋友我的

支付寶App

面性（未選中狀態(tài)）-面性（選中狀態(tài)），安全厚重，適用于閱讀、工具類產(chǎn)品，如圖所示。

首頁分類我的學習帳號

網(wǎng)易云課堂App

線性（未選中狀態(tài)）-線面（選中狀態(tài)），活潑趣味，適用于年輕化產(chǎn)品，如圖所示。

O0G??Q

首頁攻略消息行程我的

飛豬App

線性（未選中狀態(tài)＞線性（選中狀態(tài)），精致簡潔，適用于生活類產(chǎn)品，如圖所示。

。。中O

首頁看點消息我的

貝殼找房App

（3）圖標的風格樣式

?黜

2px:精致時尚，如圖所示。

目

閱讀學院招聘我的

產(chǎn)品經(jīng)理App底部標簽欄

AQQUELH

首頁消息課程簡歷我的

前程無憂App底部標簽欄

3px：通用常規(guī)，如圖所示。

L/0￡

微信通訊錄發(fā)現(xiàn)我

微信App底部標簽欄

0?@Q

O網(wǎng)校孩子家長大學我的

一起學App底部標簽欄

4Px：年輕厚重，如圖所示。

首頁裝修干貨我的

好好住App底部標簽欄

含日②2

首頁頭條發(fā)現(xiàn)我的

眾安保險App底部標簽欄

?面性：穩(wěn)重扎實，運動類、閱讀類，如圖所示。

發(fā)現(xiàn)學習計劃知識城邦已購我的

得到App底部標簽欄

O?D

首頁分類我的學習帳號

網(wǎng)易云課堂App底部標簽欄

線面：活潑趣味，選中狀態(tài)，如圖所示。

M省司SO

首頁換新機服務站我的

愛回收App標笠欄

+

i超多人明買」a

閑魚魚塘賣閑置消息我的

閑魚App標簽欄

4.3.4課堂案例一制作旅游類App標簽欄

【案例設計要求】

1.運用軟件Illustrator和Photoshop制作標簽欄，設計效果、展示效果如圖所示。

2.標簽欄尺寸：750px(寬)x98px(高工

3.符合標簽欄的設計規(guī)則。

【案例學習目標】學習使用軟件Illustrator和Photoshop制作標簽欄。

G0。囹③

首頁攻略消息行程我的

設計效果圖

G0。囹聳

首頁攻略消息行程我的

展示效果圖

【案例知識要點】在Illustrator軟件中，使用矩形工具繪制形狀，使用鋼筆工具添加錨點,使

用直接選擇工具調(diào)整錨點到適當?shù)奈恢貌⒅谱鲌A角效果。在Photoshop軟件中，使用矩形工具和屬

性面板確定參考線位置,使用置入嵌入對象命令置入圖標，使用橫排文字工具輸入文字。

(1)在Illustrator中,按Ctrl+N組合鍵，彈出"新建文檔”對話框，設置寬度為24Px,高度

為24Px,取向為橫向，顏色模式為RGB,分辨率為72像素/英寸，單擊"創(chuàng)建"按鈕，新建一個

文件。

(2)選擇"編輯>首選項>常規(guī)"命令，彈出"首選項”對話框，將"鍵盤增量”選項設

為Ipx,如圖所示。選擇“單位”選項，切換到相應面板中進行設置，如圖所示。

[”■■)

(3)選擇"參考線和網(wǎng)格”選項,切換到相應的面板，將"網(wǎng)格線間隔”選項設為Ipx,如圖

所示，單擊“確定"按鈕。

(4)選擇“視圖>顯示網(wǎng)格’命令，顯示網(wǎng)格。選擇"視圖>對齊網(wǎng)格"命令，對齊網(wǎng)格。

選擇"視圖>對齊像素"命令，對齊像素。

(5)選擇"文件>打開"命令，彈出"打開"對話框，選擇云盤中的"ChO4>制作旅游類

App標簽欄>素材>02"文件，單擊“打開"按鈕，如圖所示。

(6)選擇"選擇"工具k,選取網(wǎng)格系統(tǒng)，按Ctrl+C組合鍵，復制圖形。返回到正在編輯的

頁面，按Ctrl+V組合鍵，將其粘貼到制作旅游類App標簽欄頁面中，并拖曳復制的網(wǎng)格系統(tǒng)到適

當?shù)奈恢?，效果如圖所示。

(7)選擇"矩形"工具Q,在頁面中單擊鼠標左鍵，彈出"矩形"對話框，選項的設置如圖

所示。單擊"確定"按鈕，出現(xiàn)一個圓角矩形。設置描邊色為灰色(153、153、153),填充描邊,

并設置填充色為無，效果如圖所示。

(8)選擇"窗口＞描邊"命令,彈出"描邊"控制面板,將"粗細”選項設為1.5px,“對齊

描邊"選項設為"使描邊內(nèi)側(cè)對齊"，其他選項的設置如圖所示，效果如圖所示。

(9)選擇"鋼筆"工具，，在矩形上方中間的位置單擊鼠標左鍵，添加一個錨點，在“屬性”

控制面板中，設置"X”選項為12pxJY"選項為Ipx,如圖所示，效果如圖所示。選擇"直接選

擇”工具K,按住Shift鍵的同時，選取需要的錨點，將其垂直向下拖曳7px的位置，效果如圖

標

(10)選擇"鋼筆"工具",，在形狀右側(cè)的位置單擊鼠標左鍵,添加一個錨點，在“屬性"控

制面板中，設置"X”選項為24px,"Y”選項為l()px,如圖所示，效果如圖所示。選擇"直接選

擇”工具,按住Shift鍵的同時，選取需要的錨點，將其水平向右拖曳5px的位置，效果如圖

麻。

(11)選擇"鋼筆"工具方,在形狀左側(cè)的位置單擊鼠標左鍵，添加T錨點，在“屬性"控

制面板中,設置"X"選項為Opx,"Y"選項為10px,如圖所示，效果如圖所示。選擇"直接選

擇"工具3,按住Shift鍵的同時，選取需要的錨點，將其水平向左拖曳5px的位置，效果如圖

所示。

(12)選擇"直接選擇"工具乂,在形狀右側(cè)選取需要的錨點，將其垂直向下拖曳2px的位

置，效果如圖所示。按住Shift鍵的同時，選取需要的錨點，將其垂直向下拖曳3px的位置，效果

如圖所示。使用相同的方法調(diào)整右側(cè)的錨點，效果如圖所示。

(13)選擇"鋼筆"工具",，在形狀下方的位置單擊鼠標左鍵,添加一個錨點，在“屬性"控

制面板中，設置"X"選項為10px,"Y"選項為22px,如圖所示,效果如圖所示。使用相同的方

法，分別在"X"選項為Upx、13Px和14px,"Y"選項均為22px的位置添加三個錨點，效果如圖

麻。

(14)選擇"直接選擇"工具號,在形狀下方選取需要的錨點，將其垂直向上拖曳5px的位

置，效果如圖所示。選取左側(cè)的錨點，將其水平向右拖曳Ipx的位置，效果如圖所示。使用相同

的方法調(diào)整右側(cè)的錨點，效果如圖所示

(15)選取形狀右下角的錨點，如圖所示，顯示邊角點,如圖所示。雙擊邊角點，彈出“邊角"

對話框，設置"半徑"選項為2px,其他選項的設置如圖所示。單擊“確定"按鈕，效果如圖所示。

(16)使用相同的方法調(diào)整左下角的錨點，效果如圖所示。選取形狀頂端的錨點，如圖所示,

顯示邊角點，如■圖所示。■■

雙擊邊角點，彈出“邊角"對話框，設置"半徑"選項為Ipx,其他選項的設置如圖所示。單

擊“確定"按鈕，效果如圖所示。使用相同的方法調(diào)整另外兩個錨點，效果如圖所示。

--_???--、■-、

(17)選擇"選擇"工具4，選取圖標。在"屬性"控制面板中，單擊"保持寬度與高度比例”

按鈕R,設置"高"選項為21px,其他選項的設置如圖所示。單擊"保持寬度與高度比例"按鈕

R,設置"寬”選項為22px,"Y”選項設為12px,其他選項的設置如圖所示，效果如圖所示。

(18)選擇“畫板"工具-0,按住Ak+Shifl組合鍵的同時，將"畫板1"垂直向下拖曳到適

當?shù)奈恢?，如圖所示，在文件中生成新的畫板“畫板2"。選擇"選擇”工具b,選取“畫板2”

中的圖標，設置描邊色為橘黃色(255、151、1),效果如圖所示。

(19)保持圖形的選取狀態(tài)，按Ctrl+C組合鍵，復制圖形，按Ctrl+F組合鍵，原位粘貼圖形,

設置填充色為橘黃色(255、151、1)，填充圖形，并設置描邊色為無，效果如圖所示。

(20)選擇"窗口＞透明度"命令，彈出“透明度”控制面板，將"不透明度”選項設為30%,

其他選項的設置如圖所示。在圖形上單擊鼠標右鍵，在彈出的快捷菜單中選擇"排列〉后移一層"

命令，如圖所示，將形狀后移一層，效果如圖所示。

(21)使用相同的方法分別繪制其他圖標,效果如圖所示。按住Shift鍵的同時,分別單擊圖

標的網(wǎng)格系統(tǒng)，將其同時選取，按Ctrl+3組合鍵，隱藏網(wǎng)格系統(tǒng)，效果如圖所示。按Ctrl+S組合

鍵，將文件保存在"Ch04>制作旅游類App標簽欄>素材”的路徑中，命名為"01疝”。

M—

-1?|<3|畫@

管國畫畫倒I

(22)在Photoshop中，按Ctrl+N組合鍵,彈出"新建文檔"對話框，將寬度設為750像素，

高度設為98像素,分辨率設為72像素/英寸，背景內(nèi)容設為白色，如圖所示。單擊“創(chuàng)建"按鈕,

完成文檔新建。

(23)選擇"視圖>新建參考線版面"命令，彈出"新建參考線版面"對話框，設置如圖所

示。單擊“確定"按鈕，完成參考線的創(chuàng)建，效果如圖所示。

(24)選擇“矩形”工具口.，在屬性欄的“選擇工具模式”選項中選擇“形狀”，將“填充”顏色設為

黑色，"描邊"顏色設為無。在圖像窗口中適當?shù)奈恢美L制矩形，在“圖層'控制面板中生成新的形

狀圖層'矩形1二選擇“窗口>屬性"命令，彈出"屬性"面板，在面板中進行設置。在"Wr

選項中輸入輸入數(shù)值，如圖所示，按Enter鍵確定操作，如圖所示。去除小數(shù)點后的數(shù)值，保留整

(25)按Ctrl+R組合鍵，顯示標尺。選擇"視圖>對齊到〉全部"命令。在圖像窗口左側(cè)標

尺上單擊鼠標并水平向右進行拖曳，在矩形右側(cè)錨點的位置松開鼠標，完成參考線的創(chuàng)建。效果

如圖所示。

(26府圖像窗口上方標尺上單擊鼠標并垂直向下進行拖曳，在矩形上方錨點的位置松開鼠標,

完成參考線的創(chuàng)建，如圖所示。使用相同的方法，在矩形下方創(chuàng)建一條參考線，效果如圖所示。

(27)按Ctrl+T組合鍵，在圖形周圍出現(xiàn)變換框，如圖所示。在圖像窗口左側(cè)標尺上單擊鼠標

并水平向右進行拖曳，在矩形中心點的位置松開鼠標，完成參考線的創(chuàng)建，效果如圖所示。

(28)選擇"移動”工具也，按住Shift鍵的同時，將矩形水平向右移動到適當?shù)奈恢?，使?/p>

形左側(cè)貼齊輔助線，如圖所示。使用上述的方法，分別在位于矩形中心和矩形右側(cè)的位置添加兩

條垂直輔助線，如圖所示。

(29)使用相同的方法，分別添加四條垂直輔助線，如圖所示。選擇,矩形”工具口，在“屬

性"面板中進行設置，如圖所示。

??X

□□硼彬Mil

W:13800H:

X:SOOftKM

■「1信索---

口vEv同v.

□。像未。僧東□

按QH+T組合鍵，在圖形周圍出現(xiàn)變換框，在圖像窗口左側(cè)標尺上單擊鼠標并水平向右進行

拖曳，在矩形中心點的位置松開鼠標，完成參考線的創(chuàng)建，效果如圖所示。按Enter鍵確定操作,

在"圖層"控制面板中選中"矩形I"圖層，按Delele鍵將其刪除，效果如圖所示。

(30)選擇"文件>置入嵌入對象"命令，彈出"置入嵌入的對象"對話框。選擇云盤中的