是中一款非常實(shí)用的網(wǎng)頁布局?jǐn)U展插件，有了這款插件可以快速搭建網(wǎng)頁布局，包括幻燈片、內(nèi)容布局、添加等，可以讓您快速搞定網(wǎng)頁原型設(shè)計(jì)。有需要的朋友可以下載！
使用教程：
基本布局
讓我們從新建一個(gè)新文檔開始。
新建文檔
首先，我們需要點(diǎn)擊“ [+] New ”按鈕來新建一個(gè)空白文檔。文檔自帶柵格，總寬度，間隔為30px，方便你為網(wǎng)站進(jìn)行設(shè)計(jì)。
添加
在“[+] New ”按鈕下方，你可以看到一系列選項(xiàng)卡，其中一個(gè)是。當(dāng)我點(diǎn)擊其中的一個(gè)的時(shí)候，會(huì)自動(dòng)在文檔中生成。
在這個(gè)案例中，我們使用的的樣式是Logo在左，導(dǎo)航在右。在圖層面板中，你可以看到中所有圖層均置于文件夾中，你可以根據(jù)需求進(jìn)行命名。
注意：如果你隨后選擇其他的，會(huì)幫你替換掉。
增加區(qū)域（ ）
盡管大尺寸和區(qū)域有缺陷，但是很多網(wǎng)站依然選擇保留這個(gè)區(qū)域。中內(nèi)置了許多樣式，增加區(qū)域和添加一樣容易，點(diǎn)擊選擇即可。
案例中，我們選擇最后一個(gè)樣式，于是就生成了一個(gè)包含標(biāo)題、內(nèi)容和兩個(gè)按鈕的區(qū)域。
正如上圖所示，你可以在圖層面板中看到區(qū)域的圖層分組。
增加內(nèi)容區(qū)域
增加內(nèi)容區(qū)域也一樣簡單。中第三個(gè)選項(xiàng)卡就是內(nèi)容區(qū)域。
我選擇了第三個(gè)樣式，點(diǎn)擊后添加了三列內(nèi)容，每列包含標(biāo)題、圖片和預(yù)制的內(nèi)容。
增加更多模塊
在中，每個(gè)模塊相當(dāng)于一個(gè)獨(dú)立的內(nèi)容塊。它的內(nèi)容和用途由設(shè)計(jì)師來決定。和、滑塊區(qū)域不同，我們可以在文檔中添加多個(gè)模塊。
在案例中，我們添加了第一個(gè)模塊，其中包含一個(gè)橫跨整個(gè)柵格的圖片，標(biāo)題和預(yù)制的文本。
添加
通常網(wǎng)頁的最底下都會(huì)添加，同樣的，為我們內(nèi)置了一些可選的：
在這個(gè)階段用ps網(wǎng)頁制作的基本步驟，我們已經(jīng)完成了網(wǎng)頁設(shè)計(jì)的必要部分，從到，只需要幾次點(diǎn)擊就可以了。為了更好的布局，你還可以這樣添加一些合理的空檔：
現(xiàn)在我們已經(jīng)完成了基本的布局，接下來，我們可以定制它，讓它看起來更符合一個(gè)高保真的原型。
細(xì)節(jié)調(diào)整
當(dāng)我們?yōu)槲臋n進(jìn)行個(gè)性化調(diào)整的時(shí)候，盡可能保證每個(gè)圖層的完整性是基本原則。每個(gè)圖層在進(jìn)行調(diào)整的時(shí)候，不能對(duì)其進(jìn)行破壞性的修改，這樣可以確保原型的可調(diào)整性。這樣一來，我們就需要用到PS的以下特性：
智能對(duì)象和智能鏈接對(duì)象
調(diào)整圖層
圖層效果
此外，我個(gè)人比較喜歡盡可能少地使用圖層。
使用智能對(duì)象
在置入LOGO的時(shí)候，將其調(diào)整為智能對(duì)象是非常有必要的。
首先，你需要在組中找到那個(gè)名為LOGO的圖層，鼠標(biāo)右鍵點(diǎn)擊它，將其轉(zhuǎn)換為智能對(duì)象。
為了將LOGO置入這個(gè)圖層，我們?cè)谶@個(gè)圖層上點(diǎn)擊右鍵，選擇“編輯內(nèi)容”。
這個(gè)時(shí)候，我們會(huì)在PS中打開一個(gè)PSB格式的新文檔，原來PSD中的這個(gè)矩形的智能對(duì)象會(huì)變?yōu)橐粋€(gè)透明圖層，我們將準(zhǔn)備好的LOGO置于這個(gè)PSB文檔中，左對(duì)齊，這個(gè)時(shí)候如果你保存了這個(gè)PSB文檔，原來的PSD文檔中會(huì)同步改變。
此時(shí)，我們可以將這個(gè)LOGO智能對(duì)象圖層輕松改變、調(diào)整。為了更為有效地使用，我們可以在這個(gè)圖層上點(diǎn)擊右鍵，選擇“轉(zhuǎn)換為鏈接…”選項(xiàng)。
隨后，PS將會(huì)提醒你保存PSB格式的智能對(duì)象文件。作為網(wǎng)站圖片體系的重要組成部分，這個(gè)LOGO你會(huì)用上的。通常，我們會(huì)將其保存到一個(gè)名為“image”的文件夾中。
你在中編輯好了LOGO的智能對(duì)象，它還可以在中復(fù)用。在的組中找到LOGO的圖層用ps網(wǎng)頁制作的基本步驟，右鍵點(diǎn)擊它，選擇“替換內(nèi)容”。
這個(gè)時(shí)候打開你保存那個(gè).PSB 文件的文件夾，選擇LOGO，那么底部需要用到LOGO的地方也搞定了。
其他地方的處理方式也是類似的。
使用圖層效果
調(diào)整圖層效果想必大家都已經(jīng)非常熟悉了。在案例中，我們借助圖層效果來為按鈕上色，添加漸變。具體的操作在這里就不贅述了。
重復(fù)這些步驟，這里就是需要你精心打磨的設(shè)計(jì)細(xì)節(jié)了。它們讓你的網(wǎng)頁的可讀性更高，增加視覺表現(xiàn)力，等等等等。
使用調(diào)整圖層
調(diào)整圖層的存在，使得設(shè)計(jì)師可以以非破壞性的方式來定制圖層的色調(diào)（亮度、對(duì)比度等）。在案例中，我們可以將模塊中的圖標(biāo)變?yōu)楹诎住Ｔ谀K組中找到對(duì)應(yīng)的圖層，右鍵點(diǎn)擊，選擇“編輯內(nèi)容”選項(xiàng)，隨后，點(diǎn)擊“新建調(diào)整圖層”然后選擇黑白效果就好了。
最終成品
最后，將預(yù)制的文本內(nèi)容（標(biāo)題、文本）替換成你需要的內(nèi)容，然后這個(gè)原型就算是成品了！
安裝方法：
Step 1：下載擴(kuò)展
先從官網(wǎng)下載對(duì)應(yīng)版本的 擴(kuò)展（下載鏈接），如下圖，點(diǎn)擊網(wǎng)頁頁腳的下載按鈕，需要提供和帳號(hào)才能下載，不過我們也很貼心的上傳到微盤上了。
Step 2：安裝路徑
這里西西下載的是CS6版本，解壓后把文件夾整個(gè)復(fù)制到CS6安裝目錄的：Plug-ins–目錄下。
Step 3：打開擴(kuò)展
打開PS軟件，然后點(diǎn)擊菜單窗口>-擴(kuò)展功能即可打開。