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生成的圖片。
UI Cloud，這個荒唐的搜尋引擎讓你搜免費UI
有人做了一個搜尋器讓你針對全世界主要在分享免費UI設計下載的網站搜尋，想要什麼元素，就搜什麼元素，例如需要表單，那麼搜尋Form，接著就會列出一堆漂亮的表單設計讓你下載使用！
網站：UI-cloud.com
這真是荒唐！
CSS Arrow Please，無痛製作附有箭頭的CSS對話框
阿！竟然有這種東西。過去用CSS去做一個有三角指標的容器常常要我的命，三角形部份用圖解決就要在改變顏色時開Photoshop再改一次顏色，要是再加上邊框我更頭痛去了。
有個傢伙好像看到我的難處了，做了這個製作器。這真他X的了得，他完全看到我這種用CSS去畫圖有障礙的人到底需要什麼！
網站：CSS Arrow Please
不過可惜他似乎給的設定不夠多，例如我若不要圓角就得自己去改CSS了(雖然這裡簡單到一個不行)。
BuiltWith，告訴你這個網站到底用了哪些技術
有時候我們就是找不出某網站使用的技術，這件複雜工作讓BuiltWith告訴你。只要簡單的把網址輸入，BuiltWith就會在兩秒後盡可能的列出全部該網站所使用到的所有技術。例如看看我們這個部落格用到的技術。
網站：BuiltWith.com
不只如此，還可以看看這些技術的全球使用度，只要簡單的在該技術名稱上點一下左鍵，就會進入到一個分析畫面，可以透過一些圖表知道該技術的全球使用度。不過有些數據可能還收集不夠多，但是這些資訊是一直累積中。
Subtle patterns, 免費、世界最精緻的專業背景圖+PS外掛
你自己作過無縫連接的背景圖嗎？
我猜不少人都沒有自己做過吧？我也是，最多只改過或者做一些簡單的圖騰式的。挪威有個愛做高級精緻背景圖的設計師開了Subtlepatterns.com這個網站，提供高精緻的背景圖免費下載，不但免費還特別分類並細心的打包成.zip檔案提供下載，所有檔案並且分類成10種類別以方便瀏覽取用。網站：Subtlepatterns.com
網頁每一頁的最下面有一個Top Tags把圖片分類好，點選任何一個都會過濾呈現的背景圖庫。瀏覽時亦可使用圖庫最上方的工具選擇預覽方式，好讓選擇時進入到最佳的視野。
不但如此，現在還提供Photoshop外掛
看到首頁上綠色的按鈕嗎？點過去就會進到外掛介紹頁面，不過這個方便的外掛是要11.99美金的。
Subtlepatterns.com的背景圖是目前免費原創背景圖裡最精緻的，在Themeforest的許多Top設計師都特別愛用他的背景圖來增加設計水平。如果你細細瀏覽一次全部的背景，一定會替你的設計工作永遠的、強強的加上不少分數。
Screenqueri.es，一定要用的全響應網頁設計測試網站
最強的全響應網頁設計測試網站
我曾經介紹過RWD 是響應式網站設計一定要有的書籤工具，今天要介紹我使用過最棒的全響應設計最棒的線上測試環境Screenqueri.es。直接在瀏覽器上測試超過60個行動裝置
支援超過60個行動裝置解析度，只需要從下拉式清單簡單的選一個裝置名稱即可進入測試狀態，當然你也可以隨時改變解析度看看預覽結果。不單可以測試http網站，就連本地端的連結也是可以直接測試的，厲害吧？不過你必須花一點時間註冊帳號才能使用。網站連結：Screenqueri.es
不只是iPhone, iPad, 主流品牌android…連Kindle或各大廠的平板電腦都可以一併測試了。而且是完全免費的。
X-icon Editor，最好的線上網頁icon 製作網站
想起Vista和Windows7初生時代在製作windows icon時使用 Axialis 公司的IconWorkShop，這是個很完美的專業icon解決方案，可以製作出完全符合微軟和蘋果作業系統需要的高解析icon，更能支援多尺寸的icon規格。網路的發展快速，僅擁有一個個人網站已經不夠，你會需要一些個人化設計的視覺識別來突顯自己。
X-icon Editor能讓你自己設計一個網站用icon，直覺的線上編輯器支援多種工具包含打字、畫圖、著色等等，並且還支援上傳圖片檔案作為你設計icon的基礎圖片。
網站：X-icon Editor
最後你會得到一個favicon.ico檔案。
 |
| 完成的圖片就像你看到這個站的圖像 |
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變成你的瀏覽器工具 |
如何測試呢？
畫面上方那一排就是測試工具了，畫面中間顯示的是你想要測試的網站，直接按下畫面中間上方的那一排任何一個按鈕，都可以看見全響應網站的預覽結果。
Brand Colors，品牌顏色色票
有時候需要找大品牌的顏色嗎？有個傢伙做了一個網站把收集全世界的大品牌主要使用顏色，讓你可以直接取得色碼。
網址：http://brandcolors.net/
瀏覽時下方有一個搜尋器，直接輸入品牌名稱可以直接翻出色票(前提是已經收錄)
