序:
前两天有个东西需要做SVG格式图片,打开几乎不怎么使用的AI,然后就开始各种纠结。
其中,想做出一个文本标签,文字是透明效果,于是开始各种研究。
最后在百度知道上看到个个人觉得比较合适的方法,并尝试了实现。现在左下笔记,方便自己,同时也方便有需要的朋友。(AI小白笔记,大神请忽略)
第一步:
打开某个文件(废话╰( ̄▽ ̄)╮)
第二步:
创建一个矩形,填充白色
第三步:
创建一个文本,然后将文本和矩形中心点对齐(对齐其实只是为了美观,应该不会影响最终效果),文本处于矩形上层,形成白底黑字。
第四步:
再创建一个矩形,填充为黑色,且将其放在白色矩形和文本的下面。
第五步:
调整白色矩形和文本与黑色矩形的对齐位置,使白色矩形和文本处于黑色矩形的内部,而不是有部分超出。
然后,选中所有元素(可以将其编组)后,在图中红箭头所指的一栏的右上角点击小三角菜单,选择建立不透明蒙板。
第六步:
第五步完成后就可以得到想要的透明文本的效果了。而且,最重要的是,这个文本是可以随时进行编辑的,没有创建轮廓的,可以自由扭曲,透视。
第七步:
演示下最终效果:为了更加直观的看出效果,我新建了一个蓝色填充的矩形,一个放在最底层的同字号字体黑色填充同内容的文本用来对比。
可编辑状态:注意,想要进行编辑的话,需要在右侧工具栏透明度那栏中选择右侧的那个代表原白底黑字的元素的按钮后,在用文本工具选中透明字,就可以进行编辑了。
结语:
这种做出透明字的方法主要使用了不透明度的工具实现的。
演示文件:.原文件(貌似没有找到直接在博文中添加文件的途径)
emm..........有了
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
<text transform="matrix(1 0 0 1 392.8564 129.2466)" font-family="'Leelawadee'" font-size="65.8">PETER</text>
<radialGradient id="SVGID_1_" cx="360.9512" cy="242.9053" r="277.8277" gradientUnits="userSpaceOnUse">
<stop offset="0.1014" style="stop-color:#43ADE3"/>
<stop offset="0.3437" style="stop-color:#3F9FD9"/>
<stop offset="0.7703" style="stop-color:#3988C9"/>
<stop offset="1" style="stop-color:#3780C3"/>
</radialGradient>
<polygon fill="url(#SVGID_1_)" points="455.377,516.09 78.556,181.27 266.523,-30.279 643.346,304.539 "/>
<defs>
<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="290.667" y="103.095" width="478.23" height="214.286">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<mask maskUnits="userSpaceOnUse" x="290.667" y="103.095" width="478.23" height="214.286" id="SVGID_2_">
<g filter="url(#Adobe_OpacityMaskFilter)">
<g>
<rect x="329.782" y="148.332" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="400" height="123.81"/>
<g>
<text transform="matrix(1 0 0 1 441.1582 230.397)" font-family="'Leelawadee'" font-size="65.7981">PETER</text>
</g>
</g>
</g>
</mask>
<rect x="290.667" y="103.095" mask="url(#SVGID_2_)" width="478.23" height="214.286"/>
</svg>
...............
xiaobaijiaocheng, hahahahhaha.......