大家都知道，每次在PS里面拉參考線是一件很痛苦的事情，特別是要按照規定的寬度創建Grid的時候，而這回，Cameron Mcefee提供了一個插件“GuideGuide”，如其名，的確是非常方便的一款創建參考線的插件。
今天為大家介紹一款非常實用的PS小插件GuideGuide，它提供了一個非常便捷的方式生成像素級別的輔助線（欄，行，中線……）

想像一下在PS里面創建好一組多欄目的輔助線：頁面多寬，分2欄目還是3欄，分欄里面又有多少個分欄……數學不好的同學估計手心都開始冒汗了。確實，在PS里面創建網格是個非常痛苦的事情，不少設計同學都是大概估算一下寬高來拉輔助線；或者畫一個矢量圖形，然后復制移動來分列。如果總的寬度有了變化之后，又將他們整體拉寬來重新分列。沒耐心的人估計已經開始喊：“我是設計師，不是數學家”，有耐心的人會重新算過一遍之后再來，還有公式如下：

（頁面寬度 – （間隙寬度 x （分欄數 – 1） ））÷ 分欄數 = 欄目寬
看起來是不是有點想暴走？設計個頁面還要搞這么復雜的東西。

實用的小工具GuideGuide來了
為啥要把時間花在數學上，而不是省心一點，留出多一點時間來將設計做得更好呢？只要輸入一些數字，GuideGuide就會利用PS里面的輔助線自動的在你的文檔中劃分好網格。當你用了之后就會由衷的覺得：很好很強大。而且，它真正的強大之處在于：支持選框工具–如果你的文檔中有選框的話，它可以在選區內生成對應的輔助線。

分欄與分列

頁面需要分欄和等比間隙？GuideGuide輕松搞定

找到中點

GuideGuide讓你找到對象的中點變得易如反掌，只要畫一個選區或者在圖層面板(ctrl + 鼠標左鍵）創建一個選區，然后點擊中點按鈕，就可以立即創
建中點線。

然后將此列中的其他元素根據需要來對齊

存儲常用的劃分為選項
如果你經常用同一種網格劃分方式，可以存儲為選項方便以后隨時調用
發揮你的創造力
GuideGuide有分欄，有邊距，有中點…… 發揮你的想象力它可以做的更多
劃分導航
當你要將一定寬度的導航劃分為N等分的分欄的時候，是不是又要計算寬度了？現在不用煩惱了，用GuideGuide吧

1.用選區工具畫一個你導航寬度的選區
2.輸入你導航的分欄數以及他們之間的間距
等邊距矩形繪制

當你想繪制一個與你當前元素等邊距的矩形，是不是又要計算了？

1.在圖層面板（ctrl + 鼠標左鍵）創建選區
2.在邊距欄輸入一個負數，然后點擊圖標，GuideGuide會自動輸入四邊等距的指數，然后回車創建輔助線
3.根據新創建的輔助線繪制四邊等距離的矩形

基準線網格繪制

利用GuideGuide便捷的行高設置，輕松創建整頁的橫向對齊基準線

1.輸入你想要的行高
2.將你頁面中的元素相應的對齊

剩余像素分配
在分欄的時候不是永遠都能完美的等分，如果你要在一個10px寬度內分3欄，那么多余的像素怎么辦？設置里面的剩余像素分配設置決定將多余的像素分配到哪里，默認是“右下角”

官網下載地址：Download

下載完畢后開啟 Adobe Extension Manager 安裝插件，然后打開PS在 windows > extensions 下面開啟窗口

源文地址：Web Designer Tenoji

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座：每月邀請國內互聯網公司設計前輩及行業總監在群內及YY語音（YY頻道：15335158）分享實戰經驗。
設計微博：擁有粉絲量39萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：