sketch放入app组件_Sketch App 3中的基本图像编辑入门

sketch放入app组件

I've been talking a lot about Sketch App lately. I never forget to mention that it’s an excellent tool for mobile application and user interface designers.

最近，我一直在谈论Sketch App。 我永远不会忘记提及它对于移动应用程序和用户界面设计人员而言是一个出色的工具。

I've also said that I think comparing Sketch to Photoshop is silly considering it’s a photo-editing tool.

我还说过，我认为将Sketch与Photoshop进行比较是愚蠢的，因为它是一种照片编辑工具。

But the fact is, Photoshop has become so versatile that we compare it to almost every other design tool — Sketch 3 is no exception.

但是事实是，Photoshop变得如此通用，我们可以将其与几乎所有其他设计工具进行比较-Sketch 3也不例外。

In reality Sketch more closely resembles Adobe Fireworks more than anything, which is fortunate for the developers (Bohemian Coding) because Fireworks is no longer in development. Lucky timing, intuitive business strategy; whatever you want to call it, Sketch App is filling a void and it’s filling it well.

实际上，Sketch比其他任何东西都更像Adobe Fireworks，这对开发人员来说是幸运的(波希米亚编码)，因为Fireworks不在开发中。 幸运的时机，直观的业务策略； 无论您要调用什么，Sketch App都可以填补空白，并且可以很好地填充它。

If you've been living on Mars for the last two years, here’s some backstory on the matter. Sketch App is currently sitting on version 3.2 (stable) and you can buy it from Bohemian Coding for a one-time fee of $99.

如果您过去两年一直在火星上生活，那么这里有一些背景资料。 Sketch App当前位于3.2版(稳定版)上，您可以从Bohemian Coding处以 99美元的一次性费用购买。

Despite the fact that it’s only available for Mac OS X, it’s taken the design industry by storm.

尽管它仅适用于Mac OS X，但它已席卷了设计行业。

所以我们不能用Sketch编辑图像吗？ (So we can’t edit images with Sketch?)

Ehhh, sort of.

恩，有点 。

Actually… you can, but don’t expect complex image adjustments, filters and actions. Instead, you should expect the simplest form of bitmap image editing imaginable, for example these features:

实际上，您可以，但是不要期望进行复杂的图像调整，滤镜和操作。 相反，您应该期望可以想到的最简单形式的位图图像编辑，例如以下功能：

• Saturation
  饱和
• Brightness
  亮度
• Contrast
  对比
• Gaussian Blur
  高斯模糊
• Blending Modes
  混合模式
• Cropping
  播种
• Magic Wand
  魔法棒

Even the Magic Wand tool I feel is too much. In the case of user interface design, I’ve never understood the reason for it being there.

甚至我觉得魔术棒工具也太多了。 在用户界面设计的情况下，我从来没有理解它存在的原因。

Many of the other features, however, allow us to design for current trends. Photography and “big images” are all the rage at the moment, whether we’re using high-contrast, impactful imagery or blurred backgrounds. Blending big images into a solid or “super gradient” background is also a major trend.

但是，许多其他功能使我们能够根据当前趋势进行设计。 无论我们使用的是高对比度，有影响力的图像还是背景模糊，目前摄影和“大图像”都非常流行。 将大图像混合为纯色或“超级渐变”背景也是一个主要趋势。

But that’s for web design, and even then it can be an instinctive habit to accomplish such things in Photoshop and copy the final bitmap over to Sketch.

但这是用于网页设计的，即使这样，在Photoshop中完成此类操作并将最终的位图复制到Sketch上也是一种本能的习惯。

Of course if you want manipulate your dogs head and create a dog/frog hybrid with laser eyes, then Photoshop is definitely your best bet, but if you can stick to using a singular application, your workflow will output better, non-destructive results in a timely manner. If you’re keen to learn more about designing non-destructively, you should totally watch Creating an Illustration in Sketch and Exporting it as an SVG (below), which is part of our Design a User Interface with Sketch course.

当然，如果您想操纵狗的头部并用激光眼创建狗/青蛙混合体，那么Photoshop绝对是您的最佳选择，但是如果您坚持使用单个应用程序，您的工作流程将在以下环境中输出更好的，无损的结果及时。 如果您想了解有关无损设计的更多信息，则应该完全注意在Sketch中创建插图并将其作为SVG导出 (如下)，这是我们的“使用Sketch设计用户界面”课程的一部分。

Let’s start with colour adjustments.

让我们从颜色调整开始。

颜色调整 (Colour adjustments)

Begin by copying a bitmap image onto your canvas — a range of custom options will immediately appear on the right-hand side; Sketch App calls this area “The Inspector” and it’s where we adjust and style our layers.

首先将位图图像复制到画布上-一系列自定义选项将立即显示在右侧； Sketch App将该区域称为“检查器”，在这里我们可以调整和设置图层样式。

First, check the box that says “Color Adjust”. It’s here that we’ll be able to make adjustments to the brightness, saturation and contrast of an image, but for the sake of this mini-tutorial we’ll only reduce the saturation to zero.

首先，选中“颜色调整”框。 在这里，我们可以对图像的亮度，饱和度和对比度进行调整，但是出于本迷你教程的考虑，我们仅将饱和度降低为零。

混合模式 (Blending modes)

Press “R” to initiate a Rectangle shape and draw it directly on top of the image. Sketch’s snap-to automatic alignments should make this a breeze, but you can double-check the dimensions in The Inspector. While you’re there, uncheck the Borders and select a Fill → Linear Gradient, then use the keyboard shortcut Cmd + Alt + Down to reorder your two layers.

按“ R”启动矩形形状并将其直接绘制在图像顶​​部。 Sketch的对齐方式自动对齐应该轻而易举，但是您可以在The Inspector中仔细检查尺寸。 在此位置时，取消选中“ 边框”并选择“ 填充”→“线性渐变” ，然后使用键盘快捷键Cmd + Alt + Down重新排列两个图层的顺序。

Switch back to the image (which should now be on top), change the Opacity to “25%” and the Blending Mode to “Soft Light” — this is how we use Blending Modes to create colourful but subtle website backgrounds.

切换回图像(现在应该在顶部)，将“ 不透明度 ”更改为“ 25％”，将“ 混合模式 ”更改为“柔光”-这就是我们使用“混合模式”创建色彩丰富但细微的网站背景的方式。

Tip: blending modes actually work with all kinds of layers, not just images.

提示：混合模式实际上适用于各种图层，而不仅仅是图像 。

高斯模糊 (Gaussian blur)

Churn the Opacity back up to “100%”. Instead we’ll make the background blurred, a common trend in modern web design that allows a more optimal focus on typography with websites that have big image splash screens. Check the “Gaussian Blur” box and turn it up t0 50px.

将不透明度降低到“ 100％”。 取而代之的是，我们使背景变得模糊，这是现代Web设计中的一种普遍趋势，它可以使具有大图像初始屏幕的网站更加专注于排版。 选中“高斯模糊”框，将其调高到t0 50px。

You should notice almost instantly that the blur exceeds the dimensions of our box — we can fix this by applying a mask. Right-click on the rectangle in the layers sidebar (on the left) and click “Use as Mask”.

您几乎应该立即注意到，模糊超出了盒子的尺寸-我们可以通过应用遮罩来解决此问题。 右键单击图层侧边栏中的矩形(左侧)，然后单击“用作遮罩”。

Notice that all of these changes are non-destructive; we can rapid test multiple ideas (colours, blurs, intensity, et cetera) and those variations are never final.

请注意，所有这些更改都是非破坏性的 ； 我们可以快速测试多种想法( 颜色，模糊，强度等 )，而这些变化永远不会是最终的。

裁剪(最好的方法) (Cropping (the best way))

Now select the rectangle and attempt to resize it, or alternatively you can use The Inspector to declare new dimensions. Since the image is masked, it never exceeds the boundaries of our rectangle and this is by far the best way to accomplish cropping, because not only can we declare specific dimensions, but we’ve not done any destructive damage to our image.

现在选择矩形并尝试调整其大小，或者可以使用The Inspector声明新尺寸。 由于图像被遮罩，因此它永远不会超出矩形的边界，这是迄今为止完成裁剪的最佳方法，因为不仅可以声明特定的尺寸，而且还没有对图像造成任何破坏性的破坏。

播种(假定的方式) (Cropping (the supposed way))

It might be useful at this stage to roll back to the very beginning by using CMD + Z and undoing everything we’ve done so far; all you should be left with on the canvas is your original image. If you double-click on the image you’ll access a range of more destructive actions such as Crop and Invert.

在此阶段，使用CMD + Z并撤消到目前为止所做的一切可能会很有用。 您应该在画布上留下的全部就是您的原始图像。 如果您双击图像，将访问一系列更具破坏性的动作，例如Crop和Invert 。

You first need to make a selection, which you can accomplish with either Selection or Magic Wand. Magic Wand works as expected, but it doesn’t have the same tolerance control as Photoshop and the basic Selection doesn’t offer snap-to features or ruling of any kind — you have to completely rely on your own intuition and mouse control. Aside from Crop and Invert, you’ll also have the option to Fill or Vectorize the selection that you’ve made.

您首先需要进行选择，您可以使用Selection或Magic Wand完成选择 。 Magic Wand可以按预期工作，但是它没有与Photoshop相同的公差控制，并且基本Selection不提供任何对齐功能或任何裁定-您必须完全依靠自己的直觉和鼠标控制。 除了“ 裁剪和反转”之外，您还可以选择“ 填充”或“ 矢量化 ”所做的选择。

结论 (Conclusion)

My final conclusion is that we should still be using Photoshop for complex or destructive image editing tasks.

我的最终结论是，我们仍然应该使用Photoshop进行复杂或破坏性的图像编辑任务。

Sketch App simply doesn’t offer us enough flexibility to be able to use these tools effectively. However we did learn a few simple tricks that can save us from having to open up Photoshop whenever a bitmap image is involved, something that can quickly become a habit for those of us who’ve been using Photoshop for several years.

Sketch App根本无法为我们提供足够的灵活性，无法有效使用这些工具。 但是，我们确实学到了一些简单的技巧，可以使我们免于在涉及位图图像时打开Photoshop的麻烦，对于那些使用Photoshop数年的人来说，这很快就会成为一种习惯。

Becoming a master at image editing in Sketch App 3 is easy when you understand what it’s used for, and it’s limitations.

当您了解它的用途及其局限性时，成为Sketch App 3中的图像编辑大师很容易。

The features that I mentioned at the beginning of the article, Brightness, Gaussian Blur and Blending Modes (to name a few), can now even be achieved in modern web design with CSS filters. This is likely why these image editing features work flawlessly, while some others perform less efficiently.

我在本文开头提到的功能( 亮度 ， 高斯模糊和混合模式 (仅举几例))现在甚至可以在具有CSS过滤器的现代Web设计中实现。 这可能是为什么这些图像编辑功能可以完美工作，而另一些功能效率较低的原因。

翻译自: https://www.sitepoint/image-editing-in-sketch-app-3/

sketch放入app组件