photoshop设计网页_如何使用Sympli交付Photoshop和素描设计

最新推荐文章于 2024-09-26 11:55:47 发布

daique1908

最新推荐文章于 2024-09-26 11:55:47 发布

阅读量316

点赞数

文章标签： python java 编程语言人工智能大数据

photoshop设计网页

让我们看一下Sympli ；设计人员和开发人员的协作平台。它可以与Xcode，Android Studio，Sketch和Photoshop一起使用-在本教程中，我们将介绍设计师的观点，然后在后续文章中，我们将从开发人员的角度了解Sympli的工作方式。

熟悉的痛点

当您有一个团队在应用程序UI上工作时（适用于Android，iOS或HTML5项目），从设计到代码的过渡阶段通常会变得坎rock，效率低下，有时会有些痛苦。

一旦基于Photoshop或Sketch的设计完成后，通常会将其原样转发给开发团队。从那里开始，开发团队就可以提取图像资产，测量尺寸并手动找出需要转换为代码的颜色，字体设置和文本内容。如果对原始设计文件进行了更改，则通过Dropbox（或电子邮件）传输更新的文档速度慢，笨拙且难以跟踪。

所有这些步骤都为开发过程增加了大量时间，最重要的是，要求编码人员访问和学习他们原本不需要的设计应用程序。这意味着要花更多的钱在软件许可证上，以及花在设计和编码之间的“无人之地”的人工处理任务上。

这是Sympli提出解决方案的地方。 Sympli并非让开发人员手动处理这些“之间”的步骤，而是致力于使整个过渡过程自动化。设计人员完成其UI后，便将其导出到Sympli，后者会自动处理资产准备，布局尺寸测量，调色板生成，字体设置提取等操作。

开发人员然后甚至可以忘记存在Photoshop或Sketch，而是通过Sympli查看设计，在那里他们可以直接进入编码业务。

设计人员只需安装适用于Photoshop或Sketch的Sympli插件，即可免费下载这两种插件：

编码人员可以选择使用Android Studio插件，Xcode插件或基于HTML5和CSS项目的Sympli Web应用程序。这三个都可免费用于单个项目，因此，如果您想继续学习本教程，请继续学习sympli.io并获取一个帐户。

本文是两部分系列中的第一篇。我们将从等式的设计方面开始，介绍如何最好地设置设计文档并将其导出到Sympli。我们还将重点研究面向Web的编码，研究Sympli Web应用程序的工作方式。在此之后的教程中，我们将逐步将Sympli与Android Studio和Xcode结合使用。

让我们从头开始：将Sympli插件安装到您的首选设计软件中。

Sympli插件设置

您需要做的第一件事是转到下载页面，然后为您喜欢的设计应用程序获取并安装Sympli插件。 Sketch或Photoshop。

安装后，在Sketch中，您可以在插件> Sympli>导出到Sympli下访问插件。在Photoshop中，您可以在“ 窗口”>“扩展”>“ Sympli”下找到它。

请注意，首次运行插件时，需要登录才能启用与您的Sympli帐户的通信。

Sympli项目

“项目”是与Sympli合作的核心。每个项目可以包含多个“设计”或屏幕，并且您可以选择将多个源PSD或Sketch文件馈送到一个项目中。

可以为Web，iOS或Android创建项目，并分别支持1×，2×和3×分辨率。如前所述，在本教程中，我们将专注于Web，并且不久将有另一篇教程针对iOS和Android项目。

您可以通过Sympli “项目”界面在线创建一个新项目：

或者，您可以从Photoshop插件的“ 项目”选项卡中执行此操作：

或在Sketch插件中，单击“ 创建新项目”，然后选择您的首选选项：

使用画板

无论您使用Sketch还是Photoshop，准备与Sympli同步的设计的最佳方法是使用画板。每个不同的UI样机都应位于其自己的画板上，例如：

这样做的原因是，在导出到Sympli（我们将在后面介绍）之后，将分别拾取和处理每个画板。然后，您将可以单独访问它们，以获取它们的资产和与代码相关的信息。每个画板将在Sympli Web界面中显示为“设计”，如下所示：

设计分辨率

Sympli旨在了解1×，2×和3×分辨率的缩放要求。它将执行一些操作，例如在适当的情况下将布局尺寸除以2或3，因此，重要的是要事先知道您需要什么缩放比例，以便获得正确的结果。

例如，如果您正在为iPhone 6设计2倍分辨率的UI，其显示尺寸为375px x 667px，则您需要确保画板的尺寸均为750px x 1134px的两倍。

当您将2x Web项目导出到Sympli时，它将把布局中的所有尺寸减半，包括在生成CSS代码中输出的尺寸（稍后我们将详细讨论CSS）。您的750px x 1134px的美工板将被识别为375px x 667px的Sympli设计，分辨率为2倍，如以下屏幕截图的左下角所示。

准备出口资产

Sympli会自动以所有所需的分辨率为您提取资产，但是您首先需要告诉它应该将设计的哪些部分转换为图像。 Sketch和Photoshop之间的执行过程略有不同。

在“草图”中，为要导出为图像的元素选择图层或组，然后单击右列底部的“ 使导出为+”按钮。

第一次单击该按钮时，它将准备一个1倍分辨率的图像以进行导出，因此您需要额外单击几次以获得额外的分辨率，例如2倍，如下所示。

如果您使用的是Photoshop，请选择项目的图层或组，然后在Sympli插件面板的Assets Utility选项卡中单击Mark as Asset 。它将在图层上添加前缀“ AST：”，从而将其标记为资产。如果愿意，还可以手动重命名图层以添加此前缀。

导出到Sympli

准备好UI设计后，选择要导出的画板。如果您还没有项目设置，则可以通过您的设计软件的Sympli插件来进行。在此过程中，您可以选择立即同步/导出设计。

如果已经有项目设置，请确保在Photoshop / Sketch插件中找到正确的项目，然后按相应的“ 同步”或“ 立即同步”按钮。

Sympli将花一点时间导出图像并上传您的设计。导出项目后，您可以从Sympli的“项目”页面进行查看。在这里，您可以选择任何设计/画板，并通过Web App进行仔细检查。

共享项目

项目导出后，就可以将其移交给开发团队了。协作者可以通过链接直接访问该项目，该链接可以直接从Sympli Web应用程序复制或通过电子邮件发送，也可以从Sketch或Photoshop中的插件通过电子邮件发送。

下载资产

在导出过程中，Sympli将准备并上传您在源设计文档中定义的所有资产。这些资产可以通过Sympli应用程序中的全部下载按钮一次全部下载，也可以通过单击项目右侧的灰色向下箭头图标来单独下载。

每种资产都可以作为位图（PNG）或矢量（SVG）文件下载。

当下载为位图时，图像将以项目设置期间指定的每种分辨率下载，例如1×，2×，3×。

导出到Sympli后，您也可以使用“映射”即时重命名资产。 “映射”系统将记住资产的旧名称，并将其与您添加的新名称相关联，因此，如果重新导出源文件，则资产将被正确更新，但保留其新名称。

网络应用工具

在网络应用程序内部，您会看到左侧的一个小条，为您提供了一些有用的工具。

层数

通过扩展图层工具，您将在原始源文档中完整地表示图层。这对于选择可能在其他图层之后被遮盖并因此很难用鼠标选择的图层特别有用。

标尺

第二个工具是一组两个相交的标尺，您可以在页面上拖动它们的十字准线以测量UI的边缘和标尺的中心点之间的距离。

添加评论

第三个工具提供了添加评论的功能，您可以通过这些评论与团队进行交流。激活注释工具，单击设计上的位置，然后输入您的消息并单击发送。

Sympli CSS生成

自动生成CSS是Sympli网络应用程序中可用的功能之一。鉴于SympliCSS像素完美且绝对定位，您可能会想编写自己的响应式布局代码，但是在使用Sketch设计进行工作时，会为诸如渐变，背景，文本设置，阴影，边框之类的东西生成一些出色的复制和粘贴CSS等等。

请允许我分享一些快速提示，这些提示在创建要由Sympli转换为CSS的UI元素时可能会有所帮助。

首先要注意CSS不能以与设计应用程序相同的方式处理混合模式。例如，CSS阴影不支持典型的设计应用阴影混合模式“ Multiply”，因此应将其设置为“ Normal”。
第二个问题是，创建边框时，我发现将其设置为“ Inside”位置可以在SympliCSS中实现最准确的复制。
第三，如果您确实想让Sympli为您生成CSS，我建议您使用Sketch。以我的经验，到目前为止，与使用Photoshop文档相比，它将提供更好的结果。
最后，通过两个应用程序的设计，有时线性渐变可能会在意想不到的方向上运行，因此，请在运行时仔细检查生成CSS。