任鸟飞网站设计博客

网页美工设计中经常会用到图形的立体折叠效果，相对于平面形式来说，立体效果更符合人们的视觉审美，而这种立体的折叠效果制作起来也非常简单，下面就来说一下其制作过程。

最终效果图：

PSD 源文件下载

制作原理：

从上面的效果图中可以看出，此图为中心对称，因此只需先做好其中的一侧即可，因为是折叠的形式，本例中使用了3个图层来制作折叠部分，分别为底层、折叠、顶层，其中顶层颜色最浅（#ececec），底层次之（#cbcbcb），折叠层颜色（#a3a2a2）最深。

制作步骤：

1. 新建文件，利用工具栏的 矩形选框工具 画 顶层，如下所示：

2.  利用工具栏的 矩形选框工具 画 底层，如下所示：

注意图层的顺序，顶层在上，底层在下。

3. 利用工具栏的 矩形选框工具 画 折叠部分，如下所示：

4. 折叠区别变形，选中上一步的 折叠 图层，编辑/变换/斜切，将折叠部分的右下角往上托，最终效果如下：

5. 调整图层顺序，图层从上到下排列顺序为 顶层/折叠/底层，最终效果如下图：

6. 到这里立体的折叠效果就出来了，根据需要补上颜色、图层样式等。

总结：制作立体的折叠效果其实很简单，就3个图层之间的层叠顺序，有兴趣的可以下载PSD源文件看看，源文件下载链接。