怎么制作響應(yīng)式網(wǎng)站（上）

• 作者：新網(wǎng)
• 來源：新網(wǎng)
• 瀏覽：100
• 2018-02-27 17:50:04

AdobeMuse 2018，提供了制作響應(yīng)式網(wǎng)頁設(shè)計(jì)的功能，方便網(wǎng)頁設(shè)計(jì)師在無代碼的前提下，進(jìn)行網(wǎng)頁的響應(yīng)式布局設(shè)計(jì)，通過以下簡(jiǎn)單的制作案例我們可以快速掌握制作的流程，另外，我會(huì)提及7個(gè)制作流程中需要注意的順序，這個(gè)順序需要重視。

 AdobeMuse 2018，提供了制作響應(yīng)式網(wǎng)頁設(shè)計(jì)的功能，方便網(wǎng)頁設(shè)計(jì)師在無代碼的前提下，進(jìn)行網(wǎng)頁的響應(yīng)式布局設(shè)計(jì)，通過以下簡(jiǎn)單的制作案例我們可以快速掌握制作的流程，另外，我會(huì)提及7個(gè)制作流程中需要注意的順序，這個(gè)順序需要重視。

制作順序(需要注意)

 

1. 先制作好PSD模板，不要直接在Muse當(dāng)中完成視覺設(shè)計(jì)。

 

2. 處理好PSD文件中智能對(duì)象的關(guān)系以及圖層順序的關(guān)系。

 

3. 網(wǎng)頁內(nèi)容與背景圖片的關(guān)系一定要分開。 先做好一個(gè)斷點(diǎn)的布局，然后先做最大的寬度適配。

 

4. 做好第一個(gè)和最大的適配后，開始調(diào)整網(wǎng)頁元素的對(duì)齊參考點(diǎn)。

 

5. 開始適配768px平板寬度和375px手機(jī)寬度的布局。

 

6. 觀察內(nèi)容是否超出當(dāng)前斷點(diǎn)的編輯區(qū)域。

 

7.最后檢查不斷斷點(diǎn)縮放的過程中，圖片的縮放規(guī)則是否恰當(dāng)。

 

步驟教程：

 

①先制作好PSD模板，不要直接在Muse當(dāng)中完成視覺設(shè)計(jì)這PSD模板只需要做好桌面版的就可以了，移動(dòng)端的不需要做，我們?cè)贛use當(dāng)中完成。

 

②處理好PSD文件中智能對(duì)象的關(guān)系以及圖層順序的關(guān)系(需要注意，處理的過程越細(xì)致越好，尤其要注意圖層順序關(guān)系，一定要分好組)

 

(另外，圖層中含有蒙版和圖層效果的圖層，需要把他轉(zhuǎn)換成智能對(duì)象，并合并蒙版)

 

③網(wǎng)頁內(nèi)容與背景圖片的關(guān)系一定要分開

 

1.進(jìn)入到Muse中后，新建一個(gè)站點(diǎn)，首先我們需要導(dǎo)入PSD，Ctrl(Com)+D。注意勾選Cilp to layer(裁切圖層)，點(diǎn)擊OK后，把布局放在左上角對(duì)齊。

 

2. 導(dǎo)入PSD后，發(fā)覺還是容易存在圖層先后和背景圖片張開的問題，這些問題取決于你處理PSD文件圖層順序和智能對(duì)象的細(xì)致程度,我們可以通過圖層上移下移來進(jìn)行調(diào)整。

 

以上就是怎么制作響應(yīng)式網(wǎng)站的七個(gè)步驟。