Photoshop平面設(shè)計(jì)基礎(chǔ) 課件 任務(wù)8.1 制作教育類App歡迎頁(yè)

任務(wù)8.1制作教育類App歡迎頁(yè)O任

務(wù)

8.1

制

作

教

育

類A

pp

歡

迎

頁(yè)P(yáng)h

ot

os

h

o

p

平

面

設(shè)

計(jì)

基

礎(chǔ)任務(wù)描述R

E

N

W

U

M

IA

O

S

H

U任務(wù)小結(jié)REN

WU

XIA

O

JI

E知識(shí)技能ZH

I

S

H

IJI

NEN

G任務(wù)實(shí)施R

E

N

W

U

S

H

I

S

H

I目錄任務(wù)描述RENWUSHISHI學(xué)校為了方便教師整理優(yōu)質(zhì)教育信息、

教學(xué)視頻、

教材課件等資源

，

學(xué)生能以及創(chuàng)新交互方式、

邊學(xué)邊玩的功能

，

為學(xué)生開發(fā)一個(gè)學(xué)習(xí)App。

學(xué)校為吸引更多學(xué)生使用App，

委托UI設(shè)計(jì)公司根據(jù)App的各類功能

，

為App設(shè)計(jì)符合青

少年的教育軟件歡迎頁(yè)面。

主要使用3D工具

，

再配合使

用圖形工具和操控變形工具設(shè)計(jì)青少年教育app的歡迎頁(yè)

，

結(jié)合所學(xué)的色彩搭配知識(shí)

，

最后為App軟件繪制歡迎頁(yè)樣

式

，

完成效果如圖8-1-1所示。圖8-1-1教育app歡迎頁(yè)任務(wù)描述知識(shí)技能ZHISHIJINENG用于設(shè)定網(wǎng)格的彈性

，分別為剛性、

正常、

扭曲。

剛性

：變形更精確

，但是缺少過(guò)渡；

正常

：效果精確

，過(guò)渡柔和；

扭曲：

可以實(shí)現(xiàn)透視變形效果。（

1）

模式：知識(shí)技能

-界面歡迎頁(yè)設(shè)計(jì)1.

自動(dòng)提交功能

自動(dòng)提交功能

，

可以高效裁剪、

變換

，

以及置入或輸入文本。

提交更改時(shí)

，不再需要按下Enter鍵

(Win)/

Return鍵

(macOS)

，也不需要單擊選項(xiàng)欄中的

“提交”按鈕。2.操控變形工具

Photoshop2022中的操控變形工具是一組功能強(qiáng)大的工具

，

又稱為正規(guī)無(wú)刪減校準(zhǔn)（

PuppetWarp）

工具

，該工具可對(duì)圖像中對(duì)象的特定區(qū)域進(jìn)行形變操作

，添加標(biāo)記點(diǎn)（或稱為"骨骼"）

，

通過(guò)移動(dòng)和旋轉(zhuǎn)這些點(diǎn)來(lái)扭曲和變形圖像。

點(diǎn)擊編輯-操控變形工具

，

用于對(duì)圖像進(jìn)行變形、

扭

曲和形變。知識(shí)技能

-界面歡迎頁(yè)設(shè)計(jì)（1）

密度：用于設(shè)置網(wǎng)格的疏密。分別為較少點(diǎn)、正常、較多點(diǎn)。較少點(diǎn)：網(wǎng)格點(diǎn)少，只能放少量圖釘；正

常：網(wǎng)格點(diǎn)適中，介于較少點(diǎn)和較多點(diǎn)之間；較多點(diǎn)：網(wǎng)格點(diǎn)多，可以放更多圖釘。（2）

擴(kuò)展：

用于設(shè)置變形的范圍，擴(kuò)展像素大，網(wǎng)格的范圍會(huì)擴(kuò)大，變形后邊緣更平滑；擴(kuò)展像素小，網(wǎng)

格范圍變小，變形后邊緣更生硬。（3）

展示網(wǎng)格：

勾選時(shí)顯示網(wǎng)格，取消勾選時(shí)隱藏網(wǎng)格。（4）

圖釘深度：選擇一個(gè)圖釘，單擊按鈕，可以將圖釘向上或向下移動(dòng)一個(gè)堆疊順序。（5）

旋轉(zhuǎn)：用于調(diào)整圖釘旋轉(zhuǎn)角度，分別為自動(dòng)、固定兩種。

自動(dòng)：拖拽圖釘時(shí)軟件會(huì)自動(dòng)對(duì)圖像進(jìn)行旋

轉(zhuǎn)處理；

固定：用于旋轉(zhuǎn)固定角度，選擇固定后，在右側(cè)輸入旋轉(zhuǎn)角度，選擇圖釘按住Alt鍵，出現(xiàn)

變換框，拖動(dòng)鼠標(biāo)旋轉(zhuǎn)固定角度。知識(shí)技能

-界面歡迎頁(yè)設(shè)計(jì)（1）

復(fù)位按鈕：可以刪除所有圖釘，將網(wǎng)格恢復(fù)到變形前的狀態(tài)。（2）

撤銷按鈕：放棄變形操作，或按下快捷鍵ESC鍵放棄編輯。（3）

應(yīng)用按鈕：確認(rèn)變形操作，或按下快捷鍵Enter鍵確認(rèn)編輯。3.3D工具Photoshop2022提供了一些功能強(qiáng)大的3D工具，用于創(chuàng)建、編輯和渲染三維模型和場(chǎng)景。3D圖層：Photoshop2022允許你將普通的圖層轉(zhuǎn)換為3D圖層，

以便在三維空間中進(jìn)行編輯和變換。3D形狀工具：Photoshop2022提供了一系列的3D形狀工具，如3D文字、3D立方體、3D球體等，可以用于創(chuàng)建基本的3D對(duì)象。3D攝像機(jī)工具：通過(guò)3D攝像機(jī)工具，你可以在三維空間中移動(dòng)、旋轉(zhuǎn)和縮放攝像機(jī)，

以控制視角和觀察角度。3D繪畫和涂鴉：你可以在3D模型上進(jìn)行繪畫和涂鴉操作，就像在二維圖像上繪制一樣?？梢允褂酶鞣N畫筆和繪畫工具，

以及調(diào)整材質(zhì)和紋理。3D渲染：Photoshop2022提供了內(nèi)置的3D渲染引擎，可以將3D場(chǎng)景渲染成逼真的圖像?？梢哉{(diào)整光照、材質(zhì)、漸變和其他渲染屬性來(lái)獲得所需的效果。3D動(dòng)畫：通過(guò)Photoshop2022的時(shí)間軸功能，可以創(chuàng)建和編輯3D動(dòng)畫效果，包括旋轉(zhuǎn)、縮放、淡入淡出等。任務(wù)實(shí)施RENWUSHISHI03繪制按鈕04制作底圖05制作3D繞轉(zhuǎn)動(dòng)態(tài)效果01新建文檔02建立參考線任務(wù)實(shí)施01

新

建

文

檔

新建文檔

，選擇

“移動(dòng)設(shè)備”→“

iphone8/7/6”

，數(shù)值使用默認(rèn)。

任務(wù)實(shí)施—1.新建文檔02

建

立

參

考

線

執(zhí)行

“視圖”→

“新建參考線”命令

，

分別在水平位置40像素、

128像素、

1236像

素

，

垂直位置40像素、

710像素建立參考線。

任務(wù)實(shí)施—2.建立參考線03

繪

制

按

鈕（

1）在

“

圖層面板”

中建立組

，命名為

“按鈕”

，

在

“按鈕組”建立3個(gè)圖層

，分別

命名為

“返回”、

“跳過(guò)”、

“顯示”

，如圖8-1-4所示。（2）選擇

“返回”

圖層

，

單擊

“矩形工具”繪制一個(gè)寬高為4040像素的矩形

，在屬

性欄中輸入如圖8-1-5數(shù)值

，按快捷鍵<Ctrl

+T>把圖形旋轉(zhuǎn)45度后

，刪格化圖像

，

單

擊

“矩形選框工具”

，

把矩形的右側(cè)刪除

，

最后把圖形放置在水平位置第一、

第二條

參考線中間

，如圖8-1-6所示。

任務(wù)實(shí)施—3.繪制按鈕圖8-1-4

圖層面板圖8-1-5創(chuàng)建矩形數(shù)值圖8-1-6“返回

”圖層效果圖

任務(wù)實(shí)施—3.繪制按鈕03

繪

制

按

鈕（3）選擇

“跳過(guò)”圖層

，

單擊

“矩形工具”繪制一個(gè)寬高為10040像素的灰色矩形，

在屬性欄中輸入如圖8-1-7數(shù)值

，

新建

“跳過(guò)”文字圖層

，

選擇

“蘋方黑體”

、

18像

素文字大小

，顏色選擇黑色

，

最后把圖形和文字統(tǒng)一放置在畫板的右上角

，

如圖8-1-圖8-1-7創(chuàng)建矩形數(shù)值

圖8-1-8“跳過(guò)

”

圖層效果圖8所示。

任務(wù)實(shí)施—3.繪制按鈕03

繪

制

按

鈕（4）選擇

“顯示”圖層

，

單擊

“矩形工具”繪制一個(gè)寬高為10020像素的灰色矩形

，

在屬性欄中輸入如圖8-1-10所示數(shù)值

，

單擊

“橢圓工具

”

，

分別在圓角矩形上依次

繪制4個(gè)寬高為1212像素的圓形

，填充顏色

，把所有圖形組合放置在手機(jī)頁(yè)面的下方，

如圖8-1-11所示。圖8-1-10創(chuàng)建矩形數(shù)值

圖8-1-11“顯示

”圖層效果圖04

制

作

底

圖（

1）

在

“

圖層面板

”建立組

，

命名為

“底圖

”

，

導(dǎo)入素材

“8-1

書籍.png

”

，

調(diào)整

圖片位置。

在

“底圖

”組中新建一個(gè)寬高為320240像素的矩形

，

顏色填充為黃色、無(wú)邊框

，

完成后柵格化圖形

，選擇圖形

“濾鏡”→

“像素化”→

“彩色半調(diào)”

，在彩

色半調(diào)面板中輸入如下圖8-1-12的數(shù)據(jù)。

利用

“魔棒工具”和

“矩形選框工具”，

把多余的部分刪除

，刪除后效果如圖8-1-13所示。

最終為矩形添加

“漸變疊加圖層樣

式”

，

并調(diào)整透明度為40%,效果如圖8-1-14所示。

任務(wù)實(shí)施—4.制作底圖圖8-1-12彩色半調(diào)面板數(shù)值圖8-1-13彩色半調(diào)效果圖

圖8-1-14底圖效果圖04

制

作

底

圖（2）插入素材

“人物”

，執(zhí)行“編輯”→“操控變形”命令

，利用人體骨骼原理

，

單擊鼠標(biāo)左鍵

，

為人物添加

“圖釘”

，添加效果如圖8-1-15所示

，選擇脖子位置圖釘，

按住Alt鍵

，

對(duì)頭部進(jìn)行旋轉(zhuǎn)

，

調(diào)整人物頭部角度

，

完成后按回車

，

最終調(diào)整效果如

圖8-1-16所示。（3）

利用

“

圖形工具

”

、

“羽化

”

、

“透明度

”等常用工具

，

為人物、

書籍添加投

影效果

，使整個(gè)畫面更加和諧

，添加后底圖效果如圖8-1-17所示。

任務(wù)實(shí)施—4.制作底圖圖8-1-15添加圖釘效果圖圖8-1-16操控變形效果圖

圖8-1-17添加投影效果圖05

3

D

繞

轉(zhuǎn)

動(dòng)

態(tài)

效

果5.制作3D繞轉(zhuǎn)動(dòng)態(tài)效果

（1）新建圖層

，命名為

“

3D繞轉(zhuǎn)效果”。確認(rèn)

“

3D繞轉(zhuǎn)效果”為當(dāng)前編輯層

，執(zhí)行

“

3D

”

→

“

從圖層新建網(wǎng)格

”

→

“

網(wǎng)格預(yù)設(shè)

”

→

“

圓柱體

”

，

點(diǎn)擊

“

視圖

”

→

“顯示”

，確認(rèn)如圖8-1-18所示為勾選狀態(tài)。

（3）選擇

“

3D繞轉(zhuǎn)效果圖層”

，通過(guò)選擇黃色方塊分別對(duì)X軸、

Y軸、

旋轉(zhuǎn)角度改變

圓柱體大小和角度。

如圖8-1-19所示。 任務(wù)實(shí)施—5.制作3D繞轉(zhuǎn)動(dòng)態(tài)效果05

3

D

繞

轉(zhuǎn)

動(dòng)

態(tài)

效

果

（

1）

新建圖層

，

命名為

“

3D繞轉(zhuǎn)效果

”

。

確認(rèn)

“

3D繞轉(zhuǎn)效果

”為當(dāng)前編輯層

，

執(zhí)

行

“

3D

”

→

“從圖層新建網(wǎng)格

”

→

“

網(wǎng)格預(yù)設(shè)

”

→

“

圓柱體

”

，

點(diǎn)擊

“

視圖

”

→

“顯示”

，確認(rèn)如圖8-1-18所示為勾選狀態(tài)。（3）選擇

“

3D繞轉(zhuǎn)效果圖層”

，通過(guò)選擇黃色方塊分別對(duì)X軸、

Y軸、

旋轉(zhuǎn)角度改變

圓柱體大小和角度。

如圖8-1-19所示。 任務(wù)實(shí)施—5.制作3D繞轉(zhuǎn)動(dòng)態(tài)效果圖8-1-183D狀態(tài)勾選圖

圖8-1-19圓柱體效果圖05

3

D

繞

轉(zhuǎn)

動(dòng)

態(tài)

效

果

（4

）

選擇

“

3D面板

”

，

點(diǎn)擊

“底部材質(zhì)

”,在屬性面板改變材質(zhì)的

“粗糙度

”和

“不透明度

”數(shù)值

，

如圖8-1-20所示；

點(diǎn)擊

“頂部材質(zhì)

”,在屬性面板改變材質(zhì)的

“粗糙度

”和

“不透明度

”數(shù)值

，

如圖8-1-20所示；

點(diǎn)擊

“

圓柱體材質(zhì)

”,在屬性面

板輸入材質(zhì)的

“粗糙度”為10%

，在

“不透明度”的位置載入紋理

“8-1文字.psd”，

并把不透明度數(shù)值改為0

，如圖8-1-20所示。

最終圓柱體效果如圖8-1-21所示。 任務(wù)實(shí)施—5.制作3D繞轉(zhuǎn)動(dòng)態(tài)效果圖8-1-20底部、頂部、圓柱體材質(zhì)數(shù)值圖8-1-21圓柱體效果圖 任務(wù)實(shí)施—5.制作3D繞轉(zhuǎn)動(dòng)態(tài)效果05

3

D

繞

轉(zhuǎn)

動(dòng)

態(tài)

效

果

（

5

）

選擇

“

3D繞轉(zhuǎn)效果

”

圖層

，

添加

“

圖層蒙版

”

，

單擊

“橡皮擦工具

”把

“圖層蒙版”

中重合位置擦掉。

插入素材

“8-1星星.png”,旋轉(zhuǎn)、

移動(dòng)并放置在畫板

中

，添加“圖層蒙版”

，

單擊

“橡皮擦工具”

，把

“圖層蒙版”

中重合位置擦掉。

如

圖8-1-22所示。圖8-1-22星星圖層效果圖05

3

D

繞

轉(zhuǎn)

動(dòng)

態(tài)

效

果（7）

打開

“窗口

”

→

“

時(shí)間軸

”

，

在

“

時(shí)間軸

”面板創(chuàng)建視頻時(shí)間

，

點(diǎn)開

“

3D網(wǎng)格

”

，

在0秒位置

，

點(diǎn)擊

“

圓柱體

”前圖形，

添加關(guān)鍵幀；

按照上一步的操作方式

，

在1秒位置添加關(guān)鍵幀

，

沿Y軸旋轉(zhuǎn)179度（無(wú)限接近180度）

；

按照上一步的操

作方式

，

在2秒位置添加關(guān)鍵幀

，

沿Y軸旋轉(zhuǎn)179度（無(wú)限接近180度）

；

最后

，

把時(shí)

間線拖到2秒處結(jié)束。

如圖8-1-23所示。圖8-1-23時(shí)間軸設(shè)置（8）點(diǎn)擊時(shí)間軸

“設(shè)置，

勾選

“循環(huán)播放”。

6.導(dǎo)出Gif格式最后保存

，選擇Gif動(dòng)畫

，導(dǎo)出即可。 任務(wù)實(shí)施—5.制作3D繞轉(zhuǎn)動(dòng)態(tài)效果任務(wù)小結(jié)RENWUSHISHI

任務(wù)小結(jié)

在3D工具中

，建立圖形和制作動(dòng)效是最基礎(chǔ)的

，本次任務(wù)主要學(xué)習(xí)利用3D工具

，通過(guò)調(diào)整“圓柱體”調(diào)整大小

，制作簡(jiǎn)單動(dòng)畫，最終完成教育app歡迎頁(yè)效果。利用圖形工具、操控變形、3D工具，“制作科技公司App歡迎頁(yè)”。效果如圖8-1-25所示。1.新建移動(dòng)設(shè)備“

iphone6/7/8”畫板

，導(dǎo)入素材“8-1拓展背景圖.png”素材

，放

置在畫板中心。2.繪制按鈕（1）選擇“矩形工具”

，繪制一個(gè)寬高為11648像素的矩形

，設(shè)置圓角22像素

，填充

為黑色；選擇“文字工具”

，輸入文字“跳過(guò)”

，設(shè)置字符大小為24像素

，字體樣式

為黑體

，顏色為白色；新建“組”命名為“跳過(guò)按鈕”

，同時(shí)選擇圖形和文字圖層