剛剛學習了一下前端的入門課程，將設計師設計的logo等圖片從PSD文件中切出來，並保存為PNG格式。PNG格式的主要優點就是背景色可以為空白，不同於普通格式的圖片的白色。使用的工具是Photoshop

　　首先先了解下ps中的基礎概念，圖層，選區，圖層的合並，圖層的移動。

0.ps的基本操作，Alt+左鍵可以放大圖片，空格+左鍵可以移動圖片

1，如何選中一個圖層，我們首先將鼠標移動到選擇工具，然後移動到我們要選中的圖層上按住Ctrl+左鍵，會自動在圖層中找到該對應的圖層，找到該圖層後我們再在該圖層的圖標上按住Ctrl+左鍵，這樣就選中了我們想要選中的圖層。

2.選中多個圖層，我們還是按照上述步驟找到每個圖層對應在圖層中的位置，然後使用Ctrl選中我們想要的圖層按住Ctrl+G來將這些圖層們組合為一個組，有了組之後我們可以將組變換為一個圖層，這樣我們就可以像選中一個圖層一樣進行操作了。

3.吸管工具的使用，這個功能很簡單我們可以通過該工具來確定設計師設計的顏色的RGB值，便於我們後期使用。

4，字符界面的打開，我們還需要在窗口上打開字符，信息面板，這樣我們就可以知道設計師設計稿中的字體類型和大小等信息。

5.現在就到了最重要的一步了，切圖了我一共了解了三種切圖方式，各自有優缺點。自己覺得哪種合適就選擇哪種。

　　第一種，通過第2點教的選中多個圖層的方法選中我們需要切的logo，然後通過選區工具來確定我們logo的具體大小，然後我們就可以新建一個圖片大小和logo一樣。我們可以直接通過手動拖拽來將該圖層組移動到新的圖片中，移動到新的圖片中後我們要註意將移過來的圖層居中放置。具體的居中方式如下：首先我們選中新圖片的背景圖層（這地方有可能他會上鎖，你雙擊該圖層後會出現一個面板，然後點擊確定就可以解鎖了）選中後我們在點擊我們移動過來的圖層在上方面板中會有一個上對齊，居中對齊等，選擇自己想要的對齊方式。

　　第二種是通過切片工具來實現的，首先選中切片工具（如果沒有找到請選擇裁剪工具長按後會出現）然後按照需要切取的地方手動拉取藥裁剪的地方，完成後選擇文件->存儲為Web所用格式

　　第三種就是通過新建參考線（首先Ctrl+R調出標尺，然後可以直接在標尺上拖出參考線）來將我們需要切取得部分分割出來，然後點擊按照參考線切片。註意這裏可以選擇刪除多余的切片，可以只留我們需要的部分進行切取。

前端學習第一步----切圖仔的誕生