forked from larryhynes/nojpeg
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
173 lines (140 loc) · 7.04 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
<!doctype html>
<html lang="EN">
<head>
<meta charset="utf-8">
<title>NoJPEG</title>
<meta name="description" content="NoJPEG.org – Why you don’t want to use JPEG for your logo...">
<meta name="author" content="Larry Hynes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="reveal/css/reveal.min.css">
<link rel="stylesheet" href="reveal/css/theme/nojpeg.css" id="theme">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'reveal/css/print/pdf.css' : 'reveal/css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="apple-mobile-web-app-title" content="NoJPEG">
<meta name="application-name" content="NoJPEG">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>NoJPEG</h1>
<h3>Why you don’t want to use JPEG for your logo.</h3>
<p>Or have you ever wondered why designers keep asking you for an EPS file?</p>
<p>You can use the → key to advance, or click on the little blue triangle down there.</p>
<p><a href="nojpegcz.html">Česky</a>, <a href="nojpegptpt.html">Português</a>, <a href="nojpegpt.html">Português Brasileiro</a>, <a href="nojpegit.html">Italiano</a>, <a href="nojpeges.html">Español</a>, <a href="nojpegfr.html">Francais</a>, <a href="nojpeggl.html">Galego</a>, <a href="nojpegca.html">Català</a>, <a href="nojpegnl.html">Nederlands</a>, <a href="nojpegru.html">Русский</a>, <a href="nojpegtr.html">Türkçe</a>.</p>
</section>
<section>
<h2>So we have a logo...</h2>
<img src="img/NoJPEG.jpg" width="400" height="267" alt="NoJPEG">
<p>And it’s a JPEG file.</p>
<p class="fragment">So it has a built-in white background.</p>
<p class="fragment">That’s not cool.</p>
</section>
<section>
<h2>We don’t want a white background</h2>
<img src="img/slide.jpg" width="400" height="267" alt="Slide">
<p>I mean, what if we want to use our logo on a coloured background?</p>
<p class="fragment">Yep, we’re stuck with this white shape behind it.</p>
</section>
<section>
<h2>What happens if we use an EPS file?</h2>
<img src="img/slide2.jpg" width="400" height="267" alt="Slide2">
<p>Ta-da! No white background.</p>
<p class="fragment">But wait—there’s more!</p>
</section>
<section>
<h2>What happens if we enlarge a JPEG?</h2>
<img src="img/pixeljpeg.jpg" width="400" height="267" alt="Pixellated JPEG">
<p>It gets all blurry and horrible!</p>
</section>
<section>
<h2>And if we enlarge an EPS file?</h2>
<img src="img/slide3.jpg" width="400" height="267" alt="Slide3">
<p>Ta-da! We can enlarge an EPS file <i>infinitely</i> and it will remain crisp and sharp.</p>
</section>
<section>
<h2>Another drawback to using JPEG</h2>
<img src="img/NoJPEG_compressed.jpg" alt="compressed JPEG">
<p>Because JPEG is a “lossy” compression format, you can lose quality in your artwork.</p>
</section>
<section>
<h2>“But I can’t read an EPS file!”</h2>
<p>It’s true, EPS files can be kind of a pro format. You might not be able to open it.</p>
<p>(But rest assured that every designer, printer, sign-maker and web developer can.)</p>
<p>So what do we do?</p>
</section>
<section>
<h2>Say hello to...</h2>
<img src="img/png.jpg" width="400" height="267" alt="PNG">
<p>PNG files. Like a JPEG, so you can open it, use it on your internal files, presentations, etc.</p>
<p class="fragment">And no white background – Yay!</p>
</section>
<section>
<h2>“So you’re saying I need two logo files?”</h2>
<p>Yes.</p>
<ol>
<li>An EPS file for printers, designers, sign-makers and other professionals</li>
<li>A PNG file for internal use, presentations, etc.</li>
</ol>
</section>
<section>
<h2>Don’t believe me?</h2>
<p>Let’s ask Twitter how they do it.</p>
<img src="img/twitter.png" alt="Twitter">
<p>EPS and PNG. (And those guys are clever.)</p>
</section>
<section>
<h2>It’s a bit more technical than this presentation pretends</h2>
<p>But don’t mind all that for now. Just make sure that you have a <i>vector</i> EPS file and a PNG file with a <i>transparent</i> background for your logo.</p>
<p>You’re good to go – have fun!</p>
</section>
<section>
<h2>Other options to consider...</h2>
<p>Both the SVG and PDF formats can be used to effectively manage your identity online and in print... ask your friendly local designer for details.</p>
<p>(That does <i>not</i> mean you can put a JPEG file in a Word document and save it as a PDF.)</p>
</section>
<section>
<h1>Credits</h1>
<p>Brought to you by <a href="http://larryhynes.com/about.html">Larry Hynes</a>.</p>
<p>Created with the only mighty <a href="http://lab.hakim.se/reveal-js/#/">Reveal.js</a>.</p>
<p>Inspired by <a href="http://no-www.org/">no-www.org</a>.</p>
<p>With thanks to <a href="https://twitter.com/joffley">@joffley</a>, <a href="https://twitter.com/bjango">@bjango</a>, <a href="https://twitter.com/jescalan">@jescalan</a>, <a href="https://twitter.com/arnauvp">@arnauvp</a> and Al Haigh for feedback and suggestions.</p>
<p>Why not get involved at <a href="https://github.com/larryhynes/nojpeg">GitHub</a>?</p>
</section>
</div>
</div>
<script src="reveal/lib/js/head.min.js"></script>
<script src="reveal/js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
history: true,
transition: 'convex',
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'reveal/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'reveal/plugin/zoom-js/zoom.js', async: true },
]
});
</script>
</body>
</html>