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