圖片來源: 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以上版本的安裝方式及格線設計經驗分享。

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