-
Notifications
You must be signed in to change notification settings - Fork 1
/
old.html
307 lines (228 loc) · 18.2 KB
/
old.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Magic Mirror for Sketch 3 | Perspective Designs in Sketch</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Magic Mirror v1.1 for Sketch 3 | Perspective Designs in Sketch">
<meta property="og:site_name" content="Magic Mirror v1.1 for Sketch 3 | Perspective Designs in Sketch">
<meta name="twitter:title" content="Magic Mirror v1.1 for Sketch 3 | Perspective Designs in Sketch">
<meta itemprop="description" content="Powerful Sketch 3 plugin that adds perspective transformation functionality to Sketch, just like Smart Objects in Photoshop.">
<meta property="og:description" content="Powerful Sketch 3 plugin that adds perspective transformation functionality to Sketch, just like Smart Objects in Photoshop.">
<meta name="twitter:description" content="Powerful Sketch 3 plugin that adds perspective transformation functionality to Sketch, just like Smart Objects in Photoshop.">
<meta property="og:url" content="http://magicmirror.design">
<meta name="twitter:url" content="http://magicmirror.design">
<meta property="og:image" content="http://magicmirror.design/images/ogimage1_1.jpg">
<meta name="twitter:image" content="http://magicmirror.design/images/ogimage1_1.jpg">
<meta name="author" content="James Tang">
<meta name="twitter:creator" content="@jamztang">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="keywords" content="perspective,mockup,transform,sketch,plugin,smart objects,photoshop,alternative,magic mirror,artboard">
<!-- <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen"> -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<!-- <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen"> -->
<link rel="stylesheet" type="text/css" href="stylesheets/flex.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/dark.css" media="screen">
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif;color:white;}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<script>
function downloadPluginClicked() {
ga('send', 'event', 'button', 'click', 'downloadPlugin');
var confirmed = confirm("Magic Mirror is under Common Creative Attribution-NonCommercial 4.0 International license.\n\nIt's completely free for personal and non-commercial use, while a more permissive license can be obtained to those who donate.\n\nAcknowledge and continue to download?");
if (confirmed) {
ga('send', 'event', 'button', 'click', 'confirmDownload');
window.location.href = "https://github.com/jamztang/MagicMirror/releases/download/v1.1/magicmirror-20150809-free.zip"
console.log("confirmed");
} else {
ga('send', 'event', 'button', 'click', 'cancelDownload');
console.log("cancelled");
}
}
function donateClicked() {
ga('send', 'event', 'donate', 'click', 'headingPaypal');
window.location.href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RUERV9YM2RT6U"
}
</script>
</head>
<body>
<!--
<section class="page-header">
<h1 class="project-name">Magicmirror.sketchplugin</h1>
<h2 class="project-tagline">Perspective Transformation for Sketch Artboards</h2>
<a href="https://github.com/jamztang/MagicMirror" class="btn">View on GitHub</a>
<a href="https://github.com/jamztang/MagicMirror/zipball/master" class="btn">Download .zip</a>
<a href="https://github.com/jamztang/MagicMirror/tarball/master" class="btn">Download .tar.gz</a>
</section>
-->
<section class="page-header">
<section class="container flex vertical end">
<div id="topnav" class="flex end">
<!--End mc_embed_signup-->
<a href="#" class="normal">home</a>
<!-- <a href="https://github.com/jamztang/MagicMirror" class="normal">github</a> -->
<a href="#installation" class="normal">installation</a>
<a href="#usage" class="normal">usage</a>
<a href="changelog" class="normal">changelog</a>
<a href="#donate">donate</a>
</div>
<div id="computer">
<img class="center" src="images/macbook-with-logo.png" alt=""></img>
</div>
</section>
</section>
<div class="container">
<p class="img"></p>
<section class="main-content">
<h1>
<a id="magic-mirror-for-sketch-3" class="anchor" href="#magic-mirror-for-sketch-3" aria-hidden="true"><span class="octicon octicon-link"></span></a>Introducing Magic Mirror for Sketch 3</h1>
<p></p>
<p>Magic Mirror is a Sketch 3 Plugin that can create a perspective-transformed image from an artboard and apply it to a shape.</p>
<p>You can consider it a simple version of Photoshop’s <a href="https://helpx.adobe.com/photoshop/using/create-smart-objects.html">Embeded Smart Objects</a> for Sketch.</p>
<p>Here's what Magic Mirror can do:</p>
<!-- <p class="img"><img src="http://cl.ly/image/243S012T201L/magic-mirror-intro.gif" class="fill" alt=""></p> -->
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/YhdjuL5ju8Y?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
<!-- <p class="center" id="demo"><iframe src="https://www.youtube.com/embed/YhdjuL5ju8Y" frameborder="0" allowfullscreen></iframe></p> -->
<h2>What's different?</h2>
<p>Unlike <a href="http://bohemiancoding.com/sketch/support/documentation/07-symbols/">Symbols</a>, Magic Mirror uses a <a href="http://bohemiancoding.com/sketch/support/documentation/08-styling/1-fills.html">Pattern Fill</a> to preform the mirroring. It can mirror any number of Artboards to any number of shape layers in any size, any angle, but <em>also</em> responds to the shape’s distortion (perspective transformation).</p>
<p>Unlike when editing Bitmaps in Sketch, Magic Mirror does not modify the original bitmap in a destructive way (since we’re sourcing from an Artboard). Using Shape layers instead of Bitmap layers, editable paths are preserved and can be easily updated.</p>
<!-- <p><a href="https://github.com/jamztang/MagicMirror/archive/master.zip"><img src="http://cl.ly/image/0B1O3J021S44/magic-mirror-download.png" alt=""></a></p> -->
<h2>
<a id="installation" class="anchor" href="#installation" aria-hidden="true"><span class="octicon octicon-link"></span></a>Installation</h2>
<p class="center"><a href="javascript:void(0);" onclick="downloadPluginClicked()"><img src="images/download-plugin.png"></img></a></p>
<p class="center"><small>free for personal use, for commerical use please consider <a href="#donate">donate</a></small></p>
<ol>
<li>Download the plugin, unzip it, and locate <code>Magic Mirror.sketchplugin</code>.</li>
<li>Double click it to install the plugin! (If you have multiple versions of Sketch, you can drag the plugin into the specific Sketch dock icon.)</li>
<li>Check that it’s available in the <code>Plugins</code> menu.
<img src="images/magic-mirror-menu.png" alt=""></li>
<li>Consider <a href="#donate">donating</a> to the project :)</li>
</ol>
<h2>
<a id="usage" class="anchor" href="#usage" aria-hidden="true"><span class="octicon octicon-link"></span></a>Usage</h2>
<p class="center"><a href="https://github.com/jamztang/MagicMirror/releases/download/v1.0/magicmirror-sample.sketch"><img src="images/download-sketch.png"></img></a></p>
<p>Magic Mirror currently offers three handy methods.</p>
<h3>
<a id="1-magic-mirror---m" class="anchor" href="#1-magic-mirror---m" aria-hidden="true"><span class="octicon octicon-link"></span></a>1. Magic Mirror! (⌃ ⇧ M)</h3>
<p>Apply perpective transform to all layers that can be associated with an artboard with the same name.</p>
<p class="img"><img src="images/magic-mirror-feature1.gif" class="fill" alt=""></p>
<ol>
<li>Prepare a source artboard.</li>
<li>Use the <code>Rectangle (R)</code> or <code>Vector (V)</code> tool to draw a 4-point polygon. It’s important to <em>not</em> use the <code>Round Rect</code> tool, because Magic Mirror needs <strong>exactly 4 control points</strong> to work properly.</li>
<li>Rename your shape layer to <strong>exactly match the Artboard’s name</strong> you want to mirror.</li>
<li>Press <code>⌃ ⇧ M</code> or go to <code>Plugin <strong>></strong> Magic Mirror <strong>></strong> Magic Mirror!</code> to see the results!</li>
</ol>
<h3>
<a id="2-jump-to-artboard---j" class="anchor" href="#2-jump-to-artboard---j" aria-hidden="true"><span class="octicon octicon-link"></span></a>2. Jump to Artboard (⌃ ⇧ J)</h3>
<p>Quickly jump to the layer’s associated artboard.</p>
<p class="img"><img src="images/magic-mirror-feature2.gif" class="center" alt=""></p>
<ol>
<li>Select the magic shape layer you’re currently working on.</li>
<li>Press <code>⌃ ⇧ J</code> or use <code>Plugin <strong>></strong> Magic Mirror <strong>></strong> Jump to Artboard</code>.</li>
</ol>
<h3>
<a id="3-rotate-contents----r" class="anchor" href="#3-rotate-contents----r" aria-hidden="true"><span class="octicon octicon-link"></span></a>3. Rotate Content (⌃ ⌘ ⇧ R)</h3>
<p><img src="images/magic-mirror-feature3.gif" class="center" alt=""></p>
<p>Rotate the content orientation of the layer fill.</p>
<ol>
<li>Select the layer.</li>
<li>Press <code>⌃ ⌘ ⇧ R</code> or use <code>Plugin <strong>></strong> Magic Mirror <strong>></strong> Rotate Content</code>.</li>
</ol>
<h3>
<a id="4-flip-content" class="anchor" href="#4-flip-content" aria-hidden="true"><span class="octicon octicon-link"></span></a>4. Flip Content (⌃ ⌘ ⇧ F)</h3>
<p><img src="images/magic-mirror-feature4.gif" class="center" alt=""></p>
<p>Flip the content of the layer fill while preserving the points.</p>
<ol>
<li>Select the layer.</li>
<li>Press <code>⌃ ⌘ ⇧ F</code> or use <code>Plugin <strong>></strong> Magic Mirror <strong>></strong> Flip Content</code>.</li>
</ol>
<h2>
<a id="so-how-does-it-work-in-short" class="anchor" href="#so-how-does-it-work-in-short" aria-hidden="true"><span class="octicon octicon-link"></span></a>So how does it work?</h2>
<p>In short, Magic Mirror iterates through all the “Shape” layers (MSShapeGroup) in the current page, and finds all the Artboard-Layer pairs that share the exact same name.</p>
<p>Then it looks into the path (NSBezierPath) and extracts the 4 corner points.</p>
<p>It then hands the content over to <a href="https://developer.apple.com/library/mac/documentation/GraphicsImaging/Conceptual/CoreImaging/ci_intro/ci_intro.html">Core Image</a> to do Perspective Transformation, and apply the transformed image using Pattern Fill.</p>
<h2>
<a id="donate" class="anchor" href="#donate" aria-hidden="true"><span class="octicon octicon-link"></span></a>Donation</h2>
<p class="donate center"><strong><a href="javascript:void(0);" onclick="donateClicked()">>> Donate ($5 USD) <<</a></strong>
<p>Magic Mirror is an <a href="https://github.com/jamztang/MagicMirror">open source project</a> on GitHub. You can freely checkout the source code (and contribute to the project!) However, if you decide to donate to the project, you'll get a special package: ;)</p>
<!--
<h2>
<a id="purchase" class="anchor" href="#purchase" aria-hidden="true"><span class="octicon octicon-link"></span></a>Purchase the package</h2>
-->
<p class="img"><img src="images/donate-dark.jpg" class="fill" alt=""></p>
<p>You've probably seen similar perspective mockup tools like this before, but they're all for Photoshop. I wanted to recreate this entirely in Sketch, and ensure your work remains adjustable and scalable.</p>
<h2>Why should I donate?</h2>
<p>First, because I would like to continue developing the product and keep helping the community to better utilize our tools. I believe good ideas, and proper execution of those ideas, requires dedicated time and effort. The only way for us to produce things like that is to have sustainable revenue from the things we work on.</p>
<p>Second, this represents a new era of design possibilites within Sketch. I hope from now on we'll see more and more perspective mockups dedicated for Sketch, which we all love! :)</p>
<h2>Backtrack</h2>
<p><a href="http://thenextweb.com/dd/2015/08/03/magic-mirror-for-sketch-3-lets-you-quickly-create-hands-on-mockups-of-your-apps/">TheNextWeb</a>
, <a href="https://www.designernews.co/stories/53390-magic-mirror-for-sketch-3--plugin-to-create-perspective-designs">DesignerNews</a>
, <a href="https://iosdevweekly.com/issues/209
">iOS Dev Weekly 209</a>
, <a href="Sketch App Sources
http://www.sketchappsources.com/plugins-for-sketch.html
">SketchAppResource</a>
, <a href="http://sidebar.io/2015/7/31">Sidebar.io</a>
, <a href="http://www.sketchcasts.net/episodes/47">SketchCast #47</a>
, <a href="http://sketchtalk.io/discussion/1371/magic-mirror-perspective-3d-for-your-artboards
">SketchTalk.io</a>
, <a href="http://t3n.de/news/magic-mirror-sketch-plugin-627330/">T3n (German)</a>
, <a href="http://applech2.com/archives/45794567.html">Applech2 (Japanese)</a>
. <a href="http://www.producthunt.com/tech/magic-mirror-for-sketch-3">ProductHunt</a>
, <a href="https://news.ycombinator.com/item?id=9973827">Hackernews</a>
</p>
<p class="center">
<!-- Twitter -->
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://magicmirror.design" data-via="jamztang">Tweet</a> <script>!function(d,s,id){var js,fjs=d.
getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<!-- Follow -->
<a href="https://twitter.com/jamztang" class="twitter-follow-button" data-show-count="false">Follow @jamztang</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</p>
<!--
<h2>
<a id="credits" class="anchor" href="#credits" aria-hidden="true"><span class="octicon octicon-link"></span></a>Credits</h2>
<p>Special thanks to <a href="http://twitter.com/@simonpang">Simon Pang</a> to help point me back to the right direction when I was lost in reverse engineering Sketch header files without an obvious answer and attempted to manually apply the 3D transformation matrix to the image.</p>
<p>Without him this would likely took me few more nights, or might at worst not possible due to some <a href="https://github.com/ccgus/CocoaScript/issues/30">complications of expressing certain language syntax in the scripting bridge</a>.</p>
-->
<p class="center">
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup" class="center">
<form action="//jamztang.us10.list-manage.com/subscribe/post?u=d0e153cc5be5d4a9389546767&id=3c04db4085" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Do you want to hear more from Magic Mirror for Sketch 3?</label>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_d0e153cc5be5d4a9389546767_3c04db4085" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</p>
<!--End mc_embed_signup-->
<footer class="site-footer">
<!-- <span class="site-footer-owner"><a href="https://github.com/jamztang/MagicMirror">Magic Mirror</a> is made by<a href="https://github.com/jamztang"> James Tang</a> 2015</span>
--> <div class="license">
<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc/4.0/80x15.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Magic Mirror for Sketch 3</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://magicmirror.design" property="cc:attributionName" rel="cc:attributionURL">James Tang</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">Creative Commons Attribution-NonCommercial 4.0 International License</a>.<br />Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/jamztang/MagicMirror" rel="dct:source">https://github.com/jamztang/MagicMirror</a>.<br />Permissions beyond the scope of this license may be available to those who <a xmlns:cc="http://creativecommons.org/ns#" href="http://magicmirror.design/#donate" rel="cc:morePermissions">donate</a>.
</div>
</footer>
</section>
</div>
</body>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-65727569-1', 'auto');
ga('send', 'pageview');
</script>
</html>