PhotoShop
===

### 快捷
> - V: 選取工具
> - CTRL+J 或 按住alt拖拉: 複製圖層
> - 如果圖層重疊不好按: (按住Ctrl單擊) 或 右擊
> - 按住Shift拖曳: 水平, 垂直, 45度移動
> - Ctrl+T: 改變圖像大小
> - 按住shift: 自由變形
> - 沒案Shift: 等比縮放
> - 鼠標移至框外四角可旋轉圖片
> - Enter確認操作
> - Ctrl+z: 撤銷一步
> - Ctrl+Alt+z: 撤銷多步
> - Ctrl+e: 圖層合併

> - 圖層面板上操作
> - 按住Shift點擊兩個圖層: 選取包含兩圖層的中間所有圖層
> - 按住Crtl點擊兩圖層: 選取兩圖層
> - 分組: 選取目標圖層後, Ctrl+G
> - 左上角Auto-select可以選擇選取Group或Layer
> - 取消分組: Ctrl+Shift+G
> - 雙擊名稱: 重新命名
> - 圖層上下移動
> - 圖層面板拖曳
> - Ctrl+] 向上
> - Ctrl+\[ 向下
> - Ctrl+Shift+] 置頂
> - Ctrl+Shift+\[ 置底
> - 圖層面板上可以調整透明度
> <img src="https://i.imgur.com/TgmAmap.png" style="width: 200px"/>

### 矩形選區工具 M
<img src="https://i.imgur.com/SZ0nmpx.png" style="width: 200px"/>

> - 左鍵按著或右鍵矩形選區工具可以調出其他選取工具
> - 有小三角形的都表示有其他工具

> - Command按著會轉換為選取工具(V),
> 故Command+ALT拖拉= 複製圖層
> - Shift+ALT按著可以等比選取
> - 選區完後可以Ctrl+J複製圖層
> - Ctrl+D: 取消選區
> - Ctrl+Shift+I: 反選區

### 顏色填充
<img src="https://i.imgur.com/zyhtSTo.png" style="width: 100px"/>

> - 前景色(左上): ALT+Delete
> - 背景色(右下): Command+Delete

### 套索工具 L
<img src="https://i.imgur.com/FcYV4Uj.png" style="width: 200px"/>

> - Lesso Tool 就是自己畫選區(手殘就少用)
> - Polygonal Lasso Tool 就是點一點就選了(直線的常用)
> - Magnetic Lasso Tool, 會吸附, 顏色對比越明顯的越容易吸附
> - 比較複雜的地方可以邊走邊單擊

### 魔棒工具 W
<img src="https://i.imgur.com/7RZTTbB.png" style="width: 200px; display: block;"/>
<img src="https://i.imgur.com/L2x2vkN.png"/>

> - 左鍵位置為選擇色, 選擇相似顏色生成選區
> - 適合背景顏色簡單時使用, 選取背景再反選(CTRL+SHIFT+I)就好了
> - Tolerance:
> - 選擇顏色的範圍,
> - 0-255,
> - 值越小, 顏色越精確
> - Contiguous:
> - 勾選: 相連顏色生成
> - 不勾選: 畫面中所有相似顏色生成

### 鋼筆工具 P
<img src="https://i.imgur.com/aLdz1Ea.png" style="width: 200px;"/>

> - 描點組成路徑線
> - 直線型路徑: 左鍵
> - 曲線行路徑: 點擊下個點時按著拖動
> - 曲線後要直線: ALT點擊上一個點來恢復, 否則接下來都是曲線模式
> - Ctrl+Z: 上一洞
> - ESC: 取消
> - 繪製完成後: Ctrl+Enter來生成選區

### 選區布爾運算

> - 新選區
> - 加選區(按住Shift)
> - 減選區(按住ALT)
> - 重合選區(按住Shift+ALT)

### 切圖
#### 利用切片工具手動畫出
<img src="https://i.imgur.com/Ebke93t.png" style="width: 200px;"/>

#### Layer Based Slice
> 在圖層剛好等於欲切的大小時, 直接用圖層建立就好了

<img src="https://i.imgur.com/SHDlMeL.png" style="width: 150px;"/> > <img src="https://i.imgur.com/aboEwOB.png" style="width: 80px;"/> > <img src="https://i.imgur.com/omrKcAt.png" style="width: 150px;"/> > <img src="https://i.imgur.com/Imz9QPy.png" style="width: 100px;"/>

#### 使用Ruler
> - 打開尺來拉線
<img src="https://i.imgur.com/lp1LL6Z.png" style="width: 50px;"/> > <img src="https://i.imgur.com/O7X9QLB.png" style="width: 150px;"/>
> - 清除參考線
<img src="https://i.imgur.com/lp1LL6Z.png" style="width: 50px;"/> > <img src="https://i.imgur.com/KdcluVV.png" style="width: 150px;"/>

> - SliceTool > 拉線 > SlicesFromGuides
> <img src="https://i.imgur.com/Ebke93t.png" style="width: 100px;"/> > <img src="https://i.imgur.com/f73HMU9.png" style="width: 100px;"/> > <img src="https://i.imgur.com/Fr2zsMy.png" style="width: 240px;"/>
> - 成果: <img src="https://i.imgur.com/d7VYc5m.png" style="width: 100px;"/>

> - 小技巧: 先選取，再拉尺，尺會自動靠上選取邊，非常好用
> 

#### 清除切片
> - 全部清除
<img src="https://i.imgur.com/FtZpoF5.png" style="width: 50px;"/> > <img src="https://i.imgur.com/Sv9Zx47.png" style="width: 150px;"/>
> - 選擇清除
> - 切片選擇工具
> <img src="https://i.imgur.com/RtXLlGB.png" style="width: 150px;"/> > <img src="https://i.imgur.com/u76EoEx.png" style="width: 100px;"/> > <img src="https://i.imgur.com/n1grLQG.png" style="width: 100px;"/>
> - Command按住後 點選切片也可以選取
> - 選取後Delete就刪掉了～

#### 導出切片
> - File > Export > Save for Web
<img src="https://i.imgur.com/bQVJgTb.png" style="width: 50px;"/> > <img src="https://i.imgur.com/7GFtazp.png" style="width: 200px;"/>

> - 點選欲導出的切片, Shift按住可以多選
<img src="https://i.imgur.com/EVeHIMg.png" style="width: 143px;"/> > <img src="https://i.imgur.com/dNNkww7.png" style="width: 143px;"/> > <img src="https://i.imgur.com/wyMHnkB.png" style="width: 143px;"/>

> - Slices > Selected Slices
<img src="https://i.imgur.com/js3HwcI.png" style="width: 150px;"/>

### 測量寬高
- Ruler Tool
<img src="https://i.imgur.com/NgdRp8a.png" style="width: 150px;"/>

- MarqueeTool在拉的時候也會顯示寬高
<img src="https://i.imgur.com/SwghVzD.png" style="width: 150px;"/> > <img src="https://i.imgur.com/4ZXAIm2.png" style="width: 150px;"/>

## 製作Sprite
### 方法一
> 1. 首先先創建一個檔案, 背景記得為透明(transparent)
> <img src="https://i.imgur.com/qxsZC4J.png" style="width: 150px;"/>
> 2. 接著選取需要的圖層
> <img src="https://i.imgur.com/Qbokhbg.png" style="width: 150px;"/>
> 3. 右鍵複製圖層
> <img src="https://i.imgur.com/DVHRdJi.png" style="width: 150px;"/>
> ![]()
> 4. 選擇剛剛的檔名(Sprite) > OK
> <img src="https://i.imgur.com/JgnSTJP.png" style="width: 200px;"/>
> 此時剛複製的圖層已經複製到剛建立的檔案裡了
> <img src="https://i.imgur.com/xbDEQuZ.png" style="width: 150px;"/>
> 5. 最後就把圖層合併(CTRL+E) 就可以拖拉了
> <img src="https://i.imgur.com/qIch8Hn.png" style="width: 150px;"/>

### 方法二: 拖拉
> - 選取圖層，拉過去，CTRL+E，搞定

### 存儲
> - 存兩個檔，PSD與圖片檔
> - PSD : 方便未來繼續編輯
> <img src="https://i.imgur.com/3wYrOGp.png" style="width: 150px;"/>
> - 圖片檔必須為png或gif，不能是jpg，因為要透明圖片
> <img src="https://i.imgur.com/1HidCjB.png" style="width: 150px;"/>
> <img src="https://i.imgur.com/l2OTfw5.png" style="width: 150px;"/>

### 注意
> - Sprite 都是放裝飾用的背景小圖，插入圖片別使用，
> - 因為插圖通常會做一些效果
> - 插圖常用於商品展示
> - 寬度取決於圖標的寬度，大概比最大的再大一些即可
> - 下面可以留空，方便未來添加