前端必備技能之Photosh切圖
切圖:即從設計稿裡面切出網頁素材
一、使用Photoshop工具
工具的使用:
1.將文字與標尺的單位的設定為畫素
2.開啟這五個視窗,關閉其它視窗,儲存工作區方便以後使用
3.工作區弄亂時,可以使用上圖中的復位,或者在下圖中選擇工作區:
4.切圖常用工具
注意:在工具選單欄中右擊會出現同組備選工具:
5.放大縮小畫布:
1).點選縮放工具
2).ctrl + 加號/減號
3).alt + 滑鼠滾輪
6.輔助檢視
標尺快捷鍵:ctrl + r
7.獲取文字大小和行高
1).文字是單獨圖層,使用文字工具點選,即可在選項欄中看見相關引數。
2).文字是不是單獨的圖層,使用文字工具,在這些文字中隨便挑兩個字(如果測行高則需要一行兩個)寫上,設定字型,字號,用他遮蓋原來的文字,一樣即可。
8.矩形選框
9.巧用新增到選區,在左邊畫一個選區,按住shift(將新畫的矩形新增到選區)在右邊畫一個選區即可知道寬度。
10.取色
11.用取色工具判斷背景是否為純色,上下左右等多處點選看顏色值是否一樣
配合魔術棒判斷是否是線性漸變,將容差調0。
切圖:
1.哪些需要切:
2.隱藏文字只留背景:
3.切圖,在圖層工具欄對應的圖層上面右擊
同一個圖層:
不同圖層:使用合併組(ctrl +E)
帶背景切圖:
5..裁剪畫布
6.平鋪圖片切法
7.切片工具,或者矩形選框無法複製時
儲存圖片:
要儲存為web所用格式:
1.儲存型別一
2.儲存型別二
3.儲存型別三
4.儲存型別四
修改與維護:
更改畫布:
移動圖示:
可能遇見的問題
1.不能完成拷貝命令,所選區域是空的
這個問題很簡單 新手容易犯的錯誤 你注意你的圖層 雖然你表面選的是某一區域 但由於不是當前活動圖層 而你選的區域是當前圖層的空白處,將你要剪下的那部分圖層設為當前就可以了
2.png8修改顏色失真:
二、使用背景圖
三、圖片合併方案
1. 好處:減少網路請求,提升網頁載入速度
圖例:
1.原則
1).大小與質量之間做取捨,達到平衡
圖片壓縮工具:
2).保留空隙,便於與維護
3).雪碧圖(sprite)的排列方式
四、瀏覽器相容
法一:採用優雅降級,給高階瀏覽器使用者提供更好的體驗
法二:高階瀏覽器使用css3,IE6使用貼圖達到相同效果。