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

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

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

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

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

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

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

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

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

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

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

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