版頁面制作筆記2.photoshop切圖

1、網(wǎng)易微專業(yè)之前端開發(fā)工程師學習筆記開始時間：2015.12.17頁面制作Photoshop 切圖工具、面板、視圖切圖？1.從設計稿（.psd 文件）里切出網(wǎng)頁素材（.png/.jpg 文件）；2.編寫代碼，在代碼中引入切圖，實現(xiàn)靜態(tài)頁面。為什么要切圖？給網(wǎng)頁提供素材：HTML:imgCSS:background如何切圖？-使用 PS 工具（Photoshop）PS 首選項設置：編輯首選項面板：（標尺/文字）改成像素。與標尺： 將在“窗口”菜單下開啟：工具/選項/信息（F8）/圖層/歷史調整面板后，需要保存工作區(qū)：窗口工作區(qū)新建工作區(qū)切圖常用工具：移動工具：在選項面板中設置：自動選擇，圖層。矩形

2、選框工具魔棒工具裁剪工具+切片工具- 1 -縮放工具：快捷鍵：1. 放大：Ctrl + 加號；縮小：Ctrl+減號；100%：Ctrl + 1;2.Alt +鼠標滾輪（順滑/逆滑）取色器：吸取顏色撤銷：Ctrl+Z；連續(xù)撤銷：Ctrl+Alt+Z;在歷史面板里選擇。輔助視圖在“視圖”菜單下開啟：對齊/標尺（Ctrl+R）/顯示參考線（Ctrl+;）需要開啟視圖菜單下的顯示額外內(nèi)容，才能看到畫布里的參考線和網(wǎng)格。測量、取色獲取設計稿信息：尺寸信息：通過“測量”獲取顏色信息：通過“取色”獲取測量（所有數(shù)字都要測量）：測量方式：矩形選框工具&信息面板測量數(shù)據(jù)：高度、高度/內(nèi)邊距、外邊界/邊框、定位、

3、文字大小、行高、背景圖位置。矩形選框工具：選擇頁面較大區(qū)域方法：在左側畫一個小矩形框，在右側再畫一個小矩形框，在信息視圖里顯示相關區(qū)域的大小。取色：取色方式：“拾色器&吸管工具”：吸?。哼吙蛏?背景色/文字色。取色工具巧用：使用“魔棒工具”來確定是否是線性漸變。- 2 -切圖切圖及切圖的：隱藏文字（獨立圖層和非獨立圖層的不同操作方法）、png8 和 png24格式的切圖方式、可平鋪背景的切圖方式及活動頁的切圖方式切圖之前切圖步驟- 3 -一、隱藏文字只留背景A: 若文字為獨立圖層，隱藏文字圖層找到文字圖層去掉眼睛圖標B:若文字和背景合并，平鋪背景覆蓋文字矩形選框工具變換（Ctrl+T）-(背景

4、圖像可以拉伸)使用移動工具+Alt -（背景圖像不能拉伸）二、切圖（一）PNG24/PNG8 格式的切圖方法PNG24 格式PNG8 格式1. 單圖層：移動工具選中所需圖層;再右鍵圖層到新文件，或直接拖至已有文件（新建：Ctrl+N）2. 多圖層：移動工具選中所需圖層（按住 Ctrl 多選）；右鍵合并圖層（Ctrl+E）；再右鍵圖層到新文件，或直接拖至已有文件（新建：Ctrl+N）帶背景切圖：合并（可見）圖層（Shift+Ctrl+E）;矩形選框工具選擇內(nèi)容魔棒工具去掉多余部分（從選區(qū)中減去：按住 Alt）再右鍵圖層到新文件，或直接拖至已有文件（新建：Ctrl+N）（二）可平鋪背景的切圖哪些是

5、需要切出來的？修飾性的（一般用在 background 屬性）內(nèi)容性的（一般用在 img）圖標、logo有特殊效果的按鈕、文字等非純色的背景Banner、文章中的配圖切出來的存為哪種類型？修飾性的內(nèi)容性的PNG24(IE6 不支持半透明)PNG8一般存為 JPG保存所需內(nèi)容（Ctrl+C）、新建（Ctrl+N）、粘貼（Ctrl+V）為 web 所用格式（Alt+Shift+Ctrl+S）保存類型：A:當色彩豐富且無透明要求時，建議保存為 JPG 格式并選擇。B:當色彩不太豐富時，無論有無透明要求，保存為 PNG8 格式。（需設置雜邊：無；仿色：無仿色。）C:當要求時，保存為 PNG24 格式。

6、有D:為保證質量，需保留一份 PSD, 在 PSD 上進行修改。修改、A: 更改畫布大?。?圖像畫布大小更改尺寸，同時將“定位”選在左上角。B:移動圖標：若圖標為獨立圖層，則用移動工具拖動即可；若圖標為非獨立圖層，先選用矩形選框工具選中圖層，在用移動工具拖動即可。C:減小畫布到指定區(qū)域：用矩形選框工具選定選區(qū)-裁剪（或直接用裁剪工具裁剪）D:- 4 -修改 PNG8 圖像時，需要更改顏色模式為：RGB 格式。（PNG8 默認顏色為索引顏色，半透明合適的品質(60-80)用矩形選框工具選取一塊區(qū)域粘貼到新文件中（）（三）活動頁的切圖適用于可以一刀切的活動頁拉參考線選擇切片工具點擊“基于參考線的切

7、片”按鈕為切片命名保存（全選切片，設置格式）平鋪內(nèi)容充滿文件的寬(X 軸)或高(Yz 軸)直接修改會使顏色失真。）優(yōu)化與合并使用背景圖代碼：HTML點我CSS:.u-btnbackground:url(images/btn.png) no-repeat 0 0;.u-btnbackground:url(images/sprite.png) no-repeat 0 -50px;合并方案Sprite 拼圖：把設計稿里的小圖標，拼合在一張上。Sprite 拼圖好處：減少網(wǎng)絡請求，網(wǎng)頁加載速度。優(yōu)化合并：大小與質量平衡與取舍：選擇合適的大小與合適的質量壓縮工具：無損壓縮 Minimage；有損壓縮 T

8、inyPng合并-排列：之間必須保留空隙（見參考 1）；排列方式：橫向排列 縱向排列合并-分類規(guī)則：把同屬于一個模塊的進行合并；把大小相近的把色彩相近的進行合并；進行合并；- 5 -綜合以上方式合并。合并：只本頁面用到的合并；有狀態(tài)的圖標合并瀏覽器兼容方案IT6 不支持 PNG24 半透明：存 2 份：sprite.png 24; sprite_ie.png 8.CSS3&切圖:高級瀏覽器 CSS3,低級瀏覽器用切圖，hack 處理；優(yōu)雅降級原則：都用 CSS3 處理，低級瀏覽器里沒有效果。2.精靈：Spritecss sprites 直譯過來就是 CSS 精靈。通常被解釋為“CSS 圖像拼合

9、”或“CSS 貼圖定位”。其實就是通過將多個融合到一張圖里面，然后通過 CSS background 背景局網(wǎng)頁背景。技巧布CSS Sprites 原理CSS Sprites 其實就是把網(wǎng)頁中一些背景文件中， 再利用 CSS 的整合到一張“background-image”，“background-repeat”，“background-ition”的組合進行背景定位，background-ition 可以用數(shù)字能精確的定位出背景的位置。CSS Sprites 優(yōu)點1.利用 CSS Sprites 能很好地減少了網(wǎng)頁的 http 請求，從而大大的提高了頁面的性能，這也是 CSS Sprites

10、 最大的優(yōu)點，也是其被廣泛和應用的主要原因；- 6 -參考：1.合并時保留空隙：對于具體要保留多大的空隙呢，并沒有一個明確的數(shù)值，遵循的一個就是保留的空隙足夠后期就可以了。如果是小圖標，留的空隙可適當小一些，一般 20 像素左右；那如果是大圖標，要留的空隙就要大一點，因為大圖標在調整的時候，影響到的空間也會比較大。2.個人認為能 CSS Sprites 能減少的字節(jié)，我曾經(jīng)比較過多次 3 張合并成 1 張的字節(jié)總是小于這 3 張的字節(jié)總和。CSS Sprites 缺點誠然 CSS Sprites 是如此的強大，但是也存在一些不可忽視的缺點1.在合并的時候，你要把多張有序的合理的合并成一張，還要

11、留好只夠的空間，防止板塊內(nèi)不會出現(xiàn)不必要的背景；這些還好，做痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的如果不夠寬，很容易出現(xiàn)背景斷裂；2.CSS Sprites 在開發(fā)的時候比較麻煩，你要通過 photoshop 或其他工具測量計算每一個背景單元的精確位置，這是針線活，沒什么難度，但是很繁瑣；幸好騰訊的鬼哥用 RIA 開發(fā)了一個 CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，但是已經(jīng)比photoshop 測量來的方便多了，而且樣式直接生成，拷貝就 OK！3.CSS Sprites 在的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合并的的 css，如果在原來的

12、地方放不下，有，無序改的地方最好不要動，這樣避免改動，這樣的字節(jié)就增加了，還要改的 css。只能（最好）往下加CSS Sprites 非常值得學習和應用，特別是頁面有一堆 ico（圖標）?？傊芏鄷r候大家要權衡一下利弊，在決定是不是應用 CSS Sprites。參考文章：ht/archives/7563. png8 和png24Png8VS png24png8 和png24 的根本區(qū)別，不是顏色位的區(qū)別，而是方式不同。png8 有 1 位的位（256 階）的如果是半透明的透明通道（要么完全透明，要么完全不透明），png24 則有 8透明通道（所謂半透明）。為 PNG8，四周會有鋸齒，陰影也會不見.- 7 -CSS Sprites 圖像拼接測量工具：http:/案例地址：http/rumen/r767.shtmlpng-8 和 gif 有一些相似之處，模式都是索引顏色，只支持像素級的純透明，不支持 alpha 透明。通常說的“IE6不支持 PNG 透明”，是指不支持 PNG-24 的透明。但