<style> h1{ color:#1c564b; } h2{ color:#467e98; } h3{ color:#489E89; } h5{ color:#f3784d; } .red{ color: red} .blue{ color: blue} .gg{ color: #D8A76A;font-size: 16px;} </style> <!-- <span class="red">這裡就會變紅色文字</span> --> # CC版教學說明 ###### tags: `軟體教學` ## Adobe XD ### 插件功能 #### 1.叫出左下角插件功能,按【+】後會跳出Adobe Creative Cloud的視窗 ![](https://i.imgur.com/xzgrMVp.png) #### 2.左側欄位有搜尋以及分類勾選,可篩選軟體之插件,選擇要得插件選項按【取得】,即可自動安裝 ![](https://i.imgur.com/RYWQkyL.png) ### 插件功能細項介紹 :::success #### 【ICONS 4 DESIGN】-->支援多種ICON符號,透過搜尋可快速找到多種符號樣式 ![](https://i.imgur.com/4pR3II3.png) ::: :::info #### 【Quick Mockup】-->內建多種風格版型與元件可供選擇使用,規劃區塊更快速 ![](https://i.imgur.com/r8A2moH.png) ::: :::warning #### 【Wireframer】-->內建Wireframer版型與元件可供選擇使用,規劃區塊更快速 ![](https://i.imgur.com/b9FF3lw.png) ::: :::danger #### 【UI Face】、【User Profile】-->可快速置入人像圖,模擬會員及評論內容等區塊,還可透過篩選器,篩選符合心中的人像圖 ##### 兩個插件的功能雷同,擇一使用即可 ![](https://i.imgur.com/0bQ6cDm.png) ::: :::success #### 【Placeholder Image】-->判斷方塊的大小尺寸,自動生成尺寸圖 ![](https://i.imgur.com/ITFIQor.png) ::: :::info #### 【Lorem Ipsum】-->判斷方塊的大小尺寸,自動生成假文章段落 ![](https://i.imgur.com/2UT0m25.png) ::: ### 各版本尺寸畫布 #### 可選擇各種版本(手機、平板、手錶等尺寸),可設置橫式直式 ![](https://i.imgur.com/g6XPEAr.png) ![](https://i.imgur.com/4SQTZbq.png) ## Adobe PS ### 版面 #### 1.開新檔案時可選擇是否要開啟工作畫板功能 ![](https://i.imgur.com/XOvD8oo.png) #### 2.可編輯畫板名稱以及利用快速鍵新增畫板 ![](https://i.imgur.com/UwcN2hW.png) ### 轉存檔案 #### 1.選擇【工作區域轉存檔案】 ![](https://i.imgur.com/leIzujq.png) :::success 如果只是單一工作區域作業,可像之前一樣選擇【儲存為網頁用(舊版)即可】 ::: #### 2.轉存內容設定 ![](https://i.imgur.com/pinZwsv.png) ### 天空取代 #### 1.置入圖片後選擇【天空取代】 ![](https://i.imgur.com/HcrInLA.png) #### 2.視情況調整前景數據以及天空數據,選擇輸出新圖層 ![](https://i.imgur.com/opq3D7y.png) #### 3.產生新的圖層可供後續再次編輯 ![](https://i.imgur.com/ySxMjB5.png) ### 人物修圖 液化功能UPUP ![](https://i.imgur.com/3Naz11l.png)