Photoshop基础教程:制作网页设计中的虚线

/  发布时间:2012-03-31 00:43:46  来源:网页教学网 

网页设计中,虚线是必不可少的修饰效果,例如区域描边,新闻列表文字底线等等,虽然有很多种在Photoshop里绘制虚线的方法,还有人每次都在Illustrator里画好然后再转到PS里,但绘制方式不是繁琐就是弄得虚线朦朦胧胧的,看起来一点也不精致精细,那么,在Photoshop中画虚线,究竟有没有简单点的且一劳永逸的办法呢?

Photoshop画虚线

去问百度,会得到N种方法,但这里给大家介绍的,是几种即快速又准确且非常精致的方法。对于精细的网页设计而言,如果用到了虚线,那么它的精细度对效果影响很大,做的好了,就能带来意想不到的效果,废话不多说了,下面就详细配图给大家介绍几种网页设计中常用的Photoshop虚线画法。

1、Photoshop中绘制直线虚线的方法

在网页模型或效果图中,直线型的虚线用的很多,例如横向分割和竖向分割,大致分为点划线(dotted)和虚线(dashed),如下图:

Photoshop画虚线

做这样的线非常简单,我们只用到Photoshop(PS)中的文字工具即可模拟出来,设置如下:

Photoshop绘制虚线

如果你的线是竖着的,只需要把图层旋转90度即可,这样做,是不是即方便又快速,而且外观精致?

2、Photoshop(PS)中绘制直角矩形边框的方法

如果你不仅仅画直线,还需要对矩形的外边框添加虚线,可以这么做。

首先,是点划线(dotted),需要新建一个2×2像素的白底文件,按Ctrl+0把画布放到最大,不用新建图层,直接在画布中错格填充,如下图:

Photoshop绘制虚线

接着,按Ctrl+A全选此图案,点击PS的顶部菜单 编辑->定义图案 命令,将此图定义为一个图案。

Photoshop绘制虚线

接着,在你需要添加点划线的直角方框(注意:一定是直角,不是圆角矩形也不是圆形)的图层双击,调出来图层样式窗口,选择最后一项描边,按下图设置:

如何在Photoshop里画虚线

这个时候,边线是黑白交替的,你肯定有的时候需要白色,有的时候需要黑色,你可以这么做:

需要黑色时,将描边的混合模式设置为正片叠底,白色就被滤掉了。

需要白色时,描边的混合模式设置为滤色,过滤掉黑色。

这样一个1px的点划线边框就做好了,可以很方便的进行多次复用,ps留个这样的图案非常方便。

如果你需要虚线,那么很简单,你只需要把描边的图案做的尺寸大点即可,我一般是做个4×4的图案,效果如下:

如何在Photoshop里画虚线

如果还需要更大的虚线,各位同学自行调整图案尺寸即可。

3、Photoshop(PS)中绘制圆角矩形的虚线边框的方法

新的css3标准是支持矩形圆角的,如果模拟这样的圆角矩形虚线边框,那么上面的方法就不太适用了,怎么办呢,其实很简单,你只需要把填充的图案改为圆形格子即可,最小的尺寸为4×4像素,如下图:

如何在Photoshop里画虚线

基本模拟的八九不离十了,嘿嘿~

4×4像素本身非常小,想要画一个可识别的圆圈非常困难,画圆的意义在于用圆的羽化边缘使模拟的圆角边缘不那么硬。因此,只需要用圆形选区工具画一个错格的4×4图像即可,记着要选中“消除锯齿”选项。如果你觉得还是困难,可以把4×4改成6×6或者8×8,依此类推。

4、Photoshop(PS)中绘制特殊形状的虚线边框的方法

各位同学,如果你需要给特殊形状的图形添加虚线边框,那么我建议你还是在Illustrator里画好再导入Photoshop吧,或者直接使用网页设计的专用软件——Fireworks,因为上边的方法只适用于网页设计中的结构图形设计,而不是做专题或者banner之类的造型设计了,正所谓术业有专攻哇!

更多