繼 Adobe Photoshop CC RWD 感應式網頁應用與整合講座活動後，也經過快一個月的時間，不知道學員們還記得當天的教學內容嗎？而為了讓無法參與講座的朋友，也能了解當天講座的內容，因此筆者也把教學簡單整理這篇，所以如果你忘記哪部分的話，搞不好也能透過這篇稍微喚起記憶！不過畢竟是簡單整理，所以並不是全部的教學內容都會收錄在這，有任何問題的話可以直接請教梅老師會比較快。當天講座分成上下半場，上半場是由梅老師講解Adobe Photoshop CC 2015 與 Emmet 的應用，下半場則是 Adobe 產品資深工程師 Mark，來介紹如何用 Adobe Muse 軟體，來製作出一個網站，完全不需要懂程式碼也行！繼續往下看吧！

---

第一部分是梅老師講解 Adobe Photoshop CC 2015 與 Emmet應用。

---

在 Photoshop CC 2015 中，已內建好 Web、iPhone、iPad 以及各行動裝置常用的尺寸大小，你幾乎不需要再另外查相關資料，可很快速的建立。

---

設計 RWD 版型時，多工作區域這功能就非常方便，把桌機、手機、平板全部都顯示在同一個頁面，這樣一來，即可快速針對不同解析度進行縮放、修改。

---

完成之後，就可透過 Brackets 這套 App，來把設計好的手機畫面即時顯示在裝置中，進行微調動作。

---

畫面同步前記得要連接 lighting 傳輸線至電腦。

---

以往使用 Adobe Photoshop 設計完版型後下一步，大家都會利用切片工具把畫面分割好，不過如果一不注意出現 1 像素誤差值，就必須回到 Photoshop 中來重新調整。而 Photoshop CC 2014 以後的版本都有內建一個「影像資產」功能，可快速縮短切片時間。

---

產生完後把圖層名稱改成 .jpg 或 .png。

---

就可以在 PSD的存放路徑中，看到 assets 這資料夾，裡面存放著上一步所設定的圖層格式。

---

另外還可以透過命名圖層名稱的小技巧，來直接決定其格式的縮放及壓縮比等等。

---

而 Adobe 本身也有提供雲端字型服務「Typekit」，前提是你必須要有 Adobe 帳號，並分成免費、付費版，覺得電腦字型不夠用的朋友可以試試，很推薦使用。

---

設計網頁用的話可直接選擇 Web 來查詢。

---

或是在搜尋欄上輸入想要的字型名稱。

---

而在 Emmet 中也提供 PSD 轉存功能，使用右方的此功能鍵後。

---

即可將 PSD 檔上傳到下方欄位。

---

每個 PSD 檔都會原始保留圖層架構。

---

另外，上傳的 PSD 都會存放在 Creative Cloud Assets 中，因此使用 Dreamweaver CC 時也能打開這功能，找到原先上傳的 PSD 檔。

---

接下來來到第二部分，由 Adobe 產品資深工程師 Mark，來介紹 Muse 這套軟體好用之處。 Muse 是一套所有軟體結合在一起的網頁整合解決方案。

---

而且只要會做簡報，你就會使用 Muse 來設計網頁，完全不需要懂任何程式碼。

---

設計網頁時只要記得這四個流程，建構->設計->預視->發佈，所有素材匯入之後，只需滑鼠拖曳到適當位置排列即可。

---

開啟軟體後首要步驟，當然就是建立網站的頁面大小。

---

完成之後，接下來會用到的工具就是這四個「規劃」、「設計」、「預視」、「發佈」。

---

工作區域分成兩個區塊：主板以及網站，不同的地方在，修改主板的任何部分，在其他網站內的網頁也都會改變，所以主要是用來設計網站的主視覺用。

---

所有素材都是利用右鍵的置入功能，把東西丟到網頁裡。

---

接著就直接用滑鼠拖移素材到想要的位置，非常簡單！

---

照片也支援幻燈片功能，加入之後還能調整各細節設定。

---

就連 Google Map 地圖也能插入，而且是真實可以縮放大小的地圖。

---

也有表單相關功能。

---

插入 Youtube 影片當然也不是問題！基本上只要你想到的功能，Muse 大致都有。

---

完成之後就可以發佈網站啦！

---

以上就是這次 Adobe Photoshop CC RWD 感應式網頁應用與整合講座的大致教學內容。


活動記錄/圖/文 by Rocky Hsu