自從開始用Google Chrome輔助前端設計後，再也找不到最佳輔助工具。Google這次直接釋放網頁設計軟體Google web designer，整套軟體才800K。
Google web designer是一套給設計師用的開發環境，標榜只要專心設計，語言部份交給軟體！並且特別提醒一次設計，可以支援各種瀏覽環境。
網站：https://www.google.com/webdesigner/
Google web designer，800K的前端設計軟體
自從開始用Google Chrome輔助前端設計後，再也找不到最佳輔助工具。Google這次直接釋放網頁設計軟體Google web designer，整套軟體才800K。
Google web designer是一套給設計師用的開發環境，標榜只要專心設計，語言部份交給軟體！並且特別提醒一次設計，可以支援各種瀏覽環境。
網站：https://www.google.com/webdesigner/
Easing函數
你是個前端設計師嗎？承認吧你就是要與一些語法的東西為伍。
俄羅斯一個高手把Easing函數全部都做成了開源範例，並且提供js、css、scss的語法讓你可以直接取用，真好這下子專業性直接提高一個擋次。
網址：http://easings.net/zh-tw
作者：https://github.com/ai
使用方式：
- 直接選擇一個曲線進入內容，可以看到動態線條與動態，如果想再看一次，直接點選該曲線圖即可。
- 然後下面就是可用的函式了，部份相關支援性也會有相對應的說明。
ajaxload，Ajax讀取動畫
哎呀每次都用別人的讀取動畫，顏色都不協調，想改變一下Ajax的讀取動畫嗎？這裡有一個工具網頁幫你改變配色。
看看範例：
網址：http://ajaxload.info/
使用方式：
- 從下拉清單中選擇想要的款式，然後設定一組配色。
- 按下Generate it!預覽。
- 滿意後按下Download it!即可下載完美的gif檔案。
不專業也能自製gif動畫的網站
有時候在網路上看到別人自製的創意gif動畫蠢蠢欲動想要自己製作，卻又因為不熟悉專業軟體，這時候可以使用這個網頁工具，完全無痛製作！
先來看看幾個美國創意插畫家的gif動畫：
.gif)
.gif)
插畫來源：http://appnews.fanswong.com/show.php?id=348012
現在你也能不專業的做出這樣的動畫了！！
- 首先到網址：http://mothereffinganimatedgif.com/
- 接下來看到畫面中間大大的Drag and Drop images here，把你預備要做成動畫的圖片一次"拖拉"進來，就會看到所有圖片被排列上。
- 接下來要開始做"動"畫了，好興奮。首先是動畫圖片的順序，直接在每張圖片上用滑鼠"拖拉"以改變順序，這裡要注意一下如果你不小心直接放開滑鼠，會變成把圖片旋轉90度，記得多按三下讓他轉回來。
- 動畫順序排好了以後，調整width，這是圖片最後想呈現的寬度，通常這個網站會以最寬的那張圖片為基準，但是你可以縮小他。
- 然後是每張圖片依序變換的時間，調整Frame delay可以改變gif動畫的延遲時間，例如設定100ms則表示每0.1秒鐘跳下一張圖片，意即假設你的動畫用到了10張照片，那麼你的整個gif動畫就會在一秒鐘內跑完。
