S教程,用PS绘制虚线的三种方法!
本文作者:@酷coo豆 ,首发于:平面设计学习日记网(http://xxriji.cn/diary10.html)。未经许可禁止转载商用,盗用追究法律责任。
点线面是平面构成的基本元素,而线条在平面设计中亦有规整分割版面、装饰造型的作用,能大幅提升版面的可读性。学会用PS绘制线条是每个自学平面设计初学者的基本功。
本篇平面设计学习日记, @酷coo豆 就简单总结了用PS绘制虚线常用的三种方法,需者自取。如果已会可自动跳过本文,不必浪费时间。
用钢笔工具绘制虚线
用钢笔或形状工具绘制虚线,是我用得最多,且最为方便的一种方法。这种方法适合直、曲虚线的绘制,由于是矢量的,更便于后期调整或修改。
首先使用钢笔或形状工具绘制一个形状。保持形状的选中状态,在工具选项栏中将填充设置为“无”,描边选择白色,描边宽度设置为1像素。同时点开描边选项,选择虚线样式即可绘制出虚线来。如图:
用钢笔工具绘制虚线,参数设置
另外,在更多选项中,可以对虚线及其间隙数值进行自定义,能够实现更多丰富的样式。见上图。
用文字工具绘制虚线
说白了其实就是“-”减号,这种方法说来也比较另类,但同样能达到了虚线的视觉效果,后期调整也极为方便,值得推荐。
1. 如果是横向的虚线,选中“文字工具”输入一串减号“------------”即可。选中所有减号后按住Ctrl+← →可调整虚线间距,非常方便大家可自行去尝试一下。
2. 当然你也可以用形状或钢笔工具画出路径或者曲线,然后让文字绕行路径即可。此法对不规则图形,以及常见几何图形都方便管用。见下图:多边形、圆形、圆角矩形等。
用文字工具绘制虚线,参数设置
为了使虚线不出现虚边的现象,可以在工具栏选项栏中将消除锯齿模式选为无。调整字体样式及大小,可对虚线的粗细进行灵活调整。
3. 铅笔工具
用铅笔工具绘制虚线
此方法是最为直观的方法,但是@酷coo豆却很少用到,原因是此法较为复杂且为像素作图,不便于后期调整修改,当然将它一并掌握学习一下也不是坏事。
选择铅笔工具,挑选圆形笔触,大小设为1px,按下F5打开画笔面板,设置“画笔笔尖形状”选项卡中的间距。数值设为400%、200%的绘制效果如下。
用铅笔工具绘制虚线,参数设置
与此同时,如果你觉得虚线的长度太短,你可先用400%的间距画一条直线,按下“V”切换为移动工具,选中该图层后按下Alt+→,向右偏移一个像素复制该图层。此时虚线长度变为2px,合并两个图层即可得到一条新的虚线,见上图。
千里之行始于足下,今天@酷coo豆分享的PS教程只是冰山一角,更多的方法技巧还有待你亲自去发现。还不会画虚线的小伙伴赶紧打开你的PS练习一下吧。都说站在岸上是学不会游泳的,如果你连PS软件都没安装,请使访问「平面设计学习日记网」搜索PS下载。
平面设计学习日记网,自学者的福音
另外,我们网站收集整理了腾讯大神设计师录制的《网页设计教程》(http://t.cn/RJ3pctF)。如果你正在自学或从事平面/网页设计,想系统学习get一下大神的设计思维,也许里面的教程能助你一臂之力哦。
ay01
day02
day03
day04
day05
day06
day07
day08
day09
day10
day11
day12
order 盒子边框
复合属性。设置对象边框的特性。
盒子边框三要素:
① 边框粗细
② 边框样式
③ 边框颜色
语法:border: border-width | border-style | border-color ;
边框四边的粗细、样式、颜色,以及上下左右每个位置的样式属性都是可以单独调整的。
边框的颜色不是必要的,如果不指定颜色,默认颜色为黑色,但必须为盒子指定宽高。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
使用 border-style 可为盒子边框设置样式,以下示例为实线
/* CSS代码 */
div{
width: 500px;
height: 50px;
border-style: solid;
}
效果:
示例 CSS 代码
如果需要设置不同方向的样式属性,可以写在一句 CSS 代码里,比如说下面这段代码,上下实线,左右虚线。
/* CSS代码 */
div{
width: 500px;
height: 50px;
border-style: solid dashed;
}
效果:
属性值解释none无轮廓。 border-color将被忽略,border-width计算值为0,除非边框轮廓为图像,即border-image。hidden隐藏边框。IE7及以下尚不支持dotted点状轮廓。IE6下显示为dashed效果dashed虚线轮廓solid实线轮廓double双线轮廓。两条单线与其间隔的和等于指定的border-width值groove3D凹槽轮廓ridge3D凸槽轮廓inset3D凹边轮廓outset3D凸边轮廓
使用 border-width 可为盒子边框设置粗细,以下示例边框为 5px 粗细
/* CSS代码 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width: 5px;
}
效果
示例 CSS 代码
如果需要设置不同方向的边框粗细,可以写在一句 CSS 代码里。
比如说下面这段代码,上下2px,右2px,左5px。
/* CSS代码 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width:2px 2px 2px 5px;
}
效果:
可直接输入
颜色的英文名称
rgb值
十六进制
使用 border-color 可为盒子边框设置颜色,以下示例边框颜色为红色。
/* CSS代码 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width:2px 2px 2px 5px;
border-color: red;
}
效果:
示例 CSS 代码
上面有两个示例讲述如何设置不同方向的属性,border-color 也是相同使用方法,此处就不做示例了。
如果你需要同时设置盒子的粗细、样式、颜色,那么你可以将他们的样式表写在同一行代码里。
例如:
/* CSS代码 */
div{
border-top: 5px solid red;
}
这段代码指定了上边框的三个属性:粗细、样式、颜色
border-top 包含了:
其他同理
先来看一个示例
/* CSS代码 */
div{
width: 100px;
height: 100px;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid green;
border-left: 50px solid pink;
}
效果:
细心的你,一定发现了 border 的边框四条边交接处是斜角。
此刻我们把盒子的宽高设置为 0
/* CSS代码 */
div{
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid green;
border-left: 50px solid pink;
}
效果:
是不是完完全全像四个三角形一样。
我们只需要把上边和左右两边的三角形隐藏起来,它不就是一个三角形了。
为 border-color 指定 transparent 值,使盒子边框颜色变透明
/* CSS代码 */
div{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid green;
border-left: 50px solid transparent;
}
效果:
把另外三条边透明之后,就只剩一个三角形了。
完
部分资料引用自:
*请认真填写需求信息,我们会在24小时内与您取得联系。