illustrator下载_将Web设计从Illustrator放入浏览器的提示

illustrator下载

场景：有人将最新的Web布局交给您一个Illustrator文档，将其转换为有效HTML和CSS是您的工作。让我们看看如何做到这一点。

注意：本教程的目的不是完美地重新创建设计以供Web使用。取而代之的是，我们将使用它来探索Illustrator中的工作流程和功能，以帮助我们做到这一点。

Illustrator文件

让我们先看一下有问题的文档：

这是404页的布局；告诉用户找不到所需内容的页面，他们应该尝试其他操作。我们可以看到标题，一些说明性段落，一个搜索表单和一个按钮，以及一些在底部具有工具提示的按钮。

整个东西似乎都漂浮在页面的中央，无论是水平还是垂直。它具有黄色背景，一些暖色调和阴影。我们从哪里开始？

轻而易举！

我们不会为此而重新发明轮子，让我们自己尽可能简单。 Illustrator不会为此输出一个整齐HTML，CSS和JavaScript包，我们也不会浪费时间从头开始构建所有内容，因此，让我们获取Bootstrap的副本以使该项目起步。

我下载了Bootstrap，剥离了一些我们不需要CSS和字体文件，然后根据Mark Otto的Cover模板添加了index.html文件。单击鼠标四分钟，我得到一个基本的页面，该页面大致类似于我们所追求的。

GitHub存储库中的文件夹1-starting-point中提供了可从此位置继续的源文件。

添加标记

下一步的逻辑步骤是在我们的index.html中添加结构化标记（同样，Illustrator不会为我们这样做）。我们已经有一个居中对齐的容器，一个带有inner cover类的div ：

<div class="inner cover">
<h1 class="cover-heading">404</h1>
<p class="lead">This is the base from which we'll work. All fluff has been stripped out.</p>
</div>

让我们在其中添加一些额外的片段：

<div class="inner cover">
<h1>Error</h1>
<h2>404</h2>
<p>Sorry, the page you were looking for doesn't exist</p>
<p>Try searching for the page here:</p>
<!-- more form markup available http://getbootstrap.com/css/#forms -->
<form class="form-inline form-search" role="form">
<div class="form-group">
<label class="sr-only" for="searchInput">Search</label>
<input type="search" class="form-control" id="searchInput">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<p>Or</p>
<!-- buttons -->
<a href="#" class="btn btn-primary">back</a>
<a href="#" class="btn btn-primary">home</a>
<a href="#" class="btn btn-primary">contact us</a>
</div>

我们添加了标题标签<h1>和<h2> ，一些段落以及一些典型的Bootstrap表单标记（您可以从Bootstrap文档中获取更多示例）。表单有一个form-inline类，一个本地的Bootstrap类，它将我们的表单元素放在一行上。

最后，在最后，您将看到三个锚，所有锚都具有btn和btn-primary 。这些将用作我们的按钮。这是我们现阶段所拥有的：

在这一点上，我们在样式方面还没有做任何事情，没有一行CSS，但是由于有了Bootstrap，我们有效地构建了我们的页面，可以进行完善了。

让工具提示生效

Bootstrap将为我们提供其他帮助；工具提示。您可以在Bootstrap文档中阅读有关我们可用的各种选项的更多信息，但现在，我们仅将必要的成分添加到HTML中。

我们为每个按钮添加了一个额外的类tip用于识别需要工具提示的任何内容。我们还需要一个title属性，该属性指示工具提示中实际显示的内容：

<a href="#" class="btn btn-primary tip" title="back">back</a>

我们已经引入的bootstrap.min.js文件具有工具提示所需的所有JavaScript。实际上，它还包含许多其他JavaScript玩具，我们甚至不需要许多其他玩具，因此在生产环境中，最好仅包含我们正在使用的东西。 Bootstrap工具提示是可选的，因此它们无法自动运行，我们需要对其进行初始化。让我们在页面底部的脚本标签中，在调用其他JavaScript的下面进行操作：

<script>
$(function(){
$('.tip').tooltip()
});
</script>

做完了我们现在有这个：

现在让我们尝试一些样式

我在项目中添加了第三个CSS文件，名为theme.css，并从文档<head>指向了该文件。但是，我们要在样式表中添加些什么呢？

<link href="css/theme.css" rel="stylesheet">

我们将从主容器开始。在Illustrator中选择容器对象，您会在“ 图层”面板中注意到它被命名为main 。

这是相关的。在团队中，对这样的对象应如何命名有一个共识。当我们打开CSS面板时，您将看到为什么。

CSS属性

转到窗口> CSS属性以显示相同名称的面板。选择我们的主要对象后，它将包含所有相关样式，我们可以将其直接粘贴到样式表中。您将看到这些样式已应用于选择器.main ，就像我们的对象已命名一样。

继续并复制您看到的内容，然后将其直接粘贴到theme.css文件中。为了使这些规则适用于我们的容器元素，我们需要将选择器更改为我们实际使用的选择器（保持.main选择器有一定的风险，因为我们可能会在整个站点的其他位置使用此选择器）。更改.main以.inner.cover ，你会看到你的容器元素变成一个可爱的金黄色，带有圆角，甚至一箱的影子，所有的体面的跨浏览器CSS应用。

CSS尺寸

您会注意到，此处CSS规则不包含任何宽度或高度。这是一件好事。 Bootstrap几乎可以解决所有这些问题，因此我们实际上只是在寻找美学风格。通过更改CSS属性导出选项，我们可以在此处包含尺寸，但我们将其省略。

由于我们已经应用了样式，因此我们的容器有点宽，所以让我们使用以下媒体查询来覆盖这些尺寸：

@media (min-width: 992px) {
.masthead, .mastfoot, .cover-container {
width: 400px;
}
}

这会覆盖cover.css中的规则，从而在至少992px的屏幕上为我们提供400px的宽度。 400px并非完全符合设计要求，但我个人认为真正的尺寸和字体大小要小一些，因此我对此予以否决！

当我们在这里时，我只想更改样式，以便在此媒体查询中也应用圆角。从您从Illustrator粘贴的规则中删除它们，然后像这样应用它们：

@media (min-width: 992px) {
.masthead, .mastfoot, .cover-container {
width: 400px;
}
.inner.cover {
border-radius : 10px;
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
}
}

现在，我们应该在大屏幕上显示以下内容：

..在小屏幕上显示：

具体测量

我们并不完全遵守Illustrator文档中使用的精确尺寸，但这不是问题。网络是流动的。尽管如此，我们的容器仍可以在底部使用一些填充，所以让我们确切地找出Illustrator设计中应该使用的数量。

在Illustrator中选择“ 测量”工具 （您可以使用“ 滴管”工具找到它），然后拖动光标以测量设计的任何给定区域。我们可以看到填充的宽度为25px，因此我们将其手动应用于样式。

.inner.cover {
padding-bottom: 25px;

其他风格

这里有很多样式和对象要处理，如果一切都按应有的名称命名，则（原则上）我们可以从Illustrator中输出大量CSS来处理所有样式和对象。但是，此处的对象命名存在一些差异（避免这需要与设计人员/开发人员进行密切的交流），并且最终可能会得到一些不需要的多余代码。

相反，请耐心地从一个元素到另一个元素，选择每个对象并输出相关CSS。从排版开始，让我们看看Illustrator的表现如何。

字型

您会注意到的第一件事是，任何类型对象CSS都包括： font-family : Open Sans;

Open sans不是标准的系统字体，不会在未安装用户的任何浏览器中显示。因此，您需要转到Google字体并获取CSS链接，以通过webfonts的魔力将其拉入页面。

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

纽扣

到目前为止，一切都进行得相当顺利，但是我们按下了按钮。搜索按钮实际上还不错，但是没有为下面的三个按钮提供对象名称，因此我们在CSS属性窗口中看到以下内容：

没有生成CSS代码。要为未命名的对象创建CSS，请在“图层”面板中命名该对象，或在“ CSS导出选项”对话框中启用“为未命名的对象生成CSS”选项。

继续并按照前面的讨论打开选项，然后确保已选中生成未命名对象CSS 。另一种方法是给我们的按钮起一个名字，但是这两个选项都可以。

现在，选择所有按钮，我们可以点击Generate CSS并为我们提供样式输出。不幸的是，Illustrator将为每个单独的对象输出完整的样式，即使它们都共享相同的规则。即使我们使用通用的图形样式 ， 字符样式 ， 段落样式 ，甚至给所有对象起同样的名字，情况似乎都是这样！有改进的余地，但是我们至少可以抓住通用样式并将其手动应用于多个对象。

我复制了搜索按钮的样式，然后将其应用于.btn, .btn:hover以确保所有Bootstrap样式均被适当覆盖。我还添加了一个border: none; 摆脱Bootstrap的蓝色边框。让我们来看看能给我们带来什么！

这还不错，但这是完美的公平之路。文本阴影尚未得到遵守（它们缺乏透明性），按钮上的渐变不正确，并且它们完全丢失了框阴影。

为什么？

简而言之，Illustrator CSS导出尚未准备好应对这种复杂的结构（公平地说，它非常复杂）。让我们看看我们旨在重新创建的搜索按钮：

好可爱但是，看看构建了多少填充，渐变和阴影：

哎哟。毫不奇怪，插画说没有。甚至边界半径也被排除在等式之外，因为事情变得太复杂了。

相反，我将仅应用一些简单的样式并避开复杂CSS（本教程毕竟是Illustrator可以为我们做的事情。。）修改后的.btn样式如下所示：

.btn,
.btn:hover
{
font-family : Open Sans;
font-weight : bold;
font-size : 14px;
color : #AC4400;
text-shadow : 0px 1px 0px rgba(255, 255, 255, 0.3);
background : #FDDA2F;
border-color: #FDDA2F;
border-radius : 4px;
}

在CSS效率方面，这还有很多不足之处，但是为了展示，我们正在使用Illustrator的功能。明智的做法是，之后再返回并清理CSS，甚至使用CSSLint之类的工具也是如此。

图示

到目前为止，我们所产生的结果还不错，因此我们暂时将其搁置。让我们将注意力转移到按钮图标上。我们可以在这里使用几种方法：

导出位图

通过选择每个图形，您可以以与以前几乎相同的方式生成CSS。 Illustrator将选择将复杂路径导出为png文件，然后将这些图像用作元素的背景。

您将获得一组资产以供使用：

但是，它又不是完美的，并且会忽略设计的某些方面，在其他情况下输出可疑的样式，因此这种方法将对您有所帮助。这种方法也没有考虑到视网膜显示器，可能会在某些屏幕上给我们提供不合标准的图形。无论如何，这些图形的输出CSS看起来像这样：

.image
{
background-image : url(image.png);
background-repeat : no-repeat;
}

SVG

作为Web设计师，我更喜欢在这种情况下选择SVG，这是Illustrator擅长的。

首先，选择一个图标，然后以常规方式将其复制到剪贴板（ Command + C ）。现在可以使用该对象的SVG数据将其粘贴到文本编辑器中（惊人）。在您的Web项目中打开一个新文件，将其称为“ icon-contact.svg”，然后将剪贴板内容粘贴到其中。

现在，您可以直接在index.html的标记中将该SVG添加为图像：

<a href="#" class="btn btn-primary tip" title="contact us">
<img src="img/icon-contact.svg" alt="">
</a>

您可以通过多种方式将SVG实施到网页中。通过CSS，首先将XML转换为base64，然后将其粘贴到标记内联中，然后由您自己选择（有关更多信息，请参见SVG文件：从Illustrator到Web ）。尽管至少在现代浏览器中，我们的方法仍然可以正常工作，因此我们会坚持下去。

对其他图标重复该过程，然后..

我们做完了！

经过一些调整（我在form元素上添加了一些填充），您应该具有类似于以下内容的内容：

不错！它不能100％反映Illustrator的图形，但是考虑到我们主要依赖Illustrator输出的样式，我认为我们会非常满意。任何进一步的改进都必须手工完成，Illustrator至此已为我们竭尽所能。

您有什么技巧可以帮助Illustrator直接改善此Web布局吗？让我们在评论中知道！

翻译自: https://design.tutsplus.com/tutorials/tips-for-getting-a-web-design-from-illustrator-into-the-browser--cms-21468

illustrator下载