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

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

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

提升：?jiǎn)螕簟疤嵘卑粹o可以將所選的自動(dòng)切片或圖層切片提升為用戶切片。?

劃分：?jiǎn)螕簟皠澐帧卑粹o打開“劃分切片”對(duì)話框，在該對(duì)話框中可對(duì)切片進(jìn)行劃分。?

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

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

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

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

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

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

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

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

顯示選項(xiàng)：?jiǎn)螕簟霸濉边x項(xiàng)卡，可在窗口中顯示沒有優(yōu)化的圖像。?

抓手工具：?jiǎn)螕簟白ナ止ぞ摺?，使用鼠?biāo)拖動(dòng)圖像可移動(dòng)查看圖像。?

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

縮放工具：?jiǎn)螕簟翱s放工具”，可放大圖像顯示比例。?

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

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

切換切片可視性：?jiǎn)螕簟扒袚Q切片可視性”，可顯示或隱藏切片的定界框。?

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

圖像大小：可將圖像大小調(diào)整為指定的像素尺寸或原稿大小的百分比。?

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

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

?

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

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

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

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

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