简单5步用Sketch搞定透视mockup

自己翻译的小教程,原址:https://articles.sketchtricks.com/5-simple-steps-to-perspective-mockups-in-sketch-f15513d659cf
作者:Marko Vuletič
我已经有一年多没有在Photoshop中设计用户界面了,而且我一点也不怀念。自从我迁移到 Sketch中后,我的工作流程大幅改善。

我喜欢Sketch的一切(除了一些奇怪的bug)。我仅仅是在为我的设计做mockup的时候才会去打开Photoshop。但是这种情况现在要改变了。

James Tang发布了一款叫做 “Magic Mirror”的Sketch插件,让你可以从一个画板中创建透视图像。他把它描述为Sketch中简单版本的Photoshop嵌入式智能对象。这改变了一切!

Step1

双击插件文件下载 Magic Mirror并安装。你也可以把它拖拽到Sketch dock图标上安装成一个特定版本。

Step2

拖拽图片到Sketch dock 图标上,以此来建立一个新的Sketch文件。然后新建一个与图片一样大小的artboard。首先选择图片,然后点击“A” 或者是Insert > Artboard。在右边的检查器中再新建一个artboard。我已经把artboard的名称改为“Mockup Image” ,你可以更改为你喜欢的名字。

Step3

复制你的UIartboard并粘贴到你的透视mockup文件中。

Step4

选择Vector工具(V),然后用四个点描出屏幕。每个点都在屏幕的顶点上。这很重要:重新命名你刚刚新建的图层,让它和你想要替换的artboard名字完全一样。在这里我把它命名为 “01-timelines-mainScreen”。

Step5

选择你想要替换那个图层,然后点击Plugins > Magic Mirror > Magic Mirror! (⌃⇧ M)。

瞧!就是这样!
导出artboard,然后享受你新创作的mockup吧!


如果你觉得这个教程很有用,希望你能够推荐它,让更多的人受益。

我很高兴可以看到你们的作品!Tweet me at @xzarexhc.

Originally published at markovuletic.com on August 1, 2015.

2015-08-08 23:00417