# 圖像編輯器

若有重複使用訊息的需求，可以在 **圖像編輯器** 建立訊息範本，這些範本除了在 **圖像編輯器** 中可以統一管理維護，也可以在 **流程編輯器**、**1:1私訊**、**群發訊息** 重複使用。

- ##### **新增範本** 
    
    [![0-介面.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/Tw5Q1B9gUnHgsLdA-0-%E4%BB%8B%E9%9D%A2.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/Tw5Q1B9gUnHgsLdA-0-%E4%BB%8B%E9%9D%A2.png)  
    初次進入圖像編輯器介面的畫面，尚無任何範本。  
      
      
      
    [![0-新增圖像範本-選擇類型.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/sQ9RnfUJhjlsIjhq-0-%E6%96%B0%E5%A2%9E%E5%9C%96%E5%83%8F%E7%AF%84%E6%9C%AC-%E9%81%B8%E6%93%87%E9%A1%9E%E5%9E%8B.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/sQ9RnfUJhjlsIjhq-0-%E6%96%B0%E5%A2%9E%E5%9C%96%E5%83%8F%E7%AF%84%E6%9C%AC-%E9%81%B8%E6%93%87%E9%A1%9E%E5%9E%8B.png)  
    選擇需要新增的範本類型。  
      
      
      
    [![1-新增卡片-輸入卡片名稱.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/yy1r7L9bNle7k2AP-1-%E6%96%B0%E5%A2%9E%E5%8D%A1%E7%89%87-%E8%BC%B8%E5%85%A5%E5%8D%A1%E7%89%87%E5%90%8D%E7%A8%B1.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/yy1r7L9bNle7k2AP-1-%E6%96%B0%E5%A2%9E%E5%8D%A1%E7%89%87-%E8%BC%B8%E5%85%A5%E5%8D%A1%E7%89%87%E5%90%8D%E7%A8%B1.png)  
    新增範本後需對範本命名，建議名稱要容易辨識好理解，日後若範本數量增加會比較容易維護管理。  
      
      
      
    [![2-新增卡片-建立完成.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/h3YfjNGHAQP7uYg3-2-%E6%96%B0%E5%A2%9E%E5%8D%A1%E7%89%87-%E5%BB%BA%E7%AB%8B%E5%AE%8C%E6%88%90.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/h3YfjNGHAQP7uYg3-2-%E6%96%B0%E5%A2%9E%E5%8D%A1%E7%89%87-%E5%BB%BA%E7%AB%8B%E5%AE%8C%E6%88%90.png)  
    成功建立範本，再來點選範本進行編輯。

關於編輯介面

- ##### **功能列**
    
    [![5_卡片範本介面-1_功能列.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/diCwR4ZkDtTD6GVJ-5_%E5%8D%A1%E7%89%87%E7%AF%84%E6%9C%AC%E4%BB%8B%E9%9D%A2-1_%E5%8A%9F%E8%83%BD%E5%88%97.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/diCwR4ZkDtTD6GVJ-5_%E5%8D%A1%E7%89%87%E7%AF%84%E6%9C%AC%E4%BB%8B%E9%9D%A2-1_%E5%8A%9F%E8%83%BD%E5%88%97.png)上方功能列由左至右依序是：  
    
    1. 範本名稱：  
        點選後可以重新命名。
    2. 圖層尺寸：  
        顯示範本的圖層尺寸。以卡片範本為例，圖層尺寸為固定值不可更改。
    3. 開啟檔案：  
        點選後回到圖像編輯器的範本清單。
    4. 建立副本：  
        對範本建立副本，要建立副本前必須先進行儲存。
    5. 編輯：  
        點選後可以對範本內容進行編輯，不同種類的範本組成結構略有不同。
    6. 資源：  
        點選後可以建立 **輸入參數**，透過 **輸入參數** 來接收外部導入的資料並使用，藉由這種方式可以提高範本的應用範圍。操作方式與相關應用會在後續介紹中說明。
    7. 儲存：  
        儲存目前範本的內容。
- ##### **範本結構**
    
    **[![5_卡片範本介面-3_範本架構.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/RycigypDU87DiwHS-5_%E5%8D%A1%E7%89%87%E7%AF%84%E6%9C%AC%E4%BB%8B%E9%9D%A2-3_%E7%AF%84%E6%9C%AC%E6%9E%B6%E6%A7%8B.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/RycigypDU87DiwHS-5_%E5%8D%A1%E7%89%87%E7%AF%84%E6%9C%AC%E4%BB%8B%E9%9D%A2-3_%E7%AF%84%E6%9C%AC%E6%9E%B6%E6%A7%8B.png)**選擇 **編輯** 頁籤後可以看到範本結構： 
    1. 圖層：  
        每種範本訊息都包含圖層。  
        圖層的範圍等於灰白方格的範圍，在範本結構中擁有高彈性，可以依需求自行設計需要的版型樣式！  
        資源建立的 **輸入參數** 可以在這裡代入使用。
    2. 卡片（卡片範本專屬）：  
        可以設定儲存格式、靜態／動態、標題、內文以及替代文字。  
        靜態／動態：使用資源導入的外部資料若會隨時間動態改變，請勾選啟用動態；反之，請維持靜態設定。  
        替代文字：接收到此範本的訊息時，要顯示的提示文字。  
        資源建立的 **輸入參數** 可以在這裡代入使用。
    3. 按鈕（卡片範本專屬）：  
        按鈕類型可以根據需求選擇說話或網址。  
        說話是指替使用者說一句話，網址則是開啟瀏覽器瀏覽網址內容。  
        資源建立的 **輸入參數** 可以在這裡代入使用。
    4. 海報（海報範本專屬）：  
        可以設定儲存格式、靜態／動態、替代文字。  
        資源建立的 **輸入參數** 可以在這裡代入使用。
    5. 圖片（圖片範本專屬）：  
        可以設定儲存格式、靜態／動態、替代文字。  
        資源建立的 **輸入參數** 可以在這裡代入使用。
- ##### **工具列**
    
    [![5_卡片範本介面-2_工具列.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/Zg9Uwmbei9ZlQhDy-5_%E5%8D%A1%E7%89%87%E7%AF%84%E6%9C%AC%E4%BB%8B%E9%9D%A2-2_%E5%B7%A5%E5%85%B7%E5%88%97.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/Zg9Uwmbei9ZlQhDy-5_%E5%8D%A1%E7%89%87%E7%AF%84%E6%9C%AC%E4%BB%8B%E9%9D%A2-2_%E5%B7%A5%E5%85%B7%E5%88%97.png)  
    點選左側小圖示可以切換對應的功能，由上往下依序是：  
    
    1. 移動：  
        透過此工具可以選擇與拖曳圖層。
    2. 文字：  
        在範本圖層中以拖拉方式建立。  
        文字圖層中可以直接輸入文字，或是使用資源建立的 **輸入參數**，透過 **輸入參數** 取得外部導入的文字資料。
    3. 圖片：  
        在範本圖層中以拖拉方式建立。  
        圖片圖層可以上傳本地圖片檔、使用公開的圖片網址，或是透過資源建立的 **輸入參數** 取得外部導入的圖片網址。
    4. 矩形：  
        在範本圖層中以拖拉方式建立。  
        矩形圖層可以設定顏色、透明度、圓角、邊框、陰影。
    5. 圓形：  
        在範本圖層中以拖拉方式建立。  
        圓形圖層可以設定顏色、透明度、邊框、陰影。
    6. 圖表：  
        在範本圖層中以拖拉方式建立。  
        圖表圖層可以設定多種類型的圖表，折線圖、圓餅圖、柱狀圖......等等都可以繪製，  
        因為可以設定的欄位較多，因此僅列出幾個最重要的欄位項目先進行介紹，  
        其餘可參考 <span style="text-decoration: underline;">[圖像編輯器 - 圖表工具使用案例](http://book.gosu.bar/books/%E5%9C%96%E5%83%8F%E7%B7%A8%E8%BC%AF%E5%99%A8---%E5%9C%96%E8%A1%A8%E5%B7%A5%E5%85%B7%E4%BD%BF%E7%94%A8%E6%A1%88%E4%BE%8B)</span> 會有較完整的說明，有提供作出特定種類圖表的作法供參考。  
          
          
        [![9_圖表介紹.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/YK5CZhoYAqtE01bU-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/YK5CZhoYAqtE01bU-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9.png)  
        以圖片範本為例，點選 **圖表** 拖拉建立一個圖表圖層，並在 **基本屬性** 中設定將圖層稱滿整個範本範圍。  
          
          
          
        [![9_圖表介紹-2.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/omrxQozt19rfyj0B-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/omrxQozt19rfyj0B-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-2.png)  
        展開圖表，其中有 **資料、內距** 等欄位可以設定。  
        **資料** 的格式必須是一個 **物件陣列**，建立不同種類的圖表資料內容也會略有差異，但大致上的格式會像是下列這個樣子：  
          
        **\[**  
         **{ year: '1991', value: 3 },**  
         **{ year: '1992', value: 4 },**  
         **{ year: '1993', value: 3.5 },**  
         **{ year: '1994', value: 5 },**  
         **{ year: '1995', value: 4.9 },**  
         **{ year: '1996', value: 6 },**  
         **{ year: '1997', value: 7 },**  
         **{ year: '1998', value: 9 },**  
         **{ year: '1999', value: 13 }**  
        **\]**  
          
        從上面的資料可以理解不同年份對應著不同的值，接著以這筆資料示範如何產出 **基礎折線圖**。  
          
          
          
        [![9_圖表介紹-3-帶入資料.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/KKVYsGrFrckQM7bS-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-3-%E5%B8%B6%E5%85%A5%E8%B3%87%E6%96%99.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/KKVYsGrFrckQM7bS-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-3-%E5%B8%B6%E5%85%A5%E8%B3%87%E6%96%99.png)  
        直接將 **資料** 填入圖表的資料欄位中。  
          
        接著設定 **內距**，內距顧名思義是指**距離內部的距離**，內距可以直接填上４個數值，數值由左至右依序對應到上、右、下、左這四個方向的距離（單位**px**），與網頁 CSS 的 padding 是一樣的設定方式。  
          
          
          
        [![9_圖表介紹-4-內距設定.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/n0ajpVvqTIjN9qvH-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-4-%E5%85%A7%E8%B7%9D%E8%A8%AD%E5%AE%9A.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/n0ajpVvqTIjN9qvH-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-4-%E5%85%A7%E8%B7%9D%E8%A8%AD%E5%AE%9A.png)  
        由於示範的圖表是 **基礎折線圖**，X、Y軸 的資訊會需要占用較多的內部空間，所以內距就設多一點，  
        因此設定：**40,20,50,50**  
          
          
          
        [![9_圖表介紹-5-比例尺新增Scale.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/tLjxYiKhrrgnjouv-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-5-%E6%AF%94%E4%BE%8B%E5%B0%BA%E6%96%B0%E5%A2%9EScale.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/tLjxYiKhrrgnjouv-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-5-%E6%AF%94%E4%BE%8B%E5%B0%BA%E6%96%B0%E5%A2%9EScale.png)  
        接著建立 X、Y軸 的 **比例尺 Scale**，點選 新增 Scale。  
          
          
          
        [![9_圖表介紹-6-X軸對應的欄位是year.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/KLWBjEkv9HavQP7T-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-6-X%E8%BB%B8%E5%B0%8D%E6%87%89%E7%9A%84%E6%AC%84%E4%BD%8D%E6%98%AFyear.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/KLWBjEkv9HavQP7T-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-6-X%E8%BB%B8%E5%B0%8D%E6%87%89%E7%9A%84%E6%AC%84%E4%BD%8D%E6%98%AFyear.png)  
        先建立 **Year 比例尺（ X軸 ）**，因為 X軸 對應到的欄位是資料中的 year，請在欄位輸入 year。  
          
          
          
        [![9_圖表介紹-7-類型請選擇linear.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/x2sSqHIgoaKii8gG-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-7-%E9%A1%9E%E5%9E%8B%E8%AB%8B%E9%81%B8%E6%93%87linear.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/x2sSqHIgoaKii8gG-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-7-%E9%A1%9E%E5%9E%8B%E8%AB%8B%E9%81%B8%E6%93%87linear.png)  
        類型選擇 linear。  
          
          
          
        [![9_圖表介紹-8-設定刻度距離.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/Dpcc0y4qJrXPt6Or-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-8-%E8%A8%AD%E5%AE%9A%E5%88%BB%E5%BA%A6%E8%B7%9D%E9%9B%A2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/Dpcc0y4qJrXPt6Or-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-8-%E8%A8%AD%E5%AE%9A%E5%88%BB%E5%BA%A6%E8%B7%9D%E9%9B%A2.png)  
        以這份資料來說， X軸 的 1 個刻度表示 1 年即可，所以 **刻度間距** 請設定為 1。  
        開啟 **優化數據範圍**，開啟後圖表繪製時會適度調整留白增加易讀性，可根據情況自行調整。  
          
          
          
        [![9_圖表介紹-9-Y軸-value-設定欄位.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/hPhPml0B5a6QIBaZ-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-9-Y%E8%BB%B8-value-%E8%A8%AD%E5%AE%9A%E6%AC%84%E4%BD%8D.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/hPhPml0B5a6QIBaZ-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-9-Y%E8%BB%B8-value-%E8%A8%AD%E5%AE%9A%E6%AC%84%E4%BD%8D.png)  
        再來新增 **value 比例尺（Y軸）**，作法同 X軸，因為是對應資料中的 value 因此欄位填上 value；類型一樣是 linear。  
          
          
          
        [![9_圖表介紹-10-刻度.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/oGnMvhTO2txRkSuB-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-10-%E5%88%BB%E5%BA%A6.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/oGnMvhTO2txRkSuB-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-10-%E5%88%BB%E5%BA%A6.png)  
        刻度在這次範例中一樣以 1 為單位即可，並開啟 優化數據範圍。  
        另外因為資料中的 **value** 值已經知道最小至最大的範圍，所以可以直接設定 最小值 與 最大值。  
          
          
          
          
        接著是設定圖表中最重要圖表本身**（圖 Geom）**，構成 **基礎折線圖** 的元素有二，分別是點與線，點跟線需要分開進行繪製。  
          
          
        [![圖表-設定1.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/y5Kh9EgnSqUc19CC-%E5%9C%96%E8%A1%A8-%E8%A8%AD%E5%AE%9A1.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/y5Kh9EgnSqUc19CC-%E5%9C%96%E8%A1%A8-%E8%A8%AD%E5%AE%9A1.png)  
        首先先來繪製線的部分。請點選 新增 Geom。  
          
          
          
        [![圖表-設定3.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/nmMjB33cnFLlXfbU-%E5%9C%96%E8%A1%A8-%E8%A8%AD%E5%AE%9A3.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/nmMjB33cnFLlXfbU-%E5%9C%96%E8%A1%A8-%E8%A8%AD%E5%AE%9A3.png)  
        欄位請填上 **year\*value**，類型選擇 **線圖**，此設定是指以線條的方式，依據資料中 year 對應的 value 去繪製出線條。  
          
          
          
        [![圖表-設定4.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/SsvTVCzObSHeuRCp-%E5%9C%96%E8%A1%A8-%E8%A8%AD%E5%AE%9A4.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/SsvTVCzObSHeuRCp-%E5%9C%96%E8%A1%A8-%E8%A8%AD%E5%AE%9A4.png)  
        設定 **Margin Ratio** 值為 1。這樣 **線條部分** 就被繪製好囉！  
          
          
          
          
        接著是繪製點的部分。

接下來示範一些範本應用的例子。

- ##### **示範－卡片範本**
    
    
    - 情境：  
        已經取得一份用戶資料的清單，將發送給名單內的所有用戶一張卡片，這張卡片的圖片就是用戶本人的頭像，標題是用戶的暱稱，內文是固定的文字「我愛 GOSU BAR！」，並且有2個說話類型的按鈕，其中 按鈕2 的內容要透過外部代入文字資料。  
          
        從以上需求中可以得知 **用戶頭像、用戶暱稱、按鈕2的內容** 這三個資料需要經由外部導入取得，我們可以建立三個 **輸入參數** 分別對應這三個要導入的資料。大多數情境會以一個參數對應一個外部資料的方式取得外部資料，會比較好理解與維護。  
          
        **輸入參數** 本身是由 **key、中文名稱、預設值** 所組成，其中 **key** 的值只能以 **英文+數字** 命名。  
        在圖像編輯器中若要取得外部傳入 **輸入參數** 的資料，請以 **${prop.KEYNAME}** 的方式取得。  
          
          
          
        [![7_示範卡片教學.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/j2EGAoM7saaaUxQB-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/j2EGAoM7saaaUxQB-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8.png)  
        理解上述概念後，就來開始新增 **輸入參數** 吧！  
          
          
          
        [![7_示範卡片教學-1.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/MIJVEkRnubGBtAKo-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-1.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/MIJVEkRnubGBtAKo-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-1.png)  
        首先先建立提供給 按鈕2 使用的參數，為了方便未來管理維護，參數 **key** 直接命名為 **btn2。  
          
          
          
        [![7_示範卡片教學-2.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/Av9Qx32mkTOsp8At-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/Av9Qx32mkTOsp8At-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-2.png)** 中文名稱命名為 按鈕2 。  
          
          
          
        [![7_示範卡片教學-3.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/aQiyFH08gedHKr2z-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-3.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/aQiyFH08gedHKr2z-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-3.png)  
        參數預設值因為只是示範，故隨意命名即可（示意圖中命名為「我是 **btn2** 的預設值」），實際應用時則依照使用情境給予最適合的預設值。  
          
          
          
        [![7_示範卡片教學-4.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/dKcZhCTHCfJ06GcA-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-4.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/dKcZhCTHCfJ06GcA-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-4.png)  
        新增完成的 輸入參數會顯示於此。若要更改名稱或是預設值，可以點選 筆的小圖示 進行編輯。  
          
          
          
        [![7_示範卡片教學-5.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/ewanrHTQ4jhc2WIa-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-5.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/ewanrHTQ4jhc2WIa-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-5.png)  
        以同樣方式再另外建立 **key** 為 **picture** 與 **key** 為 **name** 的 輸入參數，分別對應 用戶頭像 與 用戶暱稱。  
          
        註1：  
        用戶頭像的預設值一般來說就是要作為預設頭像使用，因此需要輸入的是預設圖片的網址。網址可以透過一些上傳圖片的服務取得，記得網址須對外公開才能讀取到圖片唷。  
          
        註2：  
        做完任何改動後，請記得養成儲存的好習慣！  
          
          
          
        [![7_示範卡片教學-6-2.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/vRB88N6DI0BrVgsz-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-6-2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/vRB88N6DI0BrVgsz-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-6-2.png)  
        接著回到 編輯 ，開始設定卡片範本的內容吧！  
          
          
          
        [![7_示範卡片教學-9座標系.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/9U8xIH6p2tR8U6BX-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-9%E5%BA%A7%E6%A8%99%E7%B3%BB.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/9U8xIH6p2tR8U6BX-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-9%E5%BA%A7%E6%A8%99%E7%B3%BB.png)  
        在 **GOSU BAR** 的圖層中都是以 直角座標系 的方式決定圖層內容的位置。  
          
          
          
        [![7_示範卡片教學-7.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/UGpEk1ttKtL0qpED-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-7.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/UGpEk1ttKtL0qpED-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-7.png)  
        先點選小工具的圖片，準備建立圖片圖層來存放用戶頭像。  
          
          
          
        [![7_示範卡片教學-8-新增圖層.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/u5USaXUZ8RC8j9GV-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-8-%E6%96%B0%E5%A2%9E%E5%9C%96%E5%B1%A4.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/u5USaXUZ8RC8j9GV-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-8-%E6%96%B0%E5%A2%9E%E5%9C%96%E5%B1%A4.png)  
        透過拖拉方式建立出一個圖片圖層，可以看到在右側範本結構的圖層中多出了「圖片圖層1」。  
          
          
          
        [![7_示範卡片教學-10圖層結構.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/V4Ked3w2U90fZvAu-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-10%E5%9C%96%E5%B1%A4%E7%B5%90%E6%A7%8B.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/V4Ked3w2U90fZvAu-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-10%E5%9C%96%E5%B1%A4%E7%B5%90%E6%A7%8B.png)  
        點選「圖片圖層1」，這時右邊的範本結構變成圖層結構，包含：圖層、圖片、基本屬性、邊框、陰影。
        
          
          
          
        [![7_示範卡片教學-10-2.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/V7YVPLVk7xkEdh2g-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-10-2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/V7YVPLVk7xkEdh2g-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-10-2.png)  
        展開圖片（紅色框選處），可以上傳本地圖片檔案、使用公開的圖片網址，或是直接設定 **輸入參數** 接收外部傳入的資料內容。也可以設定圖片圖層的裁切方式（填滿、符合大小、擴展、置中、並列）。  
          
          
          
        [![7_示範卡片教學-12-圖片網址代入輸入參數.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/ePmqE7MFoeW2SZpm-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-12-%E5%9C%96%E7%89%87%E7%B6%B2%E5%9D%80%E4%BB%A3%E5%85%A5%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/ePmqE7MFoeW2SZpm-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-12-%E5%9C%96%E7%89%87%E7%B6%B2%E5%9D%80%E4%BB%A3%E5%85%A5%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8.png)  
        請點選框選處的「撰寫一小段程式碼」，因為範例目的是讓卡片的圖是收到卡片的用戶頭像，所以圖片網址要使用 **輸入參數** **${prop.picture}**，才能透過這個參數接收外部傳入的用戶頭像。  
          
          
          
        [![7_示範卡片教學-13-輸入參數.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/VDSOHMX0XWFYZmQ0-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-13-%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/VDSOHMX0XWFYZmQ0-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-13-%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8.png)  
        在展開的介面中輸入「**${prop.picture}**」，輸入完畢後點選外圍空白處離開輸入介面。  
          
          
          
        [![7_示範卡片教學-13-輸入參數2.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/v0l0jFUmGEE4lzek-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-13-%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B82.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/v0l0jFUmGEE4lzek-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-13-%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B82.png)  
        凡是有使用程式碼或使用 **輸入參數**，設定欄位就會變成紅色框選處的樣子。  
          
          
          
        [![7_示範卡片教學-11基本屬性更改寬高.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/ddgC2p4Fn0OMUoxe-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-11%E5%9F%BA%E6%9C%AC%E5%B1%AC%E6%80%A7%E6%9B%B4%E6%94%B9%E5%AF%AC%E9%AB%98.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/ddgC2p4Fn0OMUoxe-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-11%E5%9F%BA%E6%9C%AC%E5%B1%AC%E6%80%A7%E6%9B%B4%E6%94%B9%E5%AF%AC%E9%AB%98.png)  
        基本屬性：可以設定圖層的座標位置、寬度、高度、旋轉角度、背景色、不透明度。  
          
        先將圖片填滿圖層範圍，可以使用移動工具直接拖曳圖片的位置與尺寸，或是直接輸入參數值進行設定。  
        為了將建立的 圖片圖層１ 填滿整個範圍，請將X、Y軸座標設為0，寬度450，高度300。  
          
          
          
        [![7_示範卡片教學-10-3.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/mGTg84xTIdzxKUQc-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-10-3.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/mGTg84xTIdzxKUQc-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-10-3.png)  
        邊框：可以設定邊框樣式（實線、虛線）、樣式寬度、顏色。此範例不需要進行設定。  
          
          
          
        [![7_示範卡片教學-10-4.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/ACLWBOzQeVWWc7tP-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-10-4.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/ACLWBOzQeVWWc7tP-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-10-4.png)  
        陰影：可以設定X、Y軸的偏移量、模糊、顏色。此範例不需要進行設定。  
          
          
          
        [![7_示範卡片教學-14-卡片標題.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/Ri3zveZFhEdGRQ6R-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-14-%E5%8D%A1%E7%89%87%E6%A8%99%E9%A1%8C.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/Ri3zveZFhEdGRQ6R-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-14-%E5%8D%A1%E7%89%87%E6%A8%99%E9%A1%8C.png)  
        再來是設定卡片標題。  
        點選畫面空白處切回範本結構並選擇卡片，標題內容一樣使用 **輸入參數** 接收外部的資料。  
          
          
          
        [![7_示範卡片教學-15-卡片標題.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/yXMajVPYf4enenkA-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-15-%E5%8D%A1%E7%89%87%E6%A8%99%E9%A1%8C.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/yXMajVPYf4enenkA-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-15-%E5%8D%A1%E7%89%87%E6%A8%99%E9%A1%8C.png)輸入「**${prop.name}**」。  
          
          
          
        [![7_示範卡片教學-16.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/Gv09J6uAyt53u1Ne-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-16.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/Gv09J6uAyt53u1Ne-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-16.png)  
        透過即時預覽可以發現 **輸入參數** 的標題內容，變成 **輸入參數 name** 當初設定的預設值了！  
        （示意圖中設定的預設值為「用戶暱稱預設值」）  
          
          
          
        [![7_示範卡片教學-17.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/cEht2BXixUl9g8S7-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-17.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/cEht2BXixUl9g8S7-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-17.png)  
        內文直接設定為「我愛 GOSU BAR！」，一樣透過即時預覽可以看出內容變化。  
          
          
          
        [![7_示範卡片教學-18.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/af0wVZyXmKhMHFQk-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-18.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/af0wVZyXmKhMHFQk-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-18.png)  
        設定替代文字，當用戶收到這則範本訊息時，會出現的替代文字內容。  
        （範例中輸入「用戶專屬卡片！」）  
          
          
          
        [![7_示範卡片教學-19-儲存格是.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/1VFGU4euRN1u4CLF-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-19-%E5%84%B2%E5%AD%98%E6%A0%BC%E6%98%AF.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/1VFGU4euRN1u4CLF-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-19-%E5%84%B2%E5%AD%98%E6%A0%BC%E6%98%AF.png)  
        由於圖片並不需要保留透明度，所以儲存格式選擇 **jpg** 格式儲存。  
          
          
          
        [![7_示範卡片教學-20-btn1.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/v9hHdEevm9592hn0-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-20-btn1.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/v9hHdEevm9592hn0-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-20-btn1.png)  
        按鈕1 的設定因為在練習，直接使用預設值即可。  
          
          
          
        [![7_示範卡片教學-20-btn2.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/84kVu7Bgg3dvLU19-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-20-btn2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/84kVu7Bgg3dvLU19-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-20-btn2.png)  
        按鈕2 要使用 **輸入參數 btn2** 接收外部傳入的資料。  
          
          
          
        [![7_示範卡片教學-21.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/gDA4k4ipuuHMD9uL-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-21.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/gDA4k4ipuuHMD9uL-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-21.png)  
        在按鈕文字以及訊息內容中都輸入「**${prop.btn2}**」。  
          
          
          
        [![7_示範卡片教學-22.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/A5rceJfmSpJRiTHC-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-22.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/A5rceJfmSpJRiTHC-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-22.png)  
        設定好即時預覽就會出現當初設定的預設值囉。記得做完設定後要儲存唷！  
          
        以上是此應用情境在 圖像編輯器 需要做的部分，剩下的就是要在 流程編輯器 中透過 for 迴圈的方式，將取得的用戶資料一筆一筆的代入至此範本卡片，這樣經由 for 迴圈發送出去的範本卡片內容，就會是每一位用戶自己的資料了！
- ##### **示範－海報範本**
    
    
    - 情境：  
        針對特定活動或是節日發送用戶專屬的海報形式賀卡，訊息包含一張背景圖，圖中預留位置可以放入用戶頭像，海報下方有按鈕可以開啟活動相關的介紹網站。  
          
        從情境可以得知，用戶頭像需要透過 **輸入參數** 從外部傳入資料，至於按鈕的網址根據需求可以自行決定要以彈性、外部傳入資料的方式，或是非彈性直接輸入固定的網址。在這一次練習中就只建立用戶頭像的 **輸入參數** 即可。  
          
          
          
        [![8_示範卡片教學-1-海報.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/yMUF0SMHFM4ez7WC-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-1-%E6%B5%B7%E5%A0%B1.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/yMUF0SMHFM4ez7WC-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-1-%E6%B5%B7%E5%A0%B1.png)  
        進入剛建立好的海報範本。  
          
          
          
        [![8_示範卡片教學-1-海報高度不調整.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/6yn7fmFKXgHSFohN-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-1-%E6%B5%B7%E5%A0%B1%E9%AB%98%E5%BA%A6%E4%B8%8D%E8%AA%BF%E6%95%B4.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/6yn7fmFKXgHSFohN-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-1-%E6%B5%B7%E5%A0%B1%E9%AB%98%E5%BA%A6%E4%B8%8D%E8%AA%BF%E6%95%B4.png)  
        海報的尺寸寬度不可更改固定1040（px），高度可根據需求進行調整。在此練習高度維持預設值即可。  
          
          
          
        [![8_示範卡片教學-2-資源.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/1yE0eiCxFrIkS6ys-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-2-%E8%B3%87%E6%BA%90.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/1yE0eiCxFrIkS6ys-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-2-%E8%B3%87%E6%BA%90.png)  
        先點開資源建立 **輸入參數 picture**。  
          
          
          
        [![8_示範卡片教學-2-建立圖片圖層並上傳賀卡背景圖.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/ZxagiKZHZVQXbcj5-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-2-%E5%BB%BA%E7%AB%8B%E5%9C%96%E7%89%87%E5%9C%96%E5%B1%A4%E4%B8%A6%E4%B8%8A%E5%82%B3%E8%B3%80%E5%8D%A1%E8%83%8C%E6%99%AF%E5%9C%96.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/ZxagiKZHZVQXbcj5-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-2-%E5%BB%BA%E7%AB%8B%E5%9C%96%E7%89%87%E5%9C%96%E5%B1%A4%E4%B8%A6%E4%B8%8A%E5%82%B3%E8%B3%80%E5%8D%A1%E8%83%8C%E6%99%AF%E5%9C%96.png)  
        切回編輯，以拖拉方式建立一個圖片圖層，在圖片網址上傳賀卡背景圖。  
          
          
          
        [![8_示範卡片教學-3-填滿海報範圍.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/0R8oEB0In1n3WeUP-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-3-%E5%A1%AB%E6%BB%BF%E6%B5%B7%E5%A0%B1%E7%AF%84%E5%9C%8D.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/0R8oEB0In1n3WeUP-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-3-%E5%A1%AB%E6%BB%BF%E6%B5%B7%E5%A0%B1%E7%AF%84%E5%9C%8D.png)  
        將圖層填滿整張海報範圍，直接在基本屬性中設定參數，X、Y座標皆為0，寬度、高度皆為1040，圖層尺寸就會填滿整張海報囉。  
          
          
          
        [![8_示範卡片教學-4-建立圖層for用戶頭像.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/U0GdhCqf5SYFIdsN-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-4-%E5%BB%BA%E7%AB%8B%E5%9C%96%E5%B1%A4for%E7%94%A8%E6%88%B6%E9%A0%AD%E5%83%8F.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/U0GdhCqf5SYFIdsN-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-4-%E5%BB%BA%E7%AB%8B%E5%9C%96%E5%B1%A4for%E7%94%A8%E6%88%B6%E9%A0%AD%E5%83%8F.png)  
        再建立一個圖片圖層，這個圖層會使用 **輸入參數 picture** 來接收外部傳入的用戶頭像。  
          
          
          
        [![8_示範卡片教學-5-圖層順序調整後，用戶頭像被遮蔽.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/me2Ccj5L5qqPCoTA-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-5-%E5%9C%96%E5%B1%A4%E9%A0%86%E5%BA%8F%E8%AA%BF%E6%95%B4%E5%BE%8C%EF%BC%8C%E7%94%A8%E6%88%B6%E9%A0%AD%E5%83%8F%E8%A2%AB%E9%81%AE%E8%94%BD.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/me2Ccj5L5qqPCoTA-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-5-%E5%9C%96%E5%B1%A4%E9%A0%86%E5%BA%8F%E8%AA%BF%E6%95%B4%E5%BE%8C%EF%BC%8C%E7%94%A8%E6%88%B6%E9%A0%AD%E5%83%8F%E8%A2%AB%E9%81%AE%E8%94%BD.png)  
        用戶頭像應該要放在背景圖底下（後面）才不會遮住背景圖，但當我們將圖層移動順序後會發現，用戶頭像的圖層整個被覆蓋住。  
          
          
          
        [![8_示範卡片教學-6-點選背景圖圖層，點開背景調整顏色。.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/UdFdY9QHCpcLKhN2-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-6-%E9%BB%9E%E9%81%B8%E8%83%8C%E6%99%AF%E5%9C%96%E5%9C%96%E5%B1%A4%EF%BC%8C%E9%BB%9E%E9%96%8B%E8%83%8C%E6%99%AF%E8%AA%BF%E6%95%B4%E9%A1%8F%E8%89%B2%E3%80%82.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/UdFdY9QHCpcLKhN2-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-6-%E9%BB%9E%E9%81%B8%E8%83%8C%E6%99%AF%E5%9C%96%E5%9C%96%E5%B1%A4%EF%BC%8C%E9%BB%9E%E9%96%8B%E8%83%8C%E6%99%AF%E8%AA%BF%E6%95%B4%E9%A1%8F%E8%89%B2%E3%80%82.png)  
        這是因為背景圖的圖層沒有調整背景顏色的設定，點選背景圖的圖層，並在基本設定中點開背景調整顏色。  
          
          
          
        [![8_示範卡片教學-6-調整透明度為0.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/ayOybZcEUlbDJubV-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-6-%E8%AA%BF%E6%95%B4%E9%80%8F%E6%98%8E%E5%BA%A6%E7%82%BA0.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/ayOybZcEUlbDJubV-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-6-%E8%AA%BF%E6%95%B4%E9%80%8F%E6%98%8E%E5%BA%A6%E7%82%BA0.png)  
        調整透明度為0，記得按下確定進行更改。  
          
          
          
        [![8_示範卡片教學-7-調整後用戶頭像不再被遮蔽.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/QvWq2qp3qfVBT4rT-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-7-%E8%AA%BF%E6%95%B4%E5%BE%8C%E7%94%A8%E6%88%B6%E9%A0%AD%E5%83%8F%E4%B8%8D%E5%86%8D%E8%A2%AB%E9%81%AE%E8%94%BD.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/QvWq2qp3qfVBT4rT-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-7-%E8%AA%BF%E6%95%B4%E5%BE%8C%E7%94%A8%E6%88%B6%E9%A0%AD%E5%83%8F%E4%B8%8D%E5%86%8D%E8%A2%AB%E9%81%AE%E8%94%BD.png)  
        背景圖層的背景變為透明後，原本圖片預留透明的範圍就露出來囉！  
          
          
          
        [![8_示範卡片教學-8-使用輸入參數取代用戶頭像資料.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/abENT522ujhVjxYJ-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-8-%E4%BD%BF%E7%94%A8%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E5%8F%96%E4%BB%A3%E7%94%A8%E6%88%B6%E9%A0%AD%E5%83%8F%E8%B3%87%E6%96%99.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/abENT522ujhVjxYJ-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-8-%E4%BD%BF%E7%94%A8%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E5%8F%96%E4%BB%A3%E7%94%A8%E6%88%B6%E9%A0%AD%E5%83%8F%E8%B3%87%E6%96%99.png)  
          
        [![8_示範卡片教學-9-輸入參數的key值.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/3eSD7vyYicOh8HuL-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-9-%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E7%9A%84key%E5%80%BC.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/3eSD7vyYicOh8HuL-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-9-%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E7%9A%84key%E5%80%BC.png)  
        在來回到用戶圖層進行設定，點選框選處更改圖片網址，輸入 **${prop.picture}** 以接收外部傳入的資料。  
          
          
          
        [![8_示範卡片教學-11-建立文字圖層.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/zaHXXuZOb13jmm6E-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-11-%E5%BB%BA%E7%AB%8B%E6%96%87%E5%AD%97%E5%9C%96%E5%B1%A4.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/zaHXXuZOb13jmm6E-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-11-%E5%BB%BA%E7%AB%8B%E6%96%87%E5%AD%97%E5%9C%96%E5%B1%A4.png)  
        目前還缺少一個按鈕，請使用文字工具建立一個文字圖層。  
          
          
          
        [![8_示範卡片教學-12-文字圖層調整內容.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/SV7Bo6Vg9Mt4Xihd-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-12-%E6%96%87%E5%AD%97%E5%9C%96%E5%B1%A4%E8%AA%BF%E6%95%B4%E5%85%A7%E5%AE%B9.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/SV7Bo6Vg9Mt4Xihd-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-12-%E6%96%87%E5%AD%97%E5%9C%96%E5%B1%A4%E8%AA%BF%E6%95%B4%E5%85%A7%E5%AE%B9.png)  
        先將文字圖層的外觀進行調整，讓它看起來更像一個按鈕。  
        首先先設定按鈕名稱，命名為「活動參加辦法」，粗細設定為「粗體」，並對水平對齊與垂直對齊都設定為「置中」。  
          
          
          
        [![8_示範卡片教學-13-改變底色.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/lxs8gkO7Ya4MzXah-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-13-%E6%94%B9%E8%AE%8A%E5%BA%95%E8%89%B2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/lxs8gkO7Ya4MzXah-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-13-%E6%94%B9%E8%AE%8A%E5%BA%95%E8%89%B2.png)  
        在基本設定中更改背景顏色（底色）。  
          
          
          
        [![8_示範卡片教學-14-點擊行為設定.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/UqnzWHwbMPGuGoni-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-14-%E9%BB%9E%E6%93%8A%E8%A1%8C%E7%82%BA%E8%A8%AD%E5%AE%9A.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/UqnzWHwbMPGuGoni-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-14-%E9%BB%9E%E6%93%8A%E8%A1%8C%E7%82%BA%E8%A8%AD%E5%AE%9A.png)  
        在點擊行為中設定為連結，並輸入連結網址。因為是練習在此就輸入 **GOSU BAR 官網（[https://www.gosu.bar/home](https://www.gosu.bar/home)）**。  
          
          
          
        [![8_示範卡片教學-15-邊框設定.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/oQEMmtl1kSHBRMrc-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-15-%E9%82%8A%E6%A1%86%E8%A8%AD%E5%AE%9A.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/oQEMmtl1kSHBRMrc-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-15-%E9%82%8A%E6%A1%86%E8%A8%AD%E5%AE%9A.png)  
        邊框也進行調整，樣式選擇「實線」，寬度設定「20」，設定邊框「顏色」，讓文字區塊更像一個按鈕。  
        設定完成後記得儲存範本。  
          
        以上是這個應用情境在 圖像編輯器 中範本要進行的設定，而在 流程編輯器 中則是使用 for 迴圈的方式，將要發送訊息的用戶頭像資料一筆一筆分別傳入範本，這樣每一比發送的範本訊息內容就會是用戶的頭像囉！