切圖(切圖軟件)

photoshop怎么切圖

　　1.傳統(tǒng)切圖

　　(1)打開一個psd文件，選擇ps左邊菜單欄的裁剪工具，選擇切片工具。首先我們對這個psd文件進行分析，有意識的將其劃分成幾個選區(qū)，然后通過鼠標的拖拽用切片工具將我們所需要的圖案切下來。

　　藍色標號的切片是我們手動選擇的切片，灰色標號是自動生成的切片，然后導出這些切圖，選擇文件—>導出—>存儲為Web所用格式，保存到你要用的文件夾里。

　　問題：觀察上述操作，我們會發(fā)現(xiàn)這樣一個一個圖案切太麻煩耗時了，如果一個電商網(wǎng)站要你切幾百個圖腫么辦?于是有下面一個較為方便的辦法：

　　(2)一般設計師在設計的時候通常會用到參考線，那我們也可用參考線來簡化切圖操作，首先選定你要切的某個圖案的圖層，然后用鼠標拖動左部或頂部的標尺將其拉到該圖案的邊界，該邊界會自動吸附參考線，因而比較準確，這樣這個圖案的參考線就設置好了，同理再去設置其他圖案的參考線

　　由于參考線密集，會出現(xiàn)很多我們不需要的切片，我們可以點擊鼠標右鍵刪除不需要的，我們發(fā)現(xiàn)像這樣一次性切圖太累了，要刪除很多不用的切片，所以建議將psd文件進行裁剪一塊一塊切，然后關(guān)閉參考線檢查切圖。最后將切片導出到文件夾里。

　　以上就是傳統(tǒng)切圖方式，比較麻煩耗時且不精準，所以我們使用計算機進行精準切圖。

　　2.精準切圖

　　下面我們來用photoshop的'腳本進行一種更加快捷精準的切圖方法。它的優(yōu)點在于，自動化切圖省時省力，計算機自動計算，尺寸更精確。

　　首先打開一個psd文件，選擇文件—>導出—>將圖層導出到文件—設置其屬性，選擇存儲位置和保存類型，勾選透明區(qū)域，交錯，裁剪圖層，最后運行導出，這個過程需要等幾分鐘。建議還是一塊一塊區(qū)域切。

　　3.photoshop CC版本的精準切圖—自動切圖

　　(1)首先我們選擇一個需要切的圖案，選擇其圖層。然后設置參數(shù)，選擇編輯—>首選項—>增效工具—>勾選啟用生成器，點擊確定。選擇文件—>生成—>圖像資源。我們發(fā)現(xiàn)在psd文件所屬目錄下會生成一個空的.asts文件夾，最后我們將該圖層的名字后綴改為.png，會發(fā)現(xiàn)asts文件夾里多出了我們切的圖案，這樣一個圖案就切好了。

　　(2)在(1)的基礎上，很容易導出SVG格式，只需要將該圖案所在的圖層名字后綴改為.svg就可以。

UI中的“切圖”是什么意思？為什么要切圖？

切圖是設計師交付給開發(fā)的產(chǎn)物之一，設計稿完成后，設計師需要將其切成便于制作成頁面的圖片。但因為開發(fā)經(jīng)常需要不同平臺不同尺寸的切圖，如果全部由UI來做，不僅費時費力，可能還會因為細微的差距造成開發(fā)不能很好的還原設計稿。

所以可以用摹客之類的專業(yè)工具來自動切圖。UI把Sketch、Adobe XD、PS的設計稿進行切圖標記，上傳至摹客后，開發(fā)就可以自主下載不同平臺不同尺寸的切圖和使用了。

擴展資料：

切圖用于完成html+css布局的靜態(tài)頁面，有利于交互，形成良好的視覺感。通俗來講，把一張設計圖利用到切片工具 把自己所需的切成一張張小圖，然后前端開發(fā)用DIV+CSS完成靜態(tài)頁面書寫，完成CSS布局。

切圖大家都有個誤區(qū)，覺得切圖就是把圖片切出來，其實并不完全是這樣，首先處理的是什么類型的頁面圖片型（EDM 或活動著陸頁等）、圖文型（門戶網(wǎng)站或電商網(wǎng)站等）、界面型（Web App 等），把圖片切出來這個過程是叫切片。

參考資料來源：百度百科-切圖

ps切圖怎么切

ps切圖方法是：
1、在pS中打開圖片。
2、選擇切片工具。
3、右鍵圖像界面--劃分切片。
4、在寬度和高度上分別輸入需要劃分的數(shù)量。
5、存貯為Web和設備所用格式。

ps怎么快速切圖步驟

ps切圖的方法是：
1、在PS中打開圖像。
2、選擇切片工具。
3、右鍵圖像--劃分切片。
4、輸入寬邊切片數(shù)和高邊切片數(shù)。
5、確定。
6、存貯為Web和設備所用格式。
7、此時，它會在存貯路徑上自動創(chuàng)建一個文件夾，把所有的切片按順序編號。

photoshop怎么切圖

PS自帶有切片工具，不過用起來比較麻煩，如果是交付UI設計稿，可以用摹客這樣的免費在線切圖工具，可以自動生成不同尺寸不同分辨率的切圖，也支持切換不同的平臺，對于設計師來說比較省時省力。
以下介紹用摹客的插件來完成photoshop切圖的步驟：
1.在摹客官網(wǎng)下載安裝摹客 PS插件，插件安裝好后打開PS，在「窗口>擴展功能」找到摹客插件，選擇并打開。
2.登錄后選擇項目和分組。
3.選中百需要切圖的畫板、圖層或編組，點擊「標記切圖」。
選中目標名稱前出現(xiàn)“-e-”，「標記切圖」選項變?yōu)椤溉∠袌D標記」，此時切圖操作便完成了。(注意：標記切圖只需標記需要切圖的圖層，標記無用的切圖過多可能會導致上傳失敗。)
4.點擊倍率下拉框度，根據(jù)設計稿的畫板大小，選擇設計稿對應的倍率。例：750px*1334px的設計稿對應 @2× 。
5.點擊「上傳所選畫板」或「上傳全部畫知板」，一鍵將設計稿上傳至云端項目中。
6.點擊「查看項目」打開設計稿，在“開發(fā)”模式中，即可一鍵下載選中切圖或所有切圖。

使用摹客切圖，可快速切換平臺（iOS、Android、Web）和選擇倍率，支道持自定切圖尺寸和切圖壓縮，非常方便。

講的“切圖”到底是什么意思

切圖是指將設計稿切成便于制作成頁面的圖片，并完成html+css布局的靜態(tài)頁面，有利于交互，形成良好的視覺感。通俗來講，把一張設計圖利用到切片工具 把自己所需的切成一張張小圖，然后用DIV+CSS完成靜態(tài)頁面書寫，完成CSS布局。