收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 33115|回复: 105

[教程] [网页设计]如何在Photoshop里画虚线?

  [复制链接]
发表于 2012-3-20 22:19:25 | 显示全部楼层 |阅读模式
本帖最后由 liyangisme 于 2012-3-20 22:21 编辑


最近又有人问李胖纸了,Photoshop里虚线怎么画啊,每次我都是在Illustrator里画好然后再转到PS里,弄得不好虚线还朦朦胧胧的,看着一点也不精致,有没有简单点的一劳永逸的办法啊?

面对这种情况,李胖纸一般都很明智的让他去百度了,不过问的多了,我还是在这介绍下我是咋做的吧。

度娘的结果中也提供了很多画虚线的办法,有激情的同学可以去搜搜看。但是对于精细的网页设计来讲,如果用到了虚线,那么它的精细度对效果影响很大,做的好了,就能带来意想不到的效果,废话不多说了,下面介绍几种网页设计中用得到的虚线画法。

1、直线

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



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



如果你的线是竖着的,只需要把图层旋转90度即可,我一直是这么做的。

2、直角矩形边框

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

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



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



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



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

需要黑色时,将描边的混合模式设置为正片叠底,白色就被滤掉了。
需要白色时,描边的混合模式设置为滤色,过滤掉黑色。
这样一个1px的点划线边框就做好了,可以很方便的进行多次复用,ps留个这样的图案非常方便。

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



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

3、圆角矩形的虚线边框

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



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

4、异形的虚线边框

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

差不多能想到的就这些了,如果以后有更好的办法,我再补充,哈哈!

更多实用ps教程,请访问:http://www.liyangis.me,我会继续努力哦~

补充内容 (2012-3-21 21:39):
抱歉各位,最后一张图片弄错了,可是不知道怎么编辑修改了,大家移步http://liyangis.me/?p=59这里看吧~

点评

CS6中画出形状后可以直接设置描边用实线、圆点虚线、矩形虚线或是在更多选项中自定义描边,蛮方便了。 谢谢liyangisme同学分享经验 :)  发表于 2012-7-15 20:38
发表于 2012-3-21 09:09:55 | 显示全部楼层
学习了。。。
回复 支持 反对

使用道具 举报

发表于 2012-3-21 17:07:02 | 显示全部楼层
提示: 作者被禁止或删除。
回复 支持 反对

使用道具 举报

发表于 2012-3-21 18:35:06 | 显示全部楼层
帮顶,这个挺好用的。
回复 支持 反对

使用道具 举报

发表于 2012-3-21 21:47:21 | 显示全部楼层
学习了
回复 支持 反对

使用道具 举报

发表于 2012-3-23 11:01:15 | 显示全部楼层
的确很厉害哦
回复 支持 反对

使用道具 举报

发表于 2012-3-23 11:33:58 | 显示全部楼层
提示: 作者被禁止或删除。
回复 支持 反对

使用道具 举报

发表于 2012-3-23 17:37:40 | 显示全部楼层
学习了用图案描边的方法。多些
回复 支持 反对

使用道具 举报

发表于 2012-3-24 17:48:45 | 显示全部楼层
很棒,学习下。
回复 支持 反对

使用道具 举报

发表于 2012-3-24 22:27:18 | 显示全部楼层
囧。。学习哦了~
我都是直接用鼠标点几个点出来,然后复制图层移动合并,再复制图层移动合并循环~
回复 支持 反对

使用道具 举报

发表于 2012-3-25 22:29:35 | 显示全部楼层
提示: 作者被禁止或删除。
回复 支持 反对

使用道具 举报

发表于 2012-3-27 10:09:39 | 显示全部楼层
LZ对于不规则图形采用此方法虚线描边不可行呀,
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-3-27 12:38:14 | 显示全部楼层
Bonnie2011 发表于 2012-3-27 10:09
LZ对于不规则图形采用此方法虚线描边不可行呀,

亲,文章里说了,对于不规则图形采用此种方法不可行啊……你要是有这种需求,就去ai里画嘛
回复 支持 反对

使用道具 举报

发表于 2012-3-27 20:53:07 | 显示全部楼层
x269147836 发表于 2012-3-24 22:27
囧。。学习哦了~
我都是直接用鼠标点几个点出来,然后复制图层移动合并,再复制图层移动合并循环~

陪心,你真逗!
回复 支持 反对

使用道具 举报

发表于 2012-3-31 15:48:36 | 显示全部楼层
又学到了,很受用呀
回复 支持 反对

使用道具 举报

发表于 2012-4-9 09:11:23 | 显示全部楼层
楼主 图片怎么一个也看不到了 狂哭
回复 支持 反对

使用道具 举报

发表于 2012-4-9 13:24:07 | 显示全部楼层
cs6 就有這個畫虛線的功能了   沒有這個功能真的很不方便  
FLASH   ai   fw  都有 不知道為什麼PS都沒有
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-4-12 10:55:48 | 显示全部楼层
bdyhzclxl 发表于 2012-4-9 09:11
楼主 图片怎么一个也看不到了 狂哭

抱歉,这两天服务器更改DNS了,一直忘了更新,现在已经弄好了
回复 支持 反对

使用道具 举报

发表于 2012-4-13 08:07:46 | 显示全部楼层
实用!
回复 支持 反对

使用道具 举报

发表于 2012-4-13 09:18:11 | 显示全部楼层
老大浏览器要IE9的
有点太夸张了。不够实用,这样50%以上的人估计都进不去了
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-4-13 12:36:23 | 显示全部楼层
lihao126 发表于 2012-4-13 09:18
老大浏览器要IE9的
有点太夸张了。不够实用,这样50%以上的人估计都进不去了

呵呵,无所谓,我又没想着让所有人看
回复 支持 反对

使用道具 举报

发表于 2012-4-16 14:16:20 | 显示全部楼层
哈哈,学习了!
回复 支持 反对

使用道具 举报

发表于 2012-4-18 15:28:36 | 显示全部楼层
高手就是高手啊
回复 支持 反对

使用道具 举报

发表于 2012-4-18 17:49:00 | 显示全部楼层
学习了 不会在一直复制 粘贴了 呵呵
回复 支持 反对

使用道具 举报

发表于 2012-4-19 23:14:41 | 显示全部楼层
学习了~            
回复 支持 反对

使用道具 举报

发表于 2012-4-20 15:15:45 | 显示全部楼层
liyangisme 发表于 2012-4-12 10:55
抱歉,这两天服务器更改DNS了,一直忘了更新,现在已经弄好了

嗯 嗯 看到了 嘿嘿。。。谢谢哈!
回复 支持 反对

使用道具 举报

发表于 2012-4-20 17:13:04 | 显示全部楼层
这个一定要支持哈!
回复 支持 反对

使用道具 举报

发表于 2012-4-27 23:03:35 | 显示全部楼层
我还不会呢,学习了
回复 支持 反对

使用道具 举报

发表于 2012-5-2 13:53:20 | 显示全部楼层
学些了,有些独到哈哈
回复 支持 反对

使用道具 举报

发表于 2012-5-3 14:48:50 | 显示全部楼层
呵呵,我怎么没想到呢
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-20 17:03 , Processed in 0.546473 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表