01 設計前的準備工作

1-1 設定介面(輕觸平移、拖曳縮放、像素格點…)

1-2 指令碼的用法

1-3 環境同步、回復

1-4 適合網頁設計的設定(單位、參考線與格點、靠齊、顏色設定)



02 使用Photoshop CC之後的版本製作最佳構圖範例

2-1 關於範例

2-2 構圖的必要性與製作方針

2-3 開新檔案(網格系統、CSS框架、設計格線系統…)

2-4 設計、製作版面

2-5 使用圖層構圖管理狀態

2-6 管理模組的事前準備工作

2-7 平板電腦、智慧型手機用的版面

2-8 使用Bootstrap製作模型

2-9 摘取資產

2-10 編碼



03 製作手機通用的設計構圖

3-1 順利展開設計工作的準則

3-2 「圖層」面板整理術

3-3 共用元素(圖層、顏色、樣式、文字、狀態…)

3-4 可縮放的表現方法

3-5 利用Generator匯出影像(自動更新)



04 提高工作效率的技巧

4-1 儲存文字特效

4-2 運用含遮色片的圖層群組

4-3 利用變數製作網頁Banner

4-4 製作表格並置入連結

4-5 利用指令碼完成「擴充切片」

4-6 輕鬆製作出色彩變化

4-7 建立確認差異用圖層避免出現錯誤

4-8 利用「Renamy」快速更改圖層名稱

4-9 重疊圖層樣式製作POP文字

4-10 將圖層大小自動記錄在圖層中



05 容易忽略的基本功能

5-1 校正角度與去背

5-2 變形校正

5-3 調整影像素材

5-4 動作(快捷批次處理、批次處理、條件式動作…)

5-5 其他(從PSD匯出文字、以拖放方式置入PSD或影像檔案、更改筆刷大小…)



附錄 Font Awesome Cheatsheet（清單）