Project Parfait是Adobe的一个新工具，目前处于测试阶段，它使您可以直接在浏览器中打开任何PSD，以从中提取CSS，文本和图像资产。 目前，它只能在Chrome上运行，但是Adobe计划随着开发的进行在所有浏览器中推出它。
拖放到上传
在Parfait项目中打开PSD非常容易。 只需转到https://projectparfait.adobe.com/ ，然后点击右上角的蓝色大按钮“ 上传您自己的PSD” ：
然后，使用Adobe ID登录后，将PSD拖放到空白面板区域，它将为您上传：
上传完成后，您可以单击PSD的缩略图，它将在Project Parfait中为您打开：
CSS提取
要为设计中的任何元素生成CSS，只需单击将其选中，然后相关的代码将显示在右侧栏中的CSS Inspector字段中。 在这里，您可以突出显示并复制所需代码的元素，或单击全部复制按钮：
或者，选中元素后，将出现一个蓝色的标注，您可以在其上单击“ 复制CSS”链接直接获取所有代码：
文字提取
单击元素时，出现的蓝色标注也可以用于通过单击“ 复制文本”链接轻松地从PSD复制文本内容：
图像提取
通过Project Parfait导出图像也很简单。 首先选择要导出的图像。 如果包含多个图层，请按住Shift键 ，然后单击每个图层以进行多选。 然后单击蓝色标注上的向下箭头，您将看到一个另存为框，您可以在其中输入首选的图像名称，格式和质量设置：
保存图像后，它将显示在右侧栏的“ 资产”选项卡中，您可以从此处单击图像以下载它：
方面仍在进行中
项目Parfait beta刚出炉，还只有一个月的时间，因此目前尚不支持CSS生成的某些方面。 但是，根据Project Parfait论坛的成员所说 ，更新速度已经非常快了，所以我猜Adobe团队已经在这些领域上工作了，我们可以假设许多改进正在进行中。
- 当前，通过为背景色设置RGBA值来处理应用于图层的不透明度设置。 背景颜色的Alpha通道用于设置不透明度，而不是为整个元素输出的实际不透明度值，这意味着边框，阴影等将不受影响。
- 似乎还无法检测到多个阴影。 如果您有投影，它将被拾取，但是插图/内部阴影将被忽略。
- 未检测到阴影的不透明度设置。 代替RGBA值，您将通过十六进制代码获得平坦的阴影颜色。
- 由于没有检测到图案叠加层，因此您还没有真正的方法来提取平铺背景图像，也无法选择要导出为图像的特定区域。
- 未检测到通过图层样式设置的边框。 但是，会拾取通过“ 活动形状”属性设置的边界。
- 生成渐变时，未设置
background-color属性为不支持CSS渐变的浏览器提供后备功能。
优秀的方面
文字CSS产生
项目Parfait在为文本元素生成CSS方面已经做得非常出色。
它会完美生成数字字体粗细设置，例如100、300、900，这意味着，如果在Photoshop中设置字体粗细（例如“ Thin”，“ Light”，“ Black”等），则将在CSS中输出正确的值反映体重。
它也可以很好地估计行高，该行高是根据相对于所选文本元素的字体大小的值计算的。
此外，如果一行文本中存在多种样式，它将同时检测到这两种样式，并为您提供大量CSS输出，其中一种以/* Inline Style */开头。
图层选择
有时，各层会堆叠在一起，或仅相隔一小段距离，因此很难通过可视界面进行选择。 因此，Parfait项目还提供了直接通过侧栏中的“层”选项卡选择层的功能：
提取调色板
导入PSD后，Project Parfait将识别设计中使用的所有颜色，并将其输出到右侧栏中的“ 颜色”部分。 此外，每当您选择使用以下一种颜色的元素时，该颜色就会在侧边栏中突出显示：
对于使用预处理器的人来说，这可能非常有用，因为可以在编码过程开始时将颜色值轻松定义为变量，然后根据需要将其应用于整个设计中。
识别可重用的渐变样式
与Parfait项目检测平面颜色的方式几乎相同，它还将检测已应用到设计中的渐变，并使其易于从右侧栏中复制和粘贴。 与纯色一样，任何使用渐变的选定元素都将在侧边栏中突出显示相应的渐变：
对于预处理器用户，这提供了一种方便的方法来获取设计中使用的所有渐变，以便可以将它们定义为混合，以便在设计中轻松重用。
字体摘要
除了颜色和渐变信息外，Project Parfait项目还将为您提供设计中使用的所有字体以及使用的粗细和大小的“概览”摘要。
这意味着在打开PSD的那一刻，您就知道需要以网络友好格式抓取哪些字体和哪些字体粗细变体以进行集成。 您还可以选择将字体大小另存为预处理器变量。
获取布局信息
当您直接在Photoshop中工作时，获取有关元素之间的宽度，高度，位置和距离的信息可能会很痛苦。 冻糕项目并非如此。
要获取元素的宽度，高度和X / Y坐标，只需单击它，然后查看蓝色的标注：
要获取两个元素之间的距离，只需按住SHIFT并单击它们两个即可。 将出现一个显示，以像素为单位的水平和垂直距离：
冻糕项目是免费的，请旋转一下
现在，Project Parfait完全免费使用，只需使用您的Adobe ID登录即可开始使用。
如果您是正在寻求生产工作流程增强的设计师，或者是想要从PSD到代码的简便方法的开发人员，则Project Parfait是在Web设计领域中必须尝试的新产品。
36
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
