-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex-glitch-art.html
186 lines (172 loc) · 7.09 KB
/
index-glitch-art.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./js/processbook.js"></script>
<link rel="stylesheet" href="style-glitch-art.css" type="text/css"></link>
<link rel="icon" type="image/x-icon" href="./assets/eye-4.png">
<title>GLITCH ART</title>
</head>
<body>
<div class="ve-page">
<div class="ve-home-button-container">
<div class="ve-home-button">
<a href="index.html" class="ve-home-button">HOME</a>
</div>
</div>
<div class="ve-back-container">
<div class="ve-back">
<a href="index-2.html" class="ve-back">BACK</a>
</div>
</div>
<div class="ve-exploration-container">
<div class="ve-exploration">
EXPLORATION
</div>
</div>
<div class="ve-glitch-art-container">
<div class="ve-glitch-art">
GLITCH ART
</div>
</div>
<div class="ve-text-1-container">
<div class="ve-text-1">
“Glitches are headaches—technology coming apart at the seams.
<br>
<br>
The term, which may derive from Yiddish words conveying slippage,
was fittingly popularized by NASA engineers and astronauts.
Into Orbit, a 1962 account of Project Mercury, provides one of its earliest usages,
courtesy of John Glenn, the first American to circumnavigate the globe outside its atmosphere.
<br>
<br>
“Another term we adopted to describe some of our problems was ‘glitch,’” he explained.
“Literally, a glitch is a spike or change in voltage in an electrical current,”
an occurrence with extreme, unpredictable, and potentially fatal results.
In other words, it’s where the art happens.”
<br>
<br>
Glitch art: an unintentional distortion made by a digital crash has led to an entire,
mind-bending sub-genre of graphic design.
<br>
Glitch art is a visual style characterized by using digital or analog errors for aesthetic purposes,
whether that be intentional (that is, “faking glitch” and obtaining a similar aesthetic through design)
or by accident (a true manifestation inside of the system without human intervention).
<br>
Terrence Morash, creative director of Shutterstock explains:
“There’s a controlled imperfection to [glitch art], and it’s a reminder of the technical elements of design.
It visualizes technology as having a combination of textures and patterns but without perfection.”
<br>
<br>
“Nick Briz, a Chicago-based New Media artist, educator, and organizer,
expanded on Glenn’s definition of “glitch” in an email to the Kernel:
“an unexpected moment in a system that calls attention to that system,
and perhaps even leads us to notice aspects of that system that might otherwise go unnoticed.”
<br>
“Glitch art, then,” he wrote, “is anytime an artist intentionally leverages that moment,
by either recontextualizing or provoking glitches.”
<br>
<br>
It draws back the curtain on our sleekest devices and virtual constructs
to reveal raw pixels and code, a surreal landscape of unformed possibilities.”
</div>
</div>
<div class="ve-text-2-container">
<div class="ve-text-2">
History:
<br>
<br>
The term “glitch” itself originates with engineers and astronauts to explain
faults within the technology they were working with: spaceship and rocket hardware.
But the visual aesthetic can be traced much further back, to the beginning of the
20th century through distorted forms in cubist paintings, abstract short films and
pixel-like rug designs akin to 8-bit video game landscapes.
<br>
<br>
<br>
<br>
<br>
Pixelation:
<br>
<br>
Computer images are made up of pixels, and when several of those pixels misfire,
you end up with a glitch. The effect of pixelation is most productive when attempting
to anonymize an aspect of your design, leaving the exterior and abstract views of the space within.
<br>
<br>
<br>
<br>
<br>
Light leaks:
<br>
<br>
By simulating the phenomenon where a gap in the body of a film camera allows
light to leak into the normally light-proof film chamber (thus exposing the film with extra light),
designers can create a burnout effect in their design. This brings a dynamic feature
to a design if you are creating points of interest through shadows or reflections.
<br>
<br>
<br>
<br>
<br>
Double exposure:
<br>
<br>
By layering multiple images on top of each other, designers can execute an ethereal,
ghost-in-the-machine effect. Choose combinations and placement accordingly,
and it’s important to be aware of use of color within this application so as not to
overwhelm the subjects of the image.
<br>
<br>
<br>
<br>
<br>
Noise and grain:
<br>
<br>
Designers can increase grainy artifacts, or noise, to recreate the appearance of an old
film or an analog broadcast. One of the most familiar examples of this glitch is the
grainy strip that appears on old VHS videos.
<br>
<br>
<br>
<br>
<br>
Color degradation:
<br>
<br>
Liquified and blurred use of chromatic color communicates a system failure.
Because color on its own is so visually demanding, pay attention to the other elements
of your design to make sure the final result isn’t too loud or busy to convey what you are trying to achieve.
<br>
<br>
<br>
<br>
<br>
Textures:
<br>
<br>
As with color usage, blurred and unpredictable textures as well as asymmetrical
geometries give off that feeling that a piece of tech was lost in translation,
an aesthetic flaw. These can work great as background images or as entrancing abstract
pieces at the foreground of a design.
<br>
<br>
<br>
<br>
<br>
Glitch lettering:
<br>
<br>
Choose typefaces that communicate malfunction—think corrupted VHS.
Uppercase letters with jagged or wavy lines and fuzzy effects around the lettering can also symbolize movement.
<br>
<br>
Alternatively, you can distort your own lettering by splicing it,
duplicating the letters to create a double exposed result, adding a soft neon shadow,
elongating or merging the letterforms.
</div>
</div>
</div>
</body>
</html>