马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > 网站制作 > Photoshop教程 > 如何利用Photoshop的路径工具设计制作文字图案

如何利用Photoshop的路径工具设计制作文字图案

时间:2014-07-12   文章来源:马海祥博客   访问次数:

自从Photoshop有了路径工具以后,文字排版就显得更加灵活,我们可以把文字做成任何想要的图案。我们可以把文字放入闭合的路径里面做成实体图形,也可以按照一条条曲线路径排版做成可爱的文字曲线,难度再较大一点的就是通过路径组合做成创意的文字图案。所以,今天我就借助马海祥博客的平台跟大家分享一下如何利用Photoshop的路径工具设计制作文字图案:

1、新建一个400×300的图像(可自设尺寸),然后选择自定形状工具。

如何利用Photoshop的路径工具设计制作文字图案-马海祥博客

注意绘图方式应为第一种(形状图层),如下图红色箭头处,然后在形状列表中选择一个心形(如不在列表中,可恢复默认形状),如下图绿色箭头处,样式选择为无样式,另外可以选取一个的颜色(大家可通过马海祥博客的《RGB颜色查询对照表大全》工具来选取)。

2、然后在图像中画出一个心形(绘制过程中可以按住SHIFT键保持长宽比),这样其实就是建立了一个带矢量蒙版的色彩填充层。如下图所示:

如何利用Photoshop的路径工具设计制作文字图案-马海祥博客

图层调板中显示的正是一个色彩填充层。双击缩略图可以更改填充的颜色,而图层缩略图右方有一个蒙版缩略图(上图蓝色箭头处),这就是矢量蒙版缩略图,特点是以灰色来表示被隐藏的区域。

在进行下一步之前,要保证路径蒙版中的路径处于显示状态,方法是点击路径蒙版缩略图。会看到图像中的心形出现了一个外框,而图层调板中路径蒙版缩略图周围出现了一个细线框,如下图所示:

如何利用Photoshop的路径工具设计制作文字图案-马海祥博客

3、现在选择文本文字工具,并使其停留在这个心形路径之上,依据停留位置的不同,鼠标的光标会有不同的变化。当停留在路径线条之上时显示,当停留在图形之内将显示。请注意这两者的区别,前者表示沿着路径走向排列文字,后者则表示在封闭区域内排版文字,作用是完全不同的,但一定要注意文字的清晰度(对于不清晰的图片可通过马海祥博客的《如何利用Photoshop或illustrator让图片和文字的像素清晰可辨》文中所介绍的来修正)。

4、现在我们先将文字工具停留在心形之内(光标为),然后单击,出现文字输入光标,输入一些文字。如“LOVE”(注意每个字母之后都有一个空格,原因稍后再述)。选择一个英文字体(如Tohoma),选择小一些的字号(如6px),并复制粘贴几次,使其充满整个图形(超出也没有关系),效果如下图所示:

如何利用Photoshop的路径工具设计制作文字图案-马海祥博客

此时看到文字在图形内的排列并不对称,接下来在段落调板中设置居中,并适当设置左缩进和右缩进的数值(如5px),这样看上去就较为舒适了。一般来说在封闭图形内排版文字,都要进行这些设定以达到较好的视觉效果,如下图所示:

如何利用Photoshop的路径工具设计制作文字图案-马海祥博客

5、现在隐藏(甚至可以删除)心形色彩填充层,我们看到在文字外围仍然保留有一条封闭路径,与原先心形路径相同,如下图所示:

如何利用Photoshop的路径工具设计制作文字图案-马海祥博客

由此可以明白,虽然这个文字层的排版路径是籍由另外一个图层中的矢量路径而来,但在完成后,其也“克隆”了一条相同的路径并“留用”。

我们可以对这条“克隆并留用”的路径进行修改,从而改变文字的排版布局。方法是使用直接选择工具〖A/SHIFT_A〗,在文字层(不是早先的填充层,此时应隐藏填充层)的路径上点击一下,就会看到路径上显示出许多小方块,如下图所示:

如何利用Photoshop的路径工具设计制作文字图案-马海祥博客

用直接选择工具往左上方略为移动蓝色箭头处的方块,就可以看到效果。有关路径的知识我们将在以后学习,到时候我们可以进行更多更复杂的修改,现在大家先记住路径是可以修改的就可以了。

前面我们提到过要在每个英文字母后面加上空格,是为了在行末换行时可以让单个字母移到下一行,而如果使用一整个英文单词LOVE,则在行末换行时,因为要保持完整性,整个单词将被移到下一行,这样的效果看上去就比较生硬(也有人会喜欢这种效果),如下图所示:

如何利用Photoshop的路径工具设计制作文字图案-马海祥博客

大家以后在实际应用中可以参考这种加空格的方法,如果觉得空格拉大了字母间距,可以通过在字符调板中设置间距为负值来弥补。

6、现在将已经完成的文字层隐藏起来,并单击色彩填充层的矢量蒙版,使其路径处于显示状态,即使填充层本身处于隐藏状态也有效,如下图所示:

如何利用Photoshop的路径工具设计制作文字图案-马海祥博客

将文字工具停留在路径的线条上,注意光标指示应为,在如下左图①处的大致地方单击,即会出现文字输入光标。将字号改为12px,段落对齐方式为居左,然后输入“She once was a true love of mine”, 这样就可以形成沿路径走向排列的文字效果,类似下图,不过,马海祥提醒大家注意在文字的起点处有一个小圆圈标记。

如何利用Photoshop的路径工具设计制作文字图案-马海祥博客

对于已经完成的路径走向文字,还可以更改其位于路径上的位置。方法是使用路径选择工具〖A/SHIFT_A〗,注意它与直接选择工具有些类似,但前者是黑色箭头,后者是白色的箭头,要注意区别。

将路径选择工具移动到刚才的小圆圈标记左右,根据位置不同就会出现光标和光标,它们分别表示文字的起点和终点,因此我们称之为起点光标和终点光标。

现在分别将文字的起点和终点移动到大致如下图的位置上,红色箭头处为起点,绿色箭头处为终点。此时就可以在路径上看本来处于重叠的文字起点标志和终点标志。

如何利用Photoshop的路径工具设计制作文字图案-马海祥博客

7、如果两者之间的距离不足以完全显示文字,终点标记将变,表示有部分文字未显示。正如同在前面我们所学习的框式文本中,当文字未完全显示时所出现的标记一样,如下图所示:

如何利用Photoshop的路径工具设计制作文字图案-马海祥博客

如果将起点或终点标记向路径的另外一侧拖动,将改变文字的显示位置,同时起点与终点将对换。如下图所示:

如何利用Photoshop的路径工具设计制作文字图案-马海祥博客

将起点往右下方拖动,文字从路径内侧移动到了路径外侧(内侧外侧只是相对而言并无严格标准)。

8、路径走向文字的一个特点就是它都是以路径作为基线的,如上右图,无论是内侧还是外侧,文字的底端始终都以路径为准,那假设我们需要将文字排列在一个比现有的心形路径更大(或更小)一些的心形路径上,那是否就要先绘制一个更大(或更小)的心形路径呢?

不必如此,只需要在字符调板中更改竖向偏移的数值,就可以达到效果,如下图所示:

如何利用Photoshop的路径工具设计制作文字图案-马海祥博客

就是将现有的路径走向文字图层复制了两个,然后依次更改竖向偏移的数值为15px和-15px,所形成的效果。

需要注意的是更改该项数值后,在路径的曲线上可能造成文字间距不一,此外,也可以通过回车换行来达到目的。

9、现在大家可自己尝试在原有的心形路径上排列多个文字图层,并将颜色、字号、字体、竖向偏移等选项各自调整,形成错落有致的效果,如下图所示:

如何利用Photoshop的路径工具设计制作文字图案-马海祥博客

马海祥博客知识点扩展:

一般来说,想要在Photoshop中绘制虚线和点线是比较麻烦的,但我们可以通过路径走向文字来实现,分别以若干字符“-”和字符“.”沿路径走向排列,即可形成虚线和点线,还可以综合使用其他字符,如下图所示:

如何利用Photoshop的路径工具设计制作文字图案-马海祥博客

而虚线的形态可以通过字符调板来控制,字号控制虚线的大小,字符间距控制虚线间隙的大小。

本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/Photoshop/679.html,注明出处;否则,禁止转载;谢谢配合!

相关标签搜索: Photoshop   路径工具   文字图案   设计图案  

上一篇:如何利用Photoshop或illustrator让图片和文字的像素清晰可辨
下一篇:如何使用Photoshop切片工具将大图片转换为多个小图的网页

您可能还会对以下这些文章感兴趣!

  • Photoshop工具界面介绍及使用说明

    Adobe Photoshop简称“PS”,是由Adobe Systems开发和发行的图像处理软件,Photoshop主要处理以像素所构成的数字图像,使用其众多的编修与绘图工具,可以有效地进行图片编辑工作,Photoshop有很多功能,在图像、图形、文字、视频、出版等各方面都有涉及,Photoshop的专……【查看全文

    阅读:19675关键词: photoshop   ps工具   ps界面   ps说明   日期:2014-12-29
  • 详解Photoshop的颜色设置和色彩管理

    当我们用设置的色彩模式拍完照片后,就开始在Photoshop上修片,常常会碰到这种情况:为什么自己修的色彩艳丽的图片拿到外面彩印出来就变得颜色黯淡或者失真呢?这就涉及到你在PS上使用什么色彩管理系统修片以及存储照片时色彩转化的问题了,不过看似复杂的PS颜色设置系……【查看全文

    阅读:20519关键词: photoshop   日期:2016-04-27
  • 详解利用Photoshop对图片进行自由变形的8种操作方法

    在学习Photoshop使用的过程中,我们常常会碰到很多对象变形的需求,“自由变换”就是完成这一功能的强大制作手段之一,熟练掌握它的用法会给工作带来莫大的方便。大家都知道在PS中编辑(Edit)菜单下有一个变换菜单,它的子菜单包含缩放、旋转等等,初学者在对这些菜单的理解上……【查看全文

    阅读:20884关键词: photoshop   图片变形   自由变形   日期:2014-07-27
  • 你并不知道但很实用的Photoshop插件汇总

    Photoshop软件可以说是美工、网页设计师们最常用的一个强大的做图工具,可以让美工和网页设计师的工作高效便捷的进行,也为设计师们的天马行空的思维提供了实际操作的技术实现。一般我们的网页设计师设计完成后,需要将其转换制作成网页形式文件,生成HTML和CSS。然而在……【查看全文

    阅读:2679关键词: 实用ps技巧   photoshop   实用插件   日期:2013-06-26
  • 如何利用Photoshop或illustrator让图片和文字的像素清晰可辨

    大家在设计界面和网页时,是不是经常碰到PS里绘制的图标虽然是矢量的,但还是会有许多虚边,当我们把图片放大、缩小、旋转后虚边变的更严重了,或者是在AI里绘制的精美矢量图标粘到PS里就变虚了,我们辛苦设计的作品就这样变“糊了”,这是我们双眼所不允许的,我们要让……【查看全文

    阅读:10620关键词: photoshop   illustrator   图片像素   文字像素   日期:2014-06-27
  • Sketch和Photoshop图片色彩管理模式的差异

    色彩管理是一门严谨有效的数字化设备视觉识别的流程,它是从结果倒推的管理办法,也就是说是应用于最终端的结果的,根据不同的终端,使用不同的解决方案。跟水无常势一样,没有一个万能的色彩管理方案,只有适用于不同需求的各种方案的调用。最近发现在photoshop中图片的色彩……【查看全文

    阅读:3357关键词: sketch   photoshop   色彩管理   日期:2016-05-04
  • 网站图片优化的分类有哪些?

    随着网站数量的日益增多,网站彼此之间的竞争也越来越激烈了,现在已不再是单纯的关键词排名竞争,用户体验也显的尤为重要,尤其是网站的打开速度。而在网站优化中,图片的大小在一定程度上决定着网站速度,如果图片优化得好,不但可以提高页面的加载速度,提升网站的用……【查看全文

    阅读:1049关键词: 网站图片   图片优化   图片分类   网站优化   日期:2014-03-18
  • 从PNG格式和透明度来看PC端和手机端该用哪种Png图片

    相信经常做图片的朋友对Png格式图片都很熟悉了,Png是图像文件存储格式,在网页设计中已经不是一个陌生的名词,在前端开发中经常使用到它。PNG格式有8位、24位、32位三种形式,其中8位PNG支持两种不同的透明形式(索引透明和alpha透明),24位PNG不支持透明,32位PNG在2……【查看全文

    阅读:8686关键词: PNG格式   Png透明度   PC端   手机端   Png图片   日期:2014-03-29
  • 使用Photoshop制作简洁大气的网站页面的具体步骤

    最近,随着网站的大批量的改版,网站设计、网站制作也成为了最近网络的工作的重点了,也有很多的同事、朋友问过,如何制作网站,页面切图的具体步骤,怎么使用Photoshop来设计页面。刚好最近帮朋友做个企业网站,在此借助马海祥博客的平台,将网站页面制作的具体的步骤……【查看全文

    阅读:1635关键词: Photoshop   网站页面   制作网站步骤   日期:2012-12-16
  • 分享Photoshop的10个不为人知的PS隐藏技巧

    相信很多人在学习Photoshop的时候比较重视抠图或者修图的一些技巧,但是对于Photoshop的一些小技巧都不太重视,但是有的时候这些小技巧往往可以让你效率翻倍,相信很多需要的人都会有一种相见恨晚的感觉,所以说人还是需要不断的去探索和学习,才可以发现更多新的东西。……【查看全文

    阅读:2010关键词: photoshop   日期:2017-05-20
↓ 点击查看更多 ↓

互联网更多>>

SEO优化 更多>>

企业网站SEO推广能给企业带来哪些好处? 百度搜索用户建议专区上线公告