使用草图设计美丽的WordPress网站
在2008年回来，知名发展公司波希米亚编码形成并创造了素描.该应用程序在互联网的一般骚扰中丢失了很长时间，但最近它已经起飞-而且是所以.
素描3现在不仅是Photoshop和Illustrator的可行替代方案，而且在很多方面超越它，特别是如果您的重点是网页设计.
很明显，素描是用网站制作的，但对细节的关注和放入UI的细节使其成为许多类型的设计工作.它甚至与一堆不同的服务集成，包括Invision.
我对我的许多项目使用它，不能推荐它.
欢迎来到您可以使用的最佳网站设计工具之一.
在本文中，我将刚刚浏览您的草图，并指出一些功能让我在Photoshop上选择它的一些功能，以获得大多数我的设计需求.
继续读取，或使用以下链接跳转:
- 在我们开始之前
- 插入元素
- 组织你的工作
- 草图插件
- 为什么草图更好?
- 用草图制作的网站
- 使用草图为您的下一个项目
使用草图
之前
在我们开始进入如何使用草图之前，重要的是指出它仅适用于OS X用户.不幸的是，开发人员不考虑在Windows或Linux上支持草图.通常，我们尝试迎合Windows和Mac用户，但在这种情况下，很难这样做，因为只有在这些其他平台上没有任何方法.
也许是最接近的应用程序是Adobe Fireworks，它侧重于Web开发.不幸的是，Adobe已经停止了这个产品，但你仍然可以使用它.它非常坚实，无臭虫，但捕获就不会是任何新版本.
使用草图:插入元素
第一次使用草图首次使用草图时，您可能会采取的第一个操作正在插入一个新元素.
最简单的开始是形状，其中有八个:线，箭头，矩形，椭圆形，圆角矩形，星，多边形和三角形.
在右侧，您可以看到具有一些修改属性的矩形.
使用属性检查器面板，您可以更改形状的众多方面，包括其大小，位置，边界半径，不透明度，混合，填充，边框，阴影等.最好的，您可以分配多个填充，边框和阴影，以创建更复杂的设计.
形状和某些属性.
起初，我认为使用检查员面板将是麻烦的，但事实证明我错了.在创建新网站时，您希望能够为开发人员提供完全计划的设计.如果开发人员实际上可以测量两个小部件之间的距离或POST标题与元数据之间的距离，则它们不必回到您以找出这些细节和微小的信息.
检查器面板允许您完美地放置像素.与优秀的自动指南串联，您将永远不会考虑Photoshop的命中和错误的自动捕捉！
如果你是一个矢量那种人可以使用bezier曲线，就像在photoshop或Illustrator中一样，以创建你想要的任何形状.我发现了一个很棒的视频，了解了关于Bezier曲线的工作，如果你一直想知道背景中发生了什么-它非常有趣！
使用bezier曲线绘制任何内容.
从上面的屏幕截图看，您可以添加多个背景，多个边框，更改不透明度，添加阴影，并尽可能地使用自定义形状进行所有其他伟大的事物.
插入文本和图像是那么多标准.只需点击"t"，请单击并开始写入.只需将它们拖放到应用程序或从剪贴板中复制粘贴时，即可插入图像.我喜欢图像放置是多么容易拍摄图像后拍摄图像.双击，选择，然后单击裁剪.
画板是我最喜欢的另一个功能.他们允许您将工作区域分组到不同的细分市场.这是创建并排桌面和移动视图的理想选择.有一些预先制作的画板可供使用，但您可以轻松创建自己的自定义.
插入符号是一个强大的功能，允许您更快地工作更快，更一致.
符号是一种特殊类型的分组对象.您可以创建"购买"按钮并使其成为符号.此符号将包含背景和按钮文本.然后，您可以随时随地插入此符号并编辑其中一个将更新所有其他人.我们将在下面更详细地了解这一点.
以精度创建草图中的新对象.
组织您的工作
本组织是另一个区域，在我看来，素描远远超出Photoshop.有五个功能您可以使用来创建超级组织和逻辑文件:页面，艺术板，图层，组和符号.
页面可用于显示例如网站的不同页面.每页都有自己的一组课程.它有点像在Google文档中拥有不同的电子表格.
画板可用于组织设计的不同视图.我用它们为平板电脑和/或移动版本的同一站点创建视图.我还使用艺术板来记录设计的元素.我创建了一个用于按钮的画廊，一个用于排版，一个用于常见的元素，等等.
图层就像他们在photoshop或任何其他支持层的软件中一样工作.图层是自上而下的，层列在列表中越高，视图的"前面"越近.层可以是简单的对象(文本，形状，图像等)，或者它们可以是组或符号.
组被分组为简单的图层.只需命令或移位单击"层"以选择多个，然后单击"组"按钮(或按Command + G)以创建组.
创建一个组后，它包含的所有图层都将进入您可以(并且应该)名称的文件夹中.
单击主视图中的组中的任何元素将允许您移动整个组-超级方便.
图层，画板，组和符号
您可以双击主区域以进入一个组并到达它内的元素以仅操作该元素.
符号是特殊组.符号与组执行相同的方式工作，但在文档中的任何位置更改符号将自动更新相同类型的所有其他符号.这是创建在整个设计中的按钮和其他常见元素的超级方便.
文本始终是设计的巨大部分，Photoshop并不完全简单.素描允许您添加文本样式，这将使您的工作更加一致.他们就像你期望从Microsoft Word或Apple页面一样工作.选择文本图层并选择一个样式，以便立即更改其所有属性.最重要的是，在任何地方修改样式将更新包含相同样式的文本.这对于在多个画板和多个页面中创建一致的小部件，页面标题和基于文本的材料，以及多页
草图插件
要使草图更好，可以使用插件.插件页面上有很多吨，你会在github上找到更多的群.
我最喜欢的一个是对齐文本基线.对齐文本有点难以这样做，因为垂直对齐由于文本元素的线路高度而不是正确的.此插件计算差异并将文本精确调整为所选元素的中间.完美对齐的按钮，在这里我来！
我也喜欢未提出的它绘制插件.绘制一个矩形并从总是惊人的未提出的随机图像抓住随机图像.
从创建者看看这个演示:
未提取IT草图插件的演示
素描调色板对于您使用Set Color Parette工作(可能是所有项目可能)的项目.您可以非常轻松地保存和加载颜色，然后按照预期选择它们.
创建测试数据始终是我们作为设计者和开发人员的大块.在设计工作中，它主要包括很多复制粘贴，然后键入.有一些很棒的插件，有助于这个任务.素描的Personas允许您在文档内部生成用户数据，这是如何(感谢项目作者):
supber
的personas插件的演示
我喜欢如何为利基设计需求做出插件.
艺术品获取器允许您选择元素，指定作者，然后等待专辑封面从Last.fm右侧拉入您的设计.这是一个演示，由插件作者提供.
草图艺术品qetl插件的演示
在那里有一堆其他真正有用的插件，但我认为这些真的展示了素描的力量，能够使用第三方服务来赋予你更快地工作的能力.如果您对草图有一些最喜欢的插件，请在评论中分享！
为什么草图更好?
对我来说，素描是一个神秘.我终于抛弃了Web设计的Photoshop！我有很多原因，我将详细介绍，所以你可以看到我来自哪里:
1.你可以获得超级精确的
素描为您提供更好的精确精度.一个示例是可定制的网格和方式更好的自动指南，它实际上是有助于的，而不是妨碍您(甚至允许您等分之一地设置项目).
我还享受按数字设计的能力，键入像素值.这导致像素完美的设计，最小化通信时间并最大化效率和清晰度.
2.它很容易矢量方法
我爱自己一些矢量，但我喜欢的是更容易与他们合作的能力.Photoshop由于某种原因而使这不必要地复杂化.
我有最新版本的photoshop cc，并且在尝试将svg图标添加到设计时，我收到错误:"无法放置文档1445368362_bubble.svg'，因为没有解析器或文件格式可以打开文件."我敢肯定，这是一个让专用矢量编辑器可以解决这个问题的公司.在素描中，我只是将SVG图标拖放到应用程序中，它会像预期一样显示.
矢量编辑的另一个方面我爱是联盟的四个按钮，减去，交叉和差异.这允许我选择两个形状并将它们组合以创造好的东西.为了使下面的讲话泡沫添加了一个矩形，然后是三角形.我使用智能指南正确定位它们，选择它们，并使用工会使它们成为单个形状.太容易了.
草图中的组合形状
3.支持导入svg
我已经讨论了如何将SVG图像(我使用图标相当多)直接进入应用程序.当我也可以扩展图像的文件夹来获取所有层次并编辑图标本身时，我很惊喜.
编辑svg图标的层
4.它在掩蔽
时令人敬畏
掩蔽是另一个草图才能获得的区域-我不希望它如此平滑！
要创建一个圆形的图像，我需要做的就是绘制一个圆圈，选择两层，然后点击掩码按钮.Voila，圆形达到！
在图层面板中也是非常明显的，对于像我这样的人来说，这是一个巨大的人，而不是真正适当的设计师.
应用于草图 中的圆掩码
5.像素完美间隔
有很多情况，你需要均匀地空间，素描做出了很好的帮助，帮助你实现这一目标.
创建对象，选择它们，右键单击，然后在上下文菜单的底部，您可以看到水平和垂直分发的选项.奇迹般有效.每一个.单身的.时间.
6.出口很容易
草图还拥有一个极其强大的出口选项.如此，整个教程涌现出来，向你展示如何获得你想要的.
您可以导出整页，画板，甚至特定元素.
7.它快速
我已经听说过素描中的绩效问题的报告，但是这些必须通过我开始使用该应用程序的时间来修复，因为我从未有过问题-相反.
我已经完成了去年年底的网站，并且Photoshop文件在100MB地区的某个地方.我有一个非常强大的imac，它有时会窒息，不得不等待一些作物，并在滚动文件时获得波通的性能.我甚至不想进入发生的事情，当我想推动一堆元素时(5-6次等待).
我在草图中重新创建了相同的设计，文件约为25MB -第四个PSD文件的大小.无论我做了什么-无论我做了什么，我都没有滞后-一切都比在Photoshop中快得多.我实际上选择了页面上的所有元素，并立即向左左转.我甚至可以点击并拖动一切，没有任何问题呈现.
8.甜蜜点
给我，有一些无形的草图，使得它比我曾经用于创建网站的任何东西.我认为这是一个很大的部分是它只是在你期望的工作.我有一堆示例来证明这一点.
您可以单独添加矩形和圆角矩形.在一个实例中，我添加了一个常规矩形，并意识到我可能想要一个圆形的矩形.我发现我可以控制边界半径并刚添加3px.
重用元素并保存时间.
在之后，我想创建一个只有两个角落的矩形.我以为我必须创造两个形状并合并它们，但我意识到半径可以单独为每个角控制.
我不能记得所有这些，但至少有5-6个时刻，我实际上是泪水，因为我想以特定的方式做点什么，素描有一个选择的选择，还是更好地做了事情.它不会比这更好！
用草图
制作的网站
我已经使用草图，现在可以处理3-4个WordPress项目的设计，包括重新设计的分子生物学网站，名为BiteSize Bio，即即将举行的流行科技博客Ghacks的重新设计.
用草图重新设计，用草图
运动鞋公司舰队脚也在素描中完全设计:
你可以点击它不是由我设计的，因为它实际上看起来很好 除了一些现实世界的例子之外，您可以找到完整的网站概念作为素描文件，您可以用作您自己设计的基础，或者只是了解别人如何制造的东西.
这个投资组合概念:
草图中的投资组合概念.
使用草图为下一个项目
我首先在今年年初开始使用草图，正如你所看到的，我已经成为了很多狂热的.
如果您对别人认为有很多审查感兴趣.以下是一些个人故事，如果您考虑切换，可能会有趣:
- 每年使用素描
- 一个月与草图3
- 素描Vs photoshop
- 组织素描3 iOS开发
发现素描
它是其中一个应用程序，我甚至没有学习曲线(或只是一个非常浅的一个).我立即爱它，因为它让我做我想做的事情，准确地说，我如何想要，以及功能，我总是渴望在Photoshop中.
素描的开发人员已经不断努力修复出现的错误，几乎总是成功.最令人思想的情景是，即使在他们修复了许多错误之前，很多人都会评论它.几乎所有评论我读到了沿着线条的说法，"虽然草图有很多错误，我们的团队仍然决定为UI设计更好."我觉得同样的方式，这个应用程序的任何负面都是如此轻松超过所有令人惊叹的令人惊叹，它包含重新切换到其他任何似乎完全不必要的东西.
所以它是时候挖了photoshop?如果你是心脏的网络设计师，那么也许.Photoshop具有高级照片编辑功能以及大量的其他功能，素描没有，但重点是它不需要.我仍然安装了Photoshop，但下个月我将完全抛弃它并使用Pixelmator.它确实在成本的一小部分中所需的一切.
