21
2011-02

网站设计使用 Illustrator 的理由

无可否认,Adobe Illustrator 往往最当然不是有益身心的时候网页设计的第一选择。更经常使用烟花和 Photoshop,一些好的理由 的。仍然,虽然传统上一直使用 Illustrator 绘制插图和标志,您可以使用它太设计布局和用户界面。

事实上,在我的意见可以 使用 Illustrator 解决一些常规设计任务 更好地和比你与其他工具更容易。与我想在这篇文章中的提示技术我确信你将能够构建模块化、 灵活的网站,更少的时间和更少的工作。

Web 设计使用 Illustrator 的理由

设计更快

Illustrator 与在 Photoshop (即第一次选择该图层和当时的工作) 中的图层模式,不同的是采用一个"画板"范式: 每个对象是可选择直接在画布上。只需点击您可以操作在画板上的任何对象 (通过调整大小、 移动、 重新,等) 并使其像素精确使用变换面板 (仅在 Illustrator CS5 中可用)。它是更直观,需要单击鼠标较少让您的工作更流畅。

此外将通过在 Illustrator 中是唯一的两个有用的功能来节省时间:

  • 使用 符号 面板创建 Web 模块化设计和
  • 快速设置格式的文本 段落文本样式 面板。

1-edition-illustrator in Productive Web Design With... Adobe Illustrator?

认为模块化

使用符号面板,您可以创建可重用的组件,将为您节省时间更新您的设计时,或者从零开始。这项技术是特别有用的重复出现的元素如按钮、 导航栏、 分页元素、 页脚、 等。

如何创建可重用的组件?

  1. 创建主组件 (按钮、 导航栏,等),并将其保存为符号面板中的符号。
  2. 将从的 符号面板 拖动到新创建的组件,并将其放到您的设计。
  3. 现在,在修改您在符号库中的主按钮时每个链接的出现的元件会以及更新。

3-symbols-illustrator in Productive Web Design With... Adobe Illustrator?

快速工具创建框图

Illustrator 是有用的框图,使您能够快速地向客户端显示基本布局和导航。我通常通过绘制一个模拟黑色和白色开始使用简单的盒子、 线条和版式。向客户端申请提交线框后的颜色和效果基于的线框 (我们将更详细地在本文的后面这部分) 创建一个更复杂的设计。

这里是准备在 Illustrator 中的线框的优势:

  • Illustrator 是快速绘制线框图的矢量性质。您可以快速、 轻松地创建框、 线条和文本。
  • 您可以使用图书馆的知识共享的元素如按钮和图标,和拖放轻松地到线框。
  • 一旦批准基本线框,你会 节省时间 创建最终的设计,因为布局和内容都已经存在。有时得到最终的设计就像格式文本的样式表和应用一些图形样式一样容易。

4-wireframes in Productive Web Design With... Adobe Illustrator?

快速、 轻松地设置文本的格式

如果您使用 CSS 或 InDesign,然后你会已经熟悉"字符"和"段落"样式和快速修改和控制文本布局是多么强大。你可以这样做的 Illustrator。Illustrator 共享 InDesign 的高级排版功能很多好的东西。

所有你想要风格的网站上的正文文本,例如使用 段落 样式。然后,当你进行修改 (说,从 arial 字体的字体更改为彩云),在您设计的每一页正文文本将马上调整。

除了段落样式您可以快速地将文本样式应用于各种双边投资条约的文本使用 吸管 工具:

  1. 选择要复制的样式的文本,
  2. 单击您需要的样式,和 … … 的文本瞧 !立即应用该样式。

5-stylesheets-illustrator in Productive Web Design With... Adobe Illustrator?

成为一个灵活的设计器

在今天的迅速发展专业设计的关键是努力的能够快速更改版式,如果没有大量。多年的 Web 设计使用 Adobe Photoshop 我开始觉得自己像个"像素裁缝,"使用钝剪刀和粉笔。

我觉得没有为执行基本 Web 设计流程优化的应用程序的位图性质。例如假设我要圆的形状。我需要请执行以下步骤: 选择的区域和使用"轮筛选"功能、 反相选择然后切所选的区域,以便保留的区域将显示圆角。

使用 Illustrator,我只是适用于我的选择圆角的效果。此外,我可以保存此图形样式,并将其应用于其他元素。这种方式在 Illustrator 可帮助您快速响应客户的需求。

6-effects-illustrator in Productive Web Design With... Adobe Illustrator?

重点对简单,清洁设计

Illustrator 提供了更简单图形选项比 Photoshop,可以帮助您专注于合理的设计原则和停止浪费不必要的效果和滤镜的时间。如果您需要复杂的界面,有很多如纹理的背景和复杂的照明效果的图形效果,Photoshop 无可争议依然是最佳选择。但简单和干净你的设计是否然后我有信心您将在完成你的工作更快、 更有效地使用 Illustrator。如果您真的需要复杂和组织图形,太,您可以完成此 Illustrator,但这需要一些知识。晚些时候对我们将讨论如何避免,过于干净的"载体"看看纹理按钮下面所示,以提高您的设计。

7-illustrator-texture-illustrator in Productive Web Design With... Adobe Illustrator?

工作较轻和速度更快

小于栅格化图像矢量图像。因此,Illustrator 将帮助您创建比用 Photoshop 是较轻,减少大量占用 CPU 的设计。这使您可以到相同的 Illustrator 文件组很多界面屏幕避免打开多个文件,在设计时的不便。

在我的职业生涯我设计了 30 个屏幕都在同一个 Illustrator 文件内的同时下 5 MB 大小 (不包括位图图像)。因为 Illustrator 不是您对 CPU 的要求和需要较少的内存您可以保留多个应用程序打开在同一时间而不会减慢您的计算机。您也不需要创建、 调整和导出您的设计最具实力和因此更昂贵的机器。

如何创建模块化设计

要使讨论更有趣的方式完全一个可以使用 Illustrator 的常规设计任务让我们看看最终的 Illustrator 技术的 Web 设计人员: 使用的矢量符号创建一个模块化的设计。

节省时间与符号库

符号 库,可以重复使用和跨整个网站修改元素。不仅会节省您的时间,它可以帮助您构建一个可反复使用的项目的库。

Illustrator 预览所有您在该符号事务委员会中的符号,您可以创建任意多个面板所需。您可以通过创建两个事务委员会的每一种常见的图形用户界面元素的特定组织你的工作: 箭头、 图标、 按钮、 等。以这种方式您只是浏览您选择的符号,并放到设计画板上的一个。

9-symbols-library in Productive Web Design With... Adobe Illustrator?

使您的设计保持一致

符号组件帮助您保持在整个网站的设计的外观。通过集中的组件设计与主符号,您将能够一次查看所有的元素,请确保您正在对样式一致。您不再需要查看每个屏幕中,看看是否忘记了更新一个元素。

8-master-elements-illustrator in Productive Web Design With... Adobe Illustrator?

未来的项目组件库的建立

因为组件驻留在符号面板中,他们是分开设计布局。通过不断地将组件添加到您的媒体库中,将建立的可重复使用或修改在其他项目中的项的集合。提高效率快速成为指数。这是构建您自己的接口框架的第一步。

我谦卑的建议,以帮助您组织你的工作是还为每个组的 GUI 元素使用不同的面板。这年来我发现最好有箭头的一个小组,一个图标,一个用于基本图形用户界面元素 (按钮,形成元素,等等)。通过下载我的 自由 GUI 设计框架,您可以看到图形用户界面组件库的示例。

若要创建您自己的符号面板,首先,将添加矢量形状到符号面板拖放内。通过在符号面板选项中选择"保存符号库"下一步,将此符号库保存为 AI 文件:

25-save-library-illustrator in Productive Web Design With... Adobe Illustrator?

您可以添加任意多个符号板美工板上的,要去窗口 → 符号库。

26-load-symbols1 in Productive Web Design With... Adobe Illustrator?

使用 Photoshop 的模块化设计限制

Photoshop 提供了该选项"海关形状",类似于在 Illustrator 中的"符号",但有三个主要的限制:

  1. 您不能定义为您创建的元素的精确大小。让我们假设您不知道所需的确切大小绘制自定义形状的一个领域。没有可编辑的字段,可以调整到您需要的确切大小尺寸。
  2. 您不能更改自定义的形状尺寸一旦被创建。这使得您的设计,缺乏弹性和劳动密集型。这些自定义形状更像比可重用的组件的 Web 设计的向量画笔。
  3. 没有指定的面板来管理您的自定义形状。将自定义形状添加到存储库中需要很多点击每次: 单击自定义形状图标,激活要查看海关形状的下拉面板,请单击以选择该形状。最后,然后单击布局和定义形状的大小,将其拖动到所需的尺寸。这是一个冗长的过程。Illustrator 的可定义符号面板是更易于使用,为什么我真诚地相信 Illustrator 是卓越的 Web 设计工具的主要原因。

创建专业的设计

您可以使用 Illustrator 设计专业的、 复杂的接口。看看下面的按钮。注意到他们有纹理的外观和各种视觉效果 (投影、 内发光等)。一点点实践与好眼中,您可以实现您将使用 Photoshop 的相同的图形设计。但是,明显的优势是这些元素将完全可编辑的可调整大小的和可重复使用。

添加视觉效果

它虽然比 Photoshop 少内置的图形效果滤镜 Illustrator 包括最有用的: 投影、 纹理、 噪音、 圆的角和内、 外发光。通过关注较少影响你的创意,将更有效地工作和玩影响的时间较少。

所有筛选器设置位于外观面板中,您可以保存效果的每个组合为一个图形样式轻松重用,或修改您的设计。请记住,插画有模块化设计的力量: 在更新图形样式时使用该样式的元素的每个匹配项获取在更新。

Illustrator 的另一种强大的功能是可以在周围向量元素,可以添加到任何对象的背景填充的不限的数量的 无限数量的轮廓有了这些,实验,您可以创建一些复杂的分层的样式。

15-appearance in Productive Web Design With... Adobe Illustrator?

纹理化您的设计

通常最好避免不育的"载体"看在设计中通过将某些纹理添加到布局中的元素。

这里有 三种主要方法的纹理在 Illustrator 中

  • 使用无缝、 重复的位图。大背景通过选择文件导入一种纹理 → 放置,然后将其添加为色板面板中的色板。然后,您可以使用它来填充的形状。
  • 使用风格化筛选器 (影响 → 风格化) 将一些噪音或纹理添加到一个背景。
  • 使用 Illustrator,附带的纹理色板,并把他们放背景填充。更改纹理填充到一个不透明模式如正片叠底,并调整不透明度以某处 15 至 20%,给它一个微妙的融合影响。

再次,可以将所有这些变形和噪音的影响作为一种图形样式保存和重复使用或以后对其进行修改。

13-texture-illustrator in Productive Web Design With... Adobe Illustrator?

16-swatch-texture in Productive Web Design With... Adobe Illustrator?

创建完美的渐变

Illustrator (CS5) 的最新版本被包装包括不透明度设置为每个颜色点和椭圆渐变的一些复杂渐变。您可以直接点击一个对象,以自定义具有不同的首选项的填充渐变: 角位置、 颜色滑块、 协调中心、 来源、 等。过程效率很高,是有点优越的工作流阻碍了由中间的渐变编辑窗口的 Photoshop。

目前,Illustrator 仍缺乏一些渐变抖动选项 (在其他应用程序如烟花中找到),有时会导致带效应。一个有效的解决方法是将一些纹理和/或噪音添加到您的渐变上一节中所述。

请注意烟花提供更多类型的渐变。(包括 CS3 CS4,CS5) 的所有版本都有直线、 径向、 矩形、 锥、 轮廓、 椭圆、 酒吧、 波纹和一些更渐变类型。烟花有很多更多类型的渐变,和那些渐变,也是"实时编辑"在画布上就像在 Illustrator 的最新版本。

18-gradient-illustrator in Productive Web Design With... Adobe Illustrator?

舍入的影响

在 Illustrator 中非常简单,其中包括排版的任何形状添加圆的角。只需单击将其选中画板上的任何对象。然后,选择效果 → 风格化 → 圆角从主菜单,并定义曲线半径。晚些时候就可以修改使用 外观面板 的半径。Photoshop,另外一方面允许您添加只圆角矩形,要和半径设置之后, 不能更改。

17-rounded-illustrator in Productive Web Design With... Adobe Illustrator?

智能调整大小和缩放工具"9 切片"

使用 Illustrator CS5 可以调整对象的大小而不扭曲其。您定义某些区域,以扩展和维护 (圆角,例如) 一些区域。将该对象另存为一个的符号,现在,您需要一个可重复使用的图形用户界面组件。

9 切片缩放功能并不新鲜,Adobe 系列产品。首次出现在 Adobe Fireworks CS3 (它应用于符号仅在 CS3 版本中)。烟花 CS4 中功能成为一个新的"9 切片缩放"工具,现在可以使用在画布上的任何对象。Photoshop 根本没有此选项。

19-scales-illustrator in Productive Web Design With... Adobe Illustrator?

文本的高级的选项

在 Illustrator,您可以使文字环绕图片 — — 的文本将自动调整图像大小的变化 — — 并定义外侧边距,就像在 InDesign 和 QuarkXPress 等全强度文本布局程序中一样。

20-text-wrapping in Productive Web Design With... Adobe Illustrator?

插入位图图片

使用您的布局如产品、 插图或图片,照片中的照片就像拖动并放置在画布上的图像文件一样容易。这与 PNG、 GIF 和 JPG 文件工作。您还可以直接从剪贴板中粘贴。

要透明的图像使用"放置图像"功能来插入图像,然后链接到源代码文件 (文件 → 地方)。作为一个的奖金每次更新原始文件在另一个图像编辑程序,在 Illustrator 中的图像将会反映这些更改。这将提高您的效率,节省您不必重新导入的图像头痛。

您还可以使用剪贴蒙版渐变衰落混浊虽然 Photoshop 可能赢这次的易用性。您可以了解本 有用教程的 VectorTuts 的所有这些技术。

22-image-illustrator in Productive Web Design With... Adobe Illustrator?

渐变的印刷和描边

您可以使用渐变上可编辑的文本和描边的所有元素。您可能要检查本 教程中的这些渐变描边,了解它。通过一点点实践将掌握这项技术并能够结合纹理和影响。

更重要的无论多么复杂字体和文本成为在设计中的,他们将永远在 Illustrator 中进行编辑。有一点需要记住,不过,是这种方法可以处理器密集型,应只限于标题和重要的元素。

14-gradients-stroke-illustrator in Productive Web Design With... Adobe Illustrator?

在 Illustrator 中创建网格

在我的意见始终是最好的设计网格和定义基础设计设置启动项目第一次。这将节省时间以后,并帮助您创建结构化和一致的设计。

如何创建网格在 Illustrator 中?

  1. 创建一个是 950 或 960 像素宽的画板。这些都是常见的网格大小对建立适合 1024 pixel–wide 显示的网站使用。注: 美工板区域用于内容的布局。随意设计较大的背景,如有必要。
  2. 设置基于您的画板大小的网格。例如与一个 950 像素美工板上将有 50 像素 19 块。每个这些块可以再划分为结果是 10 × 10 个像素的大小的块中的 5 块。或者,您可以使用事实上的标准 960 网格系统选择您是最舒适或熟悉的网格大小。
  3. 从主菜单中选择视图 → 对齐网格。这就像一个强制锁定精确到一个网格线的每个元素的磁铁的网格。
  4. 从主菜单中选择单位 → 首选项和设置为"像素"单位和键盘增量为 0.5 像素 (是的 0.5 像素的像素精确提示 — — 下面的详细信息,请阅读)。

10-start-settings-illustrator in Productive Web Design With... Adobe Illustrator?

调整以适合您的需要的 Illustrator

因为您的 Web 设计使用 Illustrator,几个调整都要保持您针对您的工作流程进行了优化的设计。可以更改从无数的默认字体设置为当前项目中使用的字体。了解如何使用此 更改在 Illustrator 中的默认字体设置的完整教程

您还可以定义几个其他优惠,如文本样式表、 默认画板大小 (950 个像素)、 图形样式和符号来优化您的 Web 设计的 Illustrator 环境。

12-default-settings in Productive Web Design With... Adobe Illustrator?

不从零开始: 自定义您的模板

你没有重复这一过程,每次启动一个新的设计。通过创建和重复使用的模板可以提高您的效率,没有多大的努力。您可以创建您自己的模板的文件将保存为模板 →。与标准 950 像素画板宽度、 网格设置、 自定义首选项和你最喜欢的符号和图形样式设置了。

创建一个像素精确的 Web 设计

我讨厌与以前版本的 Illustrator 之一就是这种模糊的影响存在于一些线描边或文本,以及缺乏像素精密工具。您可以避免这些问题,一些在 Illustrator CS5 推出的新工具。

属性检查器

使用属性检查器可以快速检查和编辑的精确位置和对象权下的像素尺寸。这将帮助您减少花费定位元素的时间。此外,以精确值的像素尺寸您避免模糊效果因为将描边将与像素网格对齐。

其他有用的工具,在 Illustrator CS5 是"对齐像素网格"和"像素预览"(查看 → 像素预览),这将有助于避免模糊的影响。

有两个选项可以对齐像素网格 (只有在 Illustrator CS5):

  • 在创建新文档时检查窗口底部的"对齐像素网格"选项。
  • 在变换事务委员会在选中"对齐,像素网格"面板的底部。

24-property in Productive Web Design With... Adobe Illustrator?

清洁的轮廓

这篇文章 Illustrator 技巧: 如何避免模糊像素字体和形状 显示您如何消除的轮廓的模糊效果。我建议你仔细,阅读,但对于那些想要跳的权利的人在这里是摘要:

  1. 使用大纲和内部默认描边的选项,而不是中心描边。
  2. 整个值元素的位置,给他们全尺寸。避免分数 (而不是 1.9,例如 2)。
  3. 移动线描边中和 0.5 个像素的增量时模糊。

此外启用"对齐网格"或"对齐像素"选项在视图菜单下因为它保持锁定到最近的像素的描边,并避免了模糊的抗锯齿。仅当您在像素预览模式下,将显示"对齐像素"选项: 查看 → 像素预览。

23-outlines-illustrator in Productive Web Design With... Adobe Illustrator?

两个最后提示:

  • 快速定位线,在首选项中设置 0.5 像素键盘增量 (首选项 → 一般)。这种方式时行是模糊的只是使用键盘的箭头键,通过 0.5 个像素的增量移动它们,直到模糊消失。
  • 如果您已尝试了所有,并且该元素是仍然是模糊的描边 (黑客的本杰明 · 麦克唐奈) 使用 0.999 像素大小。

为什么不烟花吗?

烟花被认为是 Adobe CS 套件的 Web 设计专用的应用程序。它提供了一些功能强大: 符号库、 页面面板 (我想有此在 Illustrator)、 像素精确绘制、 矢量和位图编辑渐变抖动,等。任何 Web 设计器会希望在单个产品包中的所有工具。

所以,为什么不要使用它?好,我已尝试烟花,每次发布的新版本。我还是更喜欢 Illustrator,和这里的一些原因:

  • 首先,它会是味道的一个问题。我觉得烟花接口不一样易于使用 Illustrator 的作为。烟花最初的利器 (同一人带到网络世界的 Flash),和它的外观和感觉保留一些根。
  • 第二,模块化设计是不以及发达国家在 Fireworks 中,它是在 Illustrator 中。例如烟花的符号面板允许您预览使其困难和耗时,找到所需的符号,并浏览您的媒体库中的符号的只有一项。
  • CS3 与较早版本我经历了很多的错误和崩溃。CS4 已大有改善,但仍然容易出现一些错误。不可否认,现在这些问题似乎解决: CS5 是一个到目前为止,最稳定版本的 Fireworks 米歇尔 · Bozgounov 解释说在"Adobe Fireworks: 值得转到 CS5 吗?。"但是,如果使用的旧版本,还可能遇到一些崩溃的问题。
  • 烟花爆竹不提供一种方法来将样式应用于段落,这一种严重的不足,因为网页设计是很大程度上的字体设置文本格式。

更新 (24.01.2011): 在 Adobe Fireworks 中的文本样式注意有一些读者,他们的确可以编辑/创建全局,重新应用和更多。您可以使用属性面板中,或直接在样式面板中的相关部分。下图中的更多详细信息,请参阅。一个大 '谢谢' 米歇尔 ·,我们已准备这些 explantory 的屏幕抓图的人的烟花专家 !

Adobe-fireworks-text-styles-500 in Productive Web Design With... Adobe Illustrator?

结论

尚不存在的网页设计的完美工具。在我的意见少得可怜,真正满足 Web 设计人员过去几年。仍然,我已经 Illustrator 与良好的工作关系。多年来,我已经制定一些有效的方法和技巧,Illustrator 优化 Web 设计。这是我发现自己经常推荐的模块化设计的应用程序。我掌握了自己的用户界面设计框架,从而提高了生产效率和一致性 (通过符号库和矢量图形用户界面元素) 的 illustrator。

超过 10 年的作为一个网页设计师工作后我不再感兴趣生产上最别出心裁的设计。经验告诉我专注于生产效率和灵活性。工作得更快,并提供这项工作: 这就是我的任务。Illustrator,一个固体的选择的。烟花爆竹的下一代可能结业接近我正在寻找在 Web 设计套件中。在此之前,我坚持 Illustrator。

进一步阅读

网页设计及在 Illustrator 中的框图的资源:

  • 用户界面设计框架
    我免费的 Illustrator GUI 框架与一吨的图形用户界面元素的按钮、 选项卡、 导航元素、 等矢量图标、 图形样式和色板为加载 Web 设计人员。
  • 免费草绘和框图套件,扬
    一组免费的素描、 框图与窗体元素、 图标、 指标、 反馈消息、 工具提示、 导航元素和更多元素。
  • 粗略 Illustrator 线框图,马修 rea
    "了的过去我已经涉足使用各种工具来创建屏幕模式和设计 ;但是,我就会回到 illustrator ;部分原因是因为它是我最熟悉,但它也能到我的工作流。
  • iPhone 草绘元素 AI,Teehan + 宽松
    使您可以轻松快速地绘制自定义线框屏幕流动的 sketch–like 样式中常见的 iPhone 元素的集合。对于他们的框图需要他们切换从 Photoshop Illustrator: PSD 版本"证明有点太高逼真度。快速成形我们发现我们需要更多可延展的方法。这是我们打开草绘元素 AI iphone 时"。
  • iPhone 用户界面向量元素,由生锈米切尔
    精心编制的 iPhone 图形用户界面元素的完整库。
  • iPad 矢量图形用户界面元素,由 Iconshock
    这一组包含几乎所有 iPad 的用户界面元素包括按钮、 选项卡、 菜单、 键盘和更多。

Illustrator 提示和教程的推荐的网站:

  • Vectips
    我学了不少东西从瑞安普特南的见解。
  • 矢量 Tuts +
    新的教程和提示,以提高你的 Illustrator 技巧。
  • BitBox
    不幸的,一些有趣的 tutorials… 只是四个新的文章,在 2010 年。

为什么您也可以使用烟花的 Photoshop 而不是 Web 设计:

« 上一篇下一篇 »

评论列表:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。