1.3 初識Photoshop CC

Photoshop是目前市面上使用最為普遍的圖像處理與合成軟件，最新的版本為Photoshop CC，本書中的全部操作實例都將使用Photoshop CC完成。

在使用Photoshop CC進(jìn)行設(shè)計操作之前，首先需要將該軟件安裝到計算機中，然后雙擊桌面上的快捷方式圖標(biāo)即可成功啟動Photoshop CC。如圖1-15所示為Photoshop CC的工作界面。

? 菜單欄。

菜單欄中包含了各種可執(zhí)行的命令。Photoshop CC的菜單欄中共包括11個菜單，分別為文件、編輯、圖像、圖層、文字、選擇、濾鏡、3D、視圖、窗口和幫助。

? 標(biāo)題欄。

標(biāo)題欄中會顯示文檔名稱、文件格式、顏色模式和文件縮放比例等信息。如果文檔中包含多個圖層，則標(biāo)題欄中還會顯示當(dāng)前被選中的圖層名稱。

? 工具箱。

工具箱中存放著Photoshop CC中的全部工具，用戶可以單擊選擇不同的工具進(jìn)行操作與編輯。

? 狀態(tài)欄。

狀態(tài)欄中顯示文檔大小、文檔尺寸和文檔縮放比例等信息。

? 文檔窗口。

即圖像的顯示區(qū)域，主要用于編輯和修改圖像。

? 面板。

Photoshop CC中共有26個面板，主要用于對各種工具和功能進(jìn)行更加精確的設(shè)置，用戶可以在“窗口”菜單中找到這些面板。

? 選項欄。

選項欄包含不同的參數(shù)，用于設(shè)置當(dāng)前工具的屬性，具體參數(shù)會隨著所選工具的不同而不同。

1.3.1 優(yōu)化配置Photoshop CC

相對于其他類型的專業(yè)軟件來說，Photoshop CC算得上是一個消耗系統(tǒng)資源的大戶。為了使Photoshop CC的運行能夠更加流暢，各個功能都能正常使用，我們需要在操作前進(jìn)行簡單的設(shè)置。

Photoshop CC在運行時，需要使用一部分硬盤來進(jìn)行圖像的臨時存儲。如果打開的文件過多，就可能出現(xiàn)暫存盤不足的問題，這會導(dǎo)致程序強制關(guān)閉，造成數(shù)據(jù)丟失。

Photoshop CC默認(rèn)的暫存盤為C盤，默認(rèn)保存的歷史記錄為20步，用戶可以根據(jù)自身需求更改這些設(shè)置。

執(zhí)行“編輯>首選項>性能”命令，彈出“首選項”對話框，提高“歷史記錄狀態(tài)”的數(shù)值，并將剩余容量大、不常使用的本地磁盤指定為暫存盤，如圖1-16所示。

執(zhí)行“編輯>首選項>文件處理”命令，彈出“首選項”對話框，提高“近期文件列表包含”的數(shù)值，如圖1-17所示。

1.3.2 文件的基本操作

Photoshop CC文件的基本操作主要包括新建文件、打開文件和存儲文件。

新建文件

若要創(chuàng)建空白畫布，執(zhí)行“文件>新建”命令，彈出“新建”對話框，如圖1-18所示。用戶可以在該對話框中指定新文件的名稱、大小、分辨率和顏色模式等屬性。

打開文件

? 執(zhí)行“文件>打開”命令，或按快捷鍵【Ctrl+O】，彈出“打開”對話框，如圖1-19所示。在對話框中瀏覽并選擇需要打開的單個或多個文件，單擊“打開”按鈕即可將其打開，如圖1-20所示。

? 打開文件所在的文件夾，將需要打開的文件選中，然后直接拖動到Photoshop CC界面中，同樣可以打開文件，如圖1-21和圖1-22所示。

? 如果在Photoshop CC中保存或打開過文件，在“文件>最近打開文件”列表中就會顯示以前編輯過的圖像文件。用戶可以通過執(zhí)行“文件>最近打開文件”命令來快速打開最近使用過的文件。

存儲文件

? 若要存儲文件，執(zhí)行“文件>存儲”命令，彈出“存儲為”對話框，如圖1-23所示。用戶可在該對話框中指定文件存儲的位置、存儲名稱和存儲格式等。若當(dāng)前文檔已經(jīng)保存過，則執(zhí)行該命令會直接覆蓋之前的數(shù)據(jù)。

? 執(zhí)行“文件>存儲為”對話框，或按快捷鍵【Ctrl+Shift+S】，彈出“存儲為”對話框。用戶可以在此設(shè)置各項參數(shù)值，將當(dāng)前文件另存。

課堂練習(xí)

01 執(zhí)行“文件>新建”命令，新建一個400像素×400像素的透明畫布，如圖1-24所示。

02 將素材“簡單立體圖標(biāo).jpg”文件拖入到畫布中，圖像效果如圖1-25所示。

03 執(zhí)行“文件>存儲”命令，彈出“存儲為”對話框，將文件存儲為JPEG格式，存儲效果如圖1-26所示。

1.3.3 圖像的變換

使用Photoshop CC進(jìn)行設(shè)計制作時，經(jīng)常需要對各種對象進(jìn)行變換，例如移動位置，縮放、旋轉(zhuǎn)和翻轉(zhuǎn)圖像等。這些操作大部分可以通過執(zhí)行“編輯>變換”命令來完成。

? 移動圖像：若要移動圖像的位置，則應(yīng)在“圖層”面板中選中相應(yīng)的圖層，然后使用“移動工具”拖拽圖像到合適的位置即可。此外，用戶還可以通過鍵盤上的4個方向鍵精確調(diào)整圖像位置。

? 縮放圖像：若要對圖像進(jìn)行放大或縮小，則應(yīng)先選中相應(yīng)的圖層，執(zhí)行“編輯>變換>縮放”命令。

? 旋轉(zhuǎn)圖像：若要旋轉(zhuǎn)圖像，則應(yīng)先選中相應(yīng)的圖層，執(zhí)行“編輯>變換>旋轉(zhuǎn)”命令。

? 斜切/扭曲圖像：若要斜切或扭曲圖像，則應(yīng)先選中相應(yīng)的圖層，執(zhí)行“編輯>變換>斜切/扭曲”命令，然后分別選擇變換框四邊的控制點移動位置。

? 透視：若要對圖像進(jìn)行透視，則應(yīng)先選中相應(yīng)的圖層，執(zhí)行“編輯>變換>透視”命令，然后拖拽變換框四邊的控制點。

? 變形：若要對圖像進(jìn)行變形，則應(yīng)選中相應(yīng)圖層，執(zhí)行“編輯>變換>變形”命令，拖拽任意一條變形線或控制點進(jìn)行自定義變形，或者在“選項”欄中選擇一種系統(tǒng)預(yù)設(shè)進(jìn)行應(yīng)用。

? 翻轉(zhuǎn)圖像：若要水平或垂直翻轉(zhuǎn)圖像，則應(yīng)選中相應(yīng)的圖層，執(zhí)行“編輯>變換>水平翻轉(zhuǎn)/垂直翻轉(zhuǎn)”命令。

縮放、旋轉(zhuǎn)、斜切/扭曲、透視、變形和翻轉(zhuǎn)圖像效果如圖1-27所示。

1.3.4 設(shè)置前景色和背景色

設(shè)置前景色和背景色也是使用極其頻繁的操作。在Photoshop CC中，用戶可以通過3種方式設(shè)置前景色和背景色，分別為使用“拾色器”對話框，使用“顏色”面板和使用“色板”面板。

使用“拾色器”對話框

在“工具箱”中單擊“前景色”或“背景色”色塊，彈出“拾色器”對話框，如圖1-28所示。用戶可以直接在對話框中單擊選取不同的顏色，或者在右側(cè)輸入精確的RGB數(shù)值。

使用“顏色”面板

使用“顏色”面板設(shè)置顏色與在拾色器中的操作方法有一定的相似之處，用戶同樣可以選擇不同的顏色模式來設(shè)置顏色。

執(zhí)行“窗口>顏色”命令打開“顏色”面板，如圖1-29所示。在默認(rèn)情況下，“顏色”面板提供的是RGB顏色模式的滑塊，用戶可以通過鼠標(biāo)拖動滑塊或在文本框中輸入精確的數(shù)值來設(shè)置顏色。

使用“色板”面板

“色板”面板可存儲用戶經(jīng)常使用的顏色，也可以在面板中添加和刪除預(yù)設(shè)顏色，或者為不同的項目顯示不同的顏色庫。

執(zhí)行“窗口>色板”命令打開“色板”面板，如圖1-30所示。直接在面板中單擊相應(yīng)的小色塊，即可將該顏色指定為新的前景色。

若要將當(dāng)前前景色創(chuàng)建為新的色板，則可單擊面板下方的按鈕，然后為新色塊指定名稱，將該顏色添加到“色板”面板中，方便以后隨時取用。

實戰(zhàn)1 繪制簡潔的開機按鈕

本實例制作了一款簡潔的開機按鈕，按鈕的底座使用“橢圓工具”和各種圖層樣式創(chuàng)建而成。按鈕上的圖標(biāo)則使用“橢圓工具”和“矩形工具”配合創(chuàng)建而成。

總體來說，制作這款按鈕的操作步驟比較簡單，制作時應(yīng)仔細(xì)調(diào)整每個形狀的位置。最終效果如圖1-31所示。

01 執(zhí)行“文件>新建”命令，彈出“新建”對話框，新建一個空白文檔，如圖1-32所示。設(shè)置“前景色”為RGB（209、194、180），按快捷鍵【Alt+Enter】為畫布填充該顏色，效果如圖1-33所示。

02 新建“圖層1”，使用“漸變工具”為畫布填充白色到透明的線性漸變，如圖1-34所示。設(shè)置該圖層“填充”為20%，圖像效果如圖1-35所示。

03 使用“橢圓工具”在畫布中創(chuàng)建一個“填充”為RGB（187、170、155）的正圓，如圖1-36所示。雙擊該圖層縮覽圖，彈出“圖層樣式”對話框，選擇“描邊”選項進(jìn)行相應(yīng)設(shè)置，如圖1-37所示。

04 繼續(xù)在對話框中選擇“內(nèi)陰影”選項進(jìn)行相應(yīng)設(shè)置，如圖1-38所示。在對話框中選擇“漸變疊加”選項進(jìn)行相應(yīng)設(shè)置，如圖1-39所示。

05 設(shè)置完成后單擊“確定”按鈕，得到圖形效果，如圖1-40所示。按快捷鍵【Ctrl+J】復(fù)制該形狀，修改其“填充”為RGB（250、248、246），并將其向左上微移，如圖1-41所示。

06 再次復(fù)制該形狀，按快捷鍵【Shift+Alt】將其等比例縮小，如圖1-42所示。雙擊該圖層縮覽圖，彈出“圖層樣式”對話框，選擇“描邊”選項修改參數(shù)值，如圖1-43所示。

07 雙擊該圖層縮覽圖，彈出“圖層樣式”對話框，選擇“漸變疊加”選項進(jìn)行相應(yīng)設(shè)置，如圖1-44所示，圖形效果如圖1-45所示。

08 使用“橢圓工具”在按鈕正中創(chuàng)建一個“填充”為RGB（254、179、99）的橢圓，如圖1-46所示。在“選項”欄中設(shè)置“路徑操作”為“減去頂層形狀”，創(chuàng)建出如圖1-47所示的圓環(huán)。相同方法使用“矩形工具”創(chuàng)建出如圖1-48所示的形狀。

09 使用“橢圓工具”，設(shè)置“路徑操作”為“合并形狀”，制作出圓角，如圖1-49所示。使用“圓角矩形工具”，設(shè)置“路徑操作”為“合并形狀”，在縫隙中創(chuàng)建一個“半徑”為20像素的圓角矩形，如圖1-50所示。

10 使用“直接選擇工具”適當(dāng)調(diào)整圖形形狀，如圖1-51所示。

11 雙擊該圖層縮覽圖，彈出“圖層樣式”對話框，選擇“內(nèi)陰影”選項設(shè)置參數(shù)值，如圖1-52所示。繼續(xù)在對話框中選擇“投影”選項設(shè)置參數(shù)值，如圖1-53所示。

12 設(shè)置完成后單擊“確定”按鈕，得到圖形效果，如圖1-54所示。使用“橢圓選框工具”在圖像中創(chuàng)建一個羽化10像素的選區(qū)，如圖1-55所示。

13 在“圖層1”上方新建“圖層2”，為選區(qū)填充顏色RGB（113、107、100），如圖1-56所示。設(shè)置該圖層“填充”為70%，使投影效果更自然，如圖1-57所示，至此完成制作該按鈕的全部操作過程。

14 隱藏“背景”圖層，執(zhí)行“圖像>裁切”命令，裁掉圖像周圍的透明像素，如圖1-58所示。執(zhí)行“文件>存儲為Web所用格式”命令，彈出“存儲為Web所用格式”對話框，對圖像進(jìn)行優(yōu)化存儲，如圖1-59所示。

1.3.5 按鈕的應(yīng)用格式

在使用Photoshop CC制作簡潔的開機按鈕后，還要將其存儲為Web所用格式的文件，才能應(yīng)用于網(wǎng)頁。常用的Web所用的格式有JPG、PNG和GIF，下面是對這幾種格式的詳細(xì)介紹。

? JPG/JPEG格式。

JPEG格式是最常見的圖像格式，它可以在保證圖像顯示效果的情況下，對數(shù)據(jù)進(jìn)行大幅壓縮，它擁有所有格式文件中最高的壓縮率。

JPG格式不支持透明，如果按鈕中不包含透明像素，且顏色比較豐富，那么使用JPG格式存儲是非常不錯的選擇。

? PNG格式。

PNG格式支持256種真彩色，支持完全透明，而且壓縮比率相對較高，因此被廣泛應(yīng)用于網(wǎng)絡(luò)傳輸。

如果按鈕中包含透明像素，而且有豐富的顏色過渡，或者明顯的半透明陰影和發(fā)光效果，那么使用PNG存儲比較合適。

? GIF格式

GIF格式的壓縮率比較高，因此文件體積比較小。它只能將其中一種或幾種顏色設(shè)置為透明，不支持真彩色，其最大的特點是可以用來制作動態(tài)圖像。

如果按鈕中包含透明圖像，但沒有半透明陰影和發(fā)光等效果，且使用的顏色和線條極其簡單，那么使用GIF格式存儲可以得到體積很小的文件。

1.3.6 實現(xiàn)不同的漸變效果

漸變色可以實現(xiàn)多個顏色之間平滑過渡的填充效果，在UI設(shè)計中使用得極為頻繁。在Photoshop CC中，用戶可以通過多種方法創(chuàng)建漸變色，這里僅以最基礎(chǔ)的“漸變工具”為例，講解漸變色的設(shè)置方法。

使用“漸變工具”，在“選項”欄中單擊漸變條，打開“漸變編輯器”，如圖1-60所示。用戶只需依次雙擊漸變條上的色標(biāo)，然后在彈出的“拾色器”對話框中選擇需要的顏色，如圖1-61所示，然后單擊“確定”按鈕即可。

? 名稱：該選項用于設(shè)置當(dāng)前漸變色的名稱，若用戶試圖將自定義的漸變色存放在“預(yù)設(shè)”列表框中，那么為漸變色設(shè)置一個具體的名稱會很有用。

? 漸變類型：該選項用于設(shè)置當(dāng)前漸變色的類型，下拉列表中有“實底”和“雜色”兩個選項，如圖1-62所示為“雜色”類型的漸變色效果。

? 平滑度：該選項用于設(shè)置漸變色顏色過渡的平滑程度，設(shè)置的參數(shù)值越大，色塊與色塊之間的過渡就越柔和平滑。

? 色標(biāo)：色標(biāo)用于在漸變條中添入新的顏色，用戶可在漸變條中的不同位置單擊加入新的色標(biāo)，然后雙擊色標(biāo)，在彈出的拾色器中指定色標(biāo)的顏色。

? 不透明度：不透明度色標(biāo)用于設(shè)置漸變色在當(dāng)前位置的不透明度，添加和編輯方法與色標(biāo)相同。若要設(shè)置實色和半透明色混合的漸變色就需要用到不透明度色標(biāo)。

? 色標(biāo)中點：色標(biāo)中點用于設(shè)置兩個顏色過渡的中點，當(dāng)選中一個色標(biāo)時，就會在與其相鄰的一個或兩個色標(biāo)之間顯示中點，用戶可以通過拖動該中點來細(xì)微調(diào)整漸變色。

實戰(zhàn)2 制作網(wǎng)站主頁按鈕

本實例主要制作了一款圓形的網(wǎng)站主頁按鈕，該按鈕較多地使用到了圓形和漸變色。實例中我們分別使用不同的方法創(chuàng)建按鈕的高光，包括圖層樣式和漸變色。這些小細(xì)節(jié)可以提升最終效果的質(zhì)感，所以請盡量耐心操作。最終效果如圖1-63所示。

01 執(zhí)行“文件>新建”命令，彈出“新建”對話框，創(chuàng)建一個空白文檔，如圖1-64所示。設(shè)置“前景色”為RGB（33、40、43），按快捷鍵【Alt+Delete】為畫布填充該顏色，效果如圖1-65所示。

02 新建“圖層1”，設(shè)置“前景色”為RGB（20、24、26），使用“橢圓工具”，設(shè)置“工具模式”為“像素”，按下【Shift】鍵在畫布中創(chuàng)建一個正圓，如圖1-66所示。新建“圖層2”，使用“橢圓工具”創(chuàng)建如圖1-67所示的選區(qū)。

03 按快捷鍵【Ctrl+Alt】單擊“圖層1”縮略圖載入選區(qū)，如圖1-68所示。使用“漸變工具”，打開漸變編輯器編輯漸變色，如圖1-69所示。

04 在選區(qū)中拖動鼠標(biāo)填充線性漸變，然后取消選區(qū)，如圖1-70所示。設(shè)置該圖層“混合模式”為“顏色減淡”，效果如圖1-71所示。

05 載入“圖層1”的選區(qū)，按快捷鍵【Shift+F6】，彈出“羽化選區(qū)”對話框，設(shè)置羽化半徑，如圖1-72所示。新建“圖層3”，為選區(qū)填充顏色RGB（255、70、46），并設(shè)置其“混合模式”為“疊加”，如圖1-73所示。

06 新建“圖層4”，設(shè)置“前景色”為RGB（88、0、0），使用“橢圓工具”在畫布中創(chuàng)建一個正圓，如圖1-74所示。雙擊該圖層縮覽圖，彈出“圖層樣式”對話框，選擇“斜面與浮雕”選項進(jìn)行相應(yīng)設(shè)置，如圖1-75所示。

07 設(shè)置完成后單擊“確定”按鈕，可以看到圖形效果，如圖1-76所示。載入“圖層4”的選區(qū)，執(zhí)行“選擇>修改>收縮”命令，彈出“收縮選區(qū)”對話框，將選區(qū)收縮3像素，如圖1-77所示。

08 新建“圖層5”，為選區(qū)填充從RGB（5、5、5）到RGB（230、230、230）的線性漸變，并設(shè)置其“混合模式”為“柔光”，“不透明度”為28%，如圖1-78所示。使用相同方法制作出高光，如圖1-79所示。

09 載入“圖層4”的選區(qū)，使用“橢圓選框工具”，按下【Alt】鍵創(chuàng)建選區(qū)，減去多余部分，如圖1-80所示。新建“圖層7”，為選區(qū)填充顏色RGB（140、21、21），并設(shè)置其“混合模式”為“疊加”，“不透明度”為83%，如圖1-81所示。

10 使用相同方法制作出高光，如圖1-82所示。使用“自定形狀工具”，在形狀拾取器中選擇合適的箭頭形狀，然后在按鈕中創(chuàng)建路徑，并使用“直接選擇工具”適當(dāng)對路徑進(jìn)行調(diào)整，如圖1-83所示。

11 使用相同方法在畫布中創(chuàng)建路徑，如圖1-84所示。使用“矩形工具”，在“選項”欄中設(shè)置“路徑操作”為“排除頂層形狀”，創(chuàng)建出如圖1-85所示的形狀。

12 新建“圖層10”，將路徑轉(zhuǎn)換為選區(qū)，并填充白色，如圖1-86所示。雙擊該圖層縮覽圖，彈出“圖層樣式”對話框，選擇“外發(fā)光”選項進(jìn)行設(shè)置，如圖1-87所示。

13 繼續(xù)在對話框中選擇“投影”選項進(jìn)行相應(yīng)設(shè)置，如圖1-88所示。設(shè)置完成后單擊“確定”按鈕，看到圖形效果，如圖1-89所示，操作完成。

14 隱藏“背景”圖層，執(zhí)行“圖像>裁切”命令，裁掉圖像周圍的透明像素，如圖1-90所示。執(zhí)行“文件>存儲為Web所用格式”命令，彈出“存儲為Web所用格式”對話框，對圖像進(jìn)行優(yōu)化存儲，如圖1-91所示。

實戰(zhàn)3 制作不規(guī)則翻頁按鈕

本實例主要制作一個天藍(lán)色的不規(guī)則形狀翻頁按鈕，操作時要注意把握調(diào)整形狀、漸變色的設(shè)置和按鈕陰影的繪制。最終效果如圖1-92所示。

01 執(zhí)行“文件>新建”命令，彈出“新建”對話框，創(chuàng)建一個空白文檔，如圖1-93所示。使用“鋼筆工具”，在“選項”欄中設(shè)置“工具模式”為“形狀”，在畫布中創(chuàng)建出如圖1-94所示的圖形。

02 雙擊該圖層縮覽圖，彈出“圖層樣式”對話框，選擇“內(nèi)陰影”選項設(shè)置參數(shù)值，如圖1-95所示。在對話框中選擇“漸變疊加”選項，設(shè)置參數(shù)值，如圖1-96所示。

03 繼續(xù)在對話框中選擇“投影”選項，對各項參數(shù)進(jìn)行設(shè)置，如圖1-97所示。設(shè)置完成后單擊“確定”按鈕，得到圖形效果，然后使用“橢圓工具”創(chuàng)建一個任意顏色的正圓，如圖1-98所示。

04 雙擊該圖層縮覽圖，彈出“圖層樣式”對話框，選擇“內(nèi)陰影”選項設(shè)置參數(shù)值，如圖1-99所示。在對話框中選擇“漸變疊加”選項，設(shè)置參數(shù)值，如圖1-100所示。

05 繼續(xù)在對話框中選擇“投影”選項，并對相應(yīng)參數(shù)進(jìn)行設(shè)置，如圖1-101所示。設(shè)置完成后單擊“確定”按鈕，得到圖形效果，如圖1-102所示。

06 打開“字符”面板進(jìn)行相應(yīng)設(shè)置，如圖1-103所示。使用“橫排文字工具”在按鈕上輸入相應(yīng)的文字內(nèi)容，“圖層”面板和文字輸入效果如圖1-104和圖1-105所示。

07 雙擊該文字圖層，彈出“圖層樣式”對話框，選擇“投影”選項進(jìn)行相應(yīng)設(shè)置，如圖1-106所示。設(shè)置完成后單擊“確定”按鈕，文字陰影效果如圖1-107所示。

08 使用相同方法制作白色箭頭，并在“背景”圖層上方新建圖層，使用黑色柔邊畫筆涂抹出按鈕的陰影，如圖1-108所示。使用相同方法可以制作出其他按鈕，如圖1-109所示。

09 隱藏“背景”圖層，執(zhí)行“圖像>裁切”命令，裁掉圖像周圍的透明像素，如圖1-110所示。執(zhí)行“文件>存儲為Web所用格式”命令，彈出“存儲為Web所用格式”對話框，對圖像進(jìn)行優(yōu)化存儲，如圖1-111所示。

實戰(zhàn)4 制作綠色清晰潤眼按鈕

本實例制作一款清新的綠色玻璃質(zhì)感按鈕，操作步驟比較簡單。按鈕的質(zhì)感主要通過一張位圖和“圖層樣式”來體現(xiàn)，然后輔以精致簡潔的字體即成。最終效果如圖1-112所示。

01 執(zhí)行“文件>新建”命令，彈出“新建”對話框，新建一個空白文檔，如圖1-113所示。拖入外部素材“\綠色背景.png”，并適當(dāng)調(diào)整其位置和大小，如圖1-114所示。

02 雙擊該圖層縮覽圖，彈出“圖層樣式”對話框選擇“斜面與浮雕”選項進(jìn)行相應(yīng)設(shè)置，如圖1-115所示。繼續(xù)在對話框選擇“描邊”選項，并設(shè)置各項參數(shù)的值，如圖1-116所示。

03 繼續(xù)在對話框中選擇“內(nèi)陰影”和“外發(fā)光”選項，然后分別在右側(cè)參數(shù)區(qū)調(diào)整各項參數(shù)的值，具體設(shè)置如圖1-117和圖1-118所示。

04 繼續(xù)選擇“投影”選項進(jìn)行相應(yīng)設(shè)置，如圖1-119所示。設(shè)置完成后單擊“確定”按鈕，得到按鈕效果，如圖1-120所示。

05 使用“鋼筆工具”，設(shè)置“工具模式”為“形狀”，“填充”為白色，繪制按鈕的高光，并修改其“不透明度”為45%，如圖1-121所示。執(zhí)行“窗口>字符”命令，在“字符”面板中進(jìn)行相應(yīng)設(shè)置，如圖1-122所示。

06 使用“橫排文字工具”在按鈕中輸入相應(yīng)的文字內(nèi)容，如圖1-123所示。雙擊該文字圖層縮覽圖，彈出“圖層樣式”對話框選擇“外發(fā)光”選項，并對相關(guān)參數(shù)進(jìn)行相應(yīng)設(shè)置，如圖1-124所示。

07 設(shè)置完成單擊“確定”按鈕，得到最終按鈕效果，如圖1-125所示。該文檔的“圖層”面板如圖1-126所示。

08 隱藏“背景”圖層，執(zhí)行“圖像>裁切”命令，裁掉圖像周圍的透明像素，如圖1-127所示。執(zhí)行“文件>存儲為Web所用格式”命令，彈出“存儲為Web所用格式”對話框，對圖像進(jìn)行優(yōu)化存儲，如圖1-128所示。

實戰(zhàn)5 制作金屬質(zhì)感時尚音樂按鈕

本實例繪制的是一款圓形金屬質(zhì)感的音樂按鈕，主要使用了圖層樣式，實例有3個難點：金屬質(zhì)感漸變色的設(shè)置、設(shè)置畫筆的載入畫筆。其中金屬質(zhì)感漸變色的設(shè)置會在后面的案例中多次使用，而且這種方法也比較簡單經(jīng)典，最終效果如圖1-129所示。

01 執(zhí)行“文件>新建”命令，彈出“新建”對話框，新建一個文檔，如圖1-130所示。新建“圖層1”，設(shè)置“前景色”為RGB（63、63、63），使用“橢圓工具”，設(shè)置“工具模式”為“像素”，在畫布中創(chuàng)建一個正圓，如圖1-131所示。

02 使用“橢圓工具”，設(shè)置“工具模式”為“路徑”，在畫布中創(chuàng)建兩個正圓路徑，如圖1-132所示。新建“圖層2”，設(shè)置“前景色”為黑色，按快捷鍵【Ctrl+Enter】將路徑轉(zhuǎn)化為選區(qū)，并為選區(qū)填充前景色，如圖1-133所示。

03 雙擊該圖層縮覽圖，彈出的“圖層樣式”對話框，選擇“漸變疊加”選項設(shè)置參數(shù)值，如圖1-134所示。修改該圖層“不透明度”為85%，如圖1-135所示。

04 使用相同方法完成相似內(nèi)容的制作，如圖1-136所示。新建“圖層4”，使用“橢圓選框工具”在畫布中創(chuàng)建如圖1-137所示的正圓選區(qū)。

05 使用“漸變工具”，打開漸變編輯器設(shè)置漸變色，如圖1-138所示。完成漸變顏色的設(shè)置，在選區(qū)中拖動鼠標(biāo)填充徑向漸變，填充效果如圖1-139所示。

06 使用相同方法完成相似內(nèi)容的制作，如圖1-140所示。新建“圖層6”，使用“鋼筆工具”在畫布中創(chuàng)建路徑，如圖1-141所示。

07 按快捷鍵【Ctrl+Enter】將路徑轉(zhuǎn)換為選區(qū)，并為選區(qū)填充白色，如圖1-142所示。設(shè)置該圖層“混合模式”為“柔光”，“不透明度”為50%，效果如圖1-143所示。

08 新建“圖層7”，使用“畫筆工具”，載入外部筆刷“星空1.abr”，并選擇合適的筆刷形狀，如圖1-144所示，在按鈕上方繪制圖形，如圖1-145所示。

09 用相同方法載入外部筆刷“星空.abr”，選擇合適的筆刷形狀，并在按鈕上方繪制星形，如圖1-146所示。打開“畫筆”面板，分別選擇“畫筆筆尖形狀”選項和“形狀動態(tài)”選項設(shè)置參數(shù)值，如圖1-147所示。

10 繼續(xù)在“畫筆”面板中選擇“散布”選項設(shè)置參數(shù)值，如圖1-148所示。新建“圖層9”，載入“圖層4”的選區(qū)，使用“畫筆工具”在畫布中涂抹光點，如圖1-149所示。

11 設(shè)置該圖層“混合模式”為“柔光”，“不透明度”為42%，如圖1-150所示。使用“自定形狀工具”，打開形狀選取器選擇相應(yīng)的形狀，如圖1-151所示。

12 在畫布中拖動鼠標(biāo)創(chuàng)建路徑，如圖1-152所示。新建“圖層10”，將路徑轉(zhuǎn)換為選區(qū)，為選區(qū)填充白色，并適當(dāng)將其旋轉(zhuǎn)，如圖1-153所示。

13 新建“圖層11”，使用“橢圓選框工具”在畫布中創(chuàng)建選區(qū)，并填充黑色，如圖1-154所示。執(zhí)行“濾鏡>模糊>高斯模糊”命令，對圖像進(jìn)行模糊，如圖1-155所示。

14 在“圖層”面板中適當(dāng)調(diào)整圖層順序，完成音樂按鈕的設(shè)計，得到最終效果，如圖1-156所示，“圖層”面板如圖1-157所示。

15 隱藏“背景”圖層，執(zhí)行“圖像>裁切”命令，裁掉圖像周圍的透明像素，如圖1-158所示。執(zhí)行“文件>存儲為Web所用格式”命令，彈出“存儲為Web所用格式”對話框，對圖像進(jìn)行優(yōu)化存儲，如圖1-159所示。

實戰(zhàn)6 制作逼真皮革按鈕

本實例制作了一款皮革按鈕。雖然大體形狀比較簡單，但包含的小細(xì)節(jié)比較多。按鈕的皮革質(zhì)感來自于一款皮革文字，配合“斜面與浮雕”、“內(nèi)發(fā)光”和“描邊”等樣式建立和完善立體效果，最終得到逼真的皮革質(zhì)感。最終效果如圖1-160所示。

01 執(zhí)行“文件>新建”命令，彈出“新建”對話框，新建一個空白文檔，如圖1-161所示。使用“矩形工具”在畫布中創(chuàng)建一個任意顏色的矩形，如圖1-162所示。

02 雙擊該圖層縮覽圖，彈出“圖層樣式”對話框，選擇“內(nèi)陰影”選項進(jìn)行相應(yīng)設(shè)置，如圖1-163所示。在對話框中選擇“圖案疊加”選項，載入圖案，如圖1-164所示。

03 設(shè)置完成后單擊“確定”按鈕，可以看到正圓效果，如圖1-165所示。使用“圓角矩形工具”在畫布中創(chuàng)建填充為RGB（29、29、29）的圓角矩形，如圖1-166所示。

04 雙擊該圖層縮覽圖，彈出“圖層樣式”對話框，選擇“斜面和浮雕”選項進(jìn)行相應(yīng)設(shè)置，如圖1-167所示。選擇“描邊”選項進(jìn)行相應(yīng)設(shè)置，如圖1-168所示。

05 繼續(xù)在對話框中選擇“內(nèi)陰影”選項進(jìn)行相應(yīng)設(shè)置，如圖1-169所示。選擇“投影”選項進(jìn)行相應(yīng)設(shè)置，如圖1-170所示。

06 設(shè)置完成后，單擊“確定”按鈕，圖形效果如圖1-171所示。使用相同的方法繪制另一個矩形圖案，如圖1-172所示。

07 繼續(xù)使用“圓角矩形工具”，設(shè)置描邊顏色為RGB（208、169、99），“描邊類型”為虛線，在畫布中創(chuàng)建形狀，如圖1-173所示。雙擊該圖層縮覽圖，彈出“圖層樣式”對話框，選擇“描邊”選項進(jìn)行相應(yīng)設(shè)置，如圖1-174所示。

08 繼續(xù)在對話框中選擇“內(nèi)陰影”選項進(jìn)行相應(yīng)設(shè)置，如圖1-175所示。選擇“漸變疊加”選項進(jìn)行相應(yīng)設(shè)置，如圖1-176所示。

09 設(shè)置完成后單擊“確定”按鈕，修改該圖層的“填充”為0%，得到圖形效果，如圖1-177所示。將相關(guān)圖層進(jìn)行編組，并使用“圓角矩形工具”創(chuàng)建一個“半徑”為40像素的形狀，如圖1-178所示。

10 選擇“矩形工具”，設(shè)置“路徑操作”為“減去頂層形狀，減掉形狀的一半，如圖1-179所示。使用前面的操作方法繪制如圖1-180所示的圖形。

11 執(zhí)行“窗口>字符”命令，在“字符”面板中進(jìn)行相應(yīng)設(shè)置，如圖1-181所示。使用“橫排文字工具”在按鈕中輸入相應(yīng)的文字內(nèi)容，并添加圖層樣式，如圖1-182所示。

12 隱藏“背景”圖層，執(zhí)行“圖像>裁切”命令，裁掉圖像周圍的透明像素，如圖1-183所示。執(zhí)行“文件>存儲為Web所用格式”命令，彈出“存儲為Web所用格式”對話框，對圖像進(jìn)行優(yōu)化存儲，如圖1-184所示。