安柏 发表于 2014-9-24 04:58:42

教你绘制一枚水晶纽扣教程

      如何绘制逼真的高光？如何创造立体的感觉？今天分享一个简单水晶纽扣的教程，仅仅利用图层样式跟画笔就可以绘制出精美的高光+3D感，最适合UI设计刚入门的同学了，练习的时候要不断去思考高光和阴影的关系，以及实物的状态，这样才能短期内快速进步呦！
或许入门的PS学徒们都曾经试图制作过诸如一滴水、一个气球或一只苹果这样的拟物玩意儿的设计。通常让人感到迷惑的是，为什么我们要画一个苹果而不是用照片拍下一个苹果再把它抠出来？我的答案是，学习是没有捷径可走的。比较快速的做法当然同样可以达到效果，但它带来的收获远没有你用心画一只苹果来得更多。
今天我们要制作的是水晶状的纽扣，它是拟物感觉的，你要在学习的过程中不断去思考高光和阴影的关系，以及实物的状态，这是美术课的内容，但就在你熟练操作了PS的时候，也同样需要这样的基本知识去增强你的设计。

http://pic.16xx8.com/allimg/140924/0132144363-0.png
提示：教程详细步骤在二楼，不用回复也能看到！想下载该教程的可以回复获取下载网址:点击进入下载页教程编号:134594 作者：飞屋睿UIdesign 出处：jianshu

安柏 发表于 2014-9-24 04:58:44

教你绘制一枚水晶纽扣教程


1、新建文件
打开PS，新建一个文件（W：800px，H：600px），背景色填充为深灰色#242424，然后略微给背景填充上径向渐变，让中心看上去更“亮”。再在该背景层上增加一个圆形，这就是纽扣的”身体”了。圆形的色彩随大家各自喜欢，我选用的是绿色。

http://pic.16xx8.com/allimg/140924/013214J05-1.png

安柏 发表于 2014-9-24 04:58:45

教你绘制一枚水晶纽扣教程


2、图层样式
接下来，我们要对纽扣的“身体”运用图层样式。图层样式的使用，靠的是不断的尝试，而每一次的运用都要当做一次积累，才能更好的理解和掌握它。那么，今天我们要用到哪些样式呢？
由于要让纽扣变得立体，因此我们可以尝试用一下内阴影。在此过程中，你的大脑中一定要出现一副作品完成后你想要达到的效果，在你不断对其进行调试中你才有可能逐渐接近你的目标。
不熟悉内阴影的同学，右戳学习，包你会！《PS技巧学起来！帮你快速的彻底搞懂内阴影功能》
这是我的面板数值，以及在此数值下的图层效果。

http://pic.16xx8.com/allimg/140924/0132142N7-2.png


http://pic.16xx8.com/allimg/140924/0132142D8-3.png

安柏 发表于 2014-9-24 04:58:46

教你绘制一枚水晶纽扣教程


我要使用内发光，让它的边缘具有水晶的光泽。

http://pic.16xx8.com/allimg/140924/0132145524-4.png


http://pic.16xx8.com/allimg/140924/013214J91-5.png

安柏 发表于 2014-9-24 04:58:47

教你绘制一枚水晶纽扣教程


运用光泽图层样式，让它更具光泽感

http://pic.16xx8.com/allimg/140924/0132146157-6.png


http://pic.16xx8.com/allimg/140924/0132145T9-7.png

安柏 发表于 2014-9-24 04:58:48

教你绘制一枚水晶纽扣教程

      
上图看上去已经接近我想要的效果了，接下来为纽扣增加一点投影和描边。

http://pic.16xx8.com/allimg/140924/0132144450-8.png


http://pic.16xx8.com/allimg/140924/013214N59-9.png


http://pic.16xx8.com/allimg/140924/0132146152-10.png

安柏 发表于 2014-9-24 04:58:49

教你绘制一枚水晶纽扣教程


3、增加高光细节
为了让纽扣看上去更具立体效果，运用了图层样式后显然是不够的。这时，我们还需要“手动”为他添加相应的阴影和高光的效果。在所有制图过程中，当你想让一个物体变得更具立体感、真实感，最好的方式莫过于为它添加高光和阴影了。
新建一个图层，然后使用椭圆选框工具，在纽扣的上方拉出一个椭圆形，然后再使用渐变工具，渐变设置如下：

http://pic.16xx8.com/allimg/140924/01321462A-11.png

安柏 发表于 2014-9-24 04:58:50

教你绘制一枚水晶纽扣教程


然后在选区内填充渐变色，渐变模式为线性渐变，从上至下填充。填充后效果如下：

http://pic.16xx8.com/allimg/140924/01321430S-12.png

安柏 发表于 2014-9-24 04:58:51

教你绘制一枚水晶纽扣教程


将椭圆转到右上角，也就是我们选定其为高光部分的地方。

http://pic.16xx8.com/allimg/140924/013214F58-13.png

安柏 发表于 2014-9-24 04:58:52

教你绘制一枚水晶纽扣教程


这时，我想要在高光基础上再增加一层高光。首先，将高光图层复制一层，然后按住“ctrl”键，用鼠标点选纽扣的“身体”的图层。目的是想调出圆形选区，为下一步做准备。

http://pic.16xx8.com/allimg/140924/0132143c9-14.png

安柏 发表于 2014-9-24 04:58:53

教你绘制一枚水晶纽扣教程


保持圆形选区，在复制出的高光图层上通过键盘上的左键和下键来控制选区，移动到如下图所示的位置，然后点击delete键。

http://pic.16xx8.com/allimg/140924/0132141a2-15.png


http://pic.16xx8.com/allimg/140924/0132144S1-16.png

安柏 发表于 2014-9-24 04:58:54

教你绘制一枚水晶纽扣教程

      
点击delete键后，这就是我们期待中的“小月牙”，看上去它太过于“平坦”了，这时，可以为它增加一个图层蒙版，选用黑白渐变在蒙版中合适的位置拉出一个径向渐变。

http://pic.16xx8.com/allimg/140924/013214A15-17.png

安柏 发表于 2014-9-24 04:58:55

教你绘制一枚水晶纽扣教程


右上角的高光就做好了：

http://pic.16xx8.com/allimg/140924/01321432D-18.png

安柏 发表于 2014-9-24 04:58:56

教你绘制一枚水晶纽扣教程


再对小月牙复制一层，将复制层旋转至对角的另一个方位。

http://pic.16xx8.com/allimg/140924/01321441U-19.png

安柏 发表于 2014-9-24 04:58:57

教你绘制一枚水晶纽扣教程


由于我们要做很多款图案的水晶纽扣，只需要将纽扣身体的那个图层的填充降至0。真的很简单，是吧！

http://pic.16xx8.com/allimg/140924/0132143X0-20.png
页: [1] 2
查看完整版本: 教你绘制一枚水晶纽扣教程