1.1 設(shè)計(jì)師必知的Photoshop CC軟件7項(xiàng)新功能

Photoshop CC的面世意味著Adobe提倡的“創(chuàng)意云”時(shí)代的到來(lái)，Photoshop軟件在互聯(lián)網(wǎng)時(shí)代的用途也因此更加廣泛。在本節(jié)中，作者將與大家分享Photoshop CC在淘寶店面設(shè)計(jì)方面新添加的7項(xiàng)實(shí)用新功能。

1.1.1 無(wú)損縮放讓大圖、小圖都清晰

通常，當(dāng)我們使用Photoshop軟件對(duì)素材圖像進(jìn)行放大時(shí)，總會(huì)影響圖像的品質(zhì)，而現(xiàn)在Photoshop CC新增的圖像無(wú)損縮放功能幫助我們很好地彌補(bǔ)了這一遺憾。但要注意，無(wú)損縮放是相對(duì)的，因此，盡可能地提高素材圖像的品質(zhì)才能保證最終的設(shè)計(jì)效果和質(zhì)量。

位置 圖像→圖像大小。

作用 可以運(yùn)用這一功能制作網(wǎng)站首頁(yè)輪播廣告中經(jīng)常用到的圖像效果，從而展現(xiàn)網(wǎng)站更為精美的視覺(jué)效果。

應(yīng)用技巧分享

步驟1 打開(kāi)一幅素材圖像（如圖1.1所示），執(zhí)行“圖像→圖像大小”命令，然后在彈出的對(duì)話框中設(shè)置重新取樣為“保留細(xì)節(jié)（擴(kuò)大）”，即可更改圖像的尺寸為我們所需要的數(shù)值，如圖1.2所示。

步驟2 通過(guò)調(diào)整“減少雜色”還可以有效降低放大圖像過(guò)程中所產(chǎn)生的雜點(diǎn)干擾。

步驟3 以前我們?cè)谑褂肞hotoshop軟件修編圖像時(shí)，只能通過(guò)按Ctrl+T組合鍵縮放圖像來(lái)實(shí)現(xiàn)，而且反復(fù)縮放圖像會(huì)損失圖像的像素。

步驟4 圖像運(yùn)算結(jié)束后，我們發(fā)現(xiàn)圖像的尺寸發(fā)生了變化。選擇裁切工具，將我們需要的部分裁切出來(lái)，如圖1.3所示。

圖像處理完成以后，自然需要將圖像進(jìn)行銳化處理。新的智能銳化濾鏡讓我們可以更加自如地提高圖像清晰度，同時(shí)最大限度地減少其他因素的影響。在實(shí)際應(yīng)用時(shí)，我們可以控制參數(shù)的數(shù)量、半徑，降低噪聲，以及選擇模糊類(lèi)型。

位置 濾鏡→銳化→智能銳化。

應(yīng)用技巧分享

步驟1 打開(kāi)需要進(jìn)行銳化操作的圖像。除了以前我們常用的3個(gè)可控參數(shù)以外，我們還可以控制銳化效果在陰影和高光中的應(yīng)用程度，如圖1.4所示。

步驟2 在輸出最終設(shè)計(jì)稿時(shí)，經(jīng)常會(huì)由于我們沒(méi)有對(duì)圖像進(jìn)行銳化操作而出現(xiàn)效果模糊的情況，因此我們一定要注意對(duì)圖像進(jìn)行最后的銳化操作之后再輸出保存。實(shí)際應(yīng)用效果對(duì)比如圖1.5、圖1.6所示。

1.1.2 消除抖動(dòng)，讓寶貝更靚麗

清除拍攝抖動(dòng)對(duì)照片的影響是大家對(duì)Photoshop CC期待已久的功能。該功能允許設(shè)計(jì)師自動(dòng)降低由于拍攝抖動(dòng)引起的圖像模糊。Photoshop系統(tǒng)會(huì)自動(dòng)分析抖動(dòng)模糊區(qū)，選擇最適合的圖像防抖算法，確定模糊的性質(zhì)，對(duì)整個(gè)圖像進(jìn)行適當(dāng)?shù)母?/p>

位置 濾鏡→銳化→防抖。

應(yīng)用技巧分享

步驟1 素材分析。打開(kāi)一幅需要矯正抖動(dòng)的素材圖像，如圖1.7所示。如果照片抖動(dòng)得太厲害，作者認(rèn)為就不能再為了炫耀技術(shù)而強(qiáng)行運(yùn)用該功能進(jìn)行矯正了。

步驟2 使用該功能可將抖動(dòng)圖像的清晰度最大化并同時(shí)將雜色和光暈最小化。此外，系統(tǒng)還允許我們對(duì)多個(gè)區(qū)域進(jìn)行微調(diào)，以取得外觀自然的高品質(zhì)結(jié)果，如圖1.8所示。

步驟3 單擊“高級(jí)”選項(xiàng)，可清晰地觀察到消除抖動(dòng)的細(xì)節(jié)。關(guān)于“模糊描摹設(shè)置”中的4個(gè)重要控制參數(shù)的作用，大家可將光標(biāo)放置于標(biāo)簽文字之上，幫助說(shuō)明文字就會(huì)自動(dòng)顯示，如圖1.9所示。

步驟4 效果對(duì)比十分明顯。如圖1.10、圖1.11所示。

1.1.3 圓角矩形及CSS復(fù)制

圓角矩形工具最大的變化在于我們使用圓角矩形工具繪制一個(gè)形狀后，在“屬性”面板中可以自由更改所有的圓角弧度，也可以單獨(dú)調(diào)整每個(gè)邊角。

位置 工具箱→圓角矩形工具。

應(yīng)用技巧分享

步驟1 選擇圓角矩形工具，繪制出圖1.12所示的圓角矩形。打開(kāi)“屬性”面板，對(duì)其進(jìn)行如下的調(diào)節(jié)，如圖1.13所示。

步驟2 為形狀添加特定的圖層樣式。執(zhí)行“圖層→圖層樣式”命令，在彈出的對(duì)話框中為圓角矩形添加漸變疊加樣式和投影樣式，如圖1.14、圖1.15所示。

步驟3 通過(guò)美化圓角矩形的外觀（包括但不限于漸變疊加和投影），我們獲得了滿意的效果。正如Adobe描述的創(chuàng)意云（Creative Cloud）那樣，現(xiàn)在我們可以輕松地將此創(chuàng)意效果應(yīng)用到網(wǎng)頁(yè)設(shè)計(jì)之中。我們只需在圓角矩形的圖層縮略圖上單擊鼠標(biāo)右鍵，選擇“復(fù)制CSS樣式”命令，然后將其粘貼在網(wǎng)頁(yè)設(shè)計(jì)CSS代碼編輯器的窗口中即可實(shí)現(xiàn)效果的跨平臺(tái)移植。

步驟4 如果我們想首先預(yù)覽一下生成的CSS代碼，可按住Ctrl鍵不松開(kāi)，然后用鼠標(biāo)右鍵單擊這個(gè)圖層，即可看到CSS代碼，如圖1.16所示。

現(xiàn)在我們學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)還擔(dān)心不會(huì)編寫(xiě)CSS樣式代碼嗎？放心大膽地學(xué)習(xí)Photoshop CC（Creative Cloud）吧，創(chuàng)意云會(huì)有許多意想不到的效果。如果您還有點(diǎn)擔(dān)心，下面作者再與大家分享一個(gè)網(wǎng)頁(yè)設(shè)計(jì)中的“干貨”：插件CSS3Ps。

CSS3Ps是一款基于云的免費(fèi)Photoshop插件，可以將Photoshop圖層特效轉(zhuǎn)為CSS3代碼。可以對(duì)圖層的一些特效（如陰影、發(fā)光、圓角、漸變等）進(jìn)行CSS3.0的完整代碼輸出。

插件下載地址：http://css3ps.com/Download/。

提示大家，如果Photoshop軟件已經(jīng)開(kāi)啟，那么在安裝該插件之前需要暫時(shí)先將Photoshop軟件關(guān)閉。

應(yīng)用技巧分享

步驟1 執(zhí)行“開(kāi)始→所有程序→Adobe Extension Manager CC”命令在“Adobe Extension Manager”中單擊“獲取”按鈕，接下來(lái)就會(huì)對(duì)插件進(jìn)行安裝。插件安裝完成后如圖1.17、圖1.18所示。

步驟2 這樣我們就可以在Photoshop中選擇需要轉(zhuǎn)換為CSS樣式代碼的圖層，實(shí)現(xiàn)相應(yīng)的操作了。可以在Adobe Photoshop菜單項(xiàng)“窗口→ 擴(kuò)展”中查看到相關(guān)的插件信息。

步驟3 現(xiàn)在我們就可以使用該插件了。當(dāng)然，前提是我們要先設(shè)計(jì)好自己喜歡的圖形效果。選擇我們需要輸出CSS3.0樣式的圖層，如圖1.19所示。

步驟4 接下來(lái)，執(zhí)行“文件→腳本→瀏覽……”命令，然后在彈出的對(duì)話框中選擇“CSS3Ps.jsx”，如圖1.20、圖1.21所示。

然后即可在瀏覽器中看到所轉(zhuǎn)換的CSS樣式代碼及效果了。此時(shí)，直接將該代碼文件保存，等后期需要使用時(shí)，直接將該代碼復(fù)制到樣式文件中就可以了，如圖1.22所示。這樣將節(jié)省我們很多編寫(xiě)代碼的時(shí)間和精力。最明顯的優(yōu)點(diǎn)是，我們?cè)僖膊挥脼椤安徽J(rèn)識(shí)代碼”而發(fā)愁了！讓我們?yōu)檫@個(gè)小插件點(diǎn)個(gè)贊吧！

1.1.4 形狀和路徑的應(yīng)用更簡(jiǎn)單

使用Photoshop CC提供的多種形狀和路徑選擇，我們?cè)谶M(jìn)行廣告設(shè)計(jì)時(shí)可以同時(shí)選取多個(gè)路徑、形狀和矢量蒙版，而不需按多次鼠標(biāo)即可完成更多任務(wù)。即使在擁有多條路徑的多圖層文件中，也可以使用新的濾鏡模式，直接在畫(huà)布上鎖定路徑（及任何圖層），如圖1.23、圖1.24所示。

此外，在Photoshop CC中虛線的繪制也變得十分便利，我們只需在“實(shí)時(shí)形狀屬性”面板中直接選擇需要的虛線類(lèi)型，然后就可進(jìn)行繪制，如圖1.25、圖1.26所示。

1.1.5 智能移除，讓頁(yè)面寶貝更突出

智能移除工具Camera Raw的工作原理與我們熟悉的修復(fù)畫(huà)筆工具的功能類(lèi)似。我們只需要在素材圖像上基于需要移除的對(duì)象繪制一個(gè)選區(qū)，然后拖曳修復(fù)控制點(diǎn)（綠點(diǎn)）至適合的區(qū)域，便可實(shí)現(xiàn)智能移除和更換。

智能移除工具主要包括兩種修復(fù)類(lèi)型，即修復(fù)和仿制模式：前者的采樣區(qū)域是紋理、光照和陰影；后者適用于圖像采樣面積。我們可以設(shè)置畫(huà)筆的大小和不透明度級(jí)別來(lái)影響移除雜質(zhì)的強(qiáng)度。

位置 濾鏡→Camera Raw濾鏡。

應(yīng)用技巧分享

步驟1 如圖1.27所示，在拍攝寶貝的照片時(shí)，不小心出現(xiàn)了一個(gè)多余的錢(qián)包一角。所以在設(shè)計(jì)頁(yè)面的推廣效果時(shí)，首先要移除這部分多余的內(nèi)容。

步驟2 打開(kāi)Camera Raw濾鏡，單擊“污點(diǎn)去除”命令按鈕，然后通過(guò)調(diào)整筆觸的大小、選區(qū)的羽化強(qiáng)度及移除對(duì)象的不透明度參數(shù)（如圖1.28所示），即可快速實(shí)現(xiàn)多余雜質(zhì)的移除。

1.1.6 徑向?yàn)V波器，讓寶貝盡顯魅力

Camera Raw徑向過(guò)濾工具，允許我們創(chuàng)建橢圓以選定區(qū)域而進(jìn)行圖片的局部調(diào)整。這為淘寶店面設(shè)計(jì)師將寶貝轉(zhuǎn)變?yōu)榘婷娴囊曈X(jué)焦點(diǎn)提供了便利。當(dāng)然也可以給寶貝添加多個(gè)徑向過(guò)濾器效果，并且為每個(gè)區(qū)域應(yīng)用不同的調(diào)整。

位置 濾鏡→Camera Raw濾鏡。

應(yīng)用技巧分享

步驟1 設(shè)計(jì)師希望將產(chǎn)品置身于特定的環(huán)境之中，以此增加產(chǎn)品的實(shí)際體驗(yàn)度。如圖1.29所示，如果我們希望銷(xiāo)售的是實(shí)木木桌，我們就需要將木桌作為畫(huà)面的視覺(jué)焦點(diǎn)，同時(shí)弱化沙發(fā)對(duì)場(chǎng)景的影響。

步驟2 打開(kāi)Camera Raw濾鏡，我們通過(guò)調(diào)整對(duì)比度、高光、陰影、清晰度、銳化等參數(shù)，使得我們的目標(biāo)產(chǎn)品得到了強(qiáng)化，如圖1.30所示。

TIPS 模糊和銳化的功能剛好相反，所以在降低“銳化”數(shù)值的同時(shí)，實(shí)際就是在強(qiáng)化周邊環(huán)境的模糊度。

1.1.7 更智能化的切圖功能

將智能切圖這一強(qiáng)大的功能應(yīng)用在圖像輸出上非常方便，我們?cè)僖膊槐貫楹笃谠贒reamweaver軟件中排版而發(fā)愁了。在本節(jié)中，作者就和大家分享這一便捷的操作方式。

TIPS 要確保正常使用智能切圖，需要先將Photoshop CC升級(jí)到14.1.2版。這是必須的，請(qǐng)大家一定要注意。

步驟1 將需要輸出的文檔中多余的內(nèi)容進(jìn)行隱藏或刪除。如圖1.31、圖1.32所示，打開(kāi)圖層面板，將PSD源文件中的圖層或者群組按照我們想要輸出的文件名稱(chēng)和格式進(jìn)行命名。

TIPS 在對(duì)圖層或圖層組進(jìn)行命名時(shí)，一定要包含文件的名稱(chēng)和格式類(lèi)型。否則將無(wú)法實(shí)現(xiàn)對(duì)圖像的智能裁切。

步驟2 要從一個(gè)圖層或圖層組生成多個(gè)資源，需要用逗號(hào)（,）分隔資源名稱(chēng)。例如，以下圖層名稱(chēng)生成3個(gè)資源：Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png。此外，系統(tǒng)還允許我們使用加號(hào)（+）作為圖像資源名稱(chēng)之間的分隔符。例如：“42% Rounded_rectangle_1.png24+100×100 Rounded_rectangle_1.jpg90%”等同于“42% Rounded_rectangle_1.png24, 100×100 Rounded_rectangle_1.jpg90%”。

TIPS 圖層名稱(chēng)不支持特殊字符“/”“:”和“?”。

步驟3 執(zhí)行“文件→生成→圖像資源”命令。它是保證我們完成智能裁切圖像的關(guān)鍵操作，如圖1.33、圖1.34所示。

步驟4 執(zhí)行“文件→存儲(chǔ)為”命令。在彈出的對(duì)話框中，我們就會(huì)發(fā)現(xiàn)在保存PSD格式文件的同時(shí)，切圖文件也會(huì)自動(dòng)生成到與源文件相同路徑下的子文件夾中，如圖1.35所示。