球体完全攻略 – PhotoShop制作立体球

UI设计入门系列,另有纯样式作图的技巧!

这是个  教程罐头 你能从中获得:
  • 制作立体效果的基本方法
  • 纯样式造型的技巧
  • 多个可快速使用的球体PSD源文件

立体球体完全攻略PSD 附件下载

首先,虽然这篇文章叫球体完全攻略,但实际上是讲解UI设计的基础方法,球体是这样做,其它的东西也是用相同或者相似的方法来完成的。
就想初学素描时先练习画球一样,练习制作球体也是UI设计入门的好办法。
上面的图就是本文附带的PSD,本文就是详细的讲解这些球是怎么怎么做出来的。
再此之前先来说说一些[原理]上的东西:

光影是立体效果根本

要在平面上展现立体感,就是要构造出符合现实的明暗对比效果,也就是光影效果,有了高光和阴影就有了立体感。

简单来说就是根据光源方向,把物体分为亮一点的明部和暗一点的暗部,在此基础上再增加效果。

1.用高光加强明部

2.做出明暗分割线(根据物体形状来做,能突出表现物体形状)

3.用暗部使用反光增加立体感

4.加上阴影增加空间感

需要注意的是暗部的反光,没有美术基础的初学者往往会忽略反光,反光是光源打在物体所在地面再反射到物体上的光,对体现物体立体感非常重要。
另外阴影中根据物体材质(比如玻璃)还可能会有物体反射或投射到阴影的光。

光的方向也是很重要的,制作立体效果的技巧就是想象光从哪里来,由于制作球体比较简单,不需要透视技巧,凭想象就行了。

光的方向-引用C1

 

具体制作

啰嗦了这么多,还是具体制作来的实际,制作球体一般有2种方法:
1.层叠法、2.纯样式法
“层叠法”就是通过不同的图层,先是底圆的图层,再做成阴影的图层,再做高光的图层,最后叠起来,用图层混合模式(叠加、柔光、变暗)和透明度,叠出最后的效果。这是使用PS制作图形最常用的方法。

动不动就要十几个图层制作的球体

这个方法的优点在于思路清晰(一层层叠起来就好了)、效果好(层多好表现细节)、自由度高(修改容易)、方便缩放。
但是也有缺点,就是麻烦,一层层的调整非常累,所以就有了第二种方法:“纯样式法”,仅仅用图层样式来制作完整的图形,用的时候画出一个圆直接应用样式就行了,非常方便快捷,而且也能做出惊人的效果:

纯样式法制作的球体

 

但是纯样式法最大的问题是制作起来需要对各种图层混合选项(斜面与浮雕、内发光、外发光)非常的了解,并且调整参数很复杂,很抽象,不像用层叠法那么直观。通过下面的具体制作你就会明白了:

层叠法具体制作


这是本文封面的球,它就是层叠法制作的,完成最终效果时共用了14个图层,这还不算制作过程中合并的图层。

上图就是这个球体的主要图层的拆分,底圆(包括质感)、反光、高光、明暗分界、阴影,制作的思路就是分别作出这5部分。

方法示例:

//这里给初学者推荐一个视频:【10分钟UI设计】立体物体绘制基础理论:光源、高光、反光与阴影 里面有很多基本技巧。太基础的这里我就不说了,因为本文末尾有PSD源文件,看源文件更容易理解。

值得注意的地方:

  • 色彩与明暗分离
    有些人总喜欢把高光图层带上颜色,比如一个红色的球,它高光设置成高亮度的红色,因为真实环境下的光是这样的。但是啊,这样做之后要把球换个颜色时就麻烦了,重新调整各个图层的颜色。所以我强烈建议: 高光、反光、阴影一定要用纯白色\黑色加上透明度来表现,颜色用单独的图层,通过图层混合模式(叠加、柔光、变暗)来模拟光的混色,这样不仅方便调色,而且方便图层再次利用。
  • 使用用易调整的方法
    制作一个作品不是一蹴而就的,不断调整和修改是来以避免的。所以为了方便修改(放大缩小、更改颜色)尽量用一些方便调整的方法,比如智能对象+智能滤镜的组合能随时调整滤镜效果,而普通滤镜使用后就除了返回历史记录就无法修改了。还有使用“挖空”和“剪切蒙版”代替图层蒙版等等

 纯样式法具体制作

纯样式法也被称为 One layer (单图层),用的是PS中强大的图层样式功能,要点是斜面与浮雕这个最复杂的图层效果和等高线(轮廓线)尤其是等高线。

等高线是个很强大、自由的东西,如果能随心所欲运行等高线,几乎能制作一切对称的图形。PS里的等高线是控制“值”分布的工具,比如控制透明度的分布(发光、阴影中的等高线),而在斜面与浮雕->等高线(不是浮雕里那个光泽等高线),是控制浮雕深浅\高度效果的,下面2张图能让你秒懂等高线:


其实纯样式法和层的法要做的都是构造出 “高光、反光、阴影、明暗分界”,只所用方法不同。

上图这是网上流传的一个 纯样式制作的球形,值得注意的是它用到了一个技巧,先做出明暗相反(上暗下亮)的浮雕效果,再通过等高线反转过来,很快速的制造出了很逼真光影效果,非常有立体感

样式的组合可以多种多样,没有绝对正确,效果出来就是好的,比如上面这个金属球,他的明暗效果就不是通过斜面与浮雕做的而是用径向(环形)的渐变,而它用浮雕做的是右上角金属的光晕。

小技巧:改变渐变位置

更多的,就自己去看PSD源文件吧,看源文件是学习的最好方法。


下载

百度网盘共享

 

版权引用参考
知识共享许可协议
本作品由Styletin.com创作,采用知识共享署名 3.0 中国大陆 (CC BY 3.0 CN)进行许可,这是一个“自由文化协议”
您可以任意复制、转载、传播本作品,但您有署名的义务(标注:“原作者:Styletin.com” 或列出原文地址 :http://styletin.com/archives/66 )。
本协议不限制商业用途,但请注意区分本作品引用部分。

这是本作品部分内容的引用来源,如有侵犯你的权益请联系 Styletin.com解决

这是本作品创作时参考的内容

 

 

你可能还喜欢这些:

9 条回复

  1. Kenneth说道:

    百度盘里的文件是空的!

  2. 聊爷说道:

    敢问阁下贵庚?

  3. 很牛逼啊!谢谢你的教程!。

  4. Soulami说道:

    百度网盘还是没了 消失在二次元,小的佩服阁下,大神级人物啊

  5. 四瓶说道:

    很喜欢,百度文件和谐了,能否再次上传供学习,感谢

发表评论

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