Gwd 開箱文

Google Web Designer 
 這個由 google 開發釋出的 免費視覺化設計開發速成工具軟體
可讓您創建基於 HTML5 的交互式設計和動態圖形。

話說自從 Flash 退隱江湖之後，網海沉寂一陣子，近來 HTML5 和 CSS3 迅速的蓬勃發展，不少網站已蠢蠢欲動的使用視差、動畫特效建置，好像沒加上這些功能，就再也無法在江湖走跳，可要被踢到外太空去了!!

要製作動畫特效除了 CSS 外，免不了要用到 HTML5 的 SVG 和CANVAS 這兩個繪圖標籤元素，再加上Javascript，若要自己手寫 svg + canvas 真會暈倒，想說有沒有更快速且有效率的方法，能使用視覺化動畫工具，不用寫程式和計算數據，只要拉一拉就好的，於是谷歌一下，找到 Google Web Designer 這款透過整合式的圖形和程式碼介面的設計工具、不僅可以直接像繪圖軟體一般繪製出向量幾何圖形，還能自動產出對應的Javascript以及CSS原始碼，號稱可以在任何一個裝置上都能正常瀏覽，亦可建立 HTML (網頁HTML) 網路內容的應用程式工具，而且還是免費的，我想 GWD 佛心的釋出這一款工具，其目的應是，想讓設計者 或是 初學者不會因為不會 撰寫程式或製作互動式廣告、動畫而頭痛吧。

 哪裡可以下載 Google Web Designer 呢？

在 Google Web Designer 官網， Free下載安裝，安裝完後就可以開始囉。

現在就讓我們來開箱看看 👀

在選單選擇 > 建立新檔案 > 橫幅 > 其他隨便勾選

所謂的建立新檔案，其實是建立一個資料夾，把所有產生的檔案都放在裏面，應該說是建立專案比較貼切，為何說、其他隨便勾選，因為進入編輯時，都可以再改選

勾選 [回應式版面配置] 方塊，系統就會將 (viewport) 頁面寬度和高度設為 100%，並且啟用媒體規則，可設定 Media queries 的斷點。


工具列

提供了3D 物件工具、文字工具、畫布工具、填滿工具等等。

工具選項列

顯示使用者目前所選用工具的選項。如：選取範圍工具時，工具選項列會顯示位置樣式和對齊版面配置等選項。

檢視列

提供設計檢視、程式碼檢視兩種操作模式、同時讓使用者能預覽自己所設計製作的作品或者是發佈。

面板

面板區塊包含色彩、屬性、元件、活動、CSS、回應式版面配置和素材資源庫。
您可以調整這些面板，重新排列、合併、關閉以及浮動。

時間軸

用來安排圖片或元件出場的時間、移動的位置。

在編輯動畫時，google web designer提供兩種動畫編輯模式-快速/進階，你可以依據你的工作需求來切換。

快速模式：以場景為單位來建立動畫。
進階模式：以個別元素來建立動畫。

本篇文章只是簡單的介紹，其他可參考輔助說明，在 YouTube 上也有不少教學影片，官方教學頻道 



Google Web Designer 除了讓使用者能自行建立想要設計的主題外，也提供一些範本讓使用者輕鬆使用

在選單選擇 > 使用範本

哇哩咧 ~ 啥米巄沒有

上 Google WD 只找到下面這個答案

您可以嘗試這些步驟來強制重新安裝模板

1. 如果 Google Web Designer 正在運行，請退出。
2. 刪除以下文件夾：
Windows： C:\Users\<username>\AppData\Local\Google\Google Web Designer\webapp\gwdtemplates
蘋果電腦： /Users/<username>/Library/Application Support/Google/Web Designer/webapp/gwdtemplates
Linux： ~/.local/share/google-web-designer/webapp/gwdtemplates
3. 重新啟動 Google Web Designer。

假如、你依照上面的處方服用，可以痊癒，恭喜你可別高興的太早，關掉重新打開，看看是否還在。

每次、重新啟動 Google Web Designer，模板庫若有更動會重新下載模板覆蓋，所以你所做的更動，都會被吃掉。

假如、和我一樣又不見了，繼續看我怎樣找回迷路的羔羊
 
起先 我用盡了洪荒之力，就是找不到答案，Google Web Designer 的範本和應用程式 APP 是分開放的，於是我就給胡搞瞎搞，總算把這一隻死馬給救活了。

解決的方式 >> 複製模板庫內所有的檔案 > C:\Users\<username>\AppData\Local\Google\Google Web Designer\webapp\gwdtemplates

貼到 > 預設我的範本、資料夾裡面 > C:\Users\User\Documents\Google Web Designer\templates

本來我只是想要把它變成我的範本使用， 結果、瞎貓抓到死老鼠 ~ 可以正常使用了。

GWD 模板數據庫



Google Web Designer 還有一個隱藏版的功能，圖片處理，可以擴大、裁剪、去背... ，簡單的讓 jpg檔 變成 背景透明的 png檔。