經常要從螢幕擷取畫面給朋友或客戶看嗎？
擷取、開小畫家、貼上、存檔、傳檔案、等對方收檔案是以前的過程，現在使用Gayzo就輕鬆多了，只需要兩個步驟：擷取、複製網址、貼給對方。
不但可以截圖，Gayzo甚至可以擷取動態畫面成gif圖檔(限制7秒)，立即分享！而且，完全免費。
付費帳號每個月2.99美金，還有以下特殊功能：
- 隨時管理每張你擷取過的圖片。
- 在特定圖上做標記。
- 跟你的行動裝置同步看擷取過的圖。
- 沒有廣告。
如果您知道有更快的方式，請告訴我^^
Gyazo，史上最快分享工作中畫面的小軟體
經常要從螢幕擷取畫面給朋友或客戶看嗎？
擷取、開小畫家、貼上、存檔、傳檔案、等對方收檔案是以前的過程，現在使用Gayzo就輕鬆多了，只需要兩個步驟：擷取、複製網址、貼給對方。
不但可以截圖，Gayzo甚至可以擷取動態畫面成gif圖檔(限制7秒)，立即分享！而且，完全免費。
付費帳號每個月2.99美金，還有以下特殊功能：
如果您知道有更快的方式，請告訴我^^
Google web designer，800K的前端設計軟體
自從開始用Google Chrome輔助前端設計後，再也找不到最佳輔助工具。Google這次直接釋放網頁設計軟體Google web designer，整套軟體才800K。
Google web designer是一套給設計師用的開發環境，標榜只要專心設計，語言部份交給軟體！並且特別提醒一次設計，可以支援各種瀏覽環境。
網站：https://www.google.com/webdesigner/
Guideguide，幫你計算並生成導線的Photoshop模組
在製作響應式網頁設計時，經常要在Photoshop先畫好導線，以確認每一個欄位的寬度或每個section的高度，雖說計算寬度一定要先自己算好誰也幫不上忙，但計算間隙這件事更煩人了，且實際精準地去拉導線定位時也是一個痛苦的事。Guideguide就是幫你做這兩件事的，立刻畫出來。
網站：Guideguide.me
不只是絕對位置的導線佈局
除了先行計算好自己要的整體結構佈局再用Guideguide拉導線以外，有時候我們也會從固定需要的區塊來開始延伸計算相對間隔與位置，Guideguide也能這樣畫！這樣的模組竟然是免費的！
Fake image please，請立刻給我一張假圖！
有時候我們寫網頁會臨時需要一些圖片來預覽結果，雖說是隨便要一張就好的東西，卻不得不開Photoshop來做需要的尺寸，這時候如果有Fake image please幫助的話就方便了，所有圖片的尺寸都可以在瞬間"寫"出來。
網站：Fake image please
只要簡單的打上一段規則的網址，加上尺寸，就成為一張圖，多麼直覺的解決方案呀。這對前端作業來說根本是神一樣的工具。以下是官方的範例語法：
img src="http://fakeimg.pl/300/"
img src="http://fakeimg.pl/250x100/"
img src="http://fakeimg.pl/250x100/ff0000/"
img src="http://fakeimg.pl/350x200/ff0000/000"
img src="http://fakeimg.pl/350x200/?text=Hello"
img src="http://fakeimg.pl/350x200/?text=World&font=lobster"
網址就是參數，可以在參數上訂製圖片尺寸、圖片背景色、文字顏色、文字、字型(似乎不支援中文字)。相信大家看看就知道語法怎麼用了…，不過因為參數很程式化，所以也可能寫出比範例更複雜的圖片，例如本篇的範例就是寫這樣的：
http://fakeimg.pl/650x300/0088b2/fff/?text=designerapps.blogspot.com
大家可以多嘗試一下。
這應該是Java生成的圖片。
BuiltWith，告訴你這個網站到底用了哪些技術
有時候我們就是找不出某網站使用的技術，這件複雜工作讓BuiltWith告訴你。只要簡單的把網址輸入，BuiltWith就會在兩秒後盡可能的列出全部該網站所使用到的所有技術。例如看看我們這個部落格用到的技術。
網站：BuiltWith.com
不只如此，還可以看看這些技術的全球使用度，只要簡單的在該技術名稱上點一下左鍵，就會進入到一個分析畫面，可以透過一些圖表知道該技術的全球使用度。不過有些數據可能還收集不夠多，但是這些資訊是一直累積中。
Screenqueri.es，一定要用的全響應網頁設計測試網站
最強的全響應網頁設計測試網站
我曾經介紹過RWD 是響應式網站設計一定要有的書籤工具，今天要介紹我使用過最棒的全響應設計最棒的線上測試環境Screenqueri.es。直接在瀏覽器上測試超過60個行動裝置
支援超過60個行動裝置解析度，只需要從下拉式清單簡單的選一個裝置名稱即可進入測試狀態，當然你也可以隨時改變解析度看看預覽結果。不單可以測試http網站，就連本地端的連結也是可以直接測試的，厲害吧？不過你必須花一點時間註冊帳號才能使用。網站連結：Screenqueri.es
不只是iPhone, iPad, 主流品牌android…連Kindle或各大廠的平板電腦都可以一併測試了。而且是完全免費的。
CSS3 Generator，CSS容器生成器
網址：CSS3 Generator
使用方式：
- 直接使用調整面板，記得面板的右邊有+的按鈕都可以打開進入細項調整。
可以搭配Gradient Generator做出絢麗的按鈕唷！
我也弄了一個範例：
The Responsinator，響應式網站測試工具
有兩個傢伙搞了一個線上測試的網站，只要輸入網址就可以預覽在iPhone3, 4, 5, iPad, android一些主流解析以及甚至kindle上的顯示結果，而且還可以操作喔！
網站：The Responsinator
使用方式：
- 直接在左上角輸入網址，按下GO，就可以了。
而且不只是直式預覽，橫式預覽也一起包辦了。
Stackexchange，全球最專業的技術問答網站
2000年初Google曾經實驗性的請了各領域的專家成立了問答網站，讓專家來回答全世界各領域的問題，不過這個網站營運沒多久就收掉了。直到前幾年Google又搞了個好問服務，讓每個人都有機會做專家。Yahoo在Google之後也開始了knowledge(知識+)的服務，不只是這兩大巨頭，中國大陸各個大型網站也相繼推出問答服務網站如百度、天涯、知乎…等等不計其數，可見問答服務相對網際網路舉足之重。
最終經營問答網站的知識性服務需要的兩個重點是發問品質和回答品質，兩者缺一不可。每一個品質低劣的發問都可能造成垃圾問題滿溢於網站裡，每一個品質低劣的回答亦造成找資料人的腦殘和時間浪費，說到這裡忍不住說一下知識+的腐敗，我常常想為什麼台灣雅虎要把各種不收費的服務做爛，難道是廣告賺太少嗎？
Stackoverflow網站
StackExchange這家公司似乎看準了這個關鍵，針對各種知識領域分別成立了問答網站，並且請專家細心分類經營，今天要介紹的是http://stackoverflow.com/ 這個分站，在這裡可以找到最新最深入的程式設計解析，如果你經常使用Googel搜尋技術性問題，相信你一定經常連結到這個網站。
Stackoverflow帳號申請容易，但管理非常嚴苛。
- 你不能問一個別人問過的問題。
- 你不能問一個水準很低的問題。
- 你不該問一個很入門的問題(例如CSS是什麼？)。
- 你只能問一些很棘手解決的問題。
問答網站的主要人物
專家才是問答網站的主要人物，其他的人是為了找棘手的問題來請專家回答而值得存在的，這樣的對話才是問答服務網站主機資料庫裡該存放的東西。發出深入問題的專家和能回答深入問題的專家，兩者到位才能保障問答網站地位。
Stackoverflow有多嚴格呢？
我的第一個帳號大概問了三個問題後就被限制永遠不得發問了~
而當時我問的問題也不算膚淺，第一個是沒搞清楚Stackoverflow的知識領域，問了一個不太算技術性的問題，被其他會員檢舉一次。第二個雖然是問了一個技術問題，但因為該領域的英文用語我不熟習而發問內容卡在字義上的理解不足，我又被檢舉一次。最後一個是我回答了一個技術性問題又因為不夠理解發問者所描述的需求而又被檢舉了一次。然後我就收到永遠不得再發問的通知。這三次都是其他會員對我的檢舉，然後管理員就放棄我了，這種管理機制在區區2300萬人口的台灣竟然落實不了。
在Stackoverflow如果活躍起來成為一個答題專家，可以有效的提高你的專業能力形象，這也是為什麼一些老外會在自己的個人網站上提供Stackoverflow的個人連結，並且基於這個優勢亦可以取得很多商業機會，一個Stackoverflow的專家形象不論是對經營公司或者freelancer來說都是很重要的勳章。
如果你的英文夠好，或者你想把英文學習好，建議你去申請一組Stackoverflow的帳號，參與全球同行的互動，應該能意外的接到一些國外的專案外包。
網站：http://stackoverflow.com/
Gridpak，響應式網頁Grid佈局工具網頁
為什麼做主題要計算呢？因為你必須在一開始就佈局好主題各個部位的寬度，以及在全響應環境下的變化，也因此實際呈現時百分比所影響到的寬度是否合乎主題內容中各個部位所需要的最小寬度或者最大寬度，這部份應該是有工作上實際碰到的前端設計師比較能理解，所以言而總之你既然會來看了這一邊文章八成你也看得懂。
網站：Gridpak
使用方式：
- 非常明顯第一步是拉動畫面中間的工具來決定寬度。
- 然後設定式樣所需要的欄位數、間隔、寬度等等。
- 最後按下方紅色按鈕的Download，就可得到你需要的檔案了，這個檔案裡的東西有夠豐富的，不但可以讓你直接取得一個基礎的html+css範例，還包含了其他我尚未去學習的scss、less，真是酷爆了。
Gradient Generator，CSS製作漸層背景的網站工具
 |
| Gradient Generator |
Gradient Generator是個強大的CSS漸層色生成工具。
有時候想把按鈕做成漸層的，所以會去翻書籤裡的網站找一個來改色對吧？現在用Gradient Generator可以線上調校生成了，用法跟Photoshop的漸層工具幾乎一樣！不論是條透明度還是漸層位置完全可視化調整。
網站：Gradient Generator
使用方式：
- 非常直覺，直接拉動調整，然後右邊框框裡的就是CSS語法了。
筆記：這語法支援到IE8，但是若要支援IE9，請在框框右下角把IE9打勾，並且把下方的IE9宣告放在你html的<head>之上。
特殊功能：Gradient Generator還能支援從你上傳的圖片中抓取顏色！只要在右邊面板下方按Import from image即可上傳。
下面是我玩玩做成的DEMO按鈕：
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檔案。
cubic-bezier，CSS動態編輯器
你經常需要使用CSS編程嗎？
http://cubic-bezier.com 這個工具網站可以協助你編譯最適合的動態預覽，直接輸出成CSS語法。
立刻看看這是什麼請直接按GO。
使用方式：
- 直接在網頁上編輯，首先拉動曲線，其次調整一個做動時間，例如設定動態時間為0.5表示0.5秒，然後按下GO就可以預覽。
- 按IMPORT輸入你自己的語法，再依樣進行編輯調整。
然後按EXPORT就可以得到語法了。
網頁設計必備，測試全響應網站的小工具
響應式網站很不好設計，尤其是測試很麻煩，現在這個網站讓你的瀏覽器立刻變成一個測試環境。
網址：http://responsive.victorcoulon.fr/
哈哈，我明白一下子是看不懂的，因為這工具實在是太專業了，所以一定要往下看使用方式。
使用方式：
畫面中央RWD Bookmarklet是個工具，直接把他拖到你的書籤上，如圖(我是使用Chrome)：
 |
| 以Chrome為例的範例，讓RWD變成你的瀏覽器工具 |
如何測試呢？
畫面上方那一排就是測試工具了，畫面中間顯示的是你想要測試的網站，直接按下畫面中間上方的那一排任何一個按鈕，都可以看見全響應網站的預覽結果。
Fontfriend，不必重寫網頁就可以直接預覽各種字型的書籤工具
想隨時檢視網頁上最適合的字型預覽嗎？有Fontfriend 不必換字型也可以即時在任何網站上檢視了。(包含Google Font！)
使用方式：
- 到網址http://somadesign.ca/projects/fontfriend/，把畫面上FontFriend紅底色看似按鈕的連結拖拉到書籤列上，就可以開使用了。
- 在任何網頁上按這個書籤即會開啟一個面板，你可以透過面板上的所有設定來預覽該網站上的文字換成Google font後的結果。
- 開啟面板後，首先從Selector選擇想要改變字型的標籤，預設有body, 標題文字(h1h2h3h4..), p, 或者自訂標籤。
- 再來是開始改變文字字型了，可以看到當前網頁使用的文字字型，也可以改變成系統預設的字型，或者使用最右邊的Google Font！當然也可以改變文字的行間和其他css中對文字的屬性控制。
不過這對於我們中文使用者來說似乎幫助並不大，如果你經常承接一些外文語系的網站，這可能會是一個好工具。
CSS3 Click Chart，CSS的特效範例
網站：CSS3 Click Chart
使用方式：
- 無，應該沒有什麼需要說明的。但下面有一個直接去取回的範例可以玩玩。
ColorSchemeDesigner，數據化色彩配色工具網站
你對色彩的需求和細膩度較高嗎？或者你所開發的專案需要一套邏輯性的色彩布局試算嗎？Color Scheme Designer可能是你想像不到的工具，而且是免費的！
透過使用這個工具網站，你可以邏輯性的整理出一套配色讓工程師順利的程式化一個顏色的配色邏輯，這可不是蓋的。
網站：ColorSchemeDesigner
使用方式：
- 首先在面板左上選擇需要的顏色色相組，選擇一個到四個的色相組，內容還可以細分出不同的配色邏輯變化方式，有點複雜解釋，這應該是色彩學研究所在理解的深度了。
- 其次左下方是改變色相、色彩彩度、明度和對比等。
- 再來是精彩的，右下方的面板可以直接在一個DEMO站預覽配色，很神很神有木有！
- 還沒完！最後還可以透過右上方的一堆工具分享配色或者輸出成Html+css檔案！
Kular，配色與色彩計畫社群
網站：Kuler
到Kular網站可以立即玩玩配色，亦可點選左上方Explore瀏覽現有存檔的配色、或者打開自己存檔的配色。
Kular也是一個雲端色票社群網站。當然，在Explore也可以用關鍵字搜尋一個現有的關聯配色。例如我曾經在一個專案中需要適合布達佩斯(budapest匈牙利古城)的色彩，就是在這兒找到一組的。
Adobe
Kular目前是Adobe旗下的一個免費服務社群網站，Photoshop的使用者亦可在Extension裡開啟Kular面板直接瀏覽或者存儲自己的配色(需要adobe帳號，而且不是破解版)。
當然也可以在某個配色上跟其他使用者討論自己的看法！
