html怎么设置毛笔字体,原来毛笔字体是这么设计的!

news/2024/11/18 0:27:31/

无论是制作专题页还是制作海报我们都会用到字体,在很多的广告中为了加强画面的冲击力,经常会使用到毛笔字的表现形式。当使用毛笔字表现的时候,很多设计师都会进去一个误区,马上去网站找字库,怎么也找不到合适的字体。那毛笔字到底是字库还是后期绘制出来的呢?所以这成为了很多设计师棘手的问题。

那么今天MICU教大家如何快速设计一款毛笔字体,让设计变得更有冲击力!

1

生成毛笔字

输入文字,选择毛笔字体包装体

7de5a3a1de86cb9e01f66cc13c73aaee.png

在输入框中输入文案,然后选择合适的字体样式及文字的大小,点击开始转换

a08e341cd562f6541ae81198ee030a6d.png

生成出来的字体我右击点击复制图片

4a9c75ef1450ae6a6d9f6ccd909847fc.png

2

导入图片并构好图

打开AI,在AI中新建画布,粘贴(ctrl+c)到画布中。在AI中选中导入的图片,然后在导航点击【图像描摹】,再点击【扩展】将图片变成了矢量形状。

7e29352e06fe557e1f3e42a805f3906c.png

88b4a7cc14522dbd3446f3cac3bb4bce.png

bdd893f016165b29c0221d97d6deeae4.png

选择工具栏中【魔棒工具】选中需要删除的的白色部分形状,【Delete】删除。

a028b6b3cbbb8d320f4fbbacd7172fb2.png

在制作毛笔字体之前,我们先把构图做好,使用【直接选择工具】选中文字形状后,“右击”点击【取消编组】后再调整每个字体的位置及大小到合适的位置。

9c309181fdc78b1caecd6a00e4f3deee.png

为了构图的错落性我们将云字调整的比较小。

c38c5e5cb40ef3cfab92c5407563d278.png

3

选择笔刷绘制笔画

字体构图设计好之后,我开始对毛笔字的每一笔的细节进行调整。我按一下键盘上的‘“F5”,打开画笔面板。 在画笔面板右方点击【小三角】的图标-【打开画笔库】-【矢量包】-【颓废画笔矢量包】

c1125088b7e124e4f4e2e8db07ebbc75.png

我们可以在这个矢量包里有很多的笔刷效果

e6ba2274d7a4a598c466ce2c363a712f.png

那么这时候后开始去修饰每一笔的笔画效果,使用【钢笔工具】在字体笔画的结构上绘制路径。 绘制好路径后在颓废笔刷样式里选择合适的效果。

51c3e7a432f6f1b996a899fc0864b46b.png

在做每一笔的时候,我们为了加强设计的细节,可以多条路径调整不同大小的描边粗细进行组合绘制,这样处理出来的笔画更加的自然。

e39e5a0c3fd4ac5d2722aed90b909c23.png

f9febfa9537259eb5e9d97ccaa27d620.png

在使用路径绘制笔画的时候,可以选择【橡皮擦工具】擦除原来多余的文字形状路径,注意擦除的时候先用【直接选择工具】选择形状

91aed8547caa9eb3c6b26848f954d13f.png

69a7b0bffc7be379263cb723468d07ad.png

4

选择素材创建笔刷样式

打开矢量笔刷素材包

(在MICU设计公众号中回复21即可下载笔刷矢量包)

6cdb58aeb85a9ee08e5216fa76150ba8.png

选一个合适矢量笔刷元素去更改‘“云”’字的第一笔,调整到合适的大小。

5f955c57e85cb874f74cc9d69ce3a279.png

然后在矢量包里面选择较为长的形状,“拖动”到【画笔面板】中点击【确定】即可新建一个新的画笔样式。

c492603f10e0e27d1f3099dfcfc5bacb.png

在艺术画笔选择中可以对笔刷进行绘制方向的设定等。新建好画笔后,在画笔的面板中就可以看到新的画笔样式了。

e58fb54839142a12a91905a4f85f8c91.png

同样,用钢笔工具绘制一个位置的笔画路径,然后选择新建的笔刷样式也可以调整出合适的效果。(在用钢笔绘制笔刷样式的效果时,记得把形状关闭,只开启描边)

de76a42211f41675d35a930cebbb2f03.png

99aeaa5fbbbe20f7ce97b922a632e912.png

再将志字的上面一笔用同样的方式调整好

7e71d4aeb8db62ca6e5750caf1887f2f.png

0e1f46519dc0dd9aa3ce24d2cf75da52.png

5

调整细节

调整好所有的笔画效果后,用【直接选择工具】框选好所有的形状,在导航上点击【对象】-【扩展外观】将所有的路径转成形状。

648fedfadca49a25e8130c0dc26a95ec.png

4a4b71e74bff5ac202136053308755ea.png

扩展外观后,由于原来用路径画笔样式画出来的笔画扩展后有白色的形状,这时候用【魔棒工具】选择黑色的形状【ctrl+x】进行剪切,在用选择工具框选遗留下来的透明形状,Delete进行删除。

26974f510b32c7a3e9ff93b2fecd2f08.png

56b39ea5bfc13a28e7e2a41f82d06a50.png

88f5322147e6dadb8bc802773a4fb241.png

清理完多余的空白路径后,再次使用【直接选择工具】框选所有的路径,打开【窗口】-【路径查找器】点击【合并形状】图标将所有的形状合并。

5f9e04be000d8dbf3e3ab47bd0214e4a.png

这时候我们的文字就绘制好了

b00dddba67ce73a064fc058827a7cc00.png

绘制好文字后我们可以对文字进行一个排版,比如反白或加上一些辅助的细节,让设计变得更完整。

beabfc094b3ef970277e8d89c9015598.png

0182d9fe562782cc46f0d85930ba773c.png

56f2b8d8f4133b9693b76185de181e06.png


http://www.ppmy.cn/news/539642.html

相关文章

Windows和Linux动态注入

摘要:最近对动态注入有一些兴趣因此搜索了些资料,简单整理了下相关的技术实现。本文只能够带你理解何如注入以及大概如何实现,对注入的方法描述的并不详细。   关键字:dll注入,hook,提权   读者须知&am…

7A50T 引脚功能详解

本文针对7A50T芯片,详细讲解硬件设计需要注意的技术点,可以作为设计和检查时候的参考文件。问了方便实用,按照Bank顺序排列,包含配置Bank、HR Bank、HP Bank、GTP Bank、供电引脚等。 参考文档包括: ds181_Artix_7_D…

温度传感器100k 热水器温度探头

东莞市龙畅电子科技有限公司,是专门从事温度传感器生产与研发的企业,公司生产的温度传感器品种多,规格全,主要有热敏 ntc温度传感器,ptc温度传感器,pt100,pt1000温度传感器,ds18b20温…

家装电线越粗越好吗

在装修这件事上,很多家庭都尽量用最好的,尽量做预留。电线的选择也是如此,有些人认为电线越粗越好,虽然现在4平方线和6平方线比较贵,但是负载更大更安全,以后也可以为各种电器预留。但实际上,这…

10. 第十部分:未来的JavaScript发展趋势

10.1 WebAssembly WebAssembly(通常缩写为Wasm)是一种二进制指令格式,旨在在Web浏览器和其他环境中以安全、高效的方式执行。它是一种低级虚拟机,作为可移植的编程语言目标,允许开发人员在Web上以接近本机性能运行其代…

LAME应用教学--HIFI级MP3制作之路

HIFI级MP3?可能吗?LAME又是什么?看完全文就会知道,不过,在此之前,还是先普及一下MP3基本知识,不然大家或许会不明白。一、MP3家史  mp3全名是mpeg audio layer iii,诞生于1987年&a…

学画画软件app推荐_画画自学app推荐

极典画室从几个方面整理了不同用处的学画画APP,希望可以帮到你。 学习APP bilibili哔哩哔哩/B站 B站很多绘画up主会上传很多视频,有绘画录播,也有很多教程,其中不乏很多大佬的教程还有国外大佬的教程。虽然有一些视频是用于招生的…

梁储定郊外,为官正派-太子少保南京吏部尚书记

梁储(1453-1527年)字叔厚,又字藏用,号厚斋,晚号郁洲,石肯(1952年划归南海县)人。明成化十四年(1478年)进士,选庶吉士。由翰林编修累官至吏部尚书、…