Avocode是一款专为从PSD或Sketch文件转换为代码设计的工具，旨在简化网页设计到编码的过程。它允许开发人员直接打开PSD文件进行编码，无需使用Photoshop，提供了生成CSS代码、导出图像、测量布局尺寸等功能，从而提高了工作效率。
photoshop mac
Photoshop已经成为网页设计的一部分，并且很可能会长期持续下去。 如果您使用Photoshop为Web设计，或者您是处理PSD编码的开发人员，则可能经常会遇到一些问题。
即使在工作流程的设计阶段从Photoshop过渡到了Sketch ，您仍然会遇到编码人员需要访问他们否则不会使用的软件的问题。 使用这两个程序中的任何一个，当您使用主要目的是设计而不是为网络生成代码的工具时，很可能会遇到与课程相当的减速。
按来源制作
自2012年以来， Source的家伙就一直在为Photoshop开发扩展程序。他们的插件旨在缓解设计到编码过程中的一些最常见问题，例如创建可准确代表设计CSS并有效导出图像。
我一直是他们的CSSHat插件的忠实粉丝，该插件可从Photoshop图层生成CSS或预处理程序代码。 几乎每次使用Photoshop时，我也会使用其PNGHat插件将图像导出为PNG，JPEG或Base64。 在我的两部分教程中，您可以看到这两个插件的实际作用：
这些插件集中在网站创建过程的开发人员阶段。 将PSD变成功能完善的网站。 由于除了访问PSD之外，许多开发人员甚至不需要Photoshop来实现其他任何目的，自然而然地下一步就是要从Photoshop中完全采用这种类型的工作流增强功能。
这就是Source的新桌面和基于Web的工具Avocode的全部意义。
Avocode是一个程序，专门用于从PSD（或Sketch）转换为代码的过程。 它不会自动为您生成网站，而是为您提供了一组工具，使您能够以自己喜欢的方式创建网站，但是比直接在Photoshop或Sketch中工作时更有效。 Avocode旨在弥合Web开发的设计和编码阶段之间的差距。
来吧
在本文中，我们将研究如何使用Avocode来：
- 打开PSD即可进行编码，而无需使用Photoshop，也无需通过电子邮件发送或上传文件。
- 选择图层，组并在设计中移动。
- 为设计中的元素生成CSS或预处理程序代码。
- 获取用于构建布局的精确尺寸测量。
- 复制文本内容以便于放置在代码中。
- 从PSD提取调色板和十六进制代码。
- 甚至可以从多层导出图像，而无需处理切片过程。
不使用Photoshop即可打开PSD
借助Avocode，PSD可以通过自动同步过程在设计人员和开发人员之间共享。 如果您是设计师，则将安装Photoshop插件，并且在设计就绪后，只需单击“立即同步”按钮，以使开发人员可以使用PSD。
同步的其他方式正在进行中，Dropbox作为确认的选项将在将来的版本中提供。 从当前的beta 0.5.0界面来看，我们可能还会看到通过Layervault进行同步，直接上传以及直接从本地存储拉入文件。
如果您是开发人员，则将通过Avocode收到新设计可用的通知，此时，您只需在PSD浏览面板中单击即可直接将其打开。 这消除了通过电子邮件发送大型附件或手动传输PSD文件的麻烦。
每个设计都附带一个内置的版本管理系统。 通过再次单击Photoshop插件“立即同步”按钮，可以轻松地在设计人员和开发人员之间同步PSD的渐进式迭代，每个版本都可以通过PSD浏览面板访问。 Avocode会记住设计中图像的先前导出设置，这意味着可以自动执行诸如导出新更新的图像之类的任务。
选择和导航
在Avocode中打开PSD后，您将发现与其进行交互非常直观。 像Photoshop一样，Avocode具有一个“ 图层面板” ，您可以在其中查看所有PSD的图层和组。 这些图层和组都可以显示或隐藏，也可以单击以选择其中的任何一个。
除了通过“图层面板” 选择设计元素外，您还可以从左侧的工具面板中选择“ 选择工具 ”，然后直接单击舞台上的任何项目。 要选择多个项目，只需按住SHIFT并继续单击要选择的项目即可。
无论直接在舞台上还是在“图层面板”中单击，多选都可以工作。
要平移设计，请选择“ 手动工具”，然后单击并拖动以移动。
生成CSS和预处理器代码
选择任何层并打开检查面板后，您将在面板的“代码”小节中看到该项目CSS输出，根据您的喜好以原始或预处理形式显示。 它使用与CSSHat插件相同CSS生成逻辑，该插件仍然是我在当前可用选项中看到的最直观CSS生成器。
抓住项目CSS就像单击“ 复制CSS”或“ 复制较少”按钮一样容易，因此您可以粘贴到样式表中或直接突出显示要使用的行并从中复制它们。 如果生成了预处理程序代码，它将自动包含您首选的mixin库中的mixins。 当前可用的选项有：
- LESS + LESSHat
- 萨斯+指南针
- SCSS +指南针
- 萨斯+波旁威士忌
- SCSS +波旁威士忌
- 手写笔+笔尖
获得准确的布局测量
我可以肯定地说，在Photoshop中查找布局尺寸可能会有些艰巨，我并不孤单。 Avocode解决此问题的方法非常简单。 获取物品的高度和宽度：
1.选择选择工具，然后选择一个或多个项目。
2.读取蓝色选择突出显示框左下角的值。
3.或者，阅读“ 检查面板 ”顶部预览拇指右侧的值。
要查找任意两项之间的水平和垂直距离（以像素为单位）：
1.选择测量工具，然后选择任何项目。
2.将鼠标悬停在任何其他项目上，并读取水平和垂直红线旁边的值。
复制文字内容
如果选择了文本层，则将在“ 检查面板”中看到内容的剪裁预览以及其宽度和高度，以及一个快速的“ 复制文本”按钮，您可以使用该按钮来获取其中的文本以粘贴到代码中。
生成调色板
1.选择“ 拾色器”工具，然后在舞台上移动鼠标，观看颜色预览，直到获得所需的颜色为止。
2.单击该位置，您的颜色将被添加到“ 检查面板”的“ 颜色”小节中，并为每个显示十六进制代码。
导出图像
1.选择选择工具，然后选择一个或多个项目。
2.在检查面板的“ 导出”子部分下，单击带有蓝色加号的小文件图标，将您的选择设置为资产。
3.您的资产名称将从图层名称中得出。 选择PNG，JPEG或SVG导出，然后单击“立即导出”。 如果这是该项目的首次资产导出，则可以选择目标文件夹，否则文件将立即导出。
将您的选择设置为资产后，它也会显示在资产面板中。 在这里，您可以单击放大镜图标，将其带到存储资产导出的文件夹中。
您也可以单击面板顶部的“获取代码”按钮，或资产名称右侧的<>图标，以生成HTML，CSS或LESS，可用于将资产放入代码中。
在Photoshop的PNGHat插件中，还可以控制确切的JPEG和PNG导出设置以及缩放比例选项，因此我想我们很快就会看到将这些相同的控件移植到Avocode上。
若要了解Avocode图像导出过程中的预期结果，请在此处阅读有关PNGHat的更多信息： 如何使用PNGHat将Photoshop资产导出到Web
开发中的附加功能
目前，Avocode处于私人测试阶段，因此不久的将来还会出现一些非常有趣的功能。 该应用程序计划于今年夏天某个时候进入公开测试版，此后我们将看到正式发布。
随着开发的进展，我们可以预料到一些事情：
全面的多平台和基于Web的支持
无论您使用哪种操作系统，即使您使用的是移动设备，也可以使用Avocode。 目前，Avocode的封闭Beta版正在Mac上进行测试，但本机应用程序的完整版也将在Windows和Linux上运行，而Web版将在任何现代浏览器中运行。
与基于草图的设计一起使用
来源报告，他们已经有一个工作原型，可以为基于Sketch的设计提供所有相同的功能。 因此，如果您是在Mac上使用Sketch的设计师，在Windows上使用Photoshop的设计师，在Linux上编写代码的开发人员，或者如果您使用任何其他组合，则同样可以使用。
Avocode内部的Atom代码编辑器
Avocode实际上是建立在GitHub产生的Atom代码编辑器之上的。 真正令人兴奋的是，这意味着Avocode公开发行后将提供功能完善，功能强大的功能丰富的代码编辑器。 能够在单个应用程序内处理整个编码过程，确实可以弥补已经形成的功能强大的功能。
颜色变量
除了可以获取添加到调色板中的颜色的十六进制代码外，您还可以为每种颜色分配变量名称，以供在预处理程序代码中使用。
在内置的FTP和CDN上传中
与Avocode上的许多其他功能一样，直接将其上传到CDN的功能已经存在于Source的一个插件PNGHat中，因此我们可以猜测其功能将大同小异。 图像可以通过Avocode本地导出，或者，您也可以将其直接推送到CDN，并将文件位置添加到CSS输出中。 您还可以选择将图像直接FTP导出到服务器上。
连接TypeKit和Google字体
Avocode的入门视频提到，在生成字体设置代码时，可以选择与TypeKit和Google Fonts集成。 尚未在封闭的Beta版或任何Source的插件中使用，因此我不确定这将如何工作，但是我个人希望它可以简化将适当的URL和代码组合在一起的过程。各种字体。
Base64和Sprite Sheet导出
当前的Avocode封闭Beta版中的图像导出的第一阶段是JPEG，PNG和SVG。 但是Source已经通过其Photoshop的PNGHat插件为Base64生成建立了一个过程，因此我希望我们能看到他们从该代码库中提取出来并将其引入Avocode。 他们还打算支持Sprite表格以及所需CSS的生产。
iOS导出代码
Avocode的重点将是网络，直到它完全成熟为止。但是，还有一些计划正在使之成为iOS开发的一部分。
Source已有一个名为iOSHat的插件，可在Photoshop中使用，以从Photoshop图层生成Objective-C或Swift代码，以用于iOS开发。 Avocode中对iOS代码导出的支持可能会以几乎相同的方式工作。
自定义扩展程序包
Avocode中有一个有趣的菜单项。 其中暗示了该平台的未来可扩展性，并且已经有了一些初始软件包：
消息人士说，他们受到Atom发布的启发，采用了一种类似的方法来创建自定义“包”，并在社区之间共享。 我们可以期待随着发展的发展，这一途径将会打开。
预购可享受70％的折扣
目前，Source一直在稳步推出功能，并在测试过程中不断完善Beta用户反馈。 该软件公开发行后，将可以通过订阅模式获得，价格为每年240美元。
但是，如果您早早开始预订，您将获得永久折扣70％的折扣，将其降至每年69美元。 您还将获得私人Beta的访问权限，在此期间，您将可以免费使用该软件。 您的实际订阅仅在Avocode公开发布时开始。
预购地点有限，截至目前，可用地点不足230个。 要预订： http ： //avocode.com/preorder.html
有用的链接
有关更多信息，请访问：
结论
我将结论的工作完全交给您！ 您如何看待Source宣布的任何功能？ Avocode将成为您未来工作流程的一部分吗？ 让我们在评论中知道！
翻译自: https://webdesign.tutsplus.com/articles/introducing-avocode-psd-to-code-without-photoshop--cms-21415
photoshop mac
扫一扫
1067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
