1、關於網頁製作的,什麼是切圖,切圖要達到什麼目的,用什麼工具來切
製作網頁,很多的時候,首先要用圖片處理軟體製作出網頁的效果圖。效果圖做好是一幅完整的圖片,不可能把這一整張的圖片都用在網頁里。把效果圖中有用的部分剪切下來作為網頁製作時的素材,這個過程就是切圖。(當然是用剪切、選擇工具也可以,但是用切片工具處理更精確。)
切圖的目的就是更加精確的進行網頁布局。
photoshop、fireworks等軟體都帶有切片工具。
2、網頁美工是怎樣進行圖片切圖的
步驟如下:
1.首先我們需要用到的文件就是psd的文件了,一般都是由設計師來完成的,我們切圖也就是切psd文件,因為psd文件是分層的,所以想切哪裡切哪裡。
2.之後用Photoshop軟體打開psd文件,這里小魚用CC版本演示,其他版本大同小異。我們打開之後可以雙擊左側的放大鏡工具,將圖片縮放到原圖大小。
3.我們要切圖,當然用到的就是「切片」工具了,可以點擊左邊的切片工具,也可以右擊這個圖標選擇更多的相關工具。切圖都是用切片工具。
4.選擇好切片工具之後,想要切哪裡就直接拖動滑鼠就可以了,然後會出現切線,在切線框內右擊還可以彈出菜單。
5.點擊菜單的編輯切片選項還可以對切片進行編輯,可以編輯大小等項目。
6.但是如果我們只想要字怎麼辦,不要底層背景,那麼可以用「移動」工具。選擇移動工具,在不要的背景上單擊,這時候在「圖層」面板裡面就會選中這個圖層。注意勾選上面的「自動選擇圖層」。
7.把選中的不需要的背景前面的小眼睛去掉,最後只剩我們想要的部分。
8.然後點擊左上角菜單欄的「文件」,選擇「存儲為web所用格式」選項。
9.如果要透明的,那麼一般選擇png格式,如果要非透明的,那麼哪個格式存儲的文件小就選擇哪個,這樣能保證網頁載入速度快。然後點擊下面的「存儲」按鈕。
10.然後給圖片命名,選擇一個保存地址,最後選擇「選中的切片」,不然好多沒用的圖片都會保存下來。
11.最後找到保存好的圖片打開,已經是一個我們想要的圖片了。
3、網站前端切圖是什麼意思,主要做什麼
切圖是設計師交付給開發的產物之一,設計稿完成後,設計師需要將其切成便於製作成頁面的圖片。但因為開發經常需要不同平台不同尺寸的切圖,如果全部由UI來做,不僅費時費力,可能還會因為細微的差距造成開發不能很好的還原設計稿。
所以可以用摹客之類的專業工具來自動切圖。UI把Sketch、Adobe XD、PS的設計稿進行切圖標記,上傳至摹客後,開發就可以自主下載不同平台不同尺寸的切圖和使用了。
4、網頁設計好後的切圖是什麼意思呢
切圖就是把用設計軟體設置好的圖片切成相應的大小,切圖後再把圖片上傳就可以可以加快顯示速度,不用等整個圖片都下載以後顯示。
PS切圖步驟:
1、打開PS,然後點擊切片工具。
2、點擊切片工具後,就可以把圖片切成需要的大小。
3、切好圖片後,點擊導出web所用格式。
4、進入導出web所用格式頁面,按住shift鍵把所有切片都選中。
5、導出格式設置為JPEG。
6、最後點擊存儲就可以了。
5、在網頁設計中如何用PS切圖
1、在Photoshop中打開設計稿,如下圖:
2、選擇工具板上的slice切片工具,大面積的色塊單獨切成一塊,盡可能的保持在水平線上的整齊,切好的圖如下所示:
3、在PhotoShop中選擇file-save for web...來輸出,這里要注意一些參數的選擇:
4、接下來在Dreamweaver里建立站點:
5、在圖示左邊的site name中為站點起一個名字,如example然後在下面的local root folder中選擇剛才導出的站點的文件夾:
6、重新製作頁面表格,通常在photoshop中直接導出的htm文件是不可以直接使用的,因為有些地方在實際運用時要作調整:
7、根據這個頁面表格所示,在新的頁面中建立一個三行一列的表格,把cellpadding,cellspacing,border三項值設為0,不然會有空隙,最後選擇表格,背景添加圖片即可。
6、網頁設計怎麼切圖
你用什麼軟體設計的就用什麼軟體來裁切圖,我用的是photoshop進行設計,也是用這個來進行的切圖;
切圖保存格式最好、最常用的是gif和jpg。色彩要求不多的情況下,比如說小圖標,就用gif。如果色彩比較豐富,gif就不夠用了,就要保存成jpg。至於png,一般情況下不要用,一個是佔用空間大,再是在不同的瀏覽器下瀏覽,會出現灰色背景,祝你好運!
7、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了,改一改上下都能照顧到。
8、網頁美工切圖需要會什麼
你div和css學一些常用的基礎就可以了,還要會JavaScript,但是最主要還是要學會怎麼使用工具,切圖片的話用Photoshop就行,要熟悉裡面的切片工具,還要會Dreamweaver,可以用來調整頁面,要做動畫的話可以用flash,呵呵,做一個好的美工可不容易,主要是對美和顏色搭配有一種非常敏感的感覺,美工做好一個頁面90%的時間花在設計圖片上了,10%用工具軟體切好。
9、我現在在做網頁設計,現在我想要自己做整個網頁的部分,切圖、寫代碼?
學做網頁設計最好還是去找個好的培訓機構,樂福創想網頁設計培訓就還不錯,我朋友就是那邊學的
10、網頁切圖怎麼做? 網頁設計切圖
網頁切圖怎麼做,網頁設計切圖的方法。
如下參考:
1.打開PS,點擊切片工具,如下圖所示。
2.點擊切片工具,可以將圖片切割成所需的大小,如下圖所示。
3.剪切圖片後,點擊導出特殊網頁使用的格式,如下圖所示。
4.輸入屬導出web的格式頁面,並按住shift鍵選擇所有部分。
5.導出格式設置為JPEG,如下所示。
6.最後,單擊save存儲,如下圖所示。