AdobeMuse 2018,提供了制作響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的功能,方便網(wǎng)頁(yè)設(shè)計(jì)師在無(wú)代碼的前提下,進(jìn)行網(wǎng)頁(yè)的響應(yīng)式布局設(shè)計(jì),通過(guò)以下簡(jiǎn)單的制作案例我們可以快速掌握制作的流程,另外,我會(huì)提及7個(gè)制作流程中需要注意的順序,這個(gè)順序需要重視。
AdobeMuse 2018,提供了制作響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的功能,方便網(wǎng)頁(yè)設(shè)計(jì)師在無(wú)代碼的前提下,進(jìn)行網(wǎng)頁(yè)的響應(yīng)式布局設(shè)計(jì),通過(guò)以下簡(jiǎn)單的制作案例我們可以快速掌握制作的流程,另外,我會(huì)提及7個(gè)制作流程中需要注意的順序,這個(gè)順序需要重視。
制作順序(需要注意)
1. 先制作好PSD模板,不要直接在Muse當(dāng)中完成視覺(jué)設(shè)計(jì)。
2. 處理好PSD文件中智能對(duì)象的關(guān)系以及圖層順序的關(guān)系。
3. 網(wǎng)頁(yè)內(nèi)容與背景圖片的關(guān)系一定要分開(kāi)。 先做好一個(gè)斷點(diǎn)的布局,然后先做最大的寬度適配。
4. 做好第一個(gè)和最大的適配后,開(kāi)始調(diào)整網(wǎng)頁(yè)元素的對(duì)齊參考點(diǎn)。
5. 開(kāi)始適配768px平板寬度和375px手機(jī)寬度的布局。
6. 觀察內(nèi)容是否超出當(dāng)前斷點(diǎn)的編輯區(qū)域。
7.最后檢查不斷斷點(diǎn)縮放的過(guò)程中,圖片的縮放規(guī)則是否恰當(dāng)。
步驟教程:
①先制作好PSD模板,不要直接在Muse當(dāng)中完成視覺(jué)設(shè)計(jì)這PSD模板只需要做好桌面版的就可以了,
移動(dòng)端的不需要做,我們?cè)贛use當(dāng)中完成。
②處理好PSD文件中智能對(duì)象的關(guān)系以及圖層順序的關(guān)系(需要注意,處理的過(guò)程越細(xì)致越好,尤其要注意圖層順序關(guān)系,一定要分好組)
(另外,圖層中含有蒙版和圖層效果的圖層,需要把他轉(zhuǎn)換成智能對(duì)象,并合并蒙版)
③網(wǎng)頁(yè)內(nèi)容與背景圖片的關(guān)系一定要分開(kāi)
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ā)覺(jué)還是容易存在圖層先后和背景圖片張開(kāi)的問(wèn)題,這些問(wèn)題取決于你處理PSD文件圖層順序和智能對(duì)象的細(xì)致程度,我們可以通過(guò)圖層上移下移來(lái)進(jìn)行調(diào)整。