psd转成Muse2018dem(响应式)实现

 

 

Muse2018 demo（响应式）

 

概念：断点值的是浏览器窗口宽度值

为了适应不同宽度而设置不同断点值

 

不同宽度适应往往有两种网页

响应式网页与自适应网页的区别：

响应式

响应式针对的是不同分辨率设备而进行的适配式设计，以利用@media规则为主要手段

【主要针对web端(电脑)，但在移动端显示的时候，能显示主内容，不会显示其他侧栏之类的，把部分内容隐藏掉】

而自适应更多的是在说移动端，

自适应则忽略@media以比例布局为主，目的是适应不同的浏览器窗口大小
【在移动端开发的webapp，内容显示都是一样的，但在不同分辨率的屏幕下，它可以自动满屏显示，不会出现横向滚动条之类的， UI，图片会伸缩，或者有更多的空白区域】

 

其他固定式网页 宽度都不会变。

制作顺序（需要注意）

1、先制作好PSD模板，不要直接在Muse当中完成视觉设计。

2、处理好PSD文件中智能对象的关系以及图层顺序的关系。

3、网页内容与背景图片的关系一定要分开。

4、先做好一个断点的布局，然后先做最大的宽度适配。

5、做好第一个和最大的适配后，开始调整网页元素的对齐参考点。

我们建议把基础断点的宽度设置为1280px，然后设置一个最大的适配宽度，我这里设置的是1600px；在适配的过程中，除了在1600px下调整元素的布局，还可以通过摇杆，左右拖拉，观察过渡的过程是否有问题出现。

6、开始适配小(不同)宽度的布局

做好第一个和最大的适配后，开始调整网页元素的对齐参考点。

我们可以看到，目前这个标题是居中对齐为参考的，那么在页面缩小或者扩大的时候，他就会以网页的中心为参考点，进行缩放；也可以是向左固定，参考元素到网页左边的距离，但左右固定通常是logo和菜单用的。

 

7、观察内容是否超出当前断点的编辑区域。

         观察内容是否超出当前断点的编辑区域

通常在不同的断点下，由于元素的缩放模式没有选择对，通常都会超出了断点编辑范围内，在超出后需要按照你需要进行调整。

 

最后检查不断断点缩放的过程中，图片的缩放规则是否恰当。

 

8、最后检查不断断点缩放的过程中，图片的缩放规则是否恰当。

选择元素后，我们可以在Resize看到，图片的缩放模式，我们可以通过摇杆调整的过程中去观察，选择一种最合适的缩放方式；而类似LOGO之类的，就可以固定不变。

详情调整过程: http://musecn.cn/?p=1872

具体实现：

先制作好PSD模板，不要直接在Muse当中完成视觉设计

这PSD模板只需要做好桌面版的就可以了，移动端的不需要做，我们在Muse当中完成。处理好PSD文件中智能对象的关系以及图层顺序的关系

(需要注意，处理的过程越细致越好，尤其要注意图层顺序关系，一定要分好组)

 

(另外，图层中含有蒙版和图层效果的图层，需要把他转换成智能对象，并合并蒙版)

 

运行软件MUSE

网页内容与背景图片的关系一定要分开

1.进入到Muse中后，新建一个站点，首先我们需要导入PSD，Ctrl+D。注意勾选Cilp to layer（裁切图层），找到最后一个图层然后Shift 全部选中。。剪裁到图层内容。。选中点击OK后，把布局放在左上角对齐。

 

 

 

 

 

 

 

 

 

 

 

 

导入后发现比例不一  调整比例（原因是psd大小）

 

 

 

 

 

 

把基础断点的宽度设置为1280px，然后设置一个最大的适配宽度，我这里设置的是1600px；在适配的过程中，除了在1600px下调整元素的布局，还可以通过摇杆，左右拖拉，观察过渡的过程是否有问题出现。

 

 

后面就是调整断点和布局调整

通过调整不同断点（缩放）观察大小是否合适调整对齐方式 大小等

同样是先调整布局，然后缩放元素，设置元素的对齐参考点。

 

最后调整成