Adobe 近年來不斷的在做整合工作,每當新的版本又加強了自家軟體的工作流程,幾乎都整合在一起,檔案與不同軟體間的的支援性,其他軟體因該沒有的比。photoshop外掛在較早期,都是在強化功能與簡化工作流程,因為畢竟並不是所有使用者都那麼專業在使用Photoshop,到了CS版本,也開始整合外掛程式,大家因該不太會去注意Adobe Extension Manager這擴充管理程式(管理Adobe所有軟體的擴充套件),雖然在安裝時就會一起裝進去,因該很少能用XD,其實Adobe也想要搞得像APP一樣,但早期還是沒搞起來,近年來比較有起色。

進入主題吧!網路上已有人介紹過的部份我就不多說了,我在說說別人沒說過的,在用Photoshop製作網頁時,用參考線拉網格系統因該是件簡單的事(什麼是網格系統XD問神),但非常麻煩(或是沒人在拉==”),雖然都有人提供現成的已拉好的檔案,或是現成的步驟記錄檔案,還是有些不方便,GuideGuide解決了這件麻煩事,只要設定好數值就可自動產生,就以在網路上號稱程式設計師的救星Bootstrap的網格系統為例子(我碰到的程式設計師看到Bootstrap好像見到鬼一樣,或許我碰到的不是程式設計師…XD)。

Bootstrap的頁面寬度為1170px,共分割成12欄位,每欄寬度為65px,每欄間距為30px,好拉!開啟photoshop開啟新檔,新檔尺寸為1700px,高度就隨便啦!就看頁面要做多長了,在增加一個矩形輸入上面1170px寬度(高度就適當就好),再將矩形置中於背景圖層中央,按住Ctrl選取矩形圖層產稱選取範圍,在開啟GuideGuide套件工作面板,輸入上面數值如下圖。

gg01

在按下Make grid就會將網格欄位分割出來,如下入圖,是不是很方便阿!

gg02

這樣在網業排版時需要網格參考線時是不是就不需要一條一條拉了,在網頁設計時版面區塊也有個依據(附上參考圖)。

gg03

GuideGuide套件下載官網

最後修改日期: 2019 年 2 月 21 日

作者