『壹』 網頁如何切圖
問題一:網頁切圖怎麼做? 網頁設計切圖 網頁切圖怎麼做?網頁設計切圖
製作網頁,很多的時候,首先要用圖片處理軟體製作出網頁的效果圖。效果圖做好是一幅完整的圖片,不可能把這一整張的圖片都用在網頁里。把效果圖中有用的部分剪切下來作為網頁製作時的素材,這個過程就是切圖。(當然是用剪切、選擇工具也可以,但是用切片工具處理更精確。)
切圖的目的就是更加精確的進行網頁布局。
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鍵)即可
切的圖可以保存在自己電腦,也可以發給自己的朋友。
謝謝!
『貳』 急急急~~~在PS切圖儲存為Web格式的時候我選擇的是jpeg的格式。但是保存好了是gif的格式,怎麼都改不過來。
你只是設置了第一張圖片為JPEG,而其它的圖片則全部是默認的GIF格式,下面給出詳細的設置步驟:
准備的材料:PS CS6示例。
1、首先,打開PS軟體並創建條件以保存Web格式,將圖片進行切片,見下圖。
『叄』 網頁設計好後的切圖是什麼意思呢
切圖就是把用設計軟體設置好的圖片切成相應的大小,切圖後再把圖片上傳就可以可以加快顯示速度,不用等整個圖片都下載以後顯示。
PS切圖步驟:
1、打開PS,然後點擊切片工具。
『肆』 ps中怎麼樣切圖並生成WEB文件
1、拉標尺,按需要把圖片分成若干份;
2、用切片工具(快捷鍵K),沿標尺切割圖片;
3、保存:文件/存儲為WEB格式,彈出來的窗口裡選擇「優化」,依次選擇每一個小切片,把右邊「預設」里的文件格式選擇為「JPG」,品質的高低根據需要選;
4、"存儲",選擇存儲路徑,每個小切片就自動保存在一個名為「images」文件夾里。
這是大概步驟,細節的部分要自己調整。
『伍』 PS工具後存儲web格式怎麼全部選中所有的切片,保存為一種格式的圖片
操作方法如下:
所需材料:PS CS6演示。
一、切片劃分好之後按Ctrl+Shift+Alt+S打開存儲為Web格式窗口,按下滑鼠左鍵選中預覽窗口內的全部切片。