關於網路那些事...

網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事

前進 RWD Grid 設計 - 談Photoshop CS5 網格設計擴充


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

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


如果你喜歡我們的文章內容,請在這裡按個讚



最新文章推薦