forked from SupaGruen/StableDiffusion-CheatSheet
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
768 lines (714 loc) · 43 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
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Stable Diffusion 1.5 - Cheat Sheet</title>
<link href="./img/other/favicon.ico" rel="icon" type="image/x-icon">
<link href="./src/style.css" rel="stylesheet">
<script src="./src/lazyload.min.js"></script>
<script src="./src/exif-reader.js"></script>
<script src="./src/data.js"></script>
<script src="./src/data-excluded-artists.js"></script>
<script src="./src/spaghetticode.js"></script>
</head>
<body>
<header>
<h1>Stable Diffusion 1.5 - Cheat Sheet</h1>
<nav>
<ul>
<li><a class="mbut" data-page="styles" href="#">Styles</a></li>
<li><a class="mbut" data-page="info" href="#">Metadata</a></li>
<li><a class="mbut" data-page="notes" href="#">Notes</a></li>
<li><a class="mbut" data-page="camera" href="#">Camera</a></li>
<li><a class="mbut" data-page="about" href="#">About</a></li>
</ul>
<div id="suche">
<a href="#" class="filterbut">Filter</a>
<label for="searchbox" class="is-size-5">Search</label>
<input type="text" id="searchbox" placeholder="Search">
<a href="#" id="clearsearch">×</a>
</div>
</nav>
<div id="allcats"></div>
</header>
<noscript>
<div id="noscript">For full functionality of this site it is necessary to enable JavaScript.<br>Here are the <a href="https://www.enable-javascript.com/">instructions how to enable JavaScript in your web browser</a>.</div>
</noscript>
<section id="styles">
<h3>Artist Inspired Styles <span id="searchinfo"></span></h3>
<p>A collection of what Stable Diffusion imagines these artists' styles look like.</p>
<p>While having an overview is helpful, keep in mind that these styles only imitate certain aspects of the artist's work (color, medium, location, etc.). They are limited by the rather superficial knowledge of SD, but can probably give you a good base for your own creations.</p>
<div id="allthestyles"></div>
<div id="notavail"></div>
</section>
<section id="info">
<h3>Image Metadata</h3>
<p>This will check an image for embedded Stable Diffusion data.</p>
<div id="metadataboxes">
<div id="drop-area">
<span id="clearimage">×</span>
<form id="my-form">
<p>Drop Image Here</p>
<input type="file" id="fileElem" accept="image/*" onchange="handleFiles(this.files)">
</form>
<div id="gallery"></div>
</div>
<div id="allMetaData"></div>
</div>
</section>
<section id="notes">
<h3>Prompt Examples - Art Media</h3>
<h4>Photo</h4>
<div class="examplegallery">
<figure>
<a href="./img/types/00-photo.webp" target="_blank"><img class="lazy" data-src="./img/types/00-photo.webp"></a>
<figcaption class="copyme">Photo, DSLR</figcaption>
</figure>
<figure>
<a href="./img/types/01-analog-photo.webp" target="_blank"><img class="lazy" data-src="./img/types/01-analog-photo.webp"></a>
<figcaption class="copyme">Analog Photo</figcaption>
</figure>
<figure>
<a href="./img/types/15-lomography.webp" target="_blank"><img class="lazy" data-src="./img/types/15-lomography.webp"></a>
<figcaption class="copyme">Lomography Photo</figcaption>
</figure>
<figure>
<a href="./img/types/17-pinhole.webp" target="_blank"><img class="lazy" data-src="./img/types/17-pinhole.webp"></a>
<figcaption class="copyme">Pinhole Photo</figcaption>
</figure>
<figure>
<a href="./img/types/31-bw-photo.webp" target="_blank"><img class="lazy" data-src="./img/types/31-bw-photo.webp"></a>
<figcaption class="copyme">BW Photo</figcaption>
</figure>
<figure>
<a href="./img/types/02-wet-plate-photo.webp" target="_blank"><img class="lazy" data-src="./img/types/02-wet-plate-photo.webp"></a>
<figcaption class="copyme">Wet-Plate Photo</figcaption>
</figure>
<figure>
<a href="./img/types/14-daguerreotype.webp" target="_blank"><img class="lazy" data-src="./img/types/14-daguerreotype.webp"></a>
<figcaption class="copyme">Daguerreotype</figcaption>
</figure>
<figure>
<a href="./img/types/43-cyanotype.webp" target="_blank"><img class="lazy" data-src="./img/types/43-cyanotype.webp"></a>
<figcaption class="copyme">Cyanotype</figcaption>
</figure>
<figure>
<a href="./img/types/44-anthotype-photo.webp" target="_blank"><img class="lazy" data-src="./img/types/44-anthotype-photo.webp"></a>
<figcaption class="copyme">Anthotype Photo</figcaption>
</figure>
</div>
<h4>Drawing, Painting, Print</h4>
<div class="examplegallery">
<figure>
<a href="./img/types/03-pencil-drawing.webp" target="_blank"><img class="lazy" data-src="./img/types/03-pencil-drawing.webp"></a>
<figcaption class="copyme">Pencil Drawing</figcaption>
</figure>
<figure>
<a href="./img/types/04-pen-and-ink-drawing.webp" target="_blank"><img class="lazy" data-src="./img/types/04-pen-and-ink-drawing.webp"></a>
<figcaption class="copyme">Pen and Ink Drawing</figcaption>
</figure>
<figure>
<a href="./img/types/13-ink-drawing.webp" target="_blank"><img class="lazy" data-src="./img/types/13-ink-drawing.webp"></a>
<figcaption class="copyme">Ink Drawing</figcaption>
</figure>
<figure>
<a href="./img/types/06-watercolor-painting.webp" target="_blank"><img class="lazy" data-src="./img/types/06-watercolor-painting.webp"></a>
<figcaption class="copyme">Watercolor Painting</figcaption>
</figure>
<figure>
<a href="./img/types/07-pen-and-watercolor-painting.webp" target="_blank"><img class="lazy" data-src="./img/types/07-pen-and-watercolor-painting.webp"></a>
<figcaption class="copyme">Pen and Watercolor Painting</figcaption>
</figure>
<figure>
<a href="./img/types/08-oil-painting.webp" target="_blank"><img class="lazy" data-src="./img/types/08-oil-painting.webp"></a>
<figcaption class="copyme">Oil Painting</figcaption>
</figure>
<figure>
<a href="./img/types/09-acrylic-painting.webp" target="_blank"><img class="lazy" data-src="./img/types/09-acrylic-painting.webp"></a>
<figcaption class="copyme">Acrylic Painting</figcaption>
</figure>
<figure>
<a href="./img/types/10-rough-charcoal-sketch.webp" target="_blank"><img class="lazy" data-src="./img/types/10-rough-charcoal-sketch.webp"></a>
<figcaption class="copyme">Rough Charcoal Sketch</figcaption>
</figure>
<figure>
<a href="./img/types/20-crayon-drawing.webp" target="_blank"><img class="lazy" data-src="./img/types/20-crayon-drawing.webp"></a>
<figcaption class="copyme">Crayon Drawing</figcaption>
</figure>
<figure>
<a href="./img/types/05-engraving-illustration.webp" target="_blank"><img class="lazy" data-src="./img/types/05-engraving-illustration.webp"></a>
<figcaption class="copyme">Engraving Illustration</figcaption>
</figure>
<figure>
<a href="./img/types/24-mezzotint-print.webp" target="_blank"><img class="lazy" data-src="./img/types/24-mezzotint-print.webp"></a>
<figcaption class="copyme">Mezzotint</figcaption>
</figure>
<figure>
<a href="./img/types/26-risograph-print.webp" target="_blank"><img class="lazy" data-src="./img/types/26-risograph-print.webp"></a>
<figcaption class="copyme">Risograph Print</figcaption>
</figure>
<figure>
<a href="./img/types/25-linocut-print.webp" target="_blank"><img class="lazy" data-src="./img/types/25-linocut-print.webp"></a>
<figcaption class="copyme">Linocut</figcaption>
</figure>
<figure>
<a href="./img/types/27-colored-linocut.webp" target="_blank"><img class="lazy" data-src="./img/types/27-colored-linocut.webp"></a>
<figcaption class="copyme">Colored Linocut</figcaption>
</figure>
</div>
<h4>Methods, Looks</h4>
<div class="examplegallery">
<figure>
<a href="./img/types/46-impasto-painting.webp" target="_blank"><img class="lazy" data-src="./img/types/46-impasto-painting.webp"></a>
<figcaption class="copyme">Impasto Painting</figcaption>
</figure>
<figure>
<a href="./img/types/40-palette-knife-oil-painting.webp" target="_blank"><img class="lazy" data-src="./img/types/40-palette-knife-oil-painting.webp"></a>
<figcaption class="copyme">Palette Knife Oil Painting</figcaption>
</figure>
<figure>
<a href="./img/types/45-chiaroscuro-painting.webp" target="_blank"><img class="lazy" data-src="./img/types/45-chiaroscuro-painting.webp"></a>
<figcaption class="copyme">Chiaroscuro Painting</figcaption>
</figure>
<figure>
<a href="./img/types/41-iridescent-painting.webp" target="_blank"><img class="lazy" data-src="./img/types/41-iridescent-painting.webp"></a>
<figcaption class="copyme">Iridescent Painting</figcaption>
</figure>
<figure>
<a href="./img/types/42-anaglyph-painting.webp" target="_blank"><img class="lazy" data-src="./img/types/42-anaglyph-painting.webp"></a>
<figcaption class="copyme">Anaglyph Painting</figcaption>
</figure>
</div>
<h4>Digital, Other</h4>
<div class="examplegallery">
<figure>
<a href="./img/types/16-comic-character.webp" target="_blank"><img class="lazy" data-src="./img/types/16-comic-character.webp"></a>
<figcaption class="copyme">Comic Character</figcaption>
</figure>
<figure>
<a href="./img/types/19-pixel-art.webp" target="_blank"><img class="lazy" data-src="./img/types/19-pixel-art.webp"></a>
<figcaption class="copyme">Pixel Art</figcaption>
</figure>
<figure>
<a href="./img/types/22-vector-graphic.webp" target="_blank"><img class="lazy" data-src="./img/types/22-vector-graphic.webp"></a>
<figcaption class="copyme">Vector Graphic</figcaption>
</figure>
<figure>
<a href="./img/types/11-3d-render.webp" target="_blank"><img class="lazy" data-src="./img/types/11-3d-render.webp"></a>
<figcaption class="copyme">3D Render</figcaption>
</figure>
<figure>
<a href="./img/types/12-lowpoly-render.webp" target="_blank"><img class="lazy" data-src="./img/types/12-lowpoly-render.webp"></a>
<figcaption class="copyme">Low Poly Render</figcaption>
</figure>
<figure>
<a href="./img/types/18-modelling-clay.webp" target="_blank"><img class="lazy" data-src="./img/types/18-modelling-clay.webp"></a>
<figcaption class="copyme">Modelling Clay</figcaption>
</figure>
<figure>
<a href="./img/types/30-papercraft.webp" target="_blank"><img class="lazy" data-src="./img/types/30-papercraft.webp"></a>
<figcaption class="copyme">Papercraft</figcaption>
</figure>
<figure>
<a href="./img/types/21-embroidery-cross-stitch.webp" target="_blank"><img class="lazy" data-src="./img/types/21-embroidery-cross-stitch.webp"></a>
<figcaption class="copyme">Embroidery Cross Stitch</figcaption>
</figure>
<figure>
<a href="./img/types/28-bas-relief-wood-carving.webp" target="_blank"><img class="lazy" data-src="./img/types/28-bas-relief-wood-carving.webp"></a>
<figcaption class="copyme">Bas-Relief Wood Carving</figcaption>
</figure>
<figure>
<a href="./img/types/29-marble-bust.webp" target="_blank"><img class="lazy" data-src="./img/types/29-marble-bust.webp"></a>
<figcaption class="copyme">Marble Bust</figcaption>
</figure>
</div>
<h3>Image Dimensions</h3>
<p>Stable Diffusion was trained with base dimensions of 512 pixels (SD 1.5) and 768 pixels (SD 2/2.1).<br>While it's not necessary to stick to multiples of 128, it's a good place to start.</p>
<div class="numberline"><span>128</span><span>256</span><span>384</span><span class="highlight">512</span><span>640</span><span class="highlight">768</span><span>896</span><span>1024</span></div>
<p><strong>Some of the common ratios in SD dimensions:</strong></p>
<table id="dimensions">
<tr>
<td>Square</td>
<td>1:1</td>
<td id="ir1b1">512 × 512</td>
</tr>
<tr>
<td>Photo</td>
<td>2:3</td>
<td id="ir2b3">512 × 768</td>
</tr>
<tr>
<td>Photo</td>
<td>3:4</td>
<td id="ir3b4">512 × 683</td>
</tr>
<tr>
<td>Social Media</td>
<td>4:5</td>
<td id="ir4b5">512 × 640</td>
</tr>
<tr>
<td>Standard Monitor</td>
<td>16:9</td>
<td id="ir16b9">910 × 512</td>
</tr>
<tr>
<td>Monitor</td>
<td>16:10</td>
<td id="ir16b10">819 × 512</td>
</tr>
<tr>
<td>UltraWide Monitor</td>
<td>21:9</td>
<td id="ir21b9">1195 × 512</td>
</tr>
<tr>
<td></td>
<td class="nobgr"></td>
<td></td>
</tr>
<tr>
<td><label for="ratiobox">Base size</label></td>
<td class="nobgr"><input type="search" id="ratiobox" placeholder="Base Size" value="512"></td>
<td></td>
</tr>
</table>
<h3>Art History - Some Pointers</h3>
<ul id="arthistory">
<li>
<h4>Renaissance (14<sup>th</sup>-16<sup>th</sup> Centuries)</h4>
<ul>
<li>Famous Artists: <a href="./index.html#Da-Vinci-Leonardo">Leonardo da Vinci</a>, Michelangelo Buonarroti, <a href="./index.html#Raphael-Raffaello-Sanzio-da-Urbino">Raffaello Sanzio da Urbino</a>, <a href="./index.html#Botticelli-Sandro">Sandro Botticelli</a></li>
<li>Medium: Oil on wood or canvas</li>
</ul>
</li>
<li>
<h4>Mannerism (16<sup>th</sup> Century)</h4>
<ul>
<li>Famous Artists: Michelangelo Merisi da Caravaggio, <a href="./index.html#El-Greco-Dominikos-Theotokopoulos">El Greco</a>, Benvenuto Cellini, <a href="./index.html#Pontormo-Jacopo-da">Jacopo da Pontormo</a>, <a href="./index.html#Parmigianino">Parmigianino</a>, Bronzino</li>
<li>Medium: Oil on canvas, sculpture, and architecture</li>
</ul>
</li>
<li>
<h4>Baroque (17<sup>th</sup> Century)</h4>
<ul>
<li>Famous Artists: Michelangelo Merisi da Caravaggio, <a href="./index.html#Bernini-Gian-Lorenzo">Gian Lorenzo Bernini</a>, <a href="./index.html#Rembrandt-van-Rijn">Rembrandt van Rijn</a>, <a href="./index.html#Rubens-Peter-Paul">Peter Paul Rubens</a></li>
<li>Medium: Oil on canvas</li>
</ul>
</li>
<li>
<h4>Rococo (18<sup>th</sup> Century)</h4>
<ul>
<li>Famous Artists: <a href="./index.html#Watteau-Jean-Antoine">Jean-Antoine Watteau</a>, <a href="./index.html#Boucher-Francois">François Boucher</a>, <a href="./index.html#Fragonard-Jean-Honore">Jean-Honoré Fragonard</a></li>
<li>Medium: Oil on canvas</li>
</ul>
</li>
<li>
<h4>Neoclassicism (18<sup>th</sup>-19<sup>th</sup> Centuries)</h4>
<ul>
<li>Famous Artists: <a href="./index.html#David-Jacques-Louis">Jacques-Louis David</a>, <a href="./index.html#Ingres-Jean-Auguste-Dominique">Jean-Auguste-Dominique Ingres</a>, Antonio Canova</li>
<li>Medium: Oil on canvas</li>
</ul>
</li>
<li>
<h4>Romanticism (late 18<sup>th</sup>-19<sup>th</sup> Centuries)</h4>
<ul>
<li>Famous Artists: <a href="./index.html#Turner-William">Joseph Mallord William Turner</a>, Francisco de Goya y Lucientes, Eugène Delacroix, <a href="./index.html#Friedrich-Caspar-David">Caspar David Friedrich</a></li>
<li>Medium: Oil on canvas</li>
</ul>
</li>
<li>
<h4>Realism (mid-19<sup>th</sup> Century)</h4>
<ul>
<li>Famous Artists: Gustave Courbet, <a href="./index.html#Daumier-Honore">Honoré Daumier</a>, Jean-François Millet</li>
<li>Medium: Oil on canvas</li>
</ul>
</li>
<li>
<h4>Impressionism (late 19<sup>th</sup> Century)</h4>
<ul>
<li>Famous Artists: <a href="./index.html#Monet-Claude">Claude Monet</a>, <a href="./index.html#Renoir-Pierre-Auguste">Pierre-Auguste Renoir</a>, <a href="./index.html#Degas-Edgar">Edgar Degas</a>, Mary Cassatt</li>
<li>Medium: Oil on canvas</li>
</ul>
</li>
<li>
<h4>Symbolism (late 19<sup>th</sup> to early 20<sup>th</sup> Century)</h4>
<ul>
<li>Famous Artists: <a href="./index.html#Moreau-Gustave">Gustave Moreau</a>, <a href="./index.html#Munch-Edvard">Edvard Munch</a>, <a href="./index.html#Redon-Odilon">Odilon Redon</a>, <a href="./index.html#Chavannes-Pierre-Puvis-de">Pierre Puvis de Chavannes</a>, Fernand Khnopff, Franz von Stuck</li>
<li>Medium: Oil on canvas, drawing, and printmaking</li>
</ul>
</li>
<li>
<h4>Expressionism (early 20<sup>th</sup> Century)</h4>
<ul>
<li>Famous Artists: <a href="./index.html#Munch-Edvard">Edvard Munch</a>, <a href="./index.html#Kandinsky-Wassily">Wassily Kandinsky</a>, <a href="./index.html#Kirchner-Ernst-Ludwig">Ernst Ludwig Kirchner</a></li>
<li>Medium: Oil on canvas or woodcuts</li>
</ul>
</li>
<li>
<h4>Cubism (early 20<sup>th</sup> Century)</h4>
<ul>
<li>Famous Artists: Pablo Picasso, Georges Braque, Juan Gris</li>
<li>Medium: Oil on canvas or collage</li>
</ul>
</li>
<li>
<h4>Futurism (1909-1916)</h4>
<ul>
<li>Famous Artists: <a href="./index.html#Boccioni-Umberto">Umberto Boccioni</a>, Giacomo Balla, Gino Severini</li>
<li>Medium: Oil on canvas or mixed media</li>
</ul>
</li>
<li>
<h4>Dada (1916-1924)</h4>
<ul>
<li>Famous Artists: Marcel Duchamp, Man Ray, <a href="./index.html#Hoch-Hannah">Hannah Höch</a>, Jean Arp, <a href="./index.html#Picabia-Francis-Marie-Martinez">Francis Picabia</a>, <a href="./index.html#Schwitters-Kurt">Kurt Schwitters</a></li>
<li>Medium: Collage, assemblage, and performance</li>
</ul>
</li>
<li>
<h4>Bauhaus (1919-1933)</h4>
<ul>
<li>Famous Artists: Walter Gropius, Ludwig Mies van der Rohe, <a href="./index.html#Kandinsky-Wassily">Wassily Kandinsky</a>, <a href="./index.html#Klee-Paul">Paul Klee</a>, Josef Albers</li>
<li>Medium: Architecture, furniture, and graphic design</li>
</ul>
</li>
<li>
<h4>Surrealism (1920s-30s)</h4>
<ul>
<li>Famous Artists: Salvador Dalí, René Magritte, <a href="./index.html#Ernst-Maximilian-Maria">Max Ernst</a></li>
<li>Medium: Oil on canvas or mixed media</li>
</ul>
</li>
<li>
<h4>Abstract Expressionism (1940s-50s)</h4>
<ul>
<li>Famous Artists: <a href="./index.html#Pollock-Jackson">Jackson Pollock</a>, <a href="./index.html#Rothko-Mark">Mark Rothko</a>, <a href="./index.html#Kooning-Willem-de">Willem de Kooning</a></li>
<li>Medium: Oil on canvas or mixed media</li>
</ul>
</li>
<li>
<h4>Pop Art (1950s-60s)</h4>
<ul>
<li>Famous Artists: <a href="./index.html#Warhol-Andy">Andy Warhol</a>, <a href="./index.html#Lichtenstein-Roy">Roy Lichtenstein</a>, <a href="./index.html#Hamilton-Richard">Richard Hamilton</a></li>
<li>Medium: Acrylic or oil on canvas or mixed media</li>
</ul>
</li>
<li>
<h4>Minimalism (1960s-70s)</h4>
<ul>
<li>Famous Artists: Donald Judd, <a href="./index.html#Flavin-Dan">Dan Flavin</a>, Sol LeWitt</li>
<li>Medium: Acrylic or oil on canvas or mixed media</li>
</ul>
</li>
<li>
<h4>Postmodernism (1970s-90s)</h4>
<ul>
<li>Famous Artists: Cindy Sherman, <a href="./index.html#Koons-Jeff">Jeff Koons</a>, Barbara Kruger</li>
<li>Medium: A wide range of media, including painting, sculpture, installation, and performance art</li>
</ul>
</li>
</ul>
</section>
<section id="camera">
<h3>Camera Shot Size</h3>
<h4>What is a camera shot?</h4>
<p>A camera shot is composed of the series of frames that are shot uninterrupted from the moment the camera
starts
rolling until it stops. Camera shots are an essential aspect of filmmaking and video productions, because by
combining different types of shots, angles and camera movements, the filmmakers are able to emphasize
specific
emotions, ideas and movement for each scene.</p>
<h4>Extreme Long Shot (ELS) or Extreme Wide Shot (EWS)</h4>
<p>An extreme long shot (or extreme wide shot) make your subject appear small against their location. You can
use an
extreme long shot to make your subject feel distant or unfamiliar.</p>
<p>Take a look at this extreme wide shot from the action movie Mad Max: Fury Road:</p>
<img width="1600" src="img/camera/shot_size/EWS.webp">
<p>It can also make your subject feel overwhelmed by its location. Of all the various camera shots out there,
consider using the extreme long shot when you need to emphasize the location or isolation.</p>
<h4>Long Shot (LS) or Wide Shot (WS)</h4>
<p>The long shot (also known as a wide shot, abbreviated “WS”) is the same idea, but a bit closer. If your
subject
is a person then his or her whole body will be in view — but not filling the shot. Here's an example of the
wide
shot size from the movie The Martian:</p>
<img width="1600" src="img/camera/shot_size/WS.webp">
<p>In other words, there should be a good deal of space above and below your subject. Use a long shot (or wide
shot)
to keep your subject in plain view amidst grander surroundings. The wide shot also lets us see the beautiful
background imagery, as well as the onlookers which will make any big moment more cinematic. Of the many
camera
shots, a long shot gives us a better idea of the scene setting, and gives us a better idea of how the
character
fits into the area.</p>
<h4>Full Shot (FS)</h4>
<p>Now let's talk about camera shots that let your subject fill the frame while keeping emphasis on scenery.</p>
<img width="1600" src="img/camera/shot_size/FS_1.webp">
<p>This full shot from one of the best Quentin Tarantino movies Django Unchained is also a tracking shot —
meaning
there is camera movement featured throughout the shot. In this particular case, the camera slowly moves (or
tracks) towards Django. So, technically, this shot begins in a wide shot, moves to full shot (seen above),
and
eventually ends in a cowboy shot. Of all the different types of camera shots in film, full shots can be used
to
feature multiple characters in a single shot, like this full shot size example from Marvel's Guardians of
the
Galaxy:</p>
<img width="1600" src="img/camera/shot_size/FS_2.webp">
<h4>Medium Wide Shot (MWS)</h4>
<p>A medium long shot (aka medium long shot) frames the subject from roughly the knees up. It splits the
difference
between a full shot and a medium shot. Here's an example of the medium wide shot size from the movie The
Usual Suspects:</p>
<img width="1600" src="img/camera/shot_size/MWS.webp">
<p>You can always frame camera shots from any angle as well, so don't be afraid to think about medium long shots
when behind a character.</p>
<h4>Cowboy Shot (CS)</h4>
<p>A variation on this is the Cowboy Shot, which frames the subject from roughly mid-thighs up. It’s called a
“cowboy shot” because it is used in Westerns to frame a gunslinger’s gun or holster on his hip. Here's an
example of the cowboy shot size from the movie Wonder Woman:</p>
<img width="1600" src="img/camera/shot_size/CS_1.webp">
<p>Here is an example of a cowboy shot that's used in a film that has nothing to do with cowboys, and it's also
a three shot:</p>
<img width="1600" src="img/camera/shot_size/CS_2.webp">
<h4>Medium Shot (MS)</h4>
<p>Let's move onto camera shots that reveal your subject in more detail. The medium shot is one of the most
common
camera shots. It's similar to the cowboy shot above, but frames from roughly the waist up and through the
torso.
So it emphasizes more of your subject while keeping their surroundings visible. Here's an example of the
medium
shot size from the superhero movie X-Men: Days of the Future Past:</p>
<img width="1600" src="img/camera/shot_size/MS.webp">
<p>Medium shots may seem like the most standard camera shot around, but every shot size you choose will have an
effect on the viewer. A medium shot can often be used as a buffer shot for dialogue scenes that have an
important moment later that will be shown in a close-up shot. If you don't use all of the different types of
camera shots in film, how can you signal anything to your viewer without shot size contrast.</p>
<h4>Medium Close Up Shot (MCU)</h4>
<p>The medium close-up frames your subject from roughly the chest up. So it typically favors the face, but still
keeps the subject somewhat distant. Here's an example of the medium close-up shot size from one of the Coen
Brothers’ masterpieces No Country for Old Men:</p>
<img width="1600" src="img/camera/shot_size/MCU.webp">
<p>The medium close-up camera shot size keeps the characters eerily distant even during their face-to-face
conversation.</p>
<h4>Close Up (CU)</h4>
<p>You know it’s time for a close-up shot when you want to reveal a subject’s emotions and reactions. The
close-up
camera shot fills your frame with a part of your subject. If your subject is a person, it is often their
face.
Here's an example of the close-up shot size:</p>
<img width="1600" src="img/camera/shot_size/CU.webp">
<p>You know it’s time for a close-up shot when you want to reveal a subject’s emotions and reactions. The
close-up
camera shot fills your frame with a part of your subject. If your subject is a person, it is often their
face.
Here's an example of the close-up shot size:</p>
<h4>Extreme Close Up (ECU)</h4>
<p>An extreme close-up is the most you can fill a frame with your subject. It often shows eyes, mouth and gun
triggers. In extreme close-up shots, smaller objects get great detail and are the focal point. Use an ECU to
emphasize a specific feature of your subject:</p>
<img width="1600" src="img/camera/shot_size/ECU.webp">
<h4>Summary</h4>
<p>How you choose to frame your subject will have a specific impact. How close or far your subject is to your
camera
— your shot size — will underscore how the audience should feel about it (or them). Your subject will appear
smallest in a long shot (or wide shot). They will be larger in a medium shot and largest in a close-up shot.
</p>
<h3>Camera Framing</h3>
<h4>What is camera shot framing?</h4>
<p>Camera shot framing is the art and science of placing subjects in your shots. Camera shots are all about
composition. Rather than pointing the camera at the subject, you need to compose an image.</p>
<h4>Single Shot</h4>
<p>When your shot captures one subject it’s known as a single shot:</p>
<img width="1600" src="img/camera/framing/Single_Shot.webp">
<p>Single shots can be set and framed in any shot size you like, just as long as there is only one character
featured within the frame.</p>
<h4>Two Shot</h4>
<p>A two-shot is a camera shot with two characters featured in the frame:</p>
<img width="1600" src="img/camera/framing/Two_Shot.webp">
<p>Two shots are often really useful for allowing performances to play out in a single take, which can be
especially
useful for comedy.</p>
<h4>Three Shot</h4>
<p>A three-shot features three characters in the frame:</p>
<img width="1600" src="img/camera/framing/Three_Shot.webp">
<p>Three shots are really important in adventure films, or really any film that has a group of characters,
because
it is an enormous time drain to shoot 3 singles just to show every character, not to mention jarring.</p>
<h4>Over-The-Shoulder Shot (OTS)</h4>
<p>Another element of camera shots to consider is the perspective of the shot. An over-the-shoulder shot shows
your
subject from behind the shoulder of another character. Because it emulates perspective, it’s common in
conversation scenes.</p>
<img width="1600" src="img/camera/framing/OTS.webp">
<p>Over-the-shoulder shots can help to provide orientation, and connect the characters on an emotional level.
Here's
our breakdown of the Westworld scene and how OTS shots work so effortlessly.</p>
<h4>Over-The-Hip Shot (OTH)</h4>
<p>An over-the-hip shot is similar to over-the-shoulder in that the camera is placed with a character's hip in
the
foreground, and the focus subject in the plane of acceptable focus. Here's an example of an over-the-hip
shot
from the movie Minority Report:</p>
<img width="1600" src="img/camera/framing/OTH.webp">
<p>You'll gain a similar effect from an over-the-hip shot as you would an OTS, but if you have one character
standing, and the other sitting, kneeling, or any other configuration that places the subjects on "uneven
terrain" it will often suggest a power imbalance. This is the benefit of blocking and staging your actors
and
camera.</p>
<h4>Point of View Shot (POV)</h4>
<p>Now let's talk about choosing camera shots that show the point-of-view (or POV) of one of your characters. A
POV
shot is a camera shot that shows the viewer exactly what that character sees. This transports the audience
into
that character.</p>
<h3>Camera Focus</h3>
<h4>What is depth of field?</h4>
<p>Depth of field (DOF) is the term used to describe the size of the area in your image where objects appear
acceptably sharp. The area in question is known as the field, and the size (in z-space) of that area is the
depth of that field.</p>
<p>The center most point of the field is known as the point of focus. The imaginary two dimensional plane that
extends from that point is known as the plane of focus. And any part of your image that falls directly on
this
plane is officially in focus.</p>
<h4>Rack Focus vs. Focus Pull</h4>
<p>Manipulating focus is another way of communicating with your camera shots. The vast majority of films you
watch
will keep their subjects in focus 95% of the time, with the odd slip up here and there.</p>
<p>The first assistant cameraman (or “First AC”) will pull focus to make sure that the subject stays within the
acceptable focus range while they move to various depths within the frame.</p>
<p>A rack focus is an emphasized focus pull, where the acceptable focus range is intentionally shifted from one
subject to another. This is an aggressive use of focus as a story telling device:</p>
<p>Focus Pull = Passive vs. Rack Focus = Aggressive</p>
<h4>Shallow Focus Shot (Shallow DOF)</h4>
<p>In shallow focus shots, your subject is in crisp focus while the foreground and background scenery is out of
focus. This limits your depth of field to create emphasis on your subject.</p>
<img width="1600" src="img/camera/shot_focus/Shallow_DOF.webp">
<h4>Deep Focus Shot</h4>
<p>In a deep focus shot, everything in your frame is in focus. This is when you need your audience to feel the
scenery or particular scene elements.</p>
<img width="1600" src="img/camera/shot_focus/Deep_Focus_Shot.webp">
<h4>Tilt-Shift Shot</h4>
<p>A tilt-shift lens rotates perspective within the lens and emulates selective focus. It can make parts of your
image appear in sharp focus while others are out of focus.</p>
<img width="1600" src="img/camera/shot_focus/Tilt_Shift_Shot_1.webp">
<p>Here's another tilt-shift shot example from The Assassination of Jesse James by the Coward Robert Ford:</p>
<img width="1600" src="img/camera/shot_focus/Tilt_Shift_Shot_2.webp">
<h4>Soft focus</h4>
<p>Whereas deep focus keeps everything in focus, and shallow focus keeps something in focus, soft focus shots
keep
nothing in 100% sharp focus. This is caused by either a flaw in the lens itself or through special filters.
</p>
<p>Soft focus is perfect when filming a dream or memory — the glow around everything is both wistful and
slightly
unreal.</p>
<h3>Camera Angles</h3>
<h4>What is camera shot angle?</h4>
<p>The camera shot angle is used to specify the location where the camera is placed to take a shot. The position
of
the camera in relation to the subjects can affect the way the viewer perceives the scene. A scene may be
shot
simultaneously from multiple camera angles to amplify the cinematic effect and the emotions.</p>
<h4>Eye Level Shot</h4>
<p>First, consider the most common height: the eye level shot. When your subject is at eye-level they’re in a
neutral perspective (not superior or inferior). This mimics how we see people in real life -- our eye line
connecting with theirs.</p>
<img width="1600" src="img/camera/angles/Eye_Level_Shot.webp">
<h4>Low Angle Shot</h4>
<p>A low angle shot frames the subject from a low camera height looking up at them. These camera shots most
often
emphasize power dynamics between characters.</p>
<img width="1600" src="img/camera/angles/Low_Angle_Shot.webp">
<h4>High Angle Shot</h4>
<p>In a high angle shot, the camera points down at your subject. It usually creates a feeling of inferiority, or
“looking down” on your subject. Here's an example of a high angle shot from the movie
The
Princess Bride:</p>
<img width="1600" src="img/camera/angles/High_Angle_Shot.webp">
<h4>Hip Level Shot</h4>
<p>A hip level shot is when your camera is roughly waist-high.</p>
<img width="1600" src="img/camera/angles/Hip_Level_Shot.webp">
<h4>Knee Level Shot</h4>
<p>This is when your camera height is about as low as your subject’s knees. They can emphasize a character’s
superiority, if paired with a low angle.</p>
<img width="1600" src="img/camera/angles/Knee_Level_Shot_1.webp">
<p>Here's another knee level shot example:</p>
<img width="1600" src="img/camera/angles/Knee_Level_shot_2.webp">
<h4>Ground Level Shot</h4>
<p>A ground level shot is when your camera’s height is on ground level with your subject. Needless to say, this
shot
captures what’s going on the ground your subject stands on.</p>
<img width="1600" src="img/camera/angles/Ground_Level_Shot_1.webp">
<p>Here's another ground level shot example from one of many Stanley Kubrick's marvelous movies, Full Metal
Jacket:
</p>
<img width="1600" src="img/camera/angles/Ground_Level_Shot_2.webp">
<h4>Shoulder Level Shot</h4>
<p>This is when your camera is roughly as high as your subject’s shoulders. Shoulder level shots are actually
much
more standard than an eye level shot, which can make your actor seem shorter than reality:</p>
<img width="1600" src="img/camera/angles/Shoulder_Level_Shot.webp">
<h4>Dutch Angle or Dutch Tilt Shot</h4>
<p>For a dutch angle (dutch tilt), the camera is slanted to one side. With the horizon lines tilted in this way,
you
can create a sense of disorientation. This video breaks down a key moment in Mission: Impossible when Ethan
first realizes that he's being set up.</p>
<h4>Bird's Eye View Shot or Overhead Shot</h4>
<p>An overhead shot is from way up high, looking down on your subject and a good amount of the scenery
surrounding
him or her. This can create a great sense of scale and movement.</p>
<p>Here's an overhead shot example:</p>
<img width="1600" src="img/camera/angles/Overhead_Shot.webp">
<h4>Aerial Shot</h4>
<p>Whether taken from a helicopter or drone, this is a shot from way up high. It establishes a large expanse of
scenery. The opening shots of the movie Blade Runner use them to establish futuristic
cityscapes.</p>
<img width="1600" src="img/camera/angles/Aerial_Shot.webp">
<h3>All Content is taken from this article: <a href="https://www.studiobinder.com/blog/ultimate-guide-to-camera-shots/" target="_blank">Ultimate guide to camera shots</a></h3>
</section>
<section id="about">
<h3>Data and Documentation</h3>
<p>Use <a href="./only-data.html" target="_blank">only-data.html</a> for a version <strong>without images</strong>.<br>That page also includes a list of all artists that were checked for availability.</p>
<p class="highlightp">Information on how the images were generated and how to check if an artist style is available can be found on the <a href="./documentation/index.html" target="_blank">documentation page</a>.</p>
<p>The JSON data files had to be changed to .js and wrapped with a variable to allow offline use (CORS).</p>
<h3>Credits</h3>
<p>A BIG THANK YOU TO</p>
<p>Code from Himuro-Majika's <a href="https://github.com/himuro-majika/Stable_Diffusion_image_metadata_viewer">Stable Diffusion image metadata viewer</a> browser extension</p>
<p>Reading metadata with <a href="https://github.com/mattiasw/ExifReader">ExifReader</a>, extra search results supported by <a href="https://github.com/aceakash/string-similarity">String-Similarity</a></p>
<p><a href="https://github.com/verlok/vanilla-lazyload">Lazyload Script</a> from Verlok, webfont is Google's <a href="https://fonts.google.com/specimen/Roboto">Roboto</a>, SVG icons from <a href="https://github.com/ionic-team/ionicons">Ionicons</a></p>
<p>Automatic1111 for the <a href="https://github.com/AUTOMATIC1111/stable-diffusion-webui">Stable Diffusion Web UI</a></p>
<p>Stable Diffusion by <a href="https://ommer-lab.com/research/latent-diffusion-models/">LMU</a> and <a href="https://stability.ai/">stability.ai</a></p>
<h3>Useful Links</h3>
<p>Links that helped me understand the technical side of Stable Diffusion (no affiliation):</p>
<ul>
<li><a href="https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki">Automatic111 Wiki</a></li>
<li><a href="https://stable-diffusion-art.com/tutorials/">Stable-Diffusion-Art.com - Tutorials</a></li>
</ul>
<h3>Errors</h3>
<p>All information has been collected with the utmost care, however, mistakes happen. Location information is sometimes difficult when artists move very early in life, or the indication of the era, if the lifetime falls between two centuries.</p>
<h3>Settings</h3>
<h4>Allow Copying of Categories</h4>
<div>
<input type="checkbox" id="copycat" name="copycat">
<label for="copycat">Let me copy categories by clicking on them (automated reload of page)</label>
</div>
<h4>Liked Styles Backup</h4>
<p>In case something breaks, allows you to save a backup of your favorite styles.</p>
<p><strong>Clicking 'Import' will replace your liked styles</strong> with what is in this textfield.<br>Leave field empty to delete all likes.</p>
<textarea id="starsexport"></textarea><br>
<button id="importstyles">Import</button>
<dialog id="stylesDialog">
<form>
<p><strong>Warning!</strong><br>This will replace all currently liked styles.</p>
<div>
<button id="stylesDialogConfirm" value="default">Confirm</button>
<button value="cancel" formmethod="dialog">Cancel</button>
</div>
</form>
</dialog>
</section>
<footer>Created 2023 - Version 1.2.0 - <a href="https://github.com/SupaGruen/StableDiffusion-CheatSheet">GitHub</a></footer>
<span id="snackbar">Copied to Clipboard</span>
</body>
</html>