1.傳統切圖
(1)打開壹個psd文件,選擇ps左邊菜單欄的裁剪工具,選擇切片工具。首先我們對這個psd文件進行分析,有意識的將其劃分成幾個選區,然後通過鼠標的拖拽用切片工具將我們所需要的圖案切下來。
藍色標號的切片是我們手動選擇的切片,灰色標號是自動生成的切片,然後導出這些切圖,選擇文件—>導出—>存儲為Web所用格式,保存到妳要用的文件夾裏。
問題:觀察上述操作,我們會發現這樣壹個壹個圖案切太麻煩耗時了,如果壹個電商網站要妳切幾百個圖腫麽辦?於是有下面壹個較為方便的辦法:
(2)壹般設計師在設計的時候通常會用到參考線,那我們也可用參考線來簡化切圖操作,首先選定妳要切的某個圖案的圖層,然後用鼠標拖動左部或頂部的標尺將其拉到該圖案的邊界,該邊界會自動吸附參考線,因而比較準確,這樣這個圖案的參考線就設置好了,同理再去設置其他圖案的參考線
由於參考線密集,會出現很多我們不需要的切片,我們可以點擊鼠標右鍵刪除不需要的,我們發現像這樣壹次性切圖太累了,要刪除很多不用的切片,所以建議將psd文件進行裁剪壹塊壹塊切,然後關閉參考線檢查切圖。最後將切片導出到文件夾裏。
以上就是傳統切圖方式,比較麻煩耗時且不精準,所以我們使用計算機進行精準切圖。
2.精準切圖
下面我們來用photoshop的'腳本進行壹種更加快捷精準的切圖方法。它的優點在於,自動化切圖省時省力,計算機自動計算,尺寸更精確。
首先打開壹個psd文件,選擇文件—>導出—>將圖層導出到文件—設置其屬性,選擇存儲位置和保存類型,勾選透明區域,交錯,裁剪圖層,最後運行導出,這個過程需要等幾分鐘。建議還是壹塊壹塊區域切。
3.photoshopCC版本的精準切圖—自動切圖
(1)首先我們選擇壹個需要切的圖案,選擇其圖層。然後設置參數,選擇編輯—>首選項—>增效工具—>勾選啟用生成器,點擊確定。選擇文件—>生成—>圖像資源。我們發現在psd文件所屬目錄下會生成壹個空的.assets文件夾,最後我們將該圖層的名字後綴改為.png,會發現assets文件夾裏多出了我們切的圖案,這樣壹個圖案就切好了。
(2)在(1)的基礎上,很容易導出SVG格式,只需要將該圖案所在的圖層名字後綴改為.svg就可以。
網頁如何切圖問題壹:網頁切圖怎麽做?網頁設計切圖網頁切圖怎麽做?網頁設計切圖
制作網頁,很多的時候,首先要用圖片處理軟件制作出網頁的效果圖。效果圖做好是壹幅完整的圖片,不可能把這壹整張的圖片都用在網頁裏。把效果圖中有用的部分剪切下來作為網頁制作時的素材,這個過程就是切圖。(當然是用剪切、選擇工具也可以,但是用切片工具處理更精確。)
切圖的目的就是更加精確的進行網頁布局。
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版本要求比較高,針對CS6的已經不維護更新了。推薦安裝官方完整版PScc,然後自行破解。官網上有安裝使用教程,自己研究下吧,因為我也是最近才開始接觸這款插件。
Part2Photoshop
現在常用的幾種設計尺寸
1.640*9604時代的尺寸,剛接觸APP設計用的是這個尺寸,擬物盛行的時代(現在用這個尺寸設計的應該比較少了吧);
2.640*11365/5S/5C,IPhone更新,咱們設計也得跟著與時俱進(應該還有人用這個設計尺寸),進入扁平的時代了;
3.750*13346目前我做設計稿的設計尺寸,IPhone6的尺寸,向下可以適配4,5,向上可以適配6plus;我記得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的切片工具操作!
這是教程
希望幫到妳
問題十:網頁切圖什麽意思,怎麽切法如果妳登著QQ
同時按下Ctrl+Alt+A這三個鍵就可以切圖了。
如果沒登QQ,系統也有自帶的截圖功能,就是鍵盤上的PrtScrSysRq,不過這是全屏截圖
然後在開始~所有程序~附件中打開“截圖工具”,然後再按下ctrl+print(鍵盤上的PrtScrSysRq鍵)即可
切的圖可以保存在自己電腦,也可以發給自己的朋友。
謝謝!
在線PS怎麽劃分切片PS自帶有切片工具,不過用起來比較麻煩,如果是交付UI設計稿,借助摹客這樣專業的在線切圖工具比較合適,可以自動生成不同尺寸不同分辨率的切圖,也支持切換不同的平臺。
在摹客官網下載安裝摹客PS插件,插件安裝好後打開PS,在「窗口>擴展功能」找到摹客插件,選擇並打開。
請點擊輸入圖片描述
登錄後選擇項目和分組。
選中需要切圖的畫板、圖層或編組,點擊「標記切圖」。
選中目標名稱前出現“-e-”,「標記切圖」選項變為「取消切圖標記」,此時切圖操作便完成了。
(註意:標記切圖只需標記需要切圖的圖層,標記無用的切圖過多可能會導致上傳失敗。)
點擊倍率下拉框,根據設計稿的畫板大小,選擇設計稿對應的倍率。例:750px*1334px的設計稿對應@2×。
點擊「上傳所選畫板」或「上傳全部畫板」,壹鍵將設計稿上傳至雲端項目中。
請點擊輸入圖片描述
點擊「查看項目」打開設計稿,在“開發”模式中,即可壹鍵下載選中切圖或所有切圖。
請點擊輸入圖片描述
使用摹客切圖,可快速切換平臺(iOS、Android、Web)和選擇倍率,支持自定切圖尺寸和切圖壓縮,非常方便。
請點擊輸入圖片描述