python前端之Photoshop

目的：

學習使用Photoshop的基本使用，以及Photoshop中關於切圖這一塊的知識，目的是能熟練使用Photoshop查看UI設計師的設計效果圖，同時利用Photoshop切圖來製做專業html頁面。

經常使用圖片格式

圖片是網頁製做中很重要的素材，圖片有不一樣的格式，每種格式都有本身的特性，瞭解這些特效，能夠方便咱們在製做網頁時選取適合的圖片格式，圖片格式及特性以下：

一、psd 
psd是photoshop的專用格式，UI設計師使用photoshop設計效果圖，最後會將psd格式的效果圖交付給前端工程師，這種格式是不壓縮的，並且保留了圖層、透明和半透明等圖片信息，因此這種圖片格式的容量相對來講是很大的，前端工程師使用這種格式的效果圖來切圖製做網頁，可是網頁中不會使用這個格式的圖片，它的做用一是保存圖片的原始數據，二是方便圖片的修改。

二、jpg 
jpg是一種有損壓縮格式，壓縮效率高，容量相對來講最小，網絡傳輸速度快，它不能存爲透明背景，在網頁中應用最廣，通常在不須要透明背景的時候就使用這種圖片。

三、gif 
gif是一種無損壓縮格式的圖片，最多隻有256種顏色，顏色豐富的圖片轉化爲這種格式會顏色失真。它的背景能夠是透明的，但不能是半透明的，透明背景中的圖像，若是邊緣輪廓是曲線的，會產生鋸齒，它還能夠保存爲動畫格式。

四、png 
png的目的是爲了代替gif圖片，無損壓縮，背景能夠是透明或者半透明的，透明圖像邊緣光滑，沒有鋸齒，網頁中須要透明或者半透明背景的圖片，首選是png圖片。png也是firework的專用格式，也能夠包含圖層信息。firework是另一款能夠和photoshop相比的圖像處理軟件。也有少許的UI設計師使用這種軟件來設計網頁效果圖，他們設計的效果圖就是帶圖層的png格式的，碰到這種設計師，若是咱們習慣了photoshop切圖，能夠將帶圖層的png效果圖轉化成psd圖片再處理。

五、webp 
它是由谷歌於2010年推出的新一代圖片格式，在壓縮方面比當前jpg格式更優越，在質量相同的狀況下，WebP格式圖像的體積要比jpg格式圖像小40%，不過這種圖片尚未獲得普遍的瀏覽器支持，僅在Chrome和Opera上支持，在其餘瀏覽器上須要安裝插件才能夠顯示，目前尚未大規模使用。

位圖和矢量圖 
位圖也叫點陣圖，是由一個個的方形的像素點排列在一塊兒拼接而成的，位圖在放大時，圖像會失真。上面講的5種圖像都屬於位圖。
矢量圖和位圖組成圖像的原理不一樣，它的圖像輪廓是由函數曲線生成的，當放大圖像時，實際的原理就是將曲線乘以一個倍數，圖像能夠輕易地放大，並且不會出現像素塊，圖像邊緣也不會出現鋸齒。

svg 
svg是一種矢量二維圖形格式，它是基於xml標記語言描述的，能夠經過任何文本編輯器建立。它的優勢是文件容量小，放大不失真，並且背景也能夠是透明的。目前大量使用這種格式來製做網頁圖標或者網頁地圖，因爲它是矢量的，因此在不一樣終端屏幕上(pc、手機)都有很好的顯示效果。

flash 
flash是一種矢量動畫文件格式，曾經在網絡上風靡一時，現在已逐漸退出歷史舞臺，緣由是它的技術更新跟不上發展，這種格式既能夠是靜態的圖形，還能夠是多媒體動畫，還能夠加入用戶交互和數據，這是它曾經很流行的緣由，這種格式名爲swf，flash是對它的統稱。這種格式在網頁中已經不多使用了，它的不少優秀特性，能夠用HTML5取代。swf文件中衍生出一種視頻格式flv，它是一種流媒體視頻格式，因爲它有文件容量小，能夠邊下載，邊觀看等優勢，目前普遍應用在視頻網站中。

總結 
在網頁製做中，如何選擇合適的圖片格式呢？
一、網頁製做中，若是要使用不透明背景的圖片，就使用jpg圖片；若是要使用透明或者半透明背景的圖片，就使用png圖片；
二、製做網頁圖標時候，若是圖標含多種顏色，可使用gif或png圖片；若是圖標是單色，並且要求有很好的顯示效果，可使用svg；若是是動畫圖標，可使用gif。

photoshop經常使用圖片處理技巧

photoshop是一款優秀的圖像處理軟件，做爲前端開發工程師，掌握它的一些經常使用功能是必須的。photoshop的經常使用功能有：選擇、裁剪圖像、修圖、取色、插入文字等等。除了這些經常使用功能，前端還須要掌握製做新圖像、切圖等技巧。本次講解的photoshop版本爲cs6。

圖片格式轉換與壓縮 
一、文件/存儲爲（不推薦）選擇圖片類型以及壓縮比；
二、文件/存儲爲web所用格式（推薦） 選擇圖片類型以及壓縮比；

圖像放縮，平移 
一、 放縮工具 圖像放大縮小，在圖像上點擊放大，按住alt鍵點擊縮小，快捷鍵Ctrl+「+」放大 Ctrl+「-」縮小，雙擊此工具可讓圖像按照原始大小顯示。

二、 平移工具 對圖像進行移動，在使用其餘工具時，按住空格鍵盤的空格鍵，能夠切換到此工具，移動完後鬆開空格鍵回到原來的工具。雙擊此工具可讓圖像放縮到顯示區域徹底顯示。

新建圖像 
執行菜單命令 文件/新建 能夠新建一張圖片，設置大小，顏色模式選RGB，網頁圖片通常選擇72像素/英寸，若是圖像要打印，可設爲300/英寸。背景按狀況選透明或白色。

移動選擇與圖層面板 
一、按住Ctrl，在圖像上點擊能夠選中圖層
二、 選擇此工具，勾選工具屬性欄上的「自動選擇圖層」，能夠在圖像上點擊選中圖層
三、移動元素同時按住Alt鍵可複製一個圖層
四、圖層面板的操做，包括圖層的顯示隱藏、圖層順序、新建圖層、圖層刪除

針對圖像中選中圖層的操做 
一、移動
二、自由變換 執行菜單命令 編輯/自由變換
三、拖拽到另外一張圖像上完成圖層拷貝

歷史記錄面板 
記錄20部操做，能夠點擊已經記錄的操做步驟回到以前

選擇工具 
一、 矩形選擇工具
二、 橢圓選擇工具 按住alt+shift鍵能夠從中心拉出正圓
三、 任意套索工具 用手任意畫出選區，不精確，不經常使用
四、 多邊形套索 能夠選擇多邊形物體，對於結構複雜的物體，能夠點多個小段來選擇。
五、 磁性套索 能夠自動在物體邊緣生成選擇線，可是因爲太自動了，因此不夠精確，也不經常使用。
六、 魔術棒選擇工具 按照點擊的點的顏色範圍來選擇，能夠設置範圍的容差，容差越大，選擇區域越大，對於有單色背景的圖像中的元素，能夠用它點選背景，而後反選，從而選中元素。
七、 快速選擇工具 直接在要選的元素上畫，按照畫的顏色範圍進行選擇。
八、對圖層建立選區：按住Ctrl，用鼠標點擊對應的圖層，在圖層外框生成選區。

選區的編輯技巧 
一、新選區模式下移動選區
二、選區的加、減、乘，工具屬性欄上設置
三、調整邊緣 工具屬性欄或者執行菜單命令 選擇/調整邊緣
四、變換選區 執行菜單命令 選擇/變換選區，可對選區進行縮放、移動等
五、反選 執行菜單命令 選擇/反向
六、取消選擇 執行菜單命令 選擇/取消選擇，快捷鍵ctrl+d

選區特別注意 
選區（螞蟻線）只對當前圖層器起做用，選區操做失敗通常是當前圖層弄錯了

裁剪圖像 
一、 裁切工具
二、對選區執行菜單命令 圖像/裁剪
三、設置矩形框大小，建立固定寬高的矩形框，可進行固定尺寸裁剪

針對肯定選區的操做技巧 
一、複製 執行菜單命令 編輯/拷貝 快捷鍵ctrl+c
二、粘貼 執行菜單命令 編輯/粘貼 快捷鍵ctrl+v
二、粘貼入 執行菜單命令 編輯/選擇性粘貼/貼入
三、填充 執行菜單命令 編輯/填充
四、描邊 執行菜單命令 編輯/描邊
五、刪除 執行菜單命令 編輯/清除 快捷鍵 delete
六、自由變換 執行菜單命令 編輯/自由變換 快捷鍵 ctrl+t

擦除與修復工具 
一、 擦除工具
二、 污點修復工具

參考線技巧 
一、視圖/標尺，顯示標尺，在標尺上按住鼠標拖動能夠拉出參考線
二、視圖/對齊到/參考線 讓參考線移動時自動對齊到選框或者圖像的邊緣
三、視圖/新建參考線 能夠精確建立參考線

文本輸入 
一、執行菜單命令 編輯/首選項/單位和標尺 設置文字的單位
二、 文本輸入
三、文本編輯 屬性工具欄上點擊文本編輯按鈕

取色 
一、取色工具，點擊前景色按鈕，彈出取色對話框，當前工具切換成取色工具。
二、點擊前景色按鈕，當前工具自動切換到取色工具

圖像大小與畫布大小 
一、圖像/圖像大小 查看和設置圖像的總體大小
二、圖像/畫布大小 查看和設置圖像的畫板大小

尺寸測量 
一、 切片工具 雙擊切片彈出切片對話框
二、 切片選擇工具
二、 矩形框工具，打開信息面板

 

photoshop批量切圖技巧

切圖，就是從效果圖中把網頁製做須要的小圖片裁剪出來。

一、使用psd格式而且帶有圖層的圖像切圖

二、在圖像上用切片工具切出須要的小圖

三、雙擊切片，給切片命名

四、執行菜單命令 存儲爲web所用格式

五、點選切片，設置切片的圖片格式

六、存儲切片，選擇「全部用戶切片」，點存儲(多個切片會存到所選文件夾中的images文件夾中)

Photoshop製做雪碧圖技巧

雪碧圖，就是將網頁製做中使用的多個小圖片合併成一個圖片，使用css技術將這張合成的圖片應用在網頁不一樣的地方，雪碧圖能夠減小網頁加載時的http請求數，優化網頁性能。

步驟：

一、使用Photoshop新建一張背景透明的圖片

二、將小圖片複製到此圖片中，排列好每一個圖像的位置，圖片幅面不夠能夠用畫布大小調整大小 

三、按照全部小圖片的範圍裁剪圖片，存爲透明背景的png圖片