PS學習記錄1.頁面製作部分之PS切圖
網頁設計在技術層面上,第一步是美工做出網頁效果圖,第二步就是網頁前端進行網頁切圖。網頁切圖工具常用的有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.切片工具(適用於可以一刀切的活動頁)
▪拉參考線
▪選擇切片工具
▪選項欄點選“基於參考線的切片”按鈕
▪選擇切片選擇工具
雙擊切片,更改檔名等資訊
▪儲存
全選切片,統一設定儲存格式
四、儲存
儲存所需內容(背景一般為透明)
▪複製、新建、貼上(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 優雅降級
▪支援的顯示效果
▪不支援沒有效果