-
Notifications
You must be signed in to change notification settings - Fork 2
/
chorplakate-2.html
executable file
·179 lines (142 loc) · 13.3 KB
/
chorplakate-2.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
<!DOCTYPE html>
<html lang="de" prefix="og: http://ogp.me/ns#">
<!--
Hallo Fremde:r,
schön, dass du dich umschaust! Falls du Fragen hast oder wissen
möchtest, wie bestimmte Sachen auf meiner Website funktionieren,
schreib doch einfach an postfach2b [ät] web.de oder sende einen
Post an @[email protected].
Weiterhin viele schöne Entdeckungen!
-->
<head>
<meta charset="UTF-8">
<title>Chorplakate und ihre Idee // @cz+</title>
<link href='bestand/style.css' rel='stylesheet'>
<link href="bestand/czSlab.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
<link href="https://charakterziffer.github.io/rss.xml" rel="alternate" type="application/rss+xml" title="@cz+ Blogartikel">
<link rel="icon" href="/bestand/favicon.png">
<link rel="apple-touch-icon" href="/bestand/touchicon.png">
<meta name="theme-color" content="#228811">
<meta name="color-scheme" content="light dark">
<meta name="description" content="Jeden Herbst gibt unser Kirchenchor sein Jahreskonzert. Dafür gestalte ich seit zehn Jahren die Plakate und Programmblätter. Vier Beispiele …">
<meta name="author" content="Gerhard Großmann, postfach2b [ät] web.de">
<meta name="fediverse:creator" content="[email protected]" />
<meta name="keywords" content="Gerhard Großmann, Regensburg, Hohenfels, charakterziffer, Blog, Twitter, Mastodon">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="referrer" content="strict-origin">
<style> /* QR-Code mit URL für Ausdrucke, siehe smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/ */
@media print { header:after {
content: url('https://chart.googleapis.com/chart?cht=qr&chs=110x110&chl=https://charakterziffer.github.io/chorplakate-2.html&choe=UTF-8');
position: absolute; right: .5em; top:.2em; z-index:-1; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } </style>
<meta property="og:image" content="https://charakterziffer.github.io/bestand/cz200x200.jpg">
</head>
<body>
<header>
<a title="Zur Startseite" href="https://charakterziffer.github.io/"><img src="https://charakterziffer.github.io/bestand/favicon.png" width="59.8" height="59.8" alt="">@charak<br>terziffer</a>
<div>
<form id="suchform" method="GET" action="https://duckduckgo.com/" onsubmit="javascript:document.getElementById('q').value = document.getElementById('keyword').value + ' site:charakterziffer.github.io'">
<input type="text" id="keyword" placeholder="Suche mit DuckDuckGo" aria-label="Seite extern durchsuchen mit DuckDuckGo">
<input type="hidden" id="q" name="q">
<input type="hidden" name="kl" value="de-de">
<input type="hidden" name="kj" value="281">
<input type="hidden" name="kx" value="666">
<input type="hidden" name="k9" value="281">
<input type="hidden" name="kaa" value="839">
<input type="hidden" name="ka" value="Source Sans Pro">
<input type="submit" value="🔍" aria-label="Suchen">
</form>
<nav class="no-hyphens no-print"><ul>
<li><a href="/archiv.html">Archiv</a></li>
<li><a href="/extra/index.html">Extra</a></li>
<li><a href="/rss.xml">RSS</a></li>
<li><a href="/index.html#impressum">Impressum</a></li>
</ul></nav>
</div>
</header>
<main>
<article>
<time datetime="2020-10-18">So, 18. Okt. 2020</time>
<h1>Chorplakate und ihre Idee</h1>
<p>Sofern uns zu hohe Coronazahlen keinen Strich durch die Rechnung machen, werden wir kommenden Sonntag (25.10.2020) mit dem Chor St. Johannes in der Regensburger Dreieinigkeitskirche singen. Wie schon in den Jahren zuvor, habe ich auch für dieses Konzert das Plakat und Programmblatt gestaltet.</p>
<p>Wie in meinem ersten Artikel über <a href="chorplakate.html">frühere Chorplakate</a> möchte ich auch hier ein bisschen von den Ideen erzählen, die hinter vier verschiedenen Plakaten stecken. Die Vorschaubilder sind jeweils mit einer größeren Abbildung verlinkt. Mehr zu unserem Chor steht auf der <a href="https://www.gesang-hanzlick.de/aufgabenbereiche/chorleiterin/chor-st-johannes/">Website von Angelika Hanzlick</a>, unserer Chorleiterin.</p>
<h2 id="2020-geistliche-abendmusik">2020: „Geistliche Abendmusik“</h2>
<p>Beim Motto dieses Jahres wollte mir einfach keine Bildidee einfallen. Eine Art Abendstimmung hatte ich bereits 2015 umgesetzt, das wollte ich nicht wiederholen. Also bin ich eher von der Musik ausgegangen (Stücke aus dem Barock von Buxtehude und Händel), und habe danach recherchiert.</p>
<style>
<!--
[class^="plakat"] { position: relative; width: 98.5%; height: 0;
margin: 1.65em 0 1.45em; padding-bottom: 35.46%;
border: 0; background-size: 100% auto;
background-image: url('material/bis2020/chor-vorschau2.jpg'); }
[class^="plakat"] a { position:absolute; top:0; bottom:0; left:0; right:0;
display:flex; justify-content:center; align-items:center; opacity:0; }
.plakat5 { background-position: 0 0; }
.plakat6 { background-position: 0 33.33%; }
.plakat7 { background-position: 0 66.67%; }
.plakat8 { background-position: 0 100%; }
@media screen and (prefers-color-scheme: dark) {
[class^="plakat"] { filter:brightness(.8); } }
-->
</style>
<div class="plakat5" title="Ausschnitte aus dem Chorplakat und -programm von 2020"><a href="material/bis2020/chor-2020.jpg">größere Abbildung</a></div>
<p>Meine Suche und auch die Chorleiterin brachten mich auf florale Motive, die damals übertrieben verschlungen eingesetzt wurden – in der Architektur aber auch auf Papier. Die Schrift des Plakats stand sehr schnell fest. <em>Caslon</em> ist eine typische Barock-Antiqua und hat eine schöne Kursive. Im Plakat verwende ich die <a href="https://www.fontsquirrel.com/fonts/libre-caslon">Libre Caslon</a>.</p>
<h2 id="2019-laudate">2019: „Laudate“</h2>
<p>Es war das zweite Jahr, seitdem der neue Drucker im Pfarramt auch farbige Plakate in größerer Stückzahl drucken konnte. Für das Plakat wollte ich das Thema <em>Laudate</em> so groß wie möglich drucken (quasi ein sehr großes Gotteslob) und den warmen Klang von mehrstimmigen Gesang bildlich umsetzen. So bin ich bei dem orange-violetten Verlauf gelandet – zugegeben, eine etwas trendige Kombination, die sich zum Beispiel auch im <a href="https://www.facebook.com/brand/resources/instagram/instagram-brand/">Logo von Instagram</a> findet.</p>
<div class="plakat6" title="Ausschnitte aus Plakat und Programm von 2014"><a href="material/bis2020/chor-2019.jpg">größere Abbildung</a></div>
<p>Beim Gestalten von Plakaten gefällt mir besonders, dass die Informationen darauf wie in verschiedenen Schichten angeordnet sind. Je nach Abstand fallen verschiedene Dinge ins Auge. Aus fünf Metern Entfernung sieht man hier erst mal die Farbfläche, nimmt weiße Unterbrechungen wahr, die man schließlich als Buchstaben zusammensetzt. Etwas näher dran sollte dann das Was und Wann ins Auge fallen (Chorkonzert am 10. November), die übrigen Infos liest man erst mit größerem Interesse. So steckt in diesem Plakat auch eine kleine Dramaturgie mit bewusster Blickführung.</p>
<h2 id="2017-verleih-uns-frieden">2017: „Verleih uns Frieden“</h2>
<p>Natürlich fiel mir zu diesem Konzertmotto sofort die Taube als Friedenssymbol ein – nur war dieses Bildmotiv schon recht abgenutzt. Außerdem ist das Motto ja eine <em>Bitte</em> um Frieden, also um einen (noch) nicht erreichten Zustand. So sollte es auf dem Plakat ein wenig unfriedlicher zugehen – passend zu den aufgeführten Stücken, die vor allem in Kriegszeiten entstanden sind.</p>
<div class="plakat7" title="Ausschnitte aus den Chormaterialien von 2012"><a href="material/bis2020/chor-2017.jpg">größere Abbildung</a></div>
<p>So habe ich mich neben der neutralen <a href="https://www.fontsquirrel.com/fonts/muli">Muli</a> für die brutale und kantige <a href="https://www.joelcarrouche.com/fonts/troika">Troika</a> entschieden. Und hier kommt die Friedenstaube ins Spiel, nämlich in Form von weißen Federn, die die harten Kanten abmildern, zudecken und weichzeichnen. Übrigens war es nicht einfach, die Helligkeit der Federn richtig hinzubekommen: Sie sollten nicht schmutzgrau sondern weiß erscheinen, dennoch mussten sie erkennbar bleiben.</p>
<h2 id="2013-requiem---konzert-zum-ewigkeitssonntag">2013: „Requiem - Konzert zum Ewigkeitssonntag“</h2>
<p>Neben dem modernen und oft dissonanten <a href="https://www.youtube.com/watch?v=amBOUsL4-X0&list=PLgjtEB9lhhDA6J8CDJOSIOFkG8zG8EgOQ">Requiem von John Rutter</a> gab es in unserem Konzert auch ein Orgelstück mit leicht verstörenden Zuspielungen zu hören.</p>
<div class="plakat8" title="Chormaterialien von 2010"><a href="material/bis2020/chor-2013.jpg">größere Abbildung</a></div>
<p>Ich habe mich dem abstrakten Plakatmotiv wieder über den Klang des Requiems genähert: Verschiedene Licht- oder Schatten-Schichten, die sich wie in einem Spektrum übereinanderlegen. Von unten nach oben steigt man vom (toten) Dunkel ins (erlösende) Licht. Ich mag das sehr gern, einen bestimmten musikalischen Klang in ein Bild umzusetzen. Natürlich ist das immer eine sehr subjektive Übertragung, aber Musik und Grafik sind ja schließlich auch recht subjektive Angelegenheiten.</p>
<p style="margin-bottom:2.25em;">---<br>
<i>Rubrik(en):</i> <a href="archiv.html?methodik">#methodik</a> <a href="archiv.html?typografie">#typografie</a> </p>
</article>
<div class="no-print">
<h2 id="kommentieren">Artikel kommentieren</h2>
<p>Ich lege Wert auf eine respektvolle Diskussion und überprüfe jeden Kommentar, bevor er hier erscheint. Beleidigende oder unsachliche Beiträge ignoriere ich mit großem Vergnügen. Alle Angaben sind freiwillig.</p>
<form name="kommentarformular" id="kommentarformular" method="post" action="https://www.onlex.de/_formmailer.php?username=charakterziffer" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" onsubmit="javascript:document.getElementById('aktuelles-datum').value = new Date().toLocaleString('de-DE')">
<input type="hidden" name="post_id" value="/chorplakate-2">
<input type="hidden" name="date" id="aktuelles-datum" value="">
<input type="hidden" name="nummer" value="1">
<div>
<label for="name">Name</label>
<div><input name=" name" id="name" type="text" size="25" spellcheck="false">
<i>(Pseudonym möglich)</i></div>
<!-- fügt in der Onlex-Mail eine Leerzeile davor ein -->
</div>
<div>
<label for="mail">E-Mail</label>
<div><input name="mail" id="mail" type="email" size="25" autocomplete="email" spellcheck="false" autocapitalize="off">
<i>(wird nicht veröffentlicht)</i></div>
</div>
<div>
<label for="link">Website</label>
<div><input name="link" id="link" type="url" size="25" spellcheck="false" onblur="javascript:if ( (this.value!='') && !(this.value.match(/^https?:\/\//g)) ) { this.value = 'http://' + this.value;}"></div>
<!-- Beim Verlassen des Feldes: Falls Webadresse nicht leer und nicht mit „http(s)://“ beginnt, dann ergänze „http://“. So bekommt der Nutzer wegen type="url" keine Fehlermeldung, auch wenn er das http:// vergisst. -->
</div>
<div>
<label for="comment">Kommentar</label><br>
<textarea name="comment" id="comment" rows="8" cols="50" required spellcheck="true"></textarea>
</div>
<input type="hidden" name=" --- Hinweis" value="Mehrzeilige Kommentare in 'Apostrophe' einschließen und um </р><р> ergänzen.">
<input name="onlex_password" id="onlex_password" type="hidden" value="5">
<div><input name="submit" id="submit" type="submit" value="Veröffentlichen"></div>
</form>
<p class="no-hyphens" style="font-size:0.9em;line-height:1.667em;">Formatierungen mit HTML sind möglich, z.<small> </small>B. <em><em>betont</em></em>, <strong><strong>hervor­gehoben</strong></strong> oder <code><code>Quelltext</code></code>. Außerdem Verlinkungen (<a href="http://verlinkte-website.de">Linktext</a>) und Bilder (<img src="http://pfad-zum.de/bild.jpg" alt="Bildbeschreibung">).</p>
</div> <!-- .no-print -->
<p style="width:48%; float:left; margin:3.1em 0 1.1em;" class="no-hyphens no-print"><a href="spinatsouffle.html">← Spinatsoufflé</a></p>
<p style="width:48%; float:right; text-align:right; margin:3.1em 0 1.1em;" class="no-hyphens no-print"><a href="kalender-2021.html">Bewährt seit zehn Jahren →</a></p>
<p style="clear:both;" class="no-print"></p>
</main>
<aside class="no-hyphens">
<p>Hallo, ich bin <a href="javascript:new%20Audio('bestand/aussprache.mp3').play()" class="anhoeren" title="Aussprache anhören">Gerhard Großmann</a> aus Hohen­fels<span class="no-print"> (siehe <a href="/index.html#impressum">Impres­sum/Daten­schutz</a>)</span>. Über Fragen, Kritik und Anmer­kungen freue ich mich sehr – z.<small> </small>B.<span class="no-print"> via <a href="https://typo.social/@charakterziffer" target="_blank" rel="noopener noreferrer">Masto­don</a> oder</span> per Mail an <em>postfach2b [ät] web.de</em>.</p>
<p class="no-print">Mein <a href="/rss.xml" class="icon-rss">RSS-Feed</a> informiert immer pünkt­lich über neue Artikel. Alle bis­herigen Ein­träge finden sich <a href="/archiv.html">im Archiv</a>.</p>
<p>Die Texte in diesem Blog stehen unter einer <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de" class="icon-ccbysa">Crea­tive-Commons-Lizenz 4.0 (Deutsch­land)</a> mit Namens­nennung und Weiter­gabe unter gleichen Bedin­gungen.</p>
</aside>
<script src="https://www.onlex.de/_counter.php?username=charakterziffer" defer></script>
</body>
</html>