應(yīng)用漸變與油漆桶工具（時(shí)鐘圖標(biāo)）課件

應(yīng)用漸變與油漆桶工具制作時(shí)鐘圖標(biāo)學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)了解漸變工具的類型掌握漸變工具的使用方法掌握油漆桶工具的使用方法培養(yǎng)圖形圖像處理從業(yè)人員的從業(yè)素養(yǎng)情景導(dǎo)入5情景導(dǎo)入5隨著網(wǎng)絡(luò)硬件設(shè)備的日益完善，網(wǎng)頁構(gòu)成中的多媒體元素運(yùn)用的也越來越多，主要包括音頻、視頻和動(dòng)畫等，因此UI界面設(shè)計(jì)也應(yīng)運(yùn)而生。UI界面設(shè)計(jì)是數(shù)字媒體藝術(shù)專業(yè)重要的基礎(chǔ)課程，是一門集技術(shù)與藝術(shù)一體化的基礎(chǔ)學(xué)科，課程的設(shè)置面向職業(yè)崗位要求，作為數(shù)字媒專業(yè)的雯雯同學(xué)，小試牛刀，做了一個(gè)關(guān)于時(shí)鐘的圖標(biāo)。時(shí)鐘圖標(biāo)任務(wù)分析7任務(wù)分析當(dāng)我們要制作一個(gè)UI圖標(biāo)時(shí)，首先我們要看懂界面的需求，對每個(gè)功能圖標(biāo)的定義要非常清楚，否則我們設(shè)計(jì)的結(jié)果將導(dǎo)致用戶難以理解，直觀大方的體現(xiàn)其特點(diǎn)，這個(gè)也是圖標(biāo)設(shè)計(jì)所關(guān)心的可用性問題。本任務(wù)時(shí)做一個(gè)時(shí)鐘圖標(biāo)，主要是學(xué)習(xí)使用繪圖工具和漸變工具。使用圓角矩形工具，橢圓工具、鋼筆工具和直線工具繪制圖標(biāo)，使用漸變工具填充漸變圖標(biāo)。工具講解工具講解99【一、漸變工具介紹】在Photoshop工具欄中單擊漸變工具，或者按Shift+G組合鍵，將出現(xiàn)漸變的屬性狀態(tài)欄。漸變工具屬性欄工具講解1010【一、漸變工具介紹】可編輯漸變面板工具講解1111【一、漸變工具介紹】增加顏色色標(biāo)（1）在“漸變編輯器”對話框中，單擊顏色編輯框下方的適當(dāng)位置，可以增加顏色色標(biāo)，添加自己想要的漸變顏色。在位置選項(xiàng)中可以直接輸入數(shù)值或者用鼠標(biāo)直接拖拽顏色色標(biāo)。工具講解1212【一、漸變工具介紹】拾色器選色（2）點(diǎn)擊顏色方塊，會(huì)彈出相應(yīng)的拾色器，選擇所需要的顏色。工具講解1313【一、漸變工具介紹】刪除色標(biāo)（3）如果不需要漸變中的某個(gè)顏色了，可以任意選擇一個(gè)顏色色標(biāo)，單擊對話框下方的“刪除”按鈕，或者按Delete鍵。工具講解1414【一、漸變工具介紹】調(diào)整不透明度（4）單擊顏色編輯器框左上方的黑色圖標(biāo)，可以調(diào)整顏色的“不透明度”.工具講解1515【一、漸變工具介紹】不透明度過渡（5）調(diào)整“不透明度”選項(xiàng)的數(shù)值，可以使色標(biāo)的顏色向兩邊的顏色過渡到半透明的效果。工具講解1616【一、漸變工具介紹】不同類型漸變效果2.漸變類型，從左到右依次是線性漸變、徑向漸變、角度漸變、對稱漸變、菱形漸變，漸變效果如圖所示。反向：用于反向產(chǎn)生色彩漸變的效果。仿色：用于使?jié)u變更平滑。透明區(qū)域：用于產(chǎn)生不透明度。工具講解1717【二、標(biāo)尺、參考線和網(wǎng)格線的設(shè)置】單位與標(biāo)尺面板標(biāo)尺、參考線和網(wǎng)格線的設(shè)置可以使圖像處理更加精確。實(shí)際設(shè)計(jì)任務(wù)中的許多問題，都需要使用標(biāo)尺、參考線和網(wǎng)格線來解決。

1.標(biāo)尺的設(shè)置設(shè)置標(biāo)尺可以精確地編輯和處理圖像。選擇“編輯”>“首選項(xiàng)”>“單位與標(biāo)尺”命令，彈出相應(yīng)的對話框。工具講解1818【二、標(biāo)尺、參考線和網(wǎng)格線的設(shè)置】顯示標(biāo)尺單位：用于設(shè)置標(biāo)尺和文字的顯示單位，有不同的顯示單位供選擇。

列尺寸：用列來精確確定圖像的尺寸。

點(diǎn)/派卡大?。号c輸出有關(guān)。

控制“視圖”>“標(biāo)尺”命令，可以將標(biāo)尺顯示或隱藏，如圖所示。工具講解1919【二、標(biāo)尺、參考線和網(wǎng)格線的設(shè)置】拖動(dòng)標(biāo)尺將鼠標(biāo)光標(biāo)放在標(biāo)尺的x軸和y軸的0點(diǎn)處，單擊并按住鼠標(biāo)不放，向右下方拖曳鼠標(biāo)到適當(dāng)?shù)奈恢?，如圖所示，釋放鼠標(biāo)，標(biāo)尺的x軸和y軸的0點(diǎn)就變?yōu)槭髽?biāo)移動(dòng)后的位置。工具講解2020【二、標(biāo)尺、參考線和網(wǎng)格線的設(shè)置】設(shè)置參考線2、參考線的設(shè)置（1）、設(shè)置參考線：將鼠標(biāo)光標(biāo)放在水平標(biāo)尺上，按住鼠標(biāo)不放，向下拖曳出水平的參考線。將鼠標(biāo)光標(biāo)放在垂直標(biāo)尺上，按住鼠標(biāo)不放,向右拖曳出垂直的參考線,如圖所示。工具講解2121【二、標(biāo)尺、參考線和網(wǎng)格線的設(shè)置】新建參考線（2）、顯示或隱藏參考線：選擇“視圖>顯示>參考線”命令，可以顯示或隱藏參考線。此命令只在存在參考線的前提下才能應(yīng)用。

（3）、移動(dòng)參考線：選擇“移動(dòng)”工具中，將光標(biāo)放在參考線上，光標(biāo)變?yōu)橹袝r(shí)，按住鼠標(biāo)拖曳，可以移動(dòng)參考線。

（4）、鎖定、清除、新建參考線:選擇“視圖”>“鎖定參考線”命令或按Alt+Ctrl+；組合鍵，可以將參考線鎖定，參考線鎖定后將不能移動(dòng)。選擇“視圖”>“清除參考線”命令，可以將參考線清除。選擇“視圖”>“新建參考線”命令，彈出“新建參考線”對話框，如圖所示，設(shè)定后單擊“確定”按鈕，圖像中出現(xiàn)新建的參考線。工具講解2222【二、標(biāo)尺、參考線和網(wǎng)格線的設(shè)置】網(wǎng)格線對話框3、網(wǎng)格線的設(shè)置選擇“編輯”>“首選項(xiàng)”>“參考線、網(wǎng)格和切片”命令，彈出相應(yīng)的對話框，如圖所示。工具講解2323【二、標(biāo)尺、參考線和網(wǎng)格線的設(shè)置】顯示網(wǎng)格（1）參考線：用于設(shè)定參考線的顏色和樣式。（2）網(wǎng)格：用于設(shè)定網(wǎng)格的顏色、樣式、網(wǎng)格線隔和子網(wǎng)格等。（3）切片：用于設(shè)定切片的顏色和顯示切片的編號(hào)。（4）路徑：用于設(shè)定路徑的選定顏色。選擇“視圖”>“顯示”>“網(wǎng)格”命令，可以顯示或隱藏網(wǎng)格，如圖所示。工具講解2424【二、標(biāo)尺、參考線和網(wǎng)格線的設(shè)置】【關(guān)鍵點(diǎn)撥】反復(fù)按Ctrl+R組合鍵，可以將標(biāo)尺顯或隱藏。反復(fù)按Ctrl+；組合鍵，可以將參考顯示或隱藏。反復(fù)按Ctrl+’組合鍵，可以將網(wǎng)格顯示或隱藏。制作“時(shí)鐘圖標(biāo)”案例制作“時(shí)鐘圖標(biāo)”案例261.背景制作（1）、打開Photoshop軟件，新建一個(gè)10cm（寬）X10cm（高），分辨率為72像素/英寸的文檔，命名為“時(shí)鐘圖標(biāo)”。新建文件制作“時(shí)鐘圖標(biāo)”案例27271.背景制作（2）、選擇“漸變”工具，單擊屬性欄中的“點(diǎn)按可編輯漸變”按鈕。點(diǎn)擊漸變工具制作“時(shí)鐘圖標(biāo)”案例2828281.背景制作（3）、在彈出的“漸變編輯器”對話框中，在“位置”選項(xiàng)中分別輸入0、25、65、90、100五個(gè)位置點(diǎn)，分別設(shè)置其顏色。設(shè)置其顏色制作“時(shí)鐘圖標(biāo)”案例292929291.背景制作（4）、選中屬性欄中的“角度漸變”按鈕，在圖像中從中心向右上方拖拽漸變顏色，得到效果如圖。角度漸變背景制作“時(shí)鐘圖標(biāo)”案例303030302.鐘表制作（1） 新建圖層，選擇“圓角矩形”工具，在屬性欄中選擇“路徑”模式，“半徑”設(shè)置為60像素，在圖像窗口中繪制路徑。繪制圓角底盤制作“時(shí)鐘圖標(biāo)”案例2.鐘表制作（2）、按住“Ctrl+Enter”組合鍵，將路徑轉(zhuǎn)化為選區(qū)。路徑轉(zhuǎn)化為選區(qū)制作“時(shí)鐘圖標(biāo)”案例322.鐘表制作（3）、選擇“漸變”工具，單擊屬性欄中的“點(diǎn)按可編輯漸變”按鈕，在彈出的“漸變編輯器”對話框中，在0和100的位置處設(shè)置漸變顏色。設(shè)置漸變顏色制作“時(shí)鐘圖標(biāo)”案例332.鐘表制作（4）、點(diǎn)擊漸變屬性欄中的“線性漸變”按鈕，在選區(qū)中從左上方向右下方拖拽漸變色，選區(qū)中填充線性漸變制作“時(shí)鐘圖標(biāo)”案例34342.鐘表制作（5）、新建圖層，選擇“橢圓”工具，在屬性欄中的“選擇工具模式”選項(xiàng)中選擇“形狀”，填充選擇“漸變填充”，從位置0的白色到位置100的灰色，徑向填充，“描邊”為5.07像素的黑色。繪制表盤制作“時(shí)鐘圖標(biāo)”案例352.鐘表制作（6）、同時(shí)選中“背景圖層”，“圖層1”，“橢圓1”，點(diǎn)擊屬性欄中的居中對齊，讓底座和表盤都居中在背景里。居中對齊制作“時(shí)鐘圖標(biāo)”案例362.鐘表制作(7)、按住“Ctrl+R”組合鍵,出現(xiàn)標(biāo)尺線，分別從上方和左側(cè)拖動(dòng)輔助線，找出表盤的中心，然后用矩形工具繪制出12點(diǎn)的刻度，前景色設(shè)置為深綠色（參考值為：1a5064）。繪制鐘表刻度制作“時(shí)鐘圖標(biāo)”案例2.鐘表制作（8）、按住Alt鍵，拖動(dòng)12點(diǎn)的刻度，直接復(fù)制到6點(diǎn)方向。同理復(fù)制到3點(diǎn)鐘刻度，執(zhí)行Ctrl+T組合鍵，進(jìn)行自由變化，旋轉(zhuǎn)90°，借助輔助線對齊圖標(biāo)，得到3點(diǎn)鐘的刻度，再次按住Alt，將3點(diǎn)鐘方向的刻度拖動(dòng)到9點(diǎn)鐘方。最后借助輔助線和屬性欄的對齊方式，完成表盤刻度的繪制。繪制表盤制作“時(shí)鐘圖標(biāo)”案例2.鐘表制作（9）、執(zhí)行“矩形工具”繪制兩個(gè)長短不一的矩形指針，顏色為深綠色（參考值：1a5064）。繪制指針制作“時(shí)鐘圖標(biāo)”案例392.鐘表制作（10)、選擇“橢圓”工具，在屬性欄中的“選擇工具模式”選項(xiàng)中選擇“形狀”，按住Shift鍵的同時(shí)，在表盤中繪制一個(gè)圓形，前景色同指針顏色（參考值：1a5064）。繪制表盤中心制作“時(shí)鐘圖標(biāo)”案例2.鐘表制作（11)、鐘表圖標(biāo)繪制完成。完成繪制知識(shí)回顧知識(shí)回顧漸變工具是我們圖像繪制中使用頻率非常高的一個(gè)工具，特別需要掌握的是對漸變編輯器的設(shè)置，顏色色標(biāo)的設(shè)置，漸變的類型等。在制作這些圖標(biāo)的時(shí)候，有時(shí)候也會(huì)借助網(wǎng)格線來進(jìn)行輔助，如何設(shè)置網(wǎng)格線呢？執(zhí)行“編輯”>“首選項(xiàng)”>“參考線、網(wǎng)格和切片”命令，將會(huì)彈出相應(yīng)的對話框。其中的“參考線”選項(xiàng)用于設(shè)定參考線的顏色和樣；“網(wǎng)格”用于設(shè)定網(wǎng)格的顏色、樣式、網(wǎng)格線隔和子網(wǎng)格等。“切片”用于設(shè)定切片的顏色和顯示切片的編號(hào)?！奥窂健庇糜谠O(shè)定路徑的選定顏色。選擇“視圖”>“顯示”>“網(wǎng)格”命令，可以顯