整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

PS教程,酷coo豆教会你:用PS绘制虚线的三种方法

S教程,用PS绘制虚线的三种方法!

本文作者:@酷coo豆 ,首发于:平面设计学习日记网(http://xxriji.cn/diary10.html)。未经许可禁止转载商用,盗用追究法律责任。

点线面是平面构成的基本元素,而线条在平面设计中亦有规整分割版面、装饰造型的作用,能大幅提升版面的可读性。学会用PS绘制线条是每个自学平面设计初学者的基本功。

本篇平面设计学习日记, @酷coo豆 就简单总结了用PS绘制虚线常用的三种方法,需者自取。如果已会可自动跳过本文,不必浪费时间。

1. 钢笔/形状工具

用钢笔工具绘制虚线

用钢笔或形状工具绘制虚线,是我用得最多,且最为方便的一种方法。这种方法适合直、曲虚线的绘制,由于是矢量的,更便于后期调整或修改。

首先使用钢笔或形状工具绘制一个形状。保持形状的选中状态,在工具选项栏中将填充设置为“无”,描边选择白色,描边宽度设置为1像素。同时点开描边选项,选择虚线样式即可绘制出虚线来。如图:

用钢笔工具绘制虚线,参数设置

另外,在更多选项中,可以对虚线及其间隙数值进行自定义,能够实现更多丰富的样式。见上图。

2. 文字工具+路径

用文字工具绘制虚线

说白了其实就是“-”减号,这种方法说来也比较另类,但同样能达到了虚线的视觉效果,后期调整也极为方便,值得推荐。

1. 如果是横向的虚线,选中“文字工具”输入一串减号“------------”即可。选中所有减号后按住Ctrl+← →可调整虚线间距,非常方便大家可自行去尝试一下。

2. 当然你也可以用形状或钢笔工具画出路径或者曲线,然后让文字绕行路径即可。此法对不规则图形,以及常见几何图形都方便管用。见下图:多边形、圆形、圆角矩形等。

用文字工具绘制虚线,参数设置

为了使虚线不出现虚边的现象,可以在工具栏选项栏中将消除锯齿模式选为。调整字体样式及大小,可对虚线的粗细进行灵活调整。

3. 铅笔工具

用铅笔工具绘制虚线

此方法是最为直观的方法,但是@酷coo豆却很少用到,原因是此法较为复杂且为像素作图,不便于后期调整修改,当然将它一并掌握学习一下也不是坏事。

选择铅笔工具,挑选圆形笔触,大小设为1px,按下F5打开画笔面板,设置“画笔笔尖形状”选项卡中的间距。数值设为400%、200%的绘制效果如下。

用铅笔工具绘制虚线,参数设置

与此同时,如果你觉得虚线的长度太短,你可先用400%的间距画一条直线,按下“V”切换为移动工具,选中该图层后按下Alt+→,向右偏移一个像素复制该图层。此时虚线长度变为2px,合并两个图层即可得到一条新的虚线,见上图。

[福利]结束后话:

千里之行始于足下,今天@酷coo豆分享的PS教程只是冰山一角,更多的方法技巧还有待你亲自去发现。还不会画虚线的小伙伴赶紧打开你的PS练习一下吧。都说站在岸上是学不会游泳的,如果你连PS软件都没安装,请使访问「平面设计学习日记网」搜索PS下载。

平面设计学习日记网,自学者的福音

另外,我们网站收集整理了腾讯大神设计师录制的《网页设计教程》(http://t.cn/RJ3pctF)。如果你正在自学或从事平面/网页设计,想系统学习get一下大神的设计思维,也许里面的教程能助你一臂之力哦。

ay01

  • absolute ['æbsəlu:t] 绝对的,完全的
  • active ['æktiv] 活动的,激活的,<a>标签点击
  • align [ə'lain] 对齐
  • alpha ['ælfə] 透明度,半透明
  • anchor ['æŋkə] 锚记<a>标记是这个单词的缩写
  • arrow ['ærəu] 箭头
  • auto ['ɔ:təu] 自动的

day02

  • background ['bækgraund] 背景
  • banner ['bænə] 广告, 横幅
  • black [blæk] 黑色
  • blink: [bliŋk] 闪亮,闪烁
  • block [blɔk] 块
  • blue [blu:] 蓝色
  • body ['bɔdi] 主体,一个HTML标记
  • bold [bəuld] 加粗
  • border ['bɔ:də] 边框、框线 边框
  • both [bəuθ] 两者(都);两个(都);是clear属性的一个属性值
  • bottom ['bɔtəm] 底;底部,是一个CSS属性
  • box [bɔks] 箱;盒;匣
  • br 换行标记
  • bug [bʌg] 程序设计上的错误,漏洞等
  • building ['bildiŋ] 建筑
  • button ['bʌtn] 按钮

day03

  • cell [sel] 表格中的单元格
  • center ['sentə] 居中
  • centimeter ['senti,mi:tə] 厘米
  • child [tʃaild] 孩子
  • circle ['sə:kl] 圆圈
  • class [klɑ:s] 类别
  • clear [kliə] 清除
  • color ['kʌlə] 颜色
  • connected [kə'nektid] 连结的
  • contact ['kɔntækt] 联系
  • content [kən'tent] 内容
  • css 层叠样式表
  • cursor ['kə:sə] 鼠标指针

day04

  • dashed [dæʃt] 虚线CSS边框常用的一种
  • decimal ['desiməl] 十进制
  • decoration [,dekə'reiʃən] 装饰
  • default [di'fɔ:lt] 默认的
  • design [di'zain] 设计
  • display [di'splei ] 显示,CSS的一个属性
  • division [di'viʒən] 分区,div就是这个单词的缩写
  • document ['dɔkjumənt] 文件文档
  • dotted ['dɔtid] 点线
  • double ['dʌbl] 双线

day05

  • element ['elimənt] 元素
  • father ['fɑ:ðə] 父亲,父
  • filter ['filtə] 过滤层;滤器
  • first [fə:st] 第一个
  • fixed [fikst] 固定的,不变的
  • float [fləut] 浮动
  • font [fɔnt] 字体
  • for 在循环语句中的一个保留字
  • gif 一种图像格式
  • gray [grei] 灰色
  • green [gri:n] 绿色

day06

  • hand [hænd] 手
  • head [hed] 头部
  • height [hait] 高度
  • help [help] 帮助
  • here [hiə] 这里
  • hidden ['hidn] 被隐藏
  • home [həum] 首页
  • horizontal [,hɔri'zɔntl] 水平的
  • hover ['hʌvə] 鼠标指针经过或称为悬浮状态

day07

  • image ['imidʒ] 图像
  • important [im'pɔ:tənt] 重要的
  • indent [in'dent] 缩进
  • index ['indeks] 索引
  • inline 行内
  • inner 内部的
  • italic [i'tælik] 意大利体,斜体
  • jpg 一种图像格式
  • justify ['dʒʌstifai] 两端对齐

day08

  • language ['læŋgwidʒ] 语言
  • last [lɑ:st] 最后一个
  • left [left] 左边
  • length [leŋθ] 长度
  • level ['levl] 级别,例如block-level就是块级
  • line [lain] 线
  • link [liŋk] 链接
  • list [list] 列表
  • lowercase ['ləuə,keis] 小写
  • margin ['mɑ:dʒin] 外边距
  • max 最大的
  • medium ['mi:diəm] 中间
  • menu ['menju:] 菜单
  • middle ['midl] 中间
  • millimeter ['mili,mi:tə] 毫米
  • min 最小的
  • model ['mɔdl] 模型
  • move [mu:v] 移动

day09

  • navigation [,nævi'geiʃən] 导航
  • new [nju:] 新的
  • none [nʌn] 无,没有
  • normal ['nɔ:məl] 标准
  • object ['ɔbdʒikt] 对象
  • oblique [əb'li:k] 一种斜体
  • only ['əunli] 仅仅
  • open ['əupən] 打开
  • optional ['ɔpʃənəl] 可选的
  • orange ['ɔ:rindʒ] 橙色
  • outer ['autə] 外面的
  • overflow [,əuvə'fləu] 溢出
  • padding ['pædiŋ] 内边距
  • point [pɔint] 点
  • pointer ['pɔintə] 指针,指示器
  • position [pə'ziʃən] 定位,位置
  • progress ['prəugres] 进度
  • public ['pʌblik] 公开的
  • purple ['pə:pl] 紫色

day10

  • red [red] 红色
  • relative ['relətiv] 相对的
  • repeat [ri'pi:t] 重复,平铺
  • replacement [ri'pleismənt] 替换
  • resize 重新设置大小
  • right [rait] 右边
  • row [rəu] 行
  • scroll [skrəul] 滚动
  • shadow ['ʃædəu] 阴影
  • silver ['silvə] 银色
  • size [saiz] 尺寸
  • solid ['sɔlid] 固体,实线
  • solution [sə'lu:ʃən] 方案
  • span [spæn] 一个HTML标记
  • special ['speʃəl] 特殊的
  • square [skwɛə] 方块
  • static ['stætik] 静态的
  • strong [strɔŋ] 强壮,加粗的
  • style [stail] 样式

day11

  • table ['teibl] 表格
  • td 单元格的HTML标记
  • text [tekst] 文本
  • thick [θik] 粗的
  • thin [θin] 细的
  • three [θi:] 三个
  • through [θru:] 穿过
  • title ['taitl] 标题
  • top [tɔp] 顶部
  • tr 表格中“行”的HTML标记
  • transitional [træn'ziʃənəl] 过渡的
  • type [taip] 类型

day12

  • underline [,ʌndə'lain] 下划线
  • upper ['ʌpə] 上面的
  • uppercase ['ʌpə,keis] 大写
  • url 网址
  • vertical ['və:tikəl] 竖直的
  • visited ['vizit] 访问过的
  • while [hwail] 白色的
  • width [widθ] 宽度

order 盒子边框

复合属性。设置对象边框的特性。

盒子边框三要素:

① 边框粗细

② 边框样式

③ 边框颜色

语法:border: border-width | border-style | border-color ;

边框四边的粗细、样式、颜色,以及上下左右每个位置的样式属性都是可以单独调整的。

边框的颜色不是必要的,如果不指定颜色,默认颜色为黑色,但必须为盒子指定宽高。


初始 HTML

 <!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 代码

  • 上边:border-top-style: double; (双线)
  • 右边:border-right-style: solid; (实线)
  • 下边:border-bottom-style: dashed; (虚线)
  • 左边:border-left-style: dotted; (点线)


border-style 说明

  • 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
  • 如果只提供一个,将用于全部的四边。
  • 如果提供两个,第一个用于上、下,第二个用于左、右。
  • 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
  • 如果border-width等于0,本属性将失去作用。

如果需要设置不同方向的样式属性,可以写在一句 CSS 代码里,比如说下面这段代码,上下实线,左右虚线。

 /* CSS代码 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid dashed;
 }

效果:


border-style 样式属性值

属性值解释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 代码

  • 上边:border-top-width: 10px; (双线)
  • 右边:border-right-width: 10px; (实线)
  • 下边:border-bottom-width: 10px; (虚线)
  • 左边:border-left-width: 10px; (点线)


border-width 说明

  • 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
  • 如果只提供一个,将用于全部的四边。
  • 如果提供两个,第一个用于上、下,第二个用于左、右。
  • 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
  • 如果border-style设置为none或hidden,border-width的使用值将为0。

如果需要设置不同方向的边框粗细,可以写在一句 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-top-color: 10px;
  • 右边:border-right-color: 10px;
  • 下边:border-bottom-color: 10px;
  • 左边:border-left-color: 10px;


border-color 说明

  • 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
  • 如果只提供一个,将用于全部的四边。
  • 如果提供两个,第一个用于上、下,第二个用于左、右。
  • 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
  • 如果border-width等于0或border-style设置为none,本属性将被忽略。

上面有两个示例讲述如何设置不同方向的属性,border-color 也是相同使用方法,此处就不做示例了。




border 是复合属性

如果你需要同时设置盒子的粗细、样式、颜色,那么你可以将他们的样式表写在同一行代码里。

例如:

 /* CSS代码 */
 div{
     border-top: 5px solid red;
 }

这段代码指定了上边框的三个属性:粗细、样式、颜色

border-top 包含了:

  • border-top-width: 5px;
  • border-top-style: solid;
  • border-top-color: red;

其他同理




教你用 CSS 画个三角形

先来看一个示例

 /* 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;
 }

效果:

把另外三条边透明之后,就只剩一个三角形了。





部分资料引用自:

  • http://caibaojian.com/css3/properties/border/index.htm