• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 超实用!四招快速提升字体设计能力

超实用!四招快速提升字体设计能力

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含中文字体设计,字体设计,经验分享等相关知识,希望在学习及工作中可以帮助到您

@谢思靖?:? 我们为什么要做字体设计?首先就是因为版权问题,做商业设计的时候,可能并没有拥有那么多版权的字体可以使用。为了不陷入不必要的版权纠纷,就需要自己来做字体的设计。

当然最重要的还是通过自己设计出来的字形,将字体图形化,提升画面的趣味性,更好的吸引用户浏览和表达主题氛围。

字形的大致分类

中文字体的字形变化千变万化,我们为了便于理解,将字体的变形方式大体分为四类,每类下面根据设计的不同又可以延伸出很多种不同的字体风格。

1. 可爱卡通类型字体设计

字体特点:圆润,笔画随意自由,有粗细变化,手写感

2. 文艺类型

字体特点:纤细,自由,手写体

3. 锐利硬气类型

字体特点:刚硬,棱角,夸张有冲击力

4. 毛笔字类型

字体特点:刚硬,棱角,夸张有冲击力

对应四种类型的字体设计,我们也整理出四种字体设计的招数,让大家快速提升字体设计能力。(以下操作均在AI、CC中操作)

第一招:画笔工具+宽度工具打造可爱类型字体

Step 1. 画笔工具手写字型

首先使用AI的画笔工具(B),在画布上先绘制出字体的大致形状。不用太在意现阶段的美丑,尽可能的让字体工整,一些笔画可以写的俏皮一点有一些转弯之类的。

Step 2. 调整路径美化线条

选中第一步骤中所有的字体,按下D键。D键的功能是将选中的物体变为默认的描边与填色(为了方便后面使用宽度工具)。

通过锚点工具调整文字上的节点,调整文字外形,如果文字上锚点太多,可以通过对象>路径>简化路径,进行调整。

Step 3. 调整线条粗细和端点

再将目前的描边加粗。将目前为1的描边调整到适合的粗细。使细瘦的字体看起来丰满。选择直接选择工具(A)。适当的调整字体的锚点,不使笔画都挤到一起。调整后,得到下面的字体效果。

Step 4. 宽度工具快速打造字体粗细变化

在CC版本中,新加入了一个非常好用的功能——宽度工具。在制作这种字体的笔画过程中,可以大大的简化操作。使用这个宽度工具后,拖动线段的某一个部分,会使线段均匀的加粗或者变细。

利用宽度工具迅速改变笔画粗细变化,让字形更加可爱?。

Step 5. 细节微调

得到以上效果后,我们全选字体。然后在“对象”的工作栏中找到“扩展外观”的选项,对整个字体进行转曲。

使用直接选择工具(A)进行锚点进行微调。

最终效果:

第二招:描边工具制作文艺文字

Step 1. 选择字体框架,利用钢笔工具勾出字体轮廓

首先我们新建一个模板,选择一个最常见的字体——宋体。

将文字拉长。这样文字有一种高挑修长美女的既视感。同样可以根据实际需求中要制作的字体情况保持原状或者挤扁字体,或者选择其他纤细的字体作为模板,都是可以自行调整的。不要拘于某一种字形,觉得好看,合适就好。

用AI里的钢笔工具(P)。调整适当的描边粗细,保证线条纤细精致。

将宋体的字形衬在底部,描出4个字的大体框架。

Step 2. 圆角工具处理笔画拐角?

在AI CC版本中,加入了一个很好用的倒角工具。选择一个尖锐的形状。会在折角处看到有可以用来倒角的小圆圈。图示为2个边的折角和一个正方形。鼠标放到折角的小圆圈处进行拖动,就可以直接对2条边进行倒角。方形的形状更是方便,4个角可以一同进行变化。

鼠标放到折角的小圆圈处进行拖动,就可以直接对2条边进行倒角。

用这个小技巧来将折角处的接口变的圆滑,会使折角处圆滑的更加自然,处理过程的更加便捷。

Step 3. 改变笔画进行细化设计

可以根据自身的感觉与创意在线的交汇处等细节区域,做一些个性化的处理,比如将两段线条连接起来,或者端点处加一些圆圈的小装饰等。”

可以根据设计环境的要求,对字体进行加粗,呈现的会是另外一种感觉。

PS:也可以依照这种方法 改变线条的断点,做一些线条比较板正的字体的效果。

第三招:矩形造字法

通过AI工具的矩形工具利用矩形形状去创造出结构相对硬朗的字体设计方向

Step 1. 利用矩形搭建字体骨架

这里以“勇往直前”这几个字为例。

先选用一种合适的字体作为“骨架”。我这里就选一种最为平凡的微软雅黑作为实例。使用字体工具,将这4个字打出来。(可以选择更多个性的字体作为结构参考,这里使用微软雅黑也是因为它的普遍性,请举一反三)

然后我们根据字体的笔画疏密程度,以及想要的字形感觉,先确定一下笔画的基本粗细。笔画“竖”一般会比“横”稍微粗一些。拎出来2个基本笔画“横”“竖”作为拼接该字体的积木,将即将做的这4个字用这2个基本笔画拼接起来。为了能看清楚下面的基础字型,绘制矩形的时候,可以适当的调整透明度。

如果遇到“点”或者“提”等斜着的笔画。我们可以使用AI里的直接选择工具(A),选择某一个边进行随意的调节。也可以使用变形工具(E)进行变形。

在制作的过程中,请勿完全根据2个基本笔画的粗细一成不变的进行拼凑。还需要进行一定的字体处理。如果一成不变只会让字体比较呆板。而且在拥挤的结构中2个很粗的笔画保持粗细不变的话,也会挤到一起。

Step 2. 调整形状+规范字体大小外形

这样的初稿有了字体大致的形状。但是上下的结构还不是很整齐。整个字体由于还是初步的制作,看起来有一些死板。

现在我们把形状的透明度调整为100%,上下加上2条辅助线。我们调整字体的字形,可以让上下的轮廓更加的整齐,水平。也再次调整线条的粗细以及内部结构。让字体整体更加的协调。

Step 3. 改变字体角, 增加锚点丰富笔画结构细节

得到了这样的一个字形后,为了让字体更加有速度感和力度感。我们使用(E)变形工具,可以让字体稍微的倾斜。

您可能想查找下面的文章:

  • 这篇字体设计教程,可能让你少赔几万
  • 想做出中国风的字体设计?我总结了4个规律!
  • 刘兵克教程!聊聊字体设计中的加减法
  • 超实用!四招快速提升字体设计能力
  • 设计的中宫指什么?不懂这个谈字体结构和造型都白搭!

相关文章

  • 2018-08-23浅色还是深色?教你选择合适的界面配色方案!
  • 2017-08-06设计中不可忽略的产品状态之交互设计的分析
  • 2018-08-23产品需求一直不能落地,还好前辈教我这个流程
  • 2017-08-06如何去掉图片作为超链接时出现的蓝色框框
  • 2017-08-06整理CSS中遇到的一些常见问题(Hack标识/固定容器/图片垂直居中)
  • 2018-08-23从事用研6年后,我总结了这四个最重要的技能
  • 2018-08-235个实操改稿案例,教你做出高质量的Banner设计!
  • 2018-08-23这5个思路,能让你的线上广告更加吸引人
  • 2018-08-23超详细的登录注册的业务逻辑流程梳理
  • 2018-08-23给设计师的2018年阅读推荐书单

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 解决checkbox复选框选中传值,不选中不传值的方案
    • 以手机淘宝为例,看原型图易缺失的交互场景
    • 用这个方法,让你的设计方案轻松通过! 
    • UCAN2017回顾!阿里UED大学负责人:我们如何做人才的增值?
    • 从四大维度,全方位剖析APP应该如何设计好「分享功能」
    • 写给新手的APP结构指南:首页相关(下)
    • 网页设计的平面构成排版能力的介绍
    • 全球化设计系列!国际化产品设计有哪些需要注意的事项?
    • 基础小技巧!5个简单直观的设计对比方法
    • html编写edm时注意事项小结(一般发邮件需要注意的地方)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有