-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
493 lines (486 loc) · 27.7 KB
/
index.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
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-N6NKWTZYVH"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-N6NKWTZYVH');
</script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style/light.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
<meta name="title" content="Convert to DaVinci Resolve">
<meta name="description" content="Start using DaVinci Resolve. Quickstart your way into editing world and stop paying for other editing programs.">
<meta name="keywords" content="Editing, video, software, tutorial">
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="English">
<meta name="author" content="PURPLE BLACK">
<meta name="theme-color" content="#293636">
<meta property="og:image" content="https://i.imgur.com/TkkMrpi.jpeg">
<meta property="og:title" content="Convert to DaVinci Resolve" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://goodideagiver.github.io/resolve-premier/" />
<meta property="og:description" content="Start using DaVinci Resolve. Quickstart your way into editing world and stop paying for other editing programs." />
<!-- Include this to make the og:image larger -->
<meta name="twitter:card" content="summary_large_image">
<title>Convert to Resolve</title>
</head>
<body id="body">
<main>
<header id="home" class="m-header">
<button onclick="darkMode();" class="light-switch"><i class="far fa-lightbulb"></i></button>
<h1>Convert to DaVinci Resolve</h1>
<p>Unchained from Adobe greed</p>
<p>article by <a style="color: #a66fff;" href="https://purpleblack.dev/" target="_blank" noopener noreferer>PURPLE BLACK</a></p>
</header>
<nav class="side-list hide-list" id="sideList">
<div class="btn-list">
<button class="close-btn" onclick="showMenu();"><i class="fas fa-angle-double-left"></i></button>
<a href="https://ko-fi.com/prplblck" class="clickable donate" target="_blank" rel="noopener noreferrer"><i class="fas fa-mug-hot"></i> Buy me a coffee</a>
<a id="hideBtn" class="clickable" href="javascript:;" onclick="hideArt();">Hide non essential articles</a>
</div>
<ol class="unc" onclick="showMenu();">
<h3>Intro</h3>
<li><a href="#what">What is this?</a></li>
<li><a href="#intro">Getting started</a></li>
</ol>
<ol onclick="showMenu();">
<h3>Essential</h3>
<li><a href="#cut">How to cut</a></li>
<li><a href="#delete">Delete clips</a></li>
<li><a href="#audio-edit">Audio</a></li>
<li><a href="#export">Export / Render</a></li>
<li><a href="#shortcut">Shortcuts</a></li>
</ol>
<ol class="unc" onclick="showMenu();">
<h3>Basic</h2>
<li class="unc"><a href="#join">Joining clips</a></li>
<li class="unc"><a href="#addTxt">Adding text</a></li>
<li class="unc"><a href="#speed">Changing speed</a></li>
<li class="unc"><a href="#timeline">Timeline zoom</a></li>
<li class="unc"><a href="#moving">Moving items on timeline</a></li>
</ol>
<ol class="unc" onclick="showMenu();">
<h3>More advanced</h3>
<li><a href="#transform">Scale / position video</a></li>
<li><a href="#acs">Advanced clip selection</a></li>
<li><a href="#workOpt">Workflow optimization</a></li>
</ol>
<span onclick="showMenu();" class="list-hider"></span>
</nav>
<nav class="table-of-contents">
<ol>
<li class="show-btn"><a href="javascript:;" onclick="showMenu();"><i class="fas fa-angle-double-right"></i></a></li>
<li><a href="#home">Home</a></li>
<li class="mob-hide"><a cl href="javascript:;" onclick="showMenu();"><i class="fas fa-list"></i> Article list</a></li>
<li class="mob-hide"><a href="#shortcut">Shortcuts</a></li>
<li class="mob-hide"><a class="contribute" href="https://github.com/goodideagiver/resolve-premier" target="_blank" noreferer noopener><i class="fab fa-github"></i> Contribute</a></li>
</ol>
</nav>
<article class="tut-art unc">
<h2 id="what">What is this?</h2>
<div class="side-by-side">
<div>
<p>This is a cheatsheet website to help people quick start their way into using DaVinci Resolve. It's meant to save people's time in contrast to crappy tutorials on youtube.</p>
</div>
<div class="hint">It's not a zero to hero tutorial. You need to have some editing knowledge in order to fully understand content of this website.</div>
</div>
</article>
<article class="tut-art unc">
<header>
<h2 id="intro">Getting started</h2>
</header>
<h3>Why is it different?!</h3>
<p>At first editing in DaVinci Resolve after being used to Adobe Premiere it may feel awkward to cut media imported on the timeline. Many tools' icons look exactly like in Premiere, but their functionality has minor differences that are annoying when you're just starting.</p>
<h3>Introduction</h3>
<a href="#cut" class="clickable">Skip intro</a>
<p>There are couple of ways of cutting imported media.</p>
<p>First, you need to select the edit tab.</p>
<img class="lazyload" style="max-width: 100%;" data-src="img/Screenshot_832.png" src="img/loading.svg" alt="" srcset="">
<p>Drag media from media pool into timeline</p>
<img class="lazyload" data-src="img/into-timeline.gif" src="img/loading.svg" alt="" srcset="">
<p>Your timeline should end up looking like this</p>
<img class="lazyload" data-src="img/Screenshot_83.png" src="img/loading.svg" alt="" srcset="">
</article>
<section class="art-section-head unc bg-essential">
<h2>Essential</h2>
</section>
<article class="tut-art">
<header>
<h2 id="cut">How to cut?</h2>
</header>
<div>
<ol>
<div class="side-by-side">
<li>Trim edit mode
<span class="shortcut">T</span>
<p>Drag clip from left or right edge to shorten it or increase its' length</p>
</li>
<div class="hint">
<p><b>Hint</b>: You need to have linked selection option enabled to cut audio and video from clip simultaneously (alternatively you can hold <b>ALT</b> to do that</p>
<img class="lazyload" data-src="img/Screenshot_85.png" src="img/loading.svg" alt="" srcset="">
<span class="shortcut">CTRL + SHIFT + L</span>
</div>
</div>
<li>Blade edit mode
<span class="shortcut">B</span>
<p>This tool is simillar to Adobe Premiere razor tool</p>
</li>
<li>Razor
<span class="shortcut">CTRL + B</span>
<p>When <b>blade edit mode</b> is active: cut at cursor location or playhed location if cursor is not hovering a clip.</p>
</li>
<li>Ripple Trim
<p>Trim clip to start at the playhead and remove empty space <span class="shortcut">CTLR + SHIFT + [</span> <br><br>Trim clip to end at the playhead position <span class="shortcut">CTLR + SHIFT + ]</span></p>
</li>
</ol>
</div>
</article>
<article class="tut-art">
<header>
<h2 id="delete">Deleting clips from timeline</h2>
</header>
<div>
<ol>
<li>Delete with auto ripple delete <span class="shortcut">DEL</span>
<img class="lazyload" data-src="img/del-ripple.gif" src="img/loading.svg" alt="" srcset="">
</li>
<li>Delete without auto ripple delete <span class="shortcut">BACKSPAce</span>
<img class="lazyload" data-src="img/backspace.gif" src="img/loading.svg" alt="" srcset="">
<p>You can use <span class="shortcut">CTRL + X</span> to cut clip for the same effect, but the cut clip will end up in your clipboard</p>
</li>
</ol>
</div>
</article>
<article class="tut-art unc">
<header>
<h2 id="join">Joining clips</h2>
</header>
<div>
<ol>
<li>If your timeline looks like this
<p>and you want to join clips into one, nice, clean looking clip</p>
<img class="lazyload" data-src="img/Screenshot_89.png" src="img/loading.svg" alt="" srcset="">
</li>
<li>Select all clips that you want to join
<p>Press <b>RMB</b>on any clip from selected ones and select first option</p>
<img class="lazyload" data-src="img/Screenshot_87.png" src="img/loading.svg" alt="" srcset="">
</li>
<li>End result
<img class="lazyload" data-src="img/join-clips.gif" src="img/loading.svg" alt="" srcset="">
</li>
</ol>
</div>
</article>
<article class="tut-art">
<header>
<h2 id="audio-edit">Audio levels</h2>
</header>
<p>Get ready, because this is going to be epic</p>
<div>
<ol>
<li>
Your audio track needs to look like this
<img class="lazyload" data-src="img/Screenshot_94.png" src="img/loading.svg" alt="" srcset="">
<a class="clickable unc" href="#timeline">How to zoom timeline</a>
</li>
<li>
All you need is <b>ALT</b> key <span class="shortcut">ALT</span>
<p>Select audio clip, hold <b>ALT</b> and hover over thin line in top half of the audio clip. Now all you have to do is press <b>LMB</b>, that will create audio keyframes which can be edited by dragging.</p>
<img class="lazyload" data-src="img/audio-keyframes.gif" src="img/loading.svg" alt="">
</li>
</ol>
</div>
</article>
<article class="tut-art">
<header>
<h2 id="export">Exporting</h2>
</header>
<div>
<ol>
<li>Select deliver
<p>It's located at the very bottom of the program</p>
<img class="lazyload" data-src="img/Screenshot_90.png" src="img/loading.svg" alt="" srcset="">
</li>
<li>Select desired preset, or custom settings
<p>Location: top left corner <b>Render Settings</b> tab</p>
<img class="lazyload" data-src="img/Screenshot_91.png" src="img/loading.svg" alt="" srcset="">
</li>
<li>Name file and choose save location
<img class="lazyload" data-src="img/Screenshot_92.png" src="img/loading.svg" alt="" srcset="">
</li>
<li>Press Add to Render Queue
</li>
<li>Render timelines when you're ready
<p>This tab is located in the top right corner</p>
<img class="lazyload" data-src="img/Screenshot_93.png" src="img/loading.svg" alt="" srcset="">
</li>
<li>Go to sleep</li>
</ol>
</div>
</article>
<section class="art-section-head unc bg-basic">
<h2>Basic</h2>
</section>
<article class="tut-art unc">
<header>
<h2 id="addTxt">Adding text</h2>
</header>
<p>Adding text is very simple in DaVinci resolve</p>
<ol>
<li>Go to edit panel</li>
<li><b>Effect</b> library
<img class="lazyload" data-src="img/adding-text/Screenshot_101.png" src="img/loading.svg" alt="">
</li>
<li>Drag and drop <b>Text</b> to your timeline</li>
<img class="lazyload" data-src="img/adding-text/drag-txt.gif" src="img/loading.svg" alt="">
</ol>
<p>You can add <b>Text</b> effect to your <a href="#workOpt">favorite</a> effects to allow quicker access.</p>
</article>
<article class="tut-art unc">
<header>
<h2 id="speed">Changing speed</h2>
</header>
<h3>First method</h3>
<ol>
<li>Right click the clip and select <b>Change clip speed</b> <span class="shortcut">R</span>
<img class="lazyload" src="img/loading.svg" data-src="img/speed/Screenshot_99.png" alt="" srcset="">
</li>
<li>Choose desired clip speed<div class="side-by-side">
<div>
<img class="lazyload" src="img/loading.svg" data-src="img/speed/Screenshot_100.png" alt="" srcset="">
</div>
<div>
<div class="hint">
<p>
<b>Hint</b>:
If you don't tick the <b>Ripple sequence</b> checkbox, your clip duration will not be shortened
</p>
</div>
</div>
</div>
</li>
</ol>
<details><summary>See other methods</summary>
<h3>Second method</h3>
<ol>
<li>Enable retime control on clip <span class="shortcut">CTRL + R</span>
<p>You can add speed control points under the playhead and drag them using mouse like shown on the gif below</p>
<img class="lazyload" src="img/loading.svg" data-src="img/speed/ctrlR-speed.gif" alt="" srcset="">
</li>
</ol>
<h3>Third method</h3>
<p>This article is for advanced users, click below to show it</p>
<a class="clickable" href="#speed1" onclick="foldSection('speed1')">Toggle section</a>
<ol id="speed1" class="hidden" style="scroll-margin: 250px;">
<li>Right click a clip and choose <b>Retime curve</b>
<p>Retime curve is a visual representation of clip speed</p>
</li>
<li>Tick retime speed checkbox
<img class="lazyload" src="img/loading.svg" data-src="img/speed/retime-speed.gif" alt="" srcset="">
</li>
<li>Add points by clicking on the line</li>
<img class="lazyload" src="img/loading.svg" data-src="img/speed/add-points.gif" alt="" srcset="">
<li>You can add ease in and out to keyframes like shown on the gif below
<img class="lazyload" src="img/loading.svg" data-src="img/speed/easeinout.gif" alt="" srcset="">
</li>
<li>To have more control over speed you can adjust scale controls in every corner of the retime control box
<img class="lazyload" src="img/loading.svg" data-src="img/speed/scalespeed.gif" alt="" srcset="">
</li>
</ol>
</details>
</article>
<article class="tut-art unc">
<header>
<h2 id="transform">Transform video</h2>
</header>
<ol>
<li>Find effects library</li>
<img class="lazyload" data-src="img/transform/Screenshot_96.png" src="img/loading.svg" alt="">
<li>Find and apply transform effect to a clip</li>
<p>There are other ways to change videos rotation/scale/position, but this way allows the best flexibility</p>
<img class="lazyload" data-src="img/transform/Screenshot_97.png" src="img/loading.svg" alt="">
<li>Go into the effects tab of clip properties</li>
<img class="lazyload" data-src="img/transform/Screenshot_98.png" src="img/loading.svg" alt="">
<li>Add keyframes to desired properties</li>
<img class="lazyload" data-src="img/transform/transform.gif" src="img/loading.svg" alt="">
<li>Final result</li>
<img class="lazyload" data-src="img/transform/skalowanie.gif" src="img/loading.svg" alt="">
</ol>
</article>
<article class="tut-art unc">
<header>
<h2 id="timeline">Tmeline zoom</h2>
</header>
<ol>
<li>Scroll timeline left and right <span class="shortcut">CTRL + SCROLL</span></li>
<li>Scroll timeline up and down <span class="shortcut">SCROLL</span></li>
<li>Stretch audio or video height preview on timeline <span class="shortcut">SHIFT + SCROLL</span></li>
<li>Zoom in <span class="shortcut">ALT + SCROLL</span> or <span class="shortcut">CTrl + +/-</span></li>
</ol>
</article>
<section class="art-section-head unc bg-advanced">
<h2>Advanced</h2>
</section>
<article class="tut-art unc">
<header>
<h2 id="acs">Advanced clip selection</h2>
</header>
<ol>
<div class="side-by-side">
<li>Select all clips to the right <span class="shortcut">ALT + Y</span>
<img class="lazyload" data-src="img/acs/altY.gif" src="img/loading.svg" alt="">
</li>
<li>Select all clips to the left <span class="shortcut">CTLR + ALT + Y</span>
<img class="lazyload" data-src="img/acs/ctrlaltY.gif" src="img/loading.svg" alt="">
</li>
</div>
<li>Bypass linked clips <span class="shortcut">ALT + CLICK</span> or <span class="shortcut">ALT</span> when drawing selection.
<p>It selects only chosen clips instead of selecting all linked clips. You can see usage example in the <a href="#delete">delete</a> article (backspace deleting section).</p>
</li>
</ol>
</article>
<article class="tut-art unc">
<header>
<h2 id="moving">Moving items on timeline</h2>
</header>
<ol>
<li>Ripple trim</li>
<li>Press and hold <span class="shortcut">CTRL + SHIFT</span> <p>while dragging the clip to its new position. You’ll notice as you drag the clip, other clips will move out of the way, to make room.</p>
</li>
<li>
<div class="side-by-side">
<div>
Draging the clip with <span class="shortcut">CTRL + ALT</span> <p>will end up insetring the dragged clip into a clip that you are hovering above.</p>
</div>
<div class="hint"><p>This doesn't work on all clips. It won't work on clips where audio and video tracks have different end points. (duration)</p></div>
</div>
</li>
</ol>
</article>
<article class="tut-art unc">
<header>
<h2 id="workOpt">Workflow optimization</h2>
</header>
<ol>
<li>Favorite effects</li>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit quae aspernatur nam vel illo quis molestias harum iure praesentium eaque hic quidem, sit odit vero ipsum ad, inventore suscipit maxime.</p>
<li>Default settings</li>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, ex autem? Harum incidunt pariatur officia nulla quam exercitationem, error doloribus non quia accusamus recusandae ipsam officiis porro! Quis, vero explicabo.</p>
</ol>
</article>
<article class="tut-art">
<header>
<h2 id="shortcut">Handy Shortcuts</h2>
</header>
<h3>Editing:</h3>
<p class="mob-hide">Hover for description</p>
<div class="shortcut-grid">
<div class="shortcut-item">
<span>BLADE</span>
<span>B</span>
<span>Cut clip with mouse clicks</span>
</div>
<div class="shortcut-item">
<span>RAZOR</span>
<span>CTRL + B</span>
<span>Splits the clip at cursor location. When cursor is not hovering a clip, cut at playhead location</span>
</div>
<div class="shortcut-item">
<span>DELETE</span>
<span>BACKSPACE</span>
<span>Delete clip without auto ripple delete</span>
</div>
<div class="shortcut-item">
<span>POINTER</span>
<span>A</span>
<span>Standard cursor</span>
</div>
<div class="shortcut-item">
<span>ADD TRANSITION</span>
<span>CTRL + T</span>
</div>
<div class="shortcut-item">
<span>TRIM</span>
<span>T</span>
<span>Tool to make clip shorter or longer when dragging its edge. It doesn't extend clips duration.</span>
</div>
<div class="shortcut-item">
<span>INSERT EDIT</span>
<span>F9</span>
</div>
<div class="shortcut-item">
<span>OVERWRITE EDIT</span>
<span>F10</span>
</div>
<div class="shortcut-item">
<span>REPLACE EDIT</span>
<span>F11</span>
</div>
<div class="shortcut-item">
<span>PLACE ON TOP EDIT</span>
<span>F12</span>
</div>
<div class="shortcut-item">
<span>DYNAMIC TRIM MODE</span>
<span>W</span>
</div>
<div class="shortcut-item">
<span>SELECT CLIPS FORWARD</span>
<span>Y</span>
<span>Selects all clips that are to the right of the playhead</span>
</div>
<div class="shortcut-item">
<span>EDIT POINT TYPE</span>
<span>U</span>
<span> Is only useful after using Select Nearest Edit Point <b>V</b> first</span>
</div>
<div class="shortcut-item">
<span>SNAPPING</span>
<span>N</span>
<span>When their edges are close clips are automatically aligned to be sticked together</span>
</div>
<div class="shortcut-item">
<span>SPLIT CLIP</span>
<span>CTRL + "+"</span>
</div>
<div class="shortcut-item">
<span>JOIN CLIP</span>
<span>ALT + "+"</span>
</div>
</div>
</article>
</main>
<footer>
<h3>PURPLE BLACK</h3>
<ul>
<li><a href="https://github.com/goodideagiver" target="_blank" noopener noreferer>GitHub</a></li>
<li><a href="https://github.com/goodideagiver/resolve-premier/issues" target="_blank" rel="noopener noreferrer">Suggest features</a></li>
<li>About</li>
<li>Websites</li>
<li><a href="https://ko-fi.com/prplblck" target="_blank" noopener noreferer>Support me</a></li>
<li>Contact</li>
</ul>
<p>All GIFs created using <a href="https://www.screentogif.com/" target="_blank" noopener noreferer>ScreenToGif</a></p>
<p class="footer-bottom-line">WEBSITE DEVELOPED BY PURPLE BLACK <span id="year">year</span></p>
</footer>
</body>
<script src="lib/lazysizes.min.js"></script>
<script defer src="script.js"></script>
<script src="https://kit.fontawesome.com/ba957681b0.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2/webcomponents-loader.min.js"></script>
<!-- <script defer type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@1/src/zero-md.min.js"></script> -->
<script src="lib/w3-include-html.js"></script>
<script>
includeHTML();
</script>
</html>