利用Photoshop制作立体的折叠图

作者:     目录: 图片     发表: 2010年08月14日

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

最终效果图:

利用Photoshop制作立体的折叠图

PSD 源文件下载

制作原理:

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

制作步骤:

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

利用Photoshop制作立体的折叠图

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

利用Photoshop制作立体的折叠图
注意图层的顺序,顶层在上,底层在下。

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

利用Photoshop制作立体的折叠图

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

利用Photoshop制作立体的折叠图

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

利用Photoshop制作立体的折叠图

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

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

15 个评论

Post Comment

Your email address will not be published. Required fields are marked *