零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果

原文:零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果

本章将教大家如何活用「Text On Path」,做出文绕图以及文字线性排列的效果

也可以学到如何使用Polyline以及B-Spline

?

本章将教大家如何活用「Text On Path」,做出文绕图以及文字线性排列的效果

也可以学到如何使用Polyline以及B-Spline

?

范例最後成果图片:

?

跟着做,就能做初出跟范例一样的效果了!

?

01

我在网路上找了一张小光的图片来做修改

你可以下载文末的范例专案来跟着做,或是使用自己喜欢的图片来进行

?

置入图片後,我们还需要一点文字,请到这个网站复制文字

复制完成後,请点选Text(快捷键T),随意的把刚刚的文字贴在画面上

?

02

接下来,我们要把文字绕着小光排列,所以需要使用Polyline拉出要的形状

?

这里要说一下Polyline的特别之处:

?

若是你想要画出直线加上曲线的形状,那Polyline绝对是最好的工具

?

由上图分解说给你听:

标示为数字3的地方,是起点也是终点

当动作进行到数字1的位置时,於往数字3的方向封闭图形的途中

在数字2的位置点下滑鼠左键别放开,直接把动作拉至数字3的起始点做图形的封闭

若是你不熟,请多试几次一定OK!

?

学会了Polyline,接着就是在小光身边画出适当的形状

?

03

上面的动作都完成了以後,接下来是重头戏罗!

我们要把字放入刚刚画好的形状里,让字绕着小光排列~

请一并选起画好的形状与要放入的文字後,Object->Text on Path->Attach Area Text

?

把文字放入後,应该会如下图

?

可以运用文字置右排列,使文字更贴近小光

?

也可以使用Direct Selection(快捷键A),调整节点,让文字跟形状排列的更密切

?

04

再来,我们让文字用线性排列方式呈现

使用B-Spline画出曲线

?

每点一下滑鼠左键,为一个弯曲节点,按下Enter可以结束动作

?

05

使用刚刚学到的方法,一样选起曲线以及要线性排列的文字

Object->Text on Path->Attach Text

?

很简单的几个动作,就大功告成啦!!

?

如果能活用Design,将会对你的设计工作带来事半功倍的效果喔!

?

(本篇的图片仅供教学使用,若有侵权请告知。)

?

?

本篇的教学就到此。

?

?

?

(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)

一步一步迈向HIE之路

喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您

原文地址:https://www.cnblogs.com/lonelyxmas/p/9801061.html

时间: 2024-10-13 22:13:41

零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果的相关文章

零元学Expression Design 4 - Chapter 7 使用内建功能「Clone」来达成Path的影分身之术

原文:零元学Expression Design 4 - Chapter 7 使用内建功能「Clone」来达成Path的影分身之术 本章所介绍的是便利且快速的内建工具Clone ? 本章所介绍的是便利且快速的内建工具Clone ? ? 为什麽会说像是影分身之术呢? ? 请参照火影忍者(NARUTO): <分身术>会分身术者,能以一身分出几身,几十身,乃至千百身. (此为鸣人的多重影分身之术的加强版--「後宫之术」) ? 看下去就知道 ? 01 首先,请先随意的在主要工作区画上你想要的图形 你可以

零元学Expression Design 4 - Chapter 5 教你如何用自制笔刷在5分钟内做出设计感效果

原文:零元学Expression Design 4 - Chapter 5 教你如何用自制笔刷在5分钟内做出设计感效果 本章将教你如何运用笔刷与简单线条,只要5分钟,就能做出设计感效果 ? 本章将教你如何运用笔刷与简单线条,只要5分钟,就能做出设计感效果 ? ? 本章范例的最终图: ? ? 开始吧~! ? 01 首先,在画面上拉出四个宽.高皆为10px的正方形 ? 如下图,四个方块由上至下颜色分别是#000000.#A1A1A1.#4D4D4D.#D6D6D6 ? 接着使用上一章学到的自制笔刷方

零元学Expression Design 4 - Chapter 2 熟悉Design并且快速设计出Silverlight网页

原文:零元学Expression Design 4 - Chapter 2 熟悉Design并且快速设计出Silverlight网页 本章将用带大家熟悉Design 4并制作简易的网页版面,也会让你了解如何利用Design 4内建功能产出Xaml ? 本章将用带大家熟悉Design 4并制作简易的网页版面,也会让你了解如何利用Design 4内建功能产出Xaml ? ? 直接开始噜! ? 01 开启一个新的专案(快捷键Ctrl+N) ? 完成新专案开启後,在主要工作区放入一个Rectangle(

零元学Expression Blend 4 - Chapter 37 看如何使用Clip修出想要的完美曲线(上)

原文:零元学Expression Blend 4 - Chapter 37 看如何使用Clip修出想要的完美曲线(上) 几何外部的 UIElement 会在呈现的配置中以视觉化方式裁剪. 几何不一定要是矩形. 裁剪区域是几何的「外部」. 换句话说,如果几何是用来做为 Path 而非裁剪的资料,所显示 (未裁剪) 内容的几何区域即具有 Fill 属性. 裁剪区域是指落在几何覆叠外部的任何区域. 对於复杂的几何而言,区域的裁剪与否会受到几何的 FillRule 的影响. ? ? 开场白不知道怎麽写.

零元学Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲线(下)

原文:零元学Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲线(下) 你可以把Clip想成是一个遮罩,运用遮罩达到我们想要的效果 所以在这里我们把文字的范围当成是遮罩 与遮罩交叠的图片部分被截取出来 进而呈现出图片镶进文字内的效果 ? 在上篇提到了Clip的基本认识,本回要介绍进阶的使用并实作 ? 本篇范例的最後结果如下: ? ? 01 在主要工作区放入一张你喜爱的图片 并使用TextBlock->输入你想要的文字,如图: ? 02 再来,运用上

零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果

原文:零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果 又来一篇五分钟做设计啦~ 本篇将教大家如何运用Design内建工具Blend Paths在五分钟内作出超炫效果 ? 又来一篇五分钟做设计啦~ 本篇将教大家如何运用Design内建工具Blend Paths在五分钟内作出超炫效果 ? 范例最後成品 ? ? 01 开启一个新专案後,使用Paintbrush(快捷键B)在画面上拉出你想要的线段或是文字 我以点部落的英文DotBlogs为例,

零元学Expression Design 4 - Chapter 4 教你如何自制超炫笔刷

原文:零元学Expression Design 4 - Chapter 4 教你如何自制超炫笔刷 在Chapter 2 有稍微讲过Design内建笔刷的用法,本章将教大家如何自制独一无二的笔刷,并且重复利用 ? 在Chapter 2 有稍微讲过Design内建笔刷的用法,本章将教大家如何自制独一无二的笔刷,并且重复利用 ? ? 01 开启一个新专案後,我们来复习一下,怎麽使用Design的内建笔刷 随意在主要工作区拖拉出一个形状,并配置上笔刷.笔刷宽度.笔刷颜色 看看你的图形外框是不是变得不一样

零元学Expression Blend 4 - Chapter 7 什麽?影片不再是印象中的方框框!!!看Blend 4如何把影片镶入字里

原文:零元学Expression Blend 4 - Chapter 7 什麽?影片不再是印象中的方框框!!!看Blend 4如何把影片镶入字里 本章将教大家如何在Blend 4里新增Media Element,以及运用Video Brush让影片镶入你所设定的字里,使影片不再是传统的呈现方式. ? ? 本章将教大家如何在Blend 4里新增Media Element,以及运用Video Brush让影片镶入你所设定的字里,使影片不再是传统的呈现方式. ? 就是要让不会的新手都看的懂! ? ?

零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计

原文:零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计 本章将教大家如何把Photoshop档案置入Expression Blend 4,以及设置简单的动画. 只要按照步骤来,就能很容易的做出动画的效果. ? 本章将教大家如何把Photoshop档案置入Expression Blend 4,以及设置简单的动画. 只要按照步骤来,就能很容易的做出动画的效果. ? 就是要让不会的新手都看的懂! ? ------------------