PS切圖

頁面製做部分之PS切圖

<--本標籤下，經過頁面製做、頁面架構、javascript程序設計、DOM編程藝術、產品前端架構五部分來分享總結筆記，總結筆記會陸續分享-->

      網頁設計在技術層面上，第一步是美工作出網頁效果圖，第二步就是網頁前端進行網頁切圖。網頁切圖工具經常使用的有fireworks、PS，這裏使用PS進行網頁切圖。

      咱們經過設計稿，獲得咱們想要的產出物（如.png,.jpg文件），給網頁提供圖片素材（HTML:img，CSS:background）。

一.使用PS工具

1.1 PS首選項設置

編輯-》首選項-》單位與標尺，選改成像素。

1.2 面板

在「窗口」菜單下開啓：

工具（默認已開啓）

選項（默認已開啓）

圖層（默認已開啓）

信息（手動開啓）

歷史記錄（手動開啓）

關閉其餘不須要的功能，將以上功能放置在合適的區域，窗口-》工做區-》保存工做區，設置後的工做區以下：

1.3 切圖經常使用工具

▪移動工具

將自動選擇勾選，將組改成圖層

▪矩形選框工具

▪魔棒工具

▪裁剪工具+切片工具

▪縮放工具

-放大：Ctrl+加號

-縮小：Ctrl+減號

▪取色器

1.4 輔助視圖

在「視圖」菜單下開啓：

▪對齊（默認開啓）（遇到參考線、邊界有一個吸附力）

▪標尺 Ctrl+R

▪顯示->參考線 Ctrl+;（須要顯示額外內容）

二.獲取信息

打開設計稿，獲取信息：

▪尺寸信息：測量

▪顏色信息：取色

獲取信息最重要的是將畫布拉的儘可能大，儘可能減少偏差。

測量

2.1全部數字都要測量

工具：

矩形選框工具+信息面板

測量內容：

寬度、高度

內邊距、外邊距

邊框

定位

文字大小

行高

背景圖片位置

2.2測量選區（矩形選框工具）

添加到選區：按住Shift

從選區減去：按住Alt

與選區交叉：按住Shift+Alt

2.3文字相關測量

2.3.1單獨的文字圖層

選中圖層，點擊工具T，頂部選項區顯示以下：

 

能夠直接得到文字的大小；

點擊，能夠得到其餘的一些信心，如行高：

2.3.2非單獨的文字圖層（選擇較大字做爲測量）

使用矩形選框工具，選中文字，高度即爲字號大小；

行高的測量

使用矩形選框工具，從上一行文字底部到本行文字底部的高度即爲行高，以下圖：

取色

2.4全部顏色都要取色

工具：

拾色器+吸管工具

取色內容：

邊框色

背景色

文字色

儘可能放大畫布，獲取實點、避免鋸齒點。

2.5單獨的文字圖層能夠直接獲取顏色，其餘的顏色用「拾色器+吸管工具」獲取

特別注意的是因爲圖層的疊加效果，顯示的顏色與實際顏色不相符，這是要用拾色器來獲取顏色

2.6取色工具的巧用

2.6.1肯定背景是否爲純色（拾色器+吸管工具）

不一樣區域不停的點擊，看顏色是否變化

2.6.2肯定是不是線性漸變（魔術棒）

先選定圖層，再選擇魔棒工具，點擊選中最上面一行，顯示以下：

 

繼續點擊，一次向下選中一行

 

肯定爲線性漸變。

三.切片

3.1 須要切片的內容

修飾性的（通常用在background屬性）：

圖標、logo

有特殊效果的按鈕、文字等

非純色的背景

內容性的（通常用在img標籤）

banner、廣告圖片

文章中的配圖…

例如，下圖，紅色框內是須要切的，黑框內是從後臺獲取的不須要切

3.2 切出來的圖片的保存類型

內容性的通常保存爲.JPG，

修飾性的通常保存爲.PNG8，.png24

其中PNG8和PNG24都支持全透明；PNG24支持半透明的（圖片質量比較高），但ie6不支持PNG24半透明，須要作兼容。

3.3.切圖

隱藏文字只保留背景

3.3.1文字獨立圖層（隱藏文字圖層）

找到文字圖層

去掉眼鏡圖標

3.3.2文字和圖片合併（平鋪背景覆蓋文字）

背景圖能夠作拉伸

矩形選框工具選一塊區域

自由變換 Ctrl+T

背景圖不能夠作拉伸（背景有紋理效果等）

矩形選框工具選一塊區域

使用移動工具+Alt

3.3.3 獲取切片

切圖.PNG24

•移動工具選中所需圖層(按住Ctrl多選)

•右鍵合併圖層（Ctrl+E)

•再郵件製圖層到新文件或直接拖至已有文件(新建：Ctrl+N )

切圖.PNG8（帶背景切）

•合併可見圖層（Shift+Ctrl+E)
•矩形選框工具選擇內容
•魔棒工具去除多餘部分（從選取中減去：按住Alt）

3.3.4 可平鋪背景的切圖

矩形選框工具選一塊區域

複製粘貼到新文件中

平鋪內容充滿文件的寬（x軸）或高（y軸）：如，新建文件用於平鋪x軸，切圖的寬要與新建文件一致

3.4.切片工具（適用於能夠一刀切的活動頁）

▪拉參考線

▪選擇切片工具

▪選項欄點擊「基於參考線的切片」按鈕

▪選擇切片選擇工具  

 

雙擊切片，更改文件名等信息

▪保存

全選切片，統一設置存儲格式

4、保存

存儲所需內容（背景通常爲透明）

▪複製、新建、粘貼（Ctrl+C、Ctrl+N、Ctrl+V，或拖動內容至新文件）

    獨立的圖層：直接拖動內容至新文件

    合併在一塊兒：矩形選框工具選區，魔術棒提取，Ctrl+C、Ctrl+N、Ctrl+V

▪存儲爲Web所用格式（Alt+Shift+Ctrl+S）

4.1 保存類型一（JPG）

當圖片色彩豐富且無透明要求時

建議保存爲JPG格式並選擇合適的品質

注：品質：60-80；不能爲100,80已經很好

4.2 保存類型二（PNG8）

當圖片色彩不太豐富時不管有無透明要求

保存爲PNG8格式

注：保存時，須要從新設置無仿色和無雜邊

4.3 保存類型三（PNG24）

當圖片有半透明要求時

保存爲PNG24格式

默認設置。

4.4 保存類型四（PSD）

爲保證圖片質量

保留一份PSD文件，之後任何的修改都在PSD文件上

五 修改與維護

隨着項目的進展，咱們可能想要改變圖標的位置、添加新圖標、刪除舊的圖標、修改畫布的大小，因此要進行修改和維護。

5.1 更改畫布大小

5.1.1 增長畫布

圖像-》畫布大小，根據狀況，選擇定位點

 

5.1.2 減少畫布

第一種方法：矩形選擇工具選中區域，圖像-》裁剪進行畫布的裁剪；

第二種方法：直接使用裁剪工具進行裁剪。

5.2 移動圖標

▪若圖標爲獨立層  

則用移動工具拖動便可

▪若圖標爲非獨立  

用選區工具選中圖標區域

用移動工具拖動圖標

注：若圖標爲非獨立，可用選區工具選中圖標區域，按Ctrl+X剪切，而後再粘貼，將此圖標變爲獨立的圖層。

5.3 添加圖標

將圖標整理後，放入相應的位置便可。

注意事項：

修改PNG8的圖片，須要更改顏色模式爲RGB顏色，操做方法：圖像-》模式-》RGB顏色。

六 使用

      圖片合併方案：Sprite 圖片

      CSS Sprites在國內不少人叫CSS精靈，是一種網頁圖片應用處理方式。它容許你將一個頁面涉及到的全部零星圖片都包含到一張大圖中去，這樣一來，當訪問 該頁面時，載入的圖片就不會像之前那樣一幅一幅地慢慢顯示出來了。根據具體圖標在大圖上的位置，給背景定位。

      Sprite拼圖好處：減小網絡請求，提高網頁加載速度。

 

6.1 大小與質量（平衡與取捨）

壓縮工具：

▪有損TinyPng：https://tinypng.com/  

▪無損Minimage：https://github.com/NetEaseWD/minimage

6.2 合併

6.2.1 排列

圖片之間必須保留合適空隙，（便於圖片修改、Css代碼編寫）

圖標排列方式：橫排和豎排

 

6.2.2 分類

▪把同屬於一個模塊的圖片進行合併（功能化）

▪把大小相近的圖片進行合併（節省空間）

▪把色彩相近的圖片進行合併（下降顏色數，文件體積會相對的小）

▪綜合以上方式合併

6.2.3合併推薦

▪只本頁用到的圖片合併

▪有狀態的圖片合併（鼠標通過狀態的改變等）

 

七 瀏覽器兼容方案

7.1 IE6不支持PNG24半透明

解決方案：存兩份sprite.png(24)和sprite_ie.png(8)

7.2 Css3

▪高級瀏覽器使用css3

▪低級瀏覽器使用切圖

7.3 優雅降級

▪支持的顯示效果

▪不支持沒有效果