众所周知，站点布局实际上是对设计布局进行编码，为了使我们更舒适，我们使用各种程序来处理布局。 Photoshop？ 素描？ Zeplin？ 是的，这些都是很棒的工具，但是今天我们将讨论一种非常适合用来制作网站布局的产品。 关于Avocode。
通过访问Avocode网站，我们将立即提供免费的14天期限，但是请您花一些时间，我将向您展示如何注册30天的超值套餐。 首先是第一件事。
您可以在这里的网站上工作，但是我建议将程序下载到计算机上。 我们找到
下载选项卡，选择系统，下载。
打开程序后，我们必须登录，但尚未在系统中注册。 如上所述，您需要这样做尽可能地有利可图。
注册的试用期为30天。
所以，回到站点。 向下滚动并查找
Avocode与链接
Zeplin并单击它。 Zeplin是Avocode的替代产品。
我们对页面的最底部很感兴趣，我们正在寻找此块。 它说在这里，您可以通过此链接免费获得30天的密码，他们问我们“我们还在等什么？” 真的呢？ 拒绝所有疑问后，单击按钮并填写表格。
然后，我将立即向您提示，如果您一个月没有时间享受该程序，则可以通过注册另一封电子邮件来重复此过程。 显然，您可以无休止地重复这些操作）。 但就我个人而言，我为avocode付费并为您提供建议。 另一方面，如果您是初学者，则可以省钱。 由您决定。
我们通过单击信函中的链接来确认我们的电子邮件，然后转到应用程序。 立即进入菜单并单击您的昵称，然后在“
结算”标签中，我们看到我们有30个工作日，甚至是酷而昂贵的Company计划，每月的费用为100美元。 欢喜 该收费标准的主要特点是可容纳5人，也就是说，您可以再邀请4个便鞋来您的团队。 您可以在“
成员”选项卡中执行此操作。 在计划网站上了解有关关税的更多信息。
顺便说一句，如果您决定为该计划付费，那么不要忘了更改一个简单的收费计划。 我们进入
计费-更改计划 ，这里最便宜的
计划是很合适的。 在那之后，您需要添加一张信用卡，并每年滚下168个果岭。 但是同样，不要着急，在30天的期限后，Avocode通常会通过同一封电子邮件以1美元的价格提供扩展的熟悉度。 至少今天有效。
那么，这笔钱我们能得到什么呢？ 以及为什么Avocode如此酷。 现在该看看他知道什么。
使用程序
让我们创建我们的测试项目。 单击
新建项目 。
因此，Avocode对版图设计人员的主要优势之一是无需任何插件即可支持的格式。 接下来是
Photoshop（PSD） ，
Sketch ，
Adobe XD和
Illustrator 。 以及与
Figma的部分集成。 那么，什么不是万能的组合呢？
除了可以直接加载文件之外，还可以通过图形编辑器本身中的插件以及使用
dropbox来同步avocode。 我习惯于上传文件。
因此，我们将添加任何布局，为此，您可以将文件拖到该区域并在磁盘上选择它。 下载后，我们可以打开文件并讨论程序界面，但我将从常规设置开始。 点击我们的
头像-应用偏好。
首先，我将切换到主题黑暗力量的黑暗面。 接下来，我可以选择用于导出图片的默认文件夹，以及关闭图像优化，在布局缩放时关闭抗锯齿功能，启用对导出图片的覆盖。 还有一些我不使用的次要设置。 实际上，在这里我只是打开一个黑暗的话题，将其他所有内容保持原样。
程序界面
要使用布局，我们需要检查标签。 在左侧，我们看到类似Photoshop中的图层之类的东西，可以通过单击眼睛将其隐藏和显示。 在左侧，我们看到一个工具栏，我同时使用了这两个工具-这是一把尺子和一个吸管。 原因如下：
手 -允许我们通过按住鼠标右键来移动布局。 但是在空格键被夹紧的情况下，该行也可以做到这一点。
箭头（选择选择） -允许您选择多个图层。 但是该行可以完全相同。
刀（切片） -可以选择任意区域并随后导出图片，但是无论如何我还是从未使用过它。
有时需要
使用吸管 -它会复制所选区域的颜色代码。
最后是
标尺 。 选择此工具后，魔术开始。
例如，我需要知道一个对象的大小以及它与其他元素的距离。
为此，我只需单击对象，立即查看其尺寸（以像素为单位），当我将鼠标悬停在相邻对象上时，即可立即看到不同的距离，这在布局期间非常方便。
如果由于某种原因没有出现距离，我们可以通过按住鼠标左键并在必要的对象之间拉伸来手动测量距离。 所选区域的高度和宽度显示在信息窗口的右侧。
无缝地转到程序的右侧。 首先，实际上是在文件名上单击顶层。 在右侧，我们将看到：
整个布局的图片，其大小。 可以上传布局的屏幕快照，这对于组合很方便。 一般信息：什么，在哪里，何时。 以下是布局中使用的所有颜色的列表，这很有用，但更有用的是布局中使用的所有字体的列表。
字体通常由设计人员提供，同时也提供布局，但这并非总是如此，因此此列表将帮助我们自行查找所需的字体。
此外，对于更高级的用户，可以为自己配置各种变量。
下部条带虽然小，但同样有用。 在这里，您具有布局的比例。 也可以通过按住控制键并旋转鼠标滚轮来更改它。 接下来，我们在Pixel Perfect上具有布局验证工具，即逐像素。 有了它，我们可以在布局上加上半透明的布局，并验证其大小和缩进量。 该工具具有许多有用的设置，例如透明度和关闭布局背景。
最后一点是指南。 在这里，您可以启用设计师指南或添加自己的指南。 它们之间也可以测量距离。
因此，将整个布局的面板拆开了，现在让我们看看一个单独对象的面板将为我们提供什么。 例如，单击图片。 在右侧，我们看到所选对象，其大小以及用于导出图片的按钮。
单击。 在这里我们可以设置文件名，比例，后缀以及PNG JPEG SVG和WEBP格式。 您可以在下面选择保存图片的文件夹。 您可以通过使用鼠标选择多张图片或在
按住Shift的同时单击所需的图片将多张图片上传到一个文件中。 您也可以使用鼠标左键单击图片并选择所需的项目。
现在，有趣的部分是文本和其他设计元素。 例如，单击文本。 在“
样式”窗口的右侧，我们看到了神圣的圣物-我们元素的所有完成的CSS代码！ 我们可以复制所有内容，单击仅复制一个参数，还可以配置代码的外观和类型。 为了复制我们的文本，只需用鼠标双击它。
一个avocode几乎可以完全替换每种格式的本地图形编辑器。 使用此程序，使用布局是一种乐趣，并且可以节省大量时间！
基于
Avocode的版式设计器发布。 YouTube频道“
Lifelancer for Life ”上的“
网站布局程序和工具 ”系列中的“
如何免费使用Avocode 30天 ”。