这阵子课程在讲解作品集有关的知识，在视觉实现的部分上，正好有同学问了下图这样的图例应该如何设计。

想了想，这种氛围型用图的应用在作品集中是必要的，同时还有大量页面、组件的展示是需要这种倾斜的。但是目前多数人只知道如何使用 Mockup硬套，完全没有自己独立处理界面展示的能力，所以今天我就做一篇分享，如何使用 PS 来实现这种倾斜界面展示的效果。

第1步：首先要准备要相关的界面

把要实现的界面得确定设计出来，同时准备进行切图。切图的逻辑即分离出之后所有需要悬浮的组件，然后将背景和这些组件分别进行导出。

需要注意的是，切出来的组件是需要被强调的部分，也尽量是页面中视觉效果比较突出的，如果最后效果不满意，可以回来重新做切图。

第2步：使用背景图确认倾斜角度

将上面那些切图导入到 PS中，并将每个图层创建成“智能对象”，确保位图不会因为后续的操作和有损耗。

选中大图图层，然后右键 “斜切”，进入斜切模式，调整到你满意的角度。

如果觉得自己调都不满意，那就建议你们找一个倾斜的案例出来叠在后面，对着它做倾斜。

第3步：记录倾斜动作

前面的倾斜我们只倾斜了一个图层，其它图层还没动，所以我要保证后面的图层实现相同的效果，就要设置相同的参数。所以要先在倾斜模式下，查看该图层最终实现的倾斜数值，为了方便可以把它们微调成整数。

在这里重点建议大家学会使用 PS的动作录制功能，首先打开动作面板，点击新建动作按钮，设置完参数后，再点击录制按钮，进入动作录制的状态。

然后让该矩形进入倾斜编辑状态，将参数设置成和之前想通的状态，然后退出编辑。完成这些操作后再在动作面板里店停止录制，就可以保存一个制作相同倾斜角度的动作出来，用于后面复现。

第4步：实现元素的布局

有个这个动作，下一步就是选中其它画面图层，然后在动作面板中选中该动作点击执行，就可以生成角度一致的效果，而不是通过手动一点点去拖。

完成所有图层的倾斜以后，就可以手动拖拽它们进行排列了。建议先将它们排列出最原有的状态（和原图一致），如果排起来怕出错，可以生成一完整的成品进去做倾斜然后对照。

这个操作是为下一步做准备的，那就是等距地移动不同的图层。以为要实现悬浮效果，意味着这些图层的水平位置和底部图层是不一致的，如果手动操作，那么每个组件和背景的位置关系就是不一致的，看起来会很奇怪，所以我们需要在这里对它们进行统一的位移。比如往上往左移动同等像素（Shift+方向键）。如果出现了比较不和谐的地方，再另外优化即可。

之后，就是对需要强调的组件做放大的效果，使用 Ctrl/Com + T 进入缩放模式，然后再对长宽的输入框中输入 1.1 - 1.3 倍的数值，统一放大的比例。

第5步：实现投影的效果

悬浮的效不仅仅是位置的问题，也需要用投影来强化氛围。而优秀的投影不是简单的双击图层，在属性栏里添加投影设置。

自然的投影需要我们手动去处理，例如绘制一个近似的几何图形做模糊再叠加，或者使用原图做模糊再叠加不同颜色作为投影，可以参考我们以前做过的这篇投影的说明。

文章链接：UI 视觉教程 | 一篇教会你 APP 中的投影是如何设计的！所以，我们可以看看前后投影使用的对比：

第6步：添加背景的透明和模糊

这里可以添加背景图了。背景图的选择尽量使用和当前色系接近的，或者一些黑白灰的色系，避开使用对比色或者大红大绿特别刺激的。放完图就可以把原有的图层拖拽到合适的位置完成最终的排版。

然后，就要将主背景做透明和模糊的效果。这个效果不算必须得，但如果要实现，就要做几步操作。首先原有的图层导出中，删除背景图层。然后在PS内独立创建个同等尺寸的矩形做倾斜当背景置于下方。

再将背景图复制一层添加到上面这个矩形上方进行蒙版操作，然后给出较低的透明度并模糊它，就可以实现毛玻璃的效果。想要效果更好可以再在上面叠加一层杂色效果。

第7步：最终的优化和升华

以为上面那部调整完就结束了？ NO，NO，NO！

最后还可以使用一些其它的骚操作增加氛围，你可以选择将整个画布导出成位图，然后发手机。再在你的手机中打开神器美图秀秀、Snapseed、Vsco 等工具（堕落了）……

对它添聚焦或者叫模糊的效果，将对焦中心对准画布某些重要的区域，再设置模糊的参数。模糊的参数一定不要设太大，营造一个轻微的模糊感即可。

除此之外，也可以再添加一些简单的效果，如对比度控制、锐化效果等等，这个就靠你们自己判断了。下面是我们最后的产出结果。

结尾

这些技巧可以有非常多的应用，想要让作品集包装质感上的去，就一定要自己动手去熟悉这些操作，然后就可以应用在作品集的不同展示中去。

这两天还在准备一篇万字长文，明晚会更新上来！

我们下篇再贱~

B端产品设计课程招生预约中，有提升需要的就来找我~