0元购京东自营斐讯K2路由器返399元活动
置顶

利用Photoshop制作立体的折叠图

作者:     目录: 图设计处理     发表: 2010年08月14日

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

最终效果图:

利用Photoshop制作立体的折叠图

PSD 源文件下载

制作原理:

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

制作步骤:

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

利用Photoshop制作立体的折叠图

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

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

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

利用Photoshop制作立体的折叠图

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

利用Photoshop制作立体的折叠图

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

利用Photoshop制作立体的折叠图

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

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

15 个评论

  1. 爱在华师 says:

    很简单易学
    PS:文章发布时间怎么没有?

  2. zwwooooo says:

    这个效果简单好看

  3. 学夫子 says:

    学两招,以后教女朋友,哈哈 🙄 😀 8)

  4. 卢松松 says:

    还好没搞,我都是让别人做的

  5. 园子 says:

    看上去效果确实很立体。

  6. 红心草 says:

    做的不错,学习了。

  7. imfigo says:

    不错哦。期待更多作品。

  8. 风羽 says:

    简单明了,一看就明白,学习了。

  9. 任鸟飞 says:

    @风羽 能看明白就好,我就怕别人看着费劲。 😉

  10. oogps says:

    留个记号,下次再来画。

  11. 汤敬云 says:

    😀 不错啊 受益了 谢谢哈

  12. 老张博客 says:

    做出来的效果不错呀。

  13. 皇家元林 says:

    嗯,不错,我又学了一招。呵呵

oogps进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注