首页/chrome插件开发/ps经典教程方寸之间的光影世界（原创理论）(一)
<上一条：网页制作语义化你的HTML标签
ps经典教程方寸之间的光影世界（原创理论）(一)
发布-xiaoming | 浏览量-
曾在一本photoshop的教程中看到这样一句话，深入细致的观察乃是营造真实效果的最重要的基础，而不是技术。（当然技术上的局限也会阻挠我们实现自己想要的效果。）这就好比通过细致入微的观察即使只用铅笔也能呈现出一个真实的、光影纵横的世界，而无须依赖油画棒、美工刀乃至photoshop，CorelDRAW。
上图是我们在网页中常见的按钮样式，比较独特的是在它的中间有一条刻痕，知道怎么做的酷友那就到此止步吧，但是也应该有很多酷友不知道。
如果不清楚的话我们就放大来看看
放大来看你会发现它很简单，它只不过是由1像素宽的一条较深的线和一条较浅的线组成罢了。
明白了它的构成，那它做起来也就简单了，方法有很多。你可以分别用矩形选框工具框选两个宽为一像素的长条区域，然后分别填充深色和浅色。还有一个更为简便的办法就是，你可以用直径为一像素的铅笔工具来绘制。那么为什么要用铅笔工具来绘制呢？如果你对铅笔工具已经很熟悉的话，那么大可以跳过这段了。铅笔工具同其他绘图工具相比，它的显著特点就是保留锯齿，它的笔触是干净利落的，介于笔触的有和无之间不存在一个中间地带，而画笔工具的边缘则是柔和的，过渡平缓的。如果这段叙述不够直观，那么请看下图
正如前面所讲到的，绘制这样的线条并不需要多么高超的photoshop技术，却需要深入细致的观察与思考。在上面的按钮图片中，我们假定光线是从图片的左上方照射下来的（在大多数情况下光线也正是从上方照射下来的），为了体现这一点，我为按钮的背景赋予了一个从上到下由亮到暗的渐变叠加，还有一个投射到右下方的投影效果。在一个光线是从左上方照射下来的光线环境下，营造一种刻痕的效果，那么刻痕的左侧必然为背光面，右侧为受光面。
因而，刻痕左侧的线条要比背景更暗，右侧的线条要比背景更亮。与此同时，不管是刻痕的阴影还是高光面，颜色都不宜太暗或者太亮，否则可能破坏掉整个画面的协调性，掩盖掉其他的按钮样式从而突兀地显现在画面中。作为一个按钮上的一条装饰性的分割线，太显眼的效果显然并不是我们想要的。
光线从左上方照射下来，这就要求我们去模拟与再现这种光线环境下的每一个部件的受光面和背光面，以及如何用颜色和形状去表现。反过来，通过形状与颜色的运用，使之体现出不同的受光面和背光面，我们也能暗示出光线环境。
上面是我在相同的光线环境下绘制的两条水平线条，线条和文字的立体效果互相呼应，都在暗示着光线是从左上方打下来的。只不过在这里线条更加浅一点，起到一种装饰和衬托的作用。
除此之外，通过和虚线的结合使用，还能够产生出很多种可能。
这种按钮样式和线条主要是出现在网页中，若要保持整站的图形样式的统一性，可以在图层样式面板中勾选“使用全局光”，（不过本文中只有按钮背景和文字用到了图层样式）或者将常用的图层样式保存在图层样式面板中，在以后绘制按钮时直接套用。
原文地址：http://www.35ui.cn/post/201001103494.html
标签：photoshopps网页切图ps切图网站设计工作室美工外包
或许你还对下面的文章感兴趣
