Web Design Tips: SVG Design 网页设计技巧之SVG设计 Lynda课程中文字幕
Web Design Tips: SVG Design 中文字幕
网页设计技巧之SVG设计 中文字幕Web Design Tips: SVG Design
观看此视频以获取关于SVG（可缩放矢量图形）格式的快速网页设计提示
SVG允许您设计自定义矢量网页视觉效果，但有一些技巧可以让您的图形高效流畅
Brian Wood解释了使用独立画板，处理Web字体，保持渐变和路径尽可能简单以及在Illustrator CC中使用Photoshop效果的重要性
您好, 欢迎来到网页设计提示, 我的名字是Brian Wood。
我们来看看SVG的设计, 只需要注意一些事情。
我们要讨论的第一件事是画板。
在Illustrator中, 您想要做的是, 您想让艺术作品在自己的画板上成为SVG文件。
你还希望画板尽可能远, 或尽可能靠近, 我想你可以说, 艺术品本身, 没有大的差距。
这意味着以后它不会在浏览器中显示怪异, 看起来很奇怪。
另一件事是, 如果你要创建一系列的图标或一堆艺术品, 可以做几件事情。
如果你选择让我们说, 这里的艺术品的一部分, 我想保存为SVG, Illustrator有一个命令。
文件, 导出选择, 即使将事物分层, 也可以保存该对象。
我会建议将图标和不同的东西放在自己的画板上, 如果你可以做到这一点, 并将艺术品贴在艺术品上, 你可以得到它。
设计时要注意SVG内的字体。
如果我碰巧选择文本并使用像Typekit字体或我在机器上的字体, 那么查看此SVG文件的人将需要该字体, 而您不会在Illustrator中执行此操作。
如果我们保存下来, 那就说, 酷, 我们很好。你将不得不在代码中进行修改。
您可以, 如果你想, 直到键入, 并选择创建轮廓。
你一定要小心点
它可以添加大量的文件大小, 但文本仍将看起来像文本, 并且您不需要字体, 但它将不再可编辑, 它将不可搜索, 这里有一些事情。
如果您在Illustrator中导出, 这是我们今天在Illustrator CC 2015中做的事情, 我出去我的桌面, 并将其保存下来。
我们要确保我们使用不同的画板, 并设置我们要在这里设置的内容, 但是如果我导出, 您可以在这里看到, 在Font下面, 您也可以在Export对话框中转换为Outlines, 这可以是很有用。
如果您要使用渐变, 您可以做到这一点, 只需要非常小心, 您可以在渐变中使用多少颜色和停留点, 这可以增加文件大小。
有时我会在代码中找到自己, 在我离开Illustrator并编辑或应用渐变后, 可以在Illustrator中进行操作, 只需在测试中小心。
如果您使用混合模式, 不透明度蒙版, 不透明度, 所有这些不同类型的东西, 他们很有可能被光栅化, 所以你必须小心, 你必须测试。
在SVG中, 当您使用Illustrator内容或其他内容并将其保存时, 每一点都将被放入实际的代码中, 所以我们要做的是确保我们的作品相对简单。
如果要这样做, 可以使用Simplify命令, 尝试下拉使用的锚点数, 这将使SVG文件的大小更小。
在设计SVG时, 始终要考虑最终用例。
例如, 我在这里有一台笔记本电脑, 它的形状很简单, 在SVG文件中可能会很小, 但是如果以后我决定在这里动画化盖子, 让它移动或扭曲或者做这样的事情？
那么一个更好的方法就是创建两个独立的路径。
您可能还有一点更多的文件大小, 但后来如果要添加动画或以某种方式控制它, 您可以这样做。
如果您使用的是Illustrator, 并且您有矢量图形, 请在此处使用Photoshop效果非常小心, 例如让我们说Blur或Gaussian Blur, 因为如果我这样做, 并将其保存为SVG, 很多那些Photoshop过滤器将成为光栅。
它将光栅化, 并将其粘贴在SVG文件中。
如果我们想要, 我们可以使用所谓的SVG过滤器。
这是一个SVG过滤器的例子。
目前, 在我的Illustrator CC 2015版本中, SVG滤镜实际上已经没了。
您可以应用它们, 您可以导入它们, 但是您必须在网络上找到它们。
这可能是一个没有脑子, 但确保事情被分组和正确组织。
如果您有按钮对象, 在这样的手机上, 如果需要组合, 请尝试将它们组合在一起, 因为它将放在代码中。
您还可以根据艺术作品分离内容, 通常SVG发生的情况是, 如果您命名单个对象, 则将其作为实际SVG中的ID。
所以要小心命名约定, 只要保持简单, 保持直观, 你会没事的。
本课程视频下载地址:网页设计技巧之SVG设计