web切圖教程

A. web網頁界面如何給前端標注，切圖

一鍵標記切圖，操作更快捷安裝藍湖插件之後，即可一鍵標記切圖，明櫻方便快捷。
一鍵上傳藍湖，自動共享給同事
將標記好切圖的設計圖一鍵上傳到藍湖，即可將設計圖跟切圖共享給你的同事，管理更科學。
無須逐一發送，你的同事就能在線查看、在線評審設計圖，還能自動標注和下載切圖。
一鍵下載切圖，支持多種設備
設計圖上傳到藍湖後，可以一鍵下載多頁面切圖，也可以下載單張設計圖內的切圖文件；
而且藍湖的切圖下載支持多種設備，
開發常用的 PNG、SVG、JPG、PDF、WebP 格式都有哦~
一鍵壓縮切圖，告別旁纖二次加工
藍湖支持一鍵壓縮切圖，能有效地縮小應用和網站的圖像大小，從而讓網站載入更快，用戶體驗更佳！
設計師和開發工程師從此告別切圖文件二次加工，再運槐仿也不用一張張地壓縮切圖文件了。

B. 急急急~~~在PS切圖儲存為Web格式的時候我選擇的是jpeg的格式。但是保存好了是gif的格式，怎麼都改不過來。

你只是設置了第一張圖片為JPEG，而其它的圖片則全部是默認的GIF格式，下面給出詳細的設置步驟：

准備的材料：PS CS6示例。

1、首先，打開PS軟碰搏件並創建條件以保存Web格式，將圖片進行切片，見下圖。

C. 網頁如何切圖

問題一：網頁切圖怎麼做? 網頁設計切圖 網頁切圖怎麼做？網頁設計切圖
製作網頁，很多的時候，首先要用圖片處理軟體製作出網頁的效果圖。效果圖做好是一幅完整的圖片，不可能把這一整張的圖片都用在網頁里。把效果圖中有用的部分剪切下來作為網頁製作時的素材，這個過程就是切圖。（當然是用剪切、選擇工具也可以，但是用切片工具處理更精確。）
切圖的目的就是更加精確的進行網頁布局。
photoshop、fireworks等軟體都帶有切片工具。

問題二：頁面設計頁面製作 這種背景的頁面怎麼切圖的啊。。。主要是背景怎麼整的。。。 目前我無法判斷你那些圖片帶鏈接，所以只能大概的給你講一下（目前文字部分我先不管），具體我拿第三張來講給你吧。
首先，把所有要做鏈接的圖層都隱藏掉，剩下的層，就可以用來切圖，整知豎寬體背景纖山是藍色，所以css搞定就行。
其次，背景有一張整體的背景圖，這個需要全部單獨切下來，圖片上面不要帶任何其他元素，就只是這張單獨的圖片就好，布局的時候引用為背景！
然後，剩下的就是主體部分，上面的播放視頻和文字我就不講了，簡單，底部的汽車促銷圖片也切一張大圖就好，也簡單。
最後，就剩下最難搞的中間部分，大概想了一下，2種方法實現，如下：
1、切成整張大圖，需要做鏈接的地方，畫上不規則熱區就好了！這種比較簡單些。
2、圖片什麼樣，就切成什麼樣，每張小圖都單獨切出來（注意：要做成png格式保存，背景設置為透明），然後寫html的時候，用css畫出等大的不規則圖形，吧圖片當做背景加進去，然後用css絕對定位一下，如有鏈接加鏈接，完美實現！
備註：css畫不規則圖形，網上可以搜到教程，看一看就差不多，不難！
至於其他幾張圖，比較簡單，簡單說一下第二張，第二張的其實如果想簡單實現，那就除文字和純背景色外，整張切，然後有鏈接的地方加熱點就好，想做復雜一點，就可以用到我所說的css畫不規則圖形，純色的三個縱橫條，不用切，css畫出來，添加背景色，然後絕對定位就好，其他的該切多大就切多大，然後用css絕對定位，設置好z-index的關系，就ok了！
之前做過很多這樣的網站，這都是經驗之談，完全能實現，要有問題再問我！完全純手打啊~~

問題三：photoshop網頁切圖怎麼用 1、首先需要用photoshop把psd源文件打開，看看源文件的整體布局。源文件是分層的，方便切圖的層次。
2、切圖的工具叫做「切片」，在左側面板可以看到。右擊可以看到「切片工具」和「切片選擇工具」按鈕。
3、用放大鏡將所要切的圖片部分放大，可以用參考線確定大小，切圖是可以沿參考線切。
4、切換到切片工具，沿參考線劃出切片，右擊可以看到有可以編輯切片的選項，可以設置切片像素大小。
5、切好後就可以單擊菜單欄「文件」，選擇「存儲為web所用格式」選項。
6、選擇要存儲的切片，然後右上角可以設置圖片的格式、質量大小，設置好以後就可以單擊保存了。
7、保存需要保存的切片，選擇好路徑即可，單擊保存即完成。打開保存好的圖片，如圖。
注意事項
注意保存時最好自己設置路徑，settings選項。

問題四：怎麼用ps做html切圖 ，詳細！ 10分 先切小片然後寫代碼 不是一句話兩句話能說清楚的

問題五：UI 中網頁設計切圖怎麼切 PxCook，目前我還沒用上Mac，所以也不知道傳說中的Sketch到底多神奇。PxCook在Windows上標注還比較順手，雖然它還附帶切圖功能，但是比較雞肋，不推薦用它切圖。
切圖工具：
Cutterman 一款PS的插件，切圖非常方便，但不支持綠色免安裝版本PS，而搭亮且對PS版本要求比較高，針對CS 6的已經不維護更新了。推薦安裝官方完整版PS cc，然後自行破解。官網上有安裝使用教程，自己研究下吧，因為我也是最近才開始接觸這款插件。
Part 2 Photoshop
現在常用的幾種設計尺寸
1. 640*960 4時代的尺寸，剛接觸APP設計用的是這個尺寸，擬物盛行的時代(現在用這個尺寸設計的應該比較少了吧)；
2. 640*1136 5/5S/5C，IPhone更新，咱們設計也得跟著與時俱進(應該還有人用這個設計尺寸)，進入扁平的時代了；
3. 750*1334 6 目前我做設計稿的設計尺寸，IPhone6的尺寸，向下可以適配4，5，向上可以適配6 plus；我記得IP6推出後，我問總監應該用什麼尺寸設計，他說用IP6的吧，好適配，切出來就是@2x了，改一改上下都能照顧到。

問題六：網頁切圖是不是一般只切按鈕部分？別的比如背景都用CSS實現？ 一般來說，比如網站logo、網站相關的圖片(例如產品圖片,不規則的形狀圖片等)、漸變、特殊字體(宋體、黑體、微軟雅黑以外的字體)，幾乎都是要切成圖片來做的。切成圖片又分為2膽，一種通過設置css背景，另外一種是直接標簽加路徑調用。
其他的全部用css來實現。

問題七：ps如何切圖成HTML頁面 希望給一個詳細流程操作 修改好相應的文字與圖象之後，我們就將PSD文件輸出(X)HTML文件。
首先得先對PSD文件做切片，有兩種方法：
①使用工具欄上的「切片工具」，
然後在圖象上劃出一塊一塊的區域。
②使用基於參考線的切片，按ctrl+R調出標尺欄，
把滑鼠移動到標尺上，按住滑鼠左鍵，移動到圖象上，將會看到一條綠色的參考線，如圖
將參考線；排好，然後點一下工具欄上的切片工具圖表，然後點上面
選項欄里的「基於參考線的切片」。於是在原來的參考線上就變成了一塊一塊的切片了。
接下來就可以輸出了:
①依次選擇菜單欄上的「文件」→「存儲為Web所用格式」→「存儲」。
②接下來就會彈出一個「將優化結果存儲為」的窗口，如圖
在「保存類型」處有個下拉列框可以選擇，因為我們要存儲為網頁的格式，所以選擇「HTML和圖象(* html)」，再選擇「保存」就可以輸出憨個網頁格式的HTML文件與一個包含圖象的名為「images」的文件夾。
③如果我們需要輸出「div+css的網頁」我們還可以這么做：
在「設置」處的下拉列框，選擇「其他」
就會彈出一個「輸出設置」的窗口
在第2個下拉列框處選擇「切片」
選擇「生成CSS」
單擊「好」→「保存」就可以輸出一個目前流行的「div+css」的HTML網頁。

問題八：網頁美工是怎樣進行圖片切圖的 步驟如下：
1.首先我們需要用到的文件就是psd的文件了，一般都是由設計師來完成的，我們切圖也就是切psd文件，因為psd文件是分層的，所以想切哪裡切哪裡。
2.之後用Photoshop軟體打開psd文件，這里小魚用CC版本演示，其他版本大同小異。我們打開之後可以雙擊左側的放大鏡工具，將圖片縮放到原圖大小。
3.我們要切圖，當然用到的就是「切片」工具了，可以點擊左邊的切片工具，也可以右擊這個圖標選擇更多的相關工具。切圖都是用切片工具。
4.選擇好切片工具之後，想要切哪裡就直接拖動滑鼠就可以了，然後會出現切線，在切線框內右擊還可以彈出菜單。
5.點擊菜單的編輯切片選項還可以對切片進行編輯，可以編輯大小等項目。
6.但是如果我們只想要字怎麼辦，不要底層背景，那麼可以用「移動」工具。選擇移動工具，在不要的背景上單擊，這時候在「圖層」面板裡面就會選中這個圖層。注意勾選上面的「自動選擇圖層」。
7.把選中的不需要的背景前面的小眼睛去掉，最後只剩我們想要的部分。
8.然後點擊左上角菜單欄的「文件」，選擇「存儲為web所用格式」選項。
9.如果要透明的，那麼一般選擇png格式，如果要非透明的，那麼哪個格式存儲的文件小就選擇哪個，這樣能保證網頁載入速度快。然後點擊下面的「存儲」按鈕。
10.然後給圖片命名，選擇一個保存地址，最後選擇「選中的切片」，不然好多沒用的圖片都會保存下來。
11.最後找到保存好的圖片打開，已經是一個我們想要的圖片了。

問題九：如何把圖片切成HTML頁面 用 ImageReady
其次打開你想做切片的圖片
在英文輸入法下，在程序界面中按 K 切換到切片工具
在圖片上隨意進行切片
按CTRL+ALT+SHIFT+S 將優化結果存儲為
保存類型下拉框拉下來選擇「HTML和圖像」
進行保存
或者使用photoshop的 切片工具 操作！
這是教程
wenku./...a
wenku./...6
希望幫到你

問題十：網頁切圖什麼意思，怎麼切法 如果你登著qq
同時按下Ctrl+Alt+A這三個鍵就可以切圖了。
如果沒登QQ，系統也有自帶的截圖功能，就是鍵盤上的PrtScrSysRq，不過這是全屏截圖
然後在開始~所有程序~附件中打開「截圖工具」，然後再按下ctrl+print（鍵盤上的PrtScrSysRq鍵）即可
切的圖可以保存在自己電腦，也可以發給自己的朋友。
謝謝！

D. photoshop網頁切圖怎麼用

Photoshop軟體「切片工具」是製作網頁切圖的常用工具，利用切片工具把一張大圖切片成需要的小圖片，便於製作成網頁頁面，以Photoshop cc2014軟體為例，切片工具的使用方法是：

1、打開ps軟體，「文件--打開」，打開一張要處理的圖片；

E. ps切圖 web保存多個jpg的圖片為什麼只有第一個是jpg其他是png

一、切圖完成後，按Ctrl+Shift+Alt+S鍵（存儲為web所用格式）。
二、點擊左下角的縮放按鈕，縮放至能看全圖片中的所有切片即可。
三、滑鼠從圖片左上角拖動到右下角，或者按住鍵盤shift，框選需要輸出統一格式的切片（被選中的切片周圍呈現橙黃色線框）。
四、點擊右上角的「預設」，選擇需要輸出的格式碧伏，如jpg格州慧輪式。
五、點擊下方的冊信「存儲」，在彈出的保存窗口下方切片選項中選擇「所有用戶切片」，點擊保存即可。

F. photoshop網頁切圖怎麼用

在photoshop的工具欄中找到切片工具，就可以在圖片內按照網頁設計的要求進行切片了，如同使用框選工具一樣拉出一個方形區域，這就是一個切片；也可以利用切片選擇工具對切片進行調整。切片製作好以後選擇儲存為web所用格式，在保存對指蔽話備返框內內根據需要選擇「HTML和圖像」或「僅限圖像」等選唯滾州項······

G. 做好的網頁平面圖用Photoshop怎麼正確切圖

Photoshop軟體，簡稱「PS」，是由Adobe Systems開發和發行的圖像處理軟體，Photoshop主要處理以像素所構成的數字圖像，其眾多的編修與繪圖工具，可以有效地進行圖片編輯工作。用Photoshop cc2014軟體將做好的網頁平面圖切圖的詳細製作方法是：

1、打開ps軟體，「文件--打開」做好的網頁平面圖；

H. 前端如何切圖（超詳細，超小白）

        身為一名前端開發者，$\color{red}{ 切圖 } $雖然可以被UI或者藍湖等工具解決，但是這也是屬於前端er的必修課。因此，我也是把切圖分享作為我第一篇博客的分享內容。

        下面是直接操作的步驟，如何打開psd圖等操作應該也不用我肢寬廢話了。

        1.第一步就是找到你需要的圖或者icon的圖層，並選中它（如果有疊加需要多選就按住ctrl進行多選）。

2.選擇上方工具欄，選擇 圖層—>復制圖層，

    然後會彈出一個編輯框，重點：文檔一定要選擇 新建 ,名稱可以填寫自己需要的，然後點擊確定，就會有新的圖了。

3.因為畫片大小可能不太符合自己的預期，可以選擇上方工具欄 圖像—>裁切，會自動切成歷鄭亮合叢激適的大小。

4.到這一步基本上就已經成功了，最後就是保存了。依然是上方工具欄，左上角，文件--->導出--->存儲為web所用格式--->選擇四聯--->選擇PNG-24格式（根據自己需要，我一般使用這個），最後點擊 存儲 就可以了。

I. 網頁美工是怎樣進行圖片切圖的

步驟如下：
1.首先我們需要用到的文件就是psd的文件了，一般都是由設計師來完成的，我們切圖也就是切psd文件，因為psd文件是分層的，所以想切哪裡切哪裡。
2.之後用Photoshop軟體打開psd文件，這里小魚用CC版本演示，其他版本大同小異。我們打開之後可以雙擊左側的放大鏡工具，將圖片縮放到原圖大小。
3.我們要切圖，當然用到的就是「切片」工具了，可以點擊左邊的切片工具，也可以右擊這個圖標選擇更多的相關工具。切圖都是用切片工具。
4.選擇好切片工具之後，想要切哪裡就直接拖動滑鼠就可以了，然後會出現切線，在切線框內右擊還可以彈出菜單。
5.點擊菜單的編輯切片選項還可以對切片進行編輯，可以編輯大小等項目。
6.但是如果我們只想要字怎麼辦，不要底層背景，那麼可以用「移動」工具。選擇移動工具，在不要的背景上單擊，這時候在「圖層」面板裡面就會選中這個圖層。注意勾選上面的「自動選擇圖層」。
7.把選中的不需要的背景前面的小眼睛去掉，最後只剩我們想要的部分。
8.然後點擊左上角菜單欄的「文件」，選擇「存儲為web所用格式」選項。
9.如果要透明的，那麼一般選擇png格式，如果要非透明的，那麼哪個格式存儲的文件小就選擇哪個，這樣能保證網頁載入速度快。然後點擊下面的「存儲」按鈕。
10.然後給圖片命名，選擇一個保存地址，最後選擇「選中的切片」，不然好多沒用的圖片都會保存下來。
11.最後找到保存好的圖片打開，已經是一個我們想要的圖片了。

J. PS-前端切圖教程（切jpg圖和切png圖）

轉發自： PS-前端切圖教程（切jpg圖和切png圖） - xing.org1^ - 博客園 (cnblogs.com)

———————-------------------------------------------------------------------- PS切圖步驟說明 ————————————————————————————————

一共分兩大項：切jpg圖、切png圖。

我用的是PS CC 版本，教程中用到的除了界面和擺放位置不一樣外，其他應該和低版本的都一樣了。

一、 切JPG圖

1．打開ps導入圖片的步驟是鐵定的了

2．選擇左邊工具欄里的「切片工具」

事先自己沒用過或上一次ps工具使用時沒有使用過「切片工具」的，打開ps工具欄里默認是「裁剪工具」的圖標

你可以滑鼠左鍵點住「裁剪工具」不鬆手，他會在右邊展開（我這是工具欄在ps界面左側的情況下）這一組的所有工具，在里邊選擇「切片工具」即可

我圖中之所以框選了兩個工具，是因為後期還要用到「切片選擇工具」，這里先認識一下他的位置在哪。

3．用「切片工具」切出想要的范圍，框選范圍就像平時用qq的截圖工具一樣。

如下，我需要這個小圖標，我就框選了他。

框選中：

框選後：

如果你框選好了松開了滑鼠，他還是這種黃色的邊線，你把「切片工具」移到附近，他還能調整框的大小范圍。

但是如果你框選了好幾個了，想改前邊已經框選好的：

像如上這樣，要知道，ps切片工具最近一個選區的切片是用黃色框包裹的，其他前邊切得都是藍色邊線，這時候你再用「切片工具」去調整藍色邊線的選區是動不了的。

這就要用上「切片選擇工具」了

4．「切片選擇工具」調整范圍：

切片選擇工具就在「切片工具」的下邊，尋找方法見上解。點擊選擇要調整的切片藍線，待其變成黃色後，調整范圍。

切片選擇工具只能選擇並調節范圍，不能切片。

5．切好後保存

保存方法：文件——存儲為web所用格式【快捷鍵ctrl+shift+alt+s】

在彈出的【存儲為web所用格式】對話框中，下拉選擇框選擇JPEG格式

按需求更改質量（低、中、高、非常高、最佳。這五個模式）

點擊存儲後彈出【將優化結果存儲為】的對話框

選擇存放位置、設置文件信息——

一般存儲時，ps會自動建立一個images文件夾，你要找到剛才自己設定的位置中，找images文件夾，在她里邊才有你剛才切好的圖。

命名文件名

「格式「——僅限圖像

在「切片」那裡，可以選擇是存儲全部切片還是只存儲選中的切片，

一般默認就存儲全部切片就好了，有時候只需要一小塊切片時，可以選擇存儲選中的切片，他會只保存一張你當前切得圖，這樣省的自己去一大堆切片中撿出來自己要用的了。

二、 切PNG圖

切透明圖的核心理念是，你要把不需要的背景圖給隱藏掉，只讓需要的留下來，底部背景變成像馬賽克那樣的樣式。

1．打開ps拖進來你要切的psd或者tif文件，

一定得是帶圖層的。

2．先選擇移動工具

3．並在頂部選項欄里勾選自動選擇，

4．下拉框里選擇圖層

若沒有選項欄或者圖層欄的：

在菜單欄點擊窗口——選項。打了對勾後就能調出工具對應的選項面板了。

5．然後用「移動工具」點擊你不需要的背景圖，ps會自動選中該背景所在的圖層，

6．你在圖層面板中，把對應這層的左邊小眼睛關掉就好了，讓背景圖先隱藏起來。

有時候設計會有好幾層，他為了光效或者其他效果做了好幾層不同透明度的背景疊加在你要切的東西後邊，

你就用移動工具（快捷鍵v【英文輸入法下按v就可以鎖定移動工具】）點擊它然後關掉它，有幾層就多做幾步，直到你不需要的背景全部隱藏掉。

但是良心的設計一般會把背景都放到一個圖層中，你找到一層背景，所有的都和他在一個組里邊，你把組的小眼睛關掉即可

7．然後切片工具切出你要的那個圖標

8．保存：文件-存儲為web所用格式(ctrl+shift+alt+s)

9．選擇png-8/png-24格式，看你對圖標的要求了

PNG8」是指8位索引色點陣圖，「PNG24」是24位索引色點陣圖；

png8：

每一張「png8」圖像，都最多隻能展示256種顏色，所以「png8」格式更適合那些顏色比較單一的圖像，

例如純色、logo、圖標等；因為顏色數量少，所以圖片的體積也會更小；

png24：

每一張「png24」圖像，可展示的顏色就遠遠多於「png8」了，最多可展示的顏色數量多大1600萬；

所以「png24」所展示的圖片顏色會更豐富，圖片的清晰度也會更好，圖片質量更高，當然圖片的大小也會相應增加，

所以「png24」的圖片比較適合像攝影作品之類顏色比較豐富的圖片；

這是二者的區別，根據自己的需求選擇吧。

10．然後就是一定要勾選透明度，其他默認設置就好。

Png-8的透明度位置

Png-24的透明度位置

11．」保存全部切片「或者「保存選中切片」

這里還要說明一個問題，有時候一個頁面中，我用切片工具選出好幾張png圖標准備切，然後保存的時候也選擇png格式都沒問題，

但是到了選擇保存位置這個對話框里，選擇的是「保存所有切片「，

最後保存出來的圖片，只有最後切得那張或者說切片工具選中的那張是png的，其他就都存成jpg格式了，背景是白色底

！！所以切png的圖，還是建議，一張一張「保存選中切片」比較好。

或者你的圖標與白色底差別大的話，你也可以不計較，讓他保存成jpg後再去ps中魔棒摳圖也好，不過這樣比較麻煩不是。

有的說，背景圖和圖標每分圖層咋辦？那咋辦？找設計吧。要不你自己選取工具扣吧，扣好了另存為png也是一種辦法

三、 其他技巧 ：

1．Ctrl+ +號放大圖片，

2．ctrl-縮小

3．按住空格，滑鼠圖標變成抓手工具，移動頁面

四、重磅彩蛋！！！還有一個吊炸天的方法——針對單一小icon切成png的

「移動工具」點擊圖標，選中圖標所在的圖層；

右擊該圖層，選擇「轉換為智能對象」；（ps這時候沒反應，不要大驚小怪，是你看不到而已）

接著再次在這個圖層上，右擊——「編輯內容」

對話框點擊確定

ps就自動生成一個新的文件，只有那個icon，而且是透明的哦！

很神奇有么有！

很省力有么有！

1秒搞定有沒有！

以下是圖解：

這是點擊一個小圖標

選中圖標後的圖層面板

右鍵點擊該圖層選擇「轉換為智能對象」

沒轉換前的圖層樣式：

轉換後的圖層樣式：

所以別說「我轉換了ps沒反應」這樣的話了，是有的，你不仔細看看不到

接著再右擊——「編輯內容」

點擊「確定」

看，他就新建了一個「形狀8」的頁面，放的是我的png的小圖標，

 最後你保存為png也好，「存儲為web所有格式」也好，自由發揮吧。

 這個方法可能只能保存一個圖標，

有的人說我好幾個圖：例如文字+圖片都有咋弄？

那就切圖唄！

那還要糾結的話那就合並圖層吧！