PS for 前端

前提

以前真的對PS一點都不懂，由於上一週忽然被仍了一份psd文檔，讓我根據那份psd文件寫一個web頁面和一個移動端頁面。當時由於時間緊急，只能求助公司的設計同事。可是我相信不少公司前端是根據psd來開發的。因此，簡單的切圖仍是要會的。

界面設置

一、菜單 -》視圖 -》勾選【標尺】& 【顯示 -》智能參考線】
二、菜單 -》窗口 -》選擇（圖層、字符、信息、歷史記錄），一些默認打開的面板，能夠經過鼠標右鍵點擊關閉。
2.一、設置信息面板：
切換到信息面板 -》點擊 -》選擇面板選項

第一顏色模式、第二顏色模式選擇【RGB顏色】、標尺單位選擇【像素】、勾選文檔尺寸、保存。

三、菜單 -》編輯 -》首選項 -》單位與標尺 -》把標尺和文字的單位均改爲【像素】

四、菜單 -》窗口 -》工做區 -》新建工做區 -》保存，這樣一來就不用每次都設置一遍。在PS右上角，能夠去切換工做區。

定位圖層

一、選擇移動工具 -》勾選自動選擇 -》選擇圖層 （以下圖）-》點擊psd文件 （以下圖）
      

除了圖層選項，還有組選項。
選了圖層，會定位到點擊點所在的圖層；選了組，會定位到點擊點所在圖層所在的組。

二、選擇移動工具 -》不勾選自動選擇 -》選擇圖層 （以下圖）-》按住ctrl去點擊psd文件
注意：若是沒有勾選自動選擇的話，單用移動工具點擊psd文件，不能定位到點擊點對應的圖層或組。

三、圖層和組的關係：
組包含圖層，一個psd文件可能包含不少圖層，爲了便於管理，會將一些相關性強的圖層包含進一個組。

快捷鍵

隱藏/顯示參考線：ctrl + ;
增長垂直/水平參考線：鼠標移動到垂直或水平方向上的標尺，按住左鍵分別拉取垂直和水平方向上的參考線
放大/縮小psd：ctrl + +，ctrl + -

切圖

前端開發人員須要的切圖技巧一
前端開發人員須要的切圖技巧二
前端開發人員須要的切圖技巧三
切圖視頻