這是一篇由 Chris Kellett 為大家?guī)?lái)的教程，只需利用Ai CC 以及Muse CC，就可以在一行代碼都不寫(xiě)的情況下，完成簡(jiǎn)單的網(wǎng)頁(yè)設(shè)計(jì)和發(fā)布。

不過(guò)本文僅僅簡(jiǎn)單的介紹了大體的操作流程，更多細(xì)節(jié)還需諸位仔細(xì)研究一下。

如果你對(duì)建站有興趣，可以閱讀以下文章：
《不用編碼！全球10大高端建站神器推薦》
《設(shè)計(jì)師神裝：50個(gè)最好的免費(fèi)Photoshop插件》
《十八歲自學(xué)少年：我的個(gè)人網(wǎng)站是怎么做出來(lái)的》

01. 用AI進(jìn)行基本布局

工作流程的第一步是使用AI CC，進(jìn)行基本的布局，并且創(chuàng)建基本的矢量圖標(biāo)。完成后，在圖層面板中選擇釋放到圖層（順序）。這樣就能將設(shè)計(jì)導(dǎo)出，以供PS編輯。

02.用PS完成設(shè)計(jì)

根據(jù)AI導(dǎo)出的圖層，用PS進(jìn)行視覺(jué)設(shè)計(jì)。

03. 命名圖層

用PS完成設(shè)計(jì)時(shí)，要保持良好的習(xí)慣，例如：正確命名圖層、充分利用CC的生成器工具、確保在命名圖層和圖層組中不要有空格（可用下劃線和連字符代替）。

04. 導(dǎo)出圖像資源

所有圖層和圖層組命名完成后選擇文件>生成器>圖像資源（File>Generate>Image Assets）。保存為PSD文件，即可實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)出圖像資源為單獨(dú)文件。

05. 導(dǎo)入到Muse CC

導(dǎo)入到Muse CC，在平面圖中，選擇瀏覽器填充選項(xiàng)（Browser Fill），選擇保存的PSD文件；下一步，在選項(xiàng)中選擇組合，不設(shè)置填充顏色并且去掉邊框。
《神器：Adobe網(wǎng)頁(yè)設(shè)計(jì)軟件"繆斯Muse "下載》

06. 添加微件

回到平面圖，打開(kāi)主頁(yè)。選擇Featured News Composition widget（抱歉哦，小編無(wú)Muse CC，應(yīng)該是"特殊新聞組件"），然后便添加了一個(gè)組件。

07. 選擇字體

觸發(fā)組件目標(biāo)。選擇文本字體。可在控制面板和文本面板發(fā)現(xiàn)字體菜單，選擇Web Fonts并且添加字體。

08. 添加圖標(biāo)

組件的模板如圖所示。現(xiàn)在需要加入步驟1中設(shè)計(jì)的圖標(biāo)。選擇文件>置入，選擇圖標(biāo)和Logo。

09. 改變狀態(tài)

使用狀態(tài)（State）面板為組件的每個(gè)觸發(fā)器（Trigger）選擇正常、翻轉(zhuǎn)、激活狀態(tài)。可以通過(guò)效果工具改變PNG圖標(biāo)的顏色.

10.標(biāo)題樣式

標(biāo)題呢？畫(huà)一個(gè)合適尺寸的矩形框，然后使用字體工具輸入標(biāo)題。在段落樣式面板中點(diǎn)擊新樣式圖標(biāo)。在列表中選擇H1

11. 為組件添加簡(jiǎn)單的表單

在這里進(jìn)行保存。選擇觸發(fā)器（Trigger），在對(duì)象(Target)面板中刪除內(nèi)容。打開(kāi)組件面板拖出一個(gè)簡(jiǎn)單的填表組件，放在合適的位置。使用狀態(tài)面板，修改表單區(qū)域的具體樣式。

12. 選擇背景圖像

回到平面視圖中，選擇Browser Fill，丟棄圖像。但仍處于Broswer Fill面板模式，載入一張背景圖像，居中，調(diào)整比例，確保圖像填充入其中。

13. 本地預(yù)覽

利用 Muse的built-in（內(nèi)置）瀏覽器預(yù)覽來(lái)檢測(cè)。選擇預(yù)覽標(biāo)簽來(lái)測(cè)試。當(dāng)然，用瀏覽器測(cè)試一下也好。

14. 發(fā)布

利用Business Catalyst 服務(wù)發(fā)布網(wǎng)站,點(diǎn)擊發(fā)布（Publish）。輸入測(cè)試網(wǎng)站的名稱(chēng)，選擇一個(gè)想要做主機(jī)的地址，選擇OK。網(wǎng)站便會(huì)上傳，完成后，打開(kāi)瀏覽器。

15.在線編輯

若有改動(dòng)，便在改動(dòng)后，再次點(diǎn)擊發(fā)布按鈕，這樣會(huì)自動(dòng)上傳改動(dòng)部分（而不會(huì)上傳未改動(dòng)部分）。點(diǎn)擊管理按鈕，打開(kāi)Business Catalyst后臺(tái)，這樣可以實(shí)時(shí)在線編輯內(nèi)容。

16. 利用其他工具上傳

如果想要用其他FTP應(yīng)用上傳文件，選擇文件>導(dǎo)出為HTML選項(xiàng)，這樣便可以繼續(xù)用FTP工具上傳了。

17. 完成

好了，我們通過(guò)使用CC版的PS、MUSE、AI、Business Catalyst，完成了一個(gè)"沒(méi)有寫(xiě)一行代碼"的網(wǎng)頁(yè)設(shè)計(jì)與搭建。

原文地址：creativebloq
優(yōu)設(shè)網(wǎng)翻譯：@MartinRGB
 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊(cè)：網(wǎng)頁(yè)設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量58萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：