Guideguide，幫你計算並生成導線的Photoshop模組

在製作響應式網頁設計時，經常要在Photoshop先畫好導線，以確認每一個欄位的寬度或每個section的高度，雖說計算寬度一定要先自己算好誰也幫不上忙，但計算間隙這件事更煩人了，且實際精準地去拉導線定位時也是一個痛苦的事。Guideguide就是幫你做這兩件事的，立刻畫出來。

網站：Guideguide.me

不只是絕對位置的導線佈局

除了先行計算好自己要的整體結構佈局再用Guideguide拉導線以外，有時候我們也會從固定需要的區塊來開始延伸計算相對間隔與位置，Guideguide也能這樣畫！

這樣的模組竟然是免費的！

Read more

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生成的圖片。

Read more

Gridpak，響應式網頁Grid佈局工具網頁

話說我上半年的時間都在做全響應式的WP主題(樣板)，做一個主題之前都要拿筆和小算盤計算後才能開始第一步。Gridpak是一個很屌的響應式網頁工具，透過預先佈局可以得到一份計算好的Grid樣式，內容有png圖檔、html、css、js、scss、less。

為什麼做主題要計算呢？因為你必須在一開始就佈局好主題各個部位的寬度，以及在全響應環境下的變化，也因此實際呈現時百分比所影響到的寬度是否合乎主題內容中各個部位所需要的最小寬度或者最大寬度，這部份應該是有工作上實際碰到的前端設計師比較能理解，所以言而總之你既然會來看了這一邊文章八成你也看得懂。

網站：Gridpak

使用方式：

1. 非常明顯第一步是拉動畫面中間的工具來決定寬度。
2. 然後設定式樣所需要的欄位數、間隔、寬度等等。
3. 最後按下方紅色按鈕的Download，就可得到你需要的檔案了，這個檔案裡的東西有夠豐富的，不但可以讓你直接取得一個基礎的html+css範例，還包含了其他我尚未去學習的scss、less，真是酷爆了。

Read more

原來CSS顏色有名稱

原來css的顏色名稱不只是black, white, red, blue, green...這些個純色有名字而已，好多顏色都是有名字的喔！

這個網站收集了顏色名稱，一共有147個顏色是有名稱可以直接使用的。
網址：http://www.147colors.com/grid/

酷吧！現在可以背下幾個顏色來噹一下公司的主管了，讓他們看看你的深度。

Read more