-
Notifications
You must be signed in to change notification settings - Fork 2
/
chorplakate.html
executable file
·180 lines (142 loc) · 13.1 KB
/
chorplakate.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
<!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 @charakterziffer@typo.social.
Weiterhin viele schöne Entdeckungen!
-->
<head>
<meta charset="UTF-8">
<title>Vier Plakate fürs Chorkonzert // @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="Für unseren Kirchenchor gestalte ich jedes Jahr im Herbst die Konzertplakate und Programmblätter. Hier stelle ich vier Beispiele vor.">
<meta name="author" content="Gerhard Großmann, postfach2b [ät] web.de">
<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.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="2016-10-04">Di, 4. Okt. 2016</time>
<h1>Vier Plakate fürs Chorkonzert</h1>
<p>Seit einigen Jahren gestalte ich für unseren Kirchenchor das Plakat und das Programmblatt des Jahreskonzertes im Herbst. Die Aufgabe macht mir recht viel Spaß, weil ich kaum Vorgaben habe und viele Dinge ausprobieren kann. Gut, einige Einschränkungen gibt es natürlich schon: Plakat und Programm dürfen nur schwarz-weiß sein, Text und Thema stehen fest und auch das Logo der Kirchengemeinde muss vorhanden sein.</p>
<p>Eigentlich gibt es von der Gemeinde her auch Schriftvorgaben – einst Comic Sans und Helvetica, jetzt <a href="https://catalog.monotype.com/family/monotype/century-gothic">Century Gothic</a>. Da meine Plakate aber in der Regel stark typografisch sind, setze ich mich darüber hinweg. Ich möchte nicht auf die Möglichkeit verzichten, schon durch die Schriftart einen Teil der Botschaft zu übermitteln.</p>
<p>Es folgen vier Beispiele (die Vorschaubilder sind mit größeren Abbildungen verlinkt). Mehr über unseren Chor erfährt man auf der <a href="https://www.gesang-hanzlick.de/aufgabenbereiche/chorleiterin/chor-st-johannes/">Website von Angelika Hanzlick</a>, der Chorleiterin.</p>
<h2 id="2016-stimmt-alle-mit-uns-ein">2016: „Stimmt alle mit uns ein“</h2>
<p>Für unser diesjähriges Konzert wollte ich mich zuerst an einer Einladungskarte mit Lückentext orientieren, wie sie typischerweise für Kindergeburtstage verwendet wird. Das war aber grafisch nicht besonders ansprechend und hat die <em>Einladung zum Mitsingen</em> auch nicht überzeugend vermittelt.</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/chor-vorschau.jpg'); }
[class^="plakat"] a { position:absolute; top:0; bottom:0; left:0; right:0;
display:flex; justify-content:center; align-items:center; opacity:0; }
.plakat1 { background-position: 0 100%; }
.plakat2 { background-position: 0 66.67%; }
.plakat3 { background-position: 0 33.33%; }
.plakat4 { background-position: 0 0; }
@media screen and (prefers-color-scheme: dark) {
[class^="plakat"] { filter:brightness(.8); } }
-->
</style>
<div class="plakat1" title="Ausschnitte aus dem Chorplakat und -programm von 2016"><a href="material/chor-2016.jpg">größere Abbildung</a></div>
<p>So habe ich dann (mit dem Wort <em>einstimmen</em> im Hinterkopf) die Stimmgabel meiner Chorleiterin fotografiert und als recht guten Blickfang mitten aufs Plakat gelegt. Als Schrift bot sich die <a href="https://github.com/clauseggers/Inknut-Antiqua">Inknut Antiqua</a> an, die mich mit ihren keilförmigen Strichenden an die eckigen Notenköpfe der gregorianischen Choralnotation erinnert. Um die Fließtexte weniger grob und besser lesbar zu setzen, habe ich dafür auf die <a href="https://www.paratype.com/public/">PT Serif</a> zurückgegriffen, die ebenfalls keilfömige Abschlüsse besitzt (aber deutlich feiner).</p>
<h2 id="2014-vom-werden-und-vergehen">2014: „Vom Werden und Vergehen“</h2>
<p>Das beste Symbol für Entstehung und Vergänglichkeit ist für mich der Kreis. Aber nicht der geometrisch gezirkelte Kreis, sondern einer mit kräftigeren Stellen, Ausfransungen und anderen Unregelmäßigkeiten (es läuft im Leben schließlich nicht immer alles rund).</p>
<div class="plakat2" title="Ausschnitte aus Plakat und Programm von 2014"><a href="material/chor-2014.jpg">größere Abbildung</a></div>
<p>Als Schrift habe ich mich für die <a href="https://www.fontsquirrel.com/fonts/noticia-text">Noticia Text</a> entschieden, deren Rundungen ebenfalls kleine Brechungen aufweisen.</p>
<h2 id="2012-klassik-trifft-moderne">2012: „Klassik trifft Moderne“</h2>
<p>In diesem Konzert trafen zwei ganz unterschiedliche Musikepochen aufeinander. Genauso kontrastreich war mein Plakat mit schwarzen und weißen Flächen. Damit sie nicht ruhig nebeneinander stehen, habe ich sie sich in einer dynamischen Diagonale begegnen lassen, was in der Textgestaltung stellenweise eine ziemliche Herausforderung bot.</p>
<div class="plakat3" title="Ausschnitte aus den Chormaterialien von 2012"><a href="material/chor-2012.jpg">größere Abbildung</a></div>
<p>Die gewählte Schrift <a href="https://www.fontfont.com/fonts/quadraat">FF Quadraat</a> basiert auf traditionellen Proportionen aus der Renaissance, hat in der Ausführung aber eher moderne Formen, passt also perfekt zum Thema und ist für alle typografischen Feinheiten gerüstet. Leider konnten die Materialien im Pfarramt nicht randlos gedruckt werden; ich hätte die schwarzen Flächen gerne bis zur Papiergrenze laufen lassen. Ersatzweise habe ich dann im dreiteiligen Programmblatt eine Rahmenlinie eingesetzt, um eine sichtbare Grenze um die Weißflächen zu ziehen.</p>
<h2 id="2010-nun-komm-der-heiden-heiland">2010: „Nun komm, der Heiden Heiland“</h2>
<p>Das Konzert vor sechs Jahren war erst spät im Dezember. Als Bildmotiv habe ich hier den Weihnachtsstern gewählt, der ja thematisch passend die Ankunft und Geburt Christi ankündigt.</p>
<div class="plakat4" title="Chormaterialien von 2010"><a href="material/chor-2010.jpg">größere Abbildung</a></div>
<p>Umgesetzt habe ich den Stern mit Wasserfarbe, dazu die handschriftartige <em>Franz Engel</em> (eine selbstentwickelte Schrift) – so soll die Gestaltung einen „volksnahen“, gemeindlichen Eindruck vermitteln. Nichts perfektes oder behördlich verordnetes, sondern etwas einfaches, handgemachtes – so wie Jesus in einer Futterkrippe zur Welt kam und nicht im sterilen Kreißsaal. Die dazu passende Textschrift ist <a href="http://linuxlibertine.org/">Linux Libertine</a>, auch mit echten Kapitälchen.</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">
<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="webfont-styles.html">← Verfettet und schräggestellt</a></p>
<p style="width:48%; float:right; text-align:right; margin:3.1em 0 1.1em;" class="no-hyphens no-print"><a href="kuerbissuppe.html">Rezept Kürbissuppe →</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>