跳到主要内容

为什么要从Photoshop切换到Sketch

在过去的一两年里,波希米亚编码的Sketch应用程序在光荣的互联网上获得了动力,成为Photoshop的“更好”替代品。大部分赞誉来自网络和界面设计社区。如果你和我一样,那么你总是在寻找新工具和现有工作流程的更好替代品。然而,起初我试图交出我20年的Photoshop指挥棒。

在大多数情况下,Photoshop可以做到这一点并且做得很好。 '为什么要换?'我想。 Photoshop快捷方式是我的第二语言。执行特定的效果或任务不再需要太多的脑力,因为我可能已经做了很多次类似的事情。这只老狗以为Sketch是适合新学校的酷孩子。

随着围绕Sketch的喋喋不休,我的好奇心终于得到了我的好处。我需要亲自看看为什么Sketch在我的同龄人中引起了轰动。当我即将开始一个新项目时,我认为当下是正确的。如果我打算这样做,我想把它全部付给我一周。

我关闭了Photoshop,下载了一个为期30天的Sketch试用版并在没有浮选装置的情况下潜入深水区,希望能让我的头部长时间保持在水面以上,以便弄清楚炒作的全部内容。如果你正在考虑探索Sketch,我会推荐这种方法。

在两到三天内,我确信。再次,我对开放一个软件感到热情,我立即获得了好处。我很快就学会了新的界面。与Photoshop的重叠就足够了。我恋爱了。 '是!'我想。

在本文中,我将介绍Sketch的一些核心功能,并将它们与Photoshop等效功能进行比较。如果你正在寻找一种更好(也更便宜)的Photoshop替代品,或者对其日益普及感到好奇,请继续阅读。

你好朋友

Sketch was built exclusively for Mac. If you’ve ever used Apple’s software, in particular Keynote, you’ll notice a similarity in its UI

Sketch专为Mac打造。如果你曾经使用过Apple的软件,特别是Keynote,你会发现它的UI有相似之处

Sketch是Mac OS X独有的,而且根据Bohemian Coding的FAQ部分,它甚至不考虑支持Windows和Linux。这对我们的长期Mac用户有好处。如果你完全熟悉OS X的生产力应用程序(Pages,Keynote,Numbers),或者已经使用了Apple的任何旧的,已停产的软件(我正在看你的iWeb),你会立刻觉得你遇到了一位老朋友,他的胡子变得更加成熟。

就像我在Keynote中开始使用它时一样,我在Sketch中做的第一件事就是自定义顶部工具栏。只需右键单击它并将尽可能多的项目扔到上面即可完成此操作。

键盘快捷键

While Photoshop has a toolbar in view at all times, some of Sketch’s tools are a bit tucked away at first

虽然Photoshop在任何时候都有一个工具栏,但Sketch的一些工具起初有点隐蔽

我收到很多朋友和Twitter民众的建议是尽快学习捷径。但是,工具栏上工具的可视化指导帮助我更好地理解了Sketch的功能以及它如何处理各种任务。 Photoshop中的许多工具都是半熟悉的,但它们现在位于不同的地方。在Sketch的情况下,一个更统一的区域。

为了帮助我从Photoshop过渡,我通过在OS X中创建自定义键盘快捷键来引入一些常用的键盘快捷键。如果您不熟悉这个过程,请准备好坠入爱河。从Mac的系统偏好设置中轻松完成。此外,这是一个方便的草图快捷键列表,让您熟悉:Sketchshortcuts.com

专注于焦点

不要误会我的意思:Photoshop完成了网站和UI模型工作并且做得很好。它也有很多其他的东西。它开始成为每个人的工具。你知道吗?没关系。然而,一个问题是它缺乏作为Web和用户界面设计的应用程序的重点。

Sketch的重点是那些设计网站,界面和图标的人。与Photoshop相比,Sketch的菜单看起来很简单。一股清新的空气。没有更多的战斗通过杂乱,不一定转化为网络。 Sketch的工具和价值在于一般可以轻松转换为CSS和浏览器。

例如:制作和自定义布局设置(即创建网格)。在Sketch中,预定义字段使您可以自定义网格的总宽度,装订线,列和行。作为总是使用响应式网格的人,我在开始新项目之前经常处于这些设置中。

画板预设

另一个展示Sketch强调Web和UI的功能是它的预设模板和画板预设。为此,我很感激。

假设你正在开始一个新的iOS应用程序项目。您可以像在Photoshop中一样创建新项目,也可以选择“文件”>“从模板新建”下的“iOS UI设计”模板。这里的优点是Sketch首先为您提供了一个iOS UI工具包,用于快速模拟iPhone应用程序并将原生iOS键盘拖动到您的模型中。

最近,我正在嘲笑我正在处理的预订应用程序的地图视图。我没有打开单独的文件或寻找iOS地图样机。刚切换到我的Elements页面并复制并粘贴。

大小完美

Need to add an extra 20 pixels to that 180px button? Just type 180+20

需要在180px按钮上添加额外的20个像素吗?只需输入180 + 20即可

就像Photoshop一样,Sketch的Inspector可以让您在画板上定义精确的尺寸和位置。但是,Sketch的尺寸和位置检查器有一个非常小的秘密。它理解数学!不仅是加法,减法,乘法和除法,还有百分比。

想要将按钮向左移20像素?只需在字段中添加“-20”即可。想要一个图像填满整个画板的一半?只需在宽度字段中输入'50%'即可。辉煌!

一个项目,一个文件

While Sketch varies from Photoshop in that it stores all of its pages within one document, they both handle layering, grouping and organisation in a similar way

虽然Sketch与Photoshop的不同之处在于它将所有页面存储在一个文档中,但它们都以类似的方式处理分层,分组和组织

使用Photoshop,我的项目和文件结构看起来像这样:

BigTimeClient文件夹
- BigTimeClient_landing-page.psd
- BigTimeClient_about-page.psd
- BigTimeClient_contact-page.psd

草图处理事情有点不同。单个Sketch文件包含一个文档中的所有页面和画板。起初我担心它会破坏我的Mac性能,但是我已经设计了大约30个屏幕的iOS应用程序并且没有遇到任何重大的性能问题。

这种方法的主要好处是您可以并排访问和查看所有屏幕,因此更容易进行更改和比较。如果你正在嘲笑各种响应断点,你会非常喜欢它。

最近,Photoshop推出了多个画板的版本。但是,在Sketch中,可以将所有画板组织到一个文档中的页面中,从而使该功能更加强大。否则,两个应用程序中的多个画板功能非常相似。

当我第一次打开应用程序时,Sketch中的图层调色板带来了一定程度的舒适感,因为它以各种方式模仿Photoshop。与Photoshop非常相似,您可以在此处查看,重命名,搜索项目中的组(文件夹)和元素。

一个文件适合所有

在Photoshop中,我通常会创建三个(或更多)文件资产。一个用于@ 1x,另一个用于@ 2x,另一个用于@ 3x。单独保存这些是乏味的。除非你百分之百地使用矢量对象和元素,否则这变得很痛苦。 Sketch在其应用中甚至没有一个光栅化工具或元素。好吧,当然,除非你拖入其中一个。

在Photoshop中创建iOS应用程序设计项目时,我会在屏幕上设计更大的尺寸,并在我的iPhone上测试镜像应用程序Skala Preview。

使用Sketch,我在使用Retina设备和资产时的工作流程发生了巨大变化和改进。我现在设计的标准设备尺寸。由于Sketch中默认情况下一切都是矢量,所以我不必担心在桌面上使我的画板异常大,所以我可以通过镜像预览工作(现在通过Sketch Mirror)。从桌面到移动的工作现在感觉更自然。

更重要的是,保存各种尺寸的元素就像点击导出按钮,添加任意数量的大小和文件格式一样简单,而且......就是这样。您甚至可以将图层和组拖放到桌面以节省时间 - 尽管“导出”按钮可以为您提供更多控制。这是迄今为止我最喜欢的Sketch功能之一,也是最大的节省时间之一。

从聪明到象征

Photoshop的智能对象和链接的智能对象非常方便和强大。我经常使用它们,特别是在设计使用大量重复元素的应用程序和界面时。

如果你不熟悉,这是一个快速的用例。您正在设计移动断点导航,当您意识到需要更改某些内容时,您已经在工作流程中已经有15个屏幕。如果您不使用Linked Smart Objects,则必须手动打开每个文件并在每个文件中进行更改。使用链接智能对象,您可以更改一个元素,并且所有元素都将自动更改。节省大量时间!

创意云库

Creative Cloud Libraries is a personal favourite of mine. Easily access, drag and drop objects or layers from one Photoshop document to another

Creative Cloud Libraries是我个人的最爱。轻松访问,将对象或图层从一个Photoshop文档拖放到另一个Photoshop文档

Photoshop中我最喜欢的另一个功能是Creative Cloud Libraries,它也是该程序的新功能。只需将常用资源拖到自己的“库”面板中,即可在需要将其拖放到项目的其他区域时轻松访问。如果您想更深入地阅读CC库,请转到这里

符号

Sketch Symbols are similar to Photoshop’s Linked Smart Objects, but a bit more customisable and powerful

Sketch Symbols类似于Photoshop的Linked Smart Objects,但更具可定制性和强大功能

你问,Photoshop中的链接智能对象和库与Sketch有什么关系?好吧,Sketch有一个叫做Symbols的小东西。我认为它是链接智能对象和图书馆的爱孩子,有一点点辣酱可以额外踢。

使用符号,您可以跨页面和画板重用资产或组。改变符号和热狗,它随处可见!例如,如果您正在调整列表中的资产和/或文本,它甚至会记住空间对齐。甚至文本的文字都会改变。

You can reuse assets on different pages, and changes will be translated across

您可以在不同页面上重复使用资产,并且将对所有更改进行转换

这里是我所说的额外的辣酱:'从符号中排除文本价值'。例如,一个重复的按钮样式,但具有不同的文本。想要全面改变按钮样式,但保留文字?没问题。没有额外的'更改所有实例'选项。魔法!

除了一组自动更新的元素外,您还可以找到定义图层和文本样式的乐趣。例如,在GT Walsheim中定义H1标签 - 大小为48并带有阴影,所有实例将全面更新。再次,像魔术一样!

把事情搞定了

在Photoshop中设计用户界面,应用程序和网站时,我通常使用形状来创建各种元素。你会发现与Sketch类似的基础。形状是我花费大部分时间的地方,从矩形创建按钮,填充或屏蔽带有图像填充的大矩形,绘制分隔线等。

Photoshop为您提供了各种创建矢量和非矢量形状和路径的方法。但是,Sketch是围绕可伸缩性构建的。一切都是基于矢量的,形状可以轻松调整。

例如,您可以返回并通过选择“Radius”选项将角半径添加到矩形按钮。您还可以使用照片填充任何形状,并以非破坏性方式调整其中任何一个。在测试响应式图像的缩放和调整大小时,这非常有用。

在屏蔽形状内的图像时,个人提示不要使用“用作屏蔽”选项。相反,“填充图像”可以在大多数情况下为您提供更大的灵活性。

Photoshop和Sketch中的形状组合之间也存在共同点。虽然我不亲自在Sketch(或任何软件)中创建自定义图标,但我确实发现自己需要独特的形状。但是,我想象图标设计师经常使用这个功能。

超越素描

If you’re looking for a less expensive alternative to Photoshop for more graphic design purposes, give Affinity Designer a try

如果您正在寻找更便宜的Photoshop替代品以获得更多图形设计,请尝试使用Affinity Designer

在这里,我刚刚介绍了从Photoshop移植时的一些功能,差异和熟悉程度。草图感觉就像是一个更好,更精细的工作流程,用于设计UI和网站的方向。但这并不能消除对像Photoshop或Affinity Designer这样的“照相馆”应用程序的需求。 Sketch的强大功能在于它作为Web和用户界面设计的应用程序。不多也不少。

从Photoshop到Sketch的学习曲线非常快。我花了三天半的时间在应用程序中获得了大约90%的舒适度,而且在我感觉自己对事物有99%的把握之前的三个星期。您可以在我的网站上阅读更多关于我的体验,我住的地方 - 写下我的旅程

Sketch的用户群正在快速增长。它的插件社区令人印象深刻,有效地扩展了Sketch的功能。如果您正在寻找一种新工具,而且价格非常合理,Sketch是一个很好的选择。在我看来,目前,它是UI工作的最佳选择。我为它的未来感到兴奋。

布莱恩霍夫

Brian Hoff是Brian Hoff Design的创始人兼创意总监,Brian Hoff Design是一家位于费城的精品数字代理商,专注于网络和移动平台及产品。本文最初发表于273期网络杂志

喜欢这个?阅读这些!



翻译字数超限