圖片來源: dudamobile

響應式網頁設計(Responsive Web Design)在這幾年越來越火紅，剛好，這次要開發項目的程式面會比較單純，所以想說，之前沒畫過RWD的畫面，就來試著畫一下，因此，就開始陷入Photoshop Guid這塊。不知道大家在使用 Photoshop設計時，都會怎麼處裡?

在製作過程，我使用的是 Photoshop 中的網格的擴充套件，由於，公司跟家裡使用的Photoshop CS版本不一樣，並且安裝的方法也不同。因此，在本篇主要以如何在Photoshop CS5裡面安裝Grid 網格擴充功能:

一、下載 GuideGuide 套件

使用的是GuideGuide這個擴充套件，可以進到他們官網，點擊Download下載擴充。 網址: http://guideguide.me/ 可以從這裡直接下載套件: Download for Photoshop (3.1.2)

另外一提，下圖是首頁的的GuideGuide展示範例，右邊的框格可以直接輸入數值，並且點擊Make grid按鈕，就可以在左方視窗預覽網格。

二、開啟 ADOBE EXTENSION MANAGER，安裝套件

安裝流程 1.點選上方的「安裝」 2.選擇 guideguide.zxp 擴充檔案 3.閱讀條款頁面，點擊「接受」 4.安裝成功之後，重新啟動Photoshop，讓擴充生效

小提醒! (*如果在安裝過程跳出權限不足的提示框，就必須以管理員身分開啟ADOBE EXTENSION MANAGER，並按照上方步驟安裝套件)

三、開啟Photoshop中的擴充套件

重新開啟Photoshop之後，依照流程開啟套件: “上方選單”->“視窗(W)"->“延伸功能”->“GuideGuide”

到這裡，先讓大家了解 GuideGuide，幾個重點: 1.以版面或選擇區域的範圍為基準來產生網格 2.可點選左、中、右按鈕選項，快速產生網格 3.可以透過調整參數的方式來設定 GitHub grid-notation 4.儲存設定值

安裝流程，就介紹到這裡。近期將會介紹Photoshop CS6以上版本的安裝方式及格線設計經驗分享。

關於這些，你有甚麼想法嗎，歡迎在下方討論~