Photoshop-UI設(shè)計(jì)基礎(chǔ)教程-第7章-切片與輸出界面

切片與輸出界面PhotoshopUI設(shè)計(jì)基礎(chǔ)教程第7章切片基礎(chǔ)7.1界面切片7.2界面輸出7.3課堂實(shí)訓(xùn)——切片并輸出大米網(wǎng)首頁7.47.1.1切片的作用切片是UI設(shè)計(jì)中不可或缺的一部分，對UI設(shè)計(jì)效果進(jìn)行切片操作，能提升圖片高保真（更接近真實(shí)的視覺感受）效果、降低工作量和文件量，提高頁面加載速度。高保真效果降低工作量降低文件量對圖像進(jìn)行切片能夠滿足設(shè)計(jì)人員對設(shè)計(jì)效果圖的高保真和還原需求。對圖像進(jìn)行切片能夠降低整個效果文件的文件量，提升用戶瀏覽時的加載速度。對圖像進(jìn)行切片能夠避免因切片不規(guī)范而產(chǎn)生的不必要的工作量。7.1.2切片的要點(diǎn)切片尺寸應(yīng)為雙數(shù)避免遺漏切片圖標(biāo)是切片輸出中至關(guān)重要的部分。由于機(jī)型的不同，其對應(yīng)的屏幕分辨率也不相同，因此圖標(biāo)的大小需要針對機(jī)型進(jìn)行配置。圖標(biāo)切片應(yīng)考慮手機(jī)適配問題，根據(jù)標(biāo)準(zhǔn)尺寸輸出盡量降低圖片文件的文件量在切片過程中，要注重切片的完整性，避免遺漏切片。完成切片后，還需要對切片圖片進(jìn)行資源輸出，但輸出的圖片往往文件量較大，不利于用戶加載，因此要盡量壓縮切片圖片的文件量，使其更加便于瀏覽。智能手機(jī)的屏幕大小都是雙數(shù)值，因此切片尺寸應(yīng)為雙數(shù)，以保證切片效果能高清顯示。7.1.3規(guī)則的要點(diǎn)完成切片后，還需要對切片進(jìn)行命名，便于后續(xù)查看和使用，不同類型或功能的界面切片其命名規(guī)則不同，如上圖所示。7.1.3規(guī)則的要點(diǎn)在命名過程中，同一個界面中可能存在相同類型的切片，為了更好地區(qū)分各個切片，還需要在相同類型的基礎(chǔ)上，對切片進(jìn)行更加精確的命名。例如，對于一張圖標(biāo)切片，需要對該圖標(biāo)是什么、在哪里、第幾張、狀態(tài)等進(jìn)行介紹，以幫助后期查找與選擇切片圖像，如左圖所示。切片基礎(chǔ)7.1界面切片7.2界面輸出7.3課堂實(shí)訓(xùn)——切片并輸出大米網(wǎng)首頁7.4家居網(wǎng)頁界面切片7.2.1課堂案例某家居網(wǎng)站制作了新的網(wǎng)頁頁面，現(xiàn)需要為該網(wǎng)頁界面進(jìn)行切片，在切片時要求將Banner、熱賣商品、精選產(chǎn)品等單獨(dú)展示，并對切片后的內(nèi)容進(jìn)行命名，方便后期調(diào)用，參考效果如圖所示。創(chuàng)建切片、編輯切片。知識要點(diǎn)：案例說明：添加參考線01家居網(wǎng)頁界面切片首頁界面7.2.1課堂案例開始切片02編輯切片選項(xiàng)03劃分切片047.2.2創(chuàng)建切片正?；趨⒖季€的切片固定大小固定長寬比在Photoshop中可以使用“切片工具”創(chuàng)建切片，創(chuàng)建切片的方法與創(chuàng)建選區(qū)的方法相同。選擇“切片工具”后，按住鼠標(biāo)左鍵在圖像上拖曳，即可完成切片的創(chuàng)建?！扒衅ぞ摺钡墓ぞ邔傩詸谌缬覉D所示。選擇該選項(xiàng)后，可以通過拖曳鼠標(biāo)來確定切片的大小。選擇該選項(xiàng)后，可在“度”“高度”文本框中設(shè)置切片的寬高比。選擇該選項(xiàng)后，可在“寬度”“高度”文本框中設(shè)置切片的固定大小。單擊“基于參考線的切片”按鈕，將基于參考線自動進(jìn)行切片。7.2.3編輯切片“切片選擇工具”主要用于編輯切片后的效果，通常在工具屬性欄中完成，如下圖所示。1．了解切片選擇工具7.2.3編輯切片1．了解切片選擇工具?

調(diào)整切片堆疊順序按鈕組：創(chuàng)建切片后，最后創(chuàng)建的切片將處于堆疊順序的最高層。?

提升：單擊“提升”按鈕可以將所選的自動切片或圖層切片提升為用戶切片。?

劃分：單擊“劃分”按鈕打開“劃分切片”對話框，在該對話框中可對切片進(jìn)行劃分。?

對齊與分布切片：選擇多個切片后，可單擊相應(yīng)按鈕來對齊或分布切片。?

隱藏自動切片：單擊“隱藏自動切片”按鈕將隱藏自動切片。“切片選擇工具”的工具屬性欄中各選項(xiàng)的作用如下。7.2.3編輯切片2．選擇、移動、復(fù)制、組合、刪除和鎖定切片?

選擇：選擇“切片選擇工具”，在圖像中單擊需要選擇的切片，按住【Shift】鍵的同時使用“切片選擇工具”單擊切片，可選擇多個切片。?

移動：選擇切片后，按住鼠標(biāo)進(jìn)行拖曳，即可移動所選切片。?

復(fù)制：先使用“切片選擇工具”選擇切片，再按住【Alt】鍵，當(dāng)鼠標(biāo)指針變?yōu)樾螤顣r單擊并拖動鼠標(biāo)，即可復(fù)制切片。?

組合：組合切片可以通過連接切片的邊緣來創(chuàng)建矩形切片，在創(chuàng)建時還可確定所生成切片的尺寸和位置。?

刪除：若創(chuàng)建過程中出現(xiàn)了多余的切片，可以將它們刪除。?

鎖定：當(dāng)圖像中的切片過多時，最好將它們鎖定起來。切片基礎(chǔ)7.1界面切片7.2界面輸出7.3課堂實(shí)訓(xùn)——切片并輸出大米網(wǎng)首頁7.4輸出家居網(wǎng)頁界面7.3.1課堂案例當(dāng)完成家居網(wǎng)頁界面的切片后，還需要將界面存儲為PNG格式，并保存HTML和圖像。存儲為Web所用格式。知識要點(diǎn)：案例說明：存儲切片01輸出家居網(wǎng)頁界面7.3.1課堂案例查看切片后的效果027.3.2存儲為Web所用格式將圖像優(yōu)化變小后，可以讓用戶更快地瀏覽和下載圖像。選擇【文件】/【導(dǎo)出】/【存儲為Web所用格式（舊版）】命令，打開“存儲為Web所用格式”對話框，在其中可對圖像進(jìn)行優(yōu)化和輸出，如右圖所示。7.3.2存儲為Web所用格式?

顯示選項(xiàng)：單擊“原稿”選項(xiàng)卡，可在窗口中顯示沒有優(yōu)化的圖像。?

抓手工具：單擊“抓手工具”，使用鼠標(biāo)拖動圖像可移動查看圖像。?

切片選擇工具：當(dāng)圖像包含多個切片時，可使用“切片選擇工具”選擇窗口中的切片，進(jìn)行優(yōu)化。?

縮放工具：單擊“縮放工具”，可放大圖像顯示比例。?

吸管工具：使用“吸管工具”在圖像中單擊可吸取單擊處的顏色。?

吸管顏色：用于顯示吸管工具吸取的顏色。?

切換切片可視性：單擊“切換切片可視性”，可顯示或隱藏切片的定界框。?

顏色表：在對圖像格式進(jìn)行優(yōu)化時，可在“顏色表”中對圖像顏色進(jìn)行優(yōu)化設(shè)置。?

圖像大?。嚎蓪D像大小調(diào)整為指定的像素尺寸或原稿大小的百分比。?

狀態(tài)欄：顯示鼠標(biāo)指針?biāo)谖恢玫念伾畔??！按鎯閃eb所用格式”對話框中主要選項(xiàng)的作用如上。7.3.3Web圖像文件格式在“存儲為Web所用格式”對話框中選擇需要優(yōu)化的切片后，在右側(cè)的文件格式下拉列表中選擇一種文件格式，可細(xì)致地對切片進(jìn)行優(yōu)化。?

PNG-24格式：PNG-24格式適合壓縮連續(xù)色調(diào)的圖像，它可以保留多達(dá)256個透明度級別，但文件體積超過JPEG格式。

?

WBMP格式：WBMP格式適合優(yōu)化在移動端設(shè)備中使用的圖像。?

GIF和PNG-8格式：GIF格式常用于壓縮具有單色調(diào)或細(xì)節(jié)清晰的圖像，它是一種無損壓縮格式；PNG-8格式與GIF格式的特點(diǎn)相同，其選項(xiàng)也相同。?

JPEG格式：JPEG格式可以壓縮顏色豐富的圖像，將圖像優(yōu)化為JPEG格式時會使用有損壓縮。7.3.4Web圖像的輸出設(shè)置在優(yōu)化完Web圖像后，在“存儲為Web所用格式”對話框的“預(yù)設(shè)”欄右側(cè)單擊按鈕，在打開的下拉列表中選擇“編輯輸出設(shè)置”選項(xiàng)，打開“輸出設(shè)置”對話框，在該對話框中可設(shè)置HTML文件的格式、命令文件和切片等，如下圖所示。切片基礎(chǔ)7.1界面切片7.2界面輸出7.3課堂實(shí)訓(xùn)——切片并輸出大米網(wǎng)首頁7.4實(shí)訓(xùn)背景“大米農(nóng)場”企業(yè)準(zhǔn)備對制作好的大米網(wǎng)首頁進(jìn)行切片操作，方便后期網(wǎng)頁程序人員編輯，要求根據(jù)內(nèi)容添加參考線，然后根據(jù)參考線進(jìn)行切片，并保存為PNG格式。實(shí)訓(xùn)思路查看大米網(wǎng)首頁可發(fā)現(xiàn)，整個首頁分為Banner、產(chǎn)品展示和底紋3個部分，為了便于區(qū)分可根據(jù)版塊進(jìn)行參考線的劃分，然后根據(jù)參考線進(jìn)行切片操作?！衅⑤敵龃竺拙W(wǎng)首頁

課堂實(shí)訓(xùn)

課堂實(shí)訓(xùn)——切片并輸出大米網(wǎng)首頁01選擇“切片工具”，在工具屬性欄中單擊“基于參考線的切片”按鈕，將圖像基于參考線等分成多個小塊。0203打開“大米網(wǎng)首頁.jpg”圖像文件，選擇【視圖】/【標(biāo)尺】命令，或按【Ctrl+R】鍵打開標(biāo)尺，從左側(cè)