文章彙整

Google Web Designer教學-視覺化設計開發速成工具

By Astral Web 2 years agoNo Comments
首頁  /  網頁視覺設計  /  Google Web Designer教學-視覺化設計開發速成工具

Google Web Designer teach

有鑑於行動裝置蓬勃地發展,以致於在提供跨平台使用特性上也相對地變得很重要,像是是設計廣告、網頁製作、網頁動畫等,Google推出的這款網頁設計工具你不能不知道,或許有很多人聽過但沒使用過,今天就來教學Google Web Designer這個工具吧!

 

哪裡下載Google Web Designer呢?

Google Web Designer官網,點擊”Download Web Designer Beta”下載並安裝,安裝完後就可以開始設計囉。Download Web Designer Beta

Google Web Designer 切換中文版

此工具支援多國語言,下載安裝之後開啟介面即可切換語言,請到 說明>設定語言>繁體中文

雖然Google Web Designer目前仍是處於開發測試版,但已經能夠製作出跨平台的動態內容、廣告、網頁等;這無疑是對不會撰寫程式碼的設計者、初學者以及製作動畫者來說最能快速上手與運用的工具。

 

Google Web Designer 網頁設計工具使用教學

Google Web Designer是款透過整合式的圖形和程式碼介面來設計廣告、或建立HTML(網頁HTML)網路內容的應用程式工具,其目的是想讓設計者或是初學者不會因為不會撰寫程式或製作互動廣告、動畫有所限制。

在這裡先簡單地介紹一下Google Web Designer上的介面工具吧!

 

工作區

Google Web Designer teach 1

  1. 設計檢視模式:會顯示出與在瀏覽器上所看到的畫面相同。
  2. 程式碼檢視模式:會顯示出相對應色彩編碼與格式來顯示程式碼。
  3. 提供變更縮放比例(右下角- 100 % +)。
  4. 切換要處理的頁面(左下角page1⬍  Div)。

 

工具列

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

工具選項列

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

檢視列

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

面板

面板區塊包含色彩、屬性、元件、活動CSS、回應式版面配置和素材資源庫

時間軸

主要是讓使用者在主要畫面格建立動畫,分別有2種模式可切換。

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

 

Google Web Designer除了讓使用自行建立想要設計的主題外,也提供一些範本讓使用者做選擇使用,如下圖。

Google Web Designer teach 2

今天與大家分享歐斯瑞使用Google Web Designer製作出來的動態廣告,一起來看看如何製作吧!

  1. 先建立空白橫幅廣告,設定寬352 px /高600px(尺寸可視個人需求來設定)。

Google Web Designer teach 3

 

  1. 選擇標記工具來設定背景色,這裡選用線性漸層,顏色設定為#D2D2D2與#F7F7F7。

 Google Web Designer teach 4

  1. 使用漸層工具來調整漸層方向。

Google Web Designer teach 5

  1. 將準備好的素材加到資源庫

Google Web Designer teach 6

小技巧: 素材加到資源庫方式可用匯入拖拉

  1. 將素材置入到容器,調整好素材尺寸與位置。

Google Web Designer teach 7

小技巧: 勾選轉換控制項可調整尺寸,對齊則是勾選與容器對齊後再選擇對齊方式。

  1. 接著選擇文字工具輸入要置入的廣告標語。

Google Web Designer teach 8

小技巧:如果想選擇更多不同字型可在字型選單中點選更多字型…

  1. 接下來為這段標語加入動態效果,在時間軸介面點擊滑鼠右鍵插入主要畫面格

Google Web Designer teach 9

如果想移除插入的畫格,該怎麼移除呢?

  1. 首先,先點選要移除的畫格再點擊滑鼠右鍵的移除主要畫面格

Google Web Designer teach 10

現在讓這段標語來點變化吧!

  1. 屬性介面中設定文字的旋轉角度為3°。

Google Web Designer teach 11

現在試著更改動態效果吧!

  1. 在已加入動態效果前點擊滑鼠右鍵(須在時間軸介面),在這裡可以看到加/減速:線性…,點擊它就能該介面內選擇其他的動態效果。

Google Web Designer teach 12

  1. 接著加入觸發事件的元件,這裡選用輕觸區域,尺寸設定寬352 px /高600px。

Google Web Designer teach 13

小叮嚀:請注意每個素材或元件的圖層關係,以避免沒有顯示出來或沒有效果。

  1. 接下來設定輕觸區域元件的觸發事件(可依個人所要呈現效果來設定)。

Google Web Designer teach 14

小叮嚀:觸發元件須在最上層,如此一來當使用者點擊元件後,事件才會被觸發喔!

 

如果想將製作完成的成品發佈出去,該如何發佈呢?

 

Google Web Designer的發佈方式有3種,分別是本機端發佈(zip檔)、發佈到Google雲端硬碟及發佈到DoubleClick Studio

  1. 在檢視列上點擊發佈,選擇發佈方式。

Google Web Designer teach 15

  1. 選擇好發佈方式後,就會出現如下圖的畫面,設定好後按確定就大功告成了。

Google Web Designer teach 16

小叮嚀:發佈到Google雲端硬碟及DoubleClick Studio,都需要登入Google喔!

 

 

 

 

參考資料來源:

https://support.google.com/webdesigner#topic=3249465

以上內容由Astralweb 歐斯瑞編寫製作

 100

推薦文章

Category:
  網頁視覺設計

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。