Kategorien
Bilder & Vektorgrafiken bearbeiten Design Inspiration Photoshop Tutorials

Photoshop-Tutorial: So erschaffen Sie ein kreatives Science Fiction-Poster

Photoshop lässt Fantasien Wirklichkeit werden. Wir können unser kreatives „Kino im Kopf“ Pixel für Pixel umsetzen und ein Bild dessen schaffen, was sonst nur wir sehen. Heute wollen wir ein Science-Fiction-Poster gestalten, das noch nicht allzu viel von der Geschichte verrät. Themen gibt es unbegrenzt, genau wie gute Beispiele existierender Filmposter, an denen wir uns orientieren können. Ansonsten setzt nur die eigene Fantasie die Grenze und Ihre Fähigkeiten in Photoshop, die wir mit diesem Beitrag massiv erweitern.

Bald auch in Ihren Kinos: Earth 9

Diese Komposition zeigt ein Plakat mit einer Szene des Films im Weltraum, welches unsere Heldin vorstellt und die Geschichte andeutet. Der Titel ist zu sehen, sowie die typischen Filmcredits, mit den Schauspielern und Produzenten.

teaser-filmposter

01 Das Ausgangsmaterial

Für ein Science-Fiction-Poster braucht es schon ganz besonderes Bildmaterial. Das Model ist da noch das kleinste Problem. Schwieriger sind Aufnahmen der Erde und eines Raumschiffes. Natürlich könnte man diese komplett in Photoshop gestalten, doch geht es hier rein um die Zusammenstellung einer Filmposter-Komposition, so dass wir auf Stockmaterial zurück gegriffen haben.

sci-fi-filmposter1

Das hier eingesetzte Bildmaterial ist: Light Flare, Space ship, Tragic night sky, Earth at night und Girl in orange latex catsuit. Für schöne Lensflare-Effekte (die dürfen ja derzeit in keinem Film fehlen) haben wir einen guten Tipp: High Quality Optical Flares Stock von PSD Box.

sci-fi-filmposter2

02 Hintergrund gestalten

Im Hintergrund ist das Foto der Erde zu sehen, wobei der Lensflare-Effekt prominent zum Einsatz kommt. Dieser liegt auf einer eigenen Ebene vor, dessen Füllmethode auf Negativ multiplizieren umgestellt wurde. So wird der schwarze Hintergrund ausgeblendet und nur der Lichteffekt bleibt bestehen. Mit gleicher Methode wurden einige Wolken eingefügt.

sci-fi-filmposter3

03 Freistellen

Eine Option zum Freistellen ist das Zeichenstift-Werkzeug. Aktivieren Sie das Werkzeug und stellen Sie in der Optionsleiste Pfad (statt Form oder Pixel) ein. Etwas weiter rechts ist ein Zahnrad-Icon zu sehen, wo Sie Gummiband aktivieren, um den Pfad besser verfolgen zu können. Auch sollte Autom. hinzuf./löschen aktiv sein.

sci-fi-filmposter4

Mit dem Zoom-Werkzeug gehen Sie näher an das Bildmotiv heran und setzen einen ersten Punkt an der Kontur, dem zahlreiche weitere folgen. Sollten Sie einen Punkt falsch gesetzt haben, halten Sie die Strg-Taste gedrückt und positionieren diesen neu. Eine Kurve ziehen Sie mit gedrückter Maustaste und dem Ziehen der Maus auf.

Photoshop möchte nach einer Kurve eine weitere Kurve ziehen, was Sie mit einem Klick auf den zuletzt gesetzten Punkt bei gedrückter Alt-Taste verhindern. So können Sie danach leicht wieder gerade Linien ziehen. Wurde der Pfad geschlossen, so erzeugen Sie über das Tastenkürzel Strg+Eingabetaste eine Auswahl. Klicken Sie dann unten im Ebenenbedienfeld auf den Button Ebenenmaske hinzufügen. Das Bildelement wurde freigestellt.

sci-fi-filmposter5b

04 Freigestelltes optimieren

Auch wenn ein Bildelement perfekt freigestellt wurde, sieht man oft am Rand einen unschönen Schein, wo noch der alte Hintergrund durchscheint. Der folgende Trick hilft dagegen: Kopieren Sie die Ebene über Strg+J und klicken Sie im Menü auf Ebene > Schnittmaske erstellen. Wählen Sie das Wischfinger-Werkzeug an, für das Sie in der Optionsleiste den Schwellenwert auf 40% einstellen. Ziehen Sie nun am Rand von innen nach außen etwas Pixelmaterial heraus. So wurde auch das Raumschiff freigestellt und optimiert.

sci-fi-filmposter6

05 Bildelemente positionieren

Egal wie perfekt freigestellt und optimiert die Bildelemente auch sind, es ist gar nicht so einfach, diese zueinander im Zusammenspiel zu positionieren. Ein guter Weg ist die Anordnung über ein Teilungsverhältnis, wie etwa dem Goldenen Schnitt, der Goldenen Spirale, Dreiecks-Verteilung oder der Drittel-Regel. Hier kam etwa die Goldene Spirale zum Einsatz.

Sie können diese Verhältnisse nach einer groben Positionierung der Elemente schnell überlagern lassen. Aktivieren Sie dazu das Freistellungswerkzeug und klicken Sie in das Dokument. Wählen Sie in der Optionsleiste eine der Überlagerungsoptionen für das Freistellungswerkzeug aus. Wechseln Sie wieder zum Verschieben-Werkzeug (Nicht freistellen!) und optimieren Sie die Positionen.

sci-fi-filmposter7

06 Rahmen erstellen

Unsere Heldin schwebt noch zu sehr im Raum, weshalb ich ihr einen Rahmen geben möchte, an den sie sich anlehnen kann. Dazu erstellen Sie eine neue Ebene über das Menü und Ebene > Neu > Ebene und drücken Strg+A, um das komplette Dokument auszuwählen. Bearbeiten > Kontur füllen mit Position: innen und schwarzer Farbe sorgt dann für den gewünschten Rahmen.

Wer mag, fügt darüber noch eine Textur ein und geht im Menü auf Ebene > Schnittmaske erstellen. Damit unsere Heldin nur zum Teil über dem Rahmen hinaus geht, habe ich diesem eine Ebenenmaske spendiert und die entsprechenden Stellen mit schwarzer Farbe und dem Pinsel in der Maske übermalt.

sci-fi-filmposter8

07 Dodge & Burn-Effekt

Der Dodge & Burn-Effekt bezieht sich auf die Werkzeuge Abwedler (Dodge) und Nachbelichter (Burn). Zur Vorbereitung erzeugen Sie eine neue Ebene über Umschalt+Strg+N. Stellen Sie die Füllmethode auf Ineinanderkopieren um und aktivieren Sie „Mit neutraler Farbe füllen (50% Grau)“. Mit dem Abwedler-Werkzeug zeichnen Sie nun gezielt Lichter ein und mit dem Nachbelichter-Werkzeug Schatten. So kontrollieren Sie die Lichtsituation im Dokument. Hier wurde das Raumschiff und die generell Stimmung noch etwas dunkler gestaltet.

sci-fi-filmposter9

08 Titel und Credits

Für den Titel aktivieren Sie das Text-Werkzeug und schreiben in weißer Farbe und in Majuskeln Ihre Headline. Kopieren Sie den Text zweimal über Strg+J und aktivieren Sie bei der obersten Ebene den Ebenenstil > Verlaufsüberlagerung mit einem Verlauf von #7a7a7a (RGB 122, 122, 122) zu Weiß. Zum Ändern des Verlaufes muss dieser einfach angeklickt werden, um die entsprechende Farbunterbrechung zu verändern.

Für einen leichten 3D-Effekt nutzen wir die zwei weiteren Ebenen mit Text, die im Ebenenbedienfeld unterhalb der aktuellen Ebene angeordnet sind. Die erste Ebene wird angeklickt, das Verschieben-Werkzeug aktiviert und die Ebene mit der Pfeil-Taste nach innen, rechts um ein, zwei Pixel verschoben. Der Vorgang wiederholt sich bei der darunter liegenden Ebene mit Text, wobei dieses Mal allerdings die Ebene nach innen, links verschoben wird.

Wer mag kann noch den folgenden Schritt gehen: Wählen Sie mit dem Auswahlrechteck-Werkzeug eine Seite des Schriftzuges aus und drücken Sie die Schaltfläche Ebenenmaske hinzufügen unten im Ebenenbedienfeld an. Aktivieren Sie die darüber liegende Ebene und wählen Sie dieses Mal die andere Seite aus. Auch hier spendieren Sie der Ebene eine Maske. Der 3D-Effekt sollte nun (gefühlt) nach innen zeigen.

sci-fi-filmposter10

Mit gedrückter Strg-Taste können Sie die beiden weißen Textebenen auswählen (nicht aber die oberste Textebene) und über Strg+E reduzieren. Aktivieren Sie dann den Ebenenstil > Verlaufsüberlagerung mit dem Verlauf Kupfer. Die Credits wurden übrigens ganz einfach mit weißer Farbe und dem Textwerkzeug geschrieben.

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Inspiration Photoshop Tutorials

Photoshop-Tutorial: Film-Poster-Stil – Ansprechende Action-Porträts mit Tiefe und Schärfe

Die Aufnahme im Studio ist gelungen, der Kämpfer schaut böse drein, doch noch wirkt das Porträt so gar nicht kontrastreich, stimmungsvoll und aussagekräftig. Dabei sind Sie nur wenige Schritte in Photoshop davon entfernt, ein Action-geladenes Porträt zu zaubern. Ein neuer Hintergrund, die Anwendung der Dodge & Burn-Methode sowie der passende Bild-Look reichen dazu völlig aus. Lassen Sie sich bei diesem Photoshop-Tutorial überraschen!

action-portrait9

Öffnen des Fotos im Camera Raw-Dialog

Öffnen Sie Ihr JPEG oder das Rohdatenformat in Camera Raw. Ein JPEG öffnen Sie leicht über Datei > In Bridge suchen und einem Rechtsklick auf In Camera Raw öffnen. In Photoshop CC gehe Sie einfach auf Filter > Für Smartfilter konvertieren und dann auf Filter > Camera Raw-Filter.

Nehmen Sie die Farbtemperatur etwas zurück und setzen Sie die Belichtung etwas herauf. Gleichen Sie mit den Reglern Tiefen und Lichter allzu helle und dunkle Bereiche aus. Das Foto sollte für die kommenden Schritte neutral und gleichmäßig wirken. Halten Sie die Umschalttaste gedrückt und klicken Sie die Schaltfläche Objekt öffnen an.

action-portrait1

Freistellungsarbeiten – Auswahl

Mein Kämpfer steht vor einem einfarbigen Hintergrund, weshalb wir nicht viel Arbeit in die Freistellung investieren müssen. Wählen Sie das Schnellauswahlwerkzeug an und malen Sie damit über die Bildelemente, die Sie auswählen möchten. Für feinere Bereiche ändern Sie in der Optionsleiste die Größe der Werkzeugspitze auf eine kleinere Variante ab. Sollte Photoshop einmal Bereiche auswählen, die Sie nicht selektieren möchten, so übermalen Sie diese mit gedrückter Alt-Taste.

action-portrait2

Freistellungsarbeiten – Maske

Klicken Sie den Button Ebenenmaske hinzufügen an, den Sie unten im Ebenenbedienfeld entdecken können. Eine Maske wurde erzeugt und das Bild grob freigestellt. Jetzt geht es an die Optimierung der Maske über Fenster > Eigenschaften und die Schaltfläche Maskenkante. Auch ein Rechtsklick auf die Maske und Maske verbessern öffnet diesen Dialog.

Rufen Sie mit der Lupe die Stellen auf, die Sie zunächst bearbeiten möchten. Mit dem Radius-verbessern-Werkzeug malen Sie dann über die Bereiche, die feinste Bildelemente zeigen, wie etwa die kurzen Haare. Bestätigen Sie über OK, wenn Sie zufrieden sind.

action-portrait3

Textur im Hintergrund

Da das Model so schön freigestellt ist, kann nun leicht der Hintergrund gestaltet werden. Ich habe dazu einfach eine „Grunge-Textur“ eine Ebene tiefer abgelegt. Jetzt können Sie noch besser kontrollieren, ob die Person perfekt freigestellt wurde. Bessern Sie gegebenenfalls in der Maske mit schwarzer und weißer Farbe und dem Pinsel nach. Die Textur wirkt noch etwas flach, weshalb Sie eine Vignettierung erzeugen, also einen Schatten als Randverzierung.

Ziehen Sie dazu mit dem Auswahlellipse-Werkzeug eine Ellipse in der Mitte auf. Gehen Sie im Menü auf Auswahl > Auswahl umkehren und auf Ebene > Neue Einstellungsebene > Tonwertkorrektur und bestätigen Sie über OK. Ziehen Sie den unteren, rechten Regler nach links, um das Bild generell abzudunkeln. Nutzen Sie dann den Filter > Weichzeichnungsfilter > Gaußscher Weichzeichner, um die Maske kontrolliert weicher zu gestalten.

action-portrait4

Model und Hintergrund angleichen

Oft kommt es bei freigestellten Bildelementen vor neuem Hintergrund zu dem Effekt, dass die Farbtemperaturen nicht zusammen passen. So sieht das Model dann eher wie aufgeklebt aus. Ein einfacher Weg, um die Farben anzugleichen, führt über die Kopie der Ebene mit der Textur, etwa über Strg+J. Diese wird nach oben verschoben, so dass sie oberhalb des Models liegt. Die Füllmethode der Ebene wird auf Farbe umgestellt, die Deckkraft stark reduziert.

action-portrait5

Die Dodge & Burn-Methode

Dodge & Burn sind auf die deutsche Photoshop-Version bezogen Abwedler und Nachbelichter. Und genau um diese Werkzeuge geht es auch bei dieser Methode. Drücken Sie Umschalt+Strg+N auf der Tastatur, um eine neue Ebene zu bilden. Ändern Sie den Modus auf Ineinanderkopieren ab und aktivieren Sie „Mit neutraler Farbe füllen (50 % Grau)“.

Nach dem Bestätigen über OK und malen Sie mit dem Abwedler gezielt Licht in das Dokument. Mit dem Nachbelichter sorgen Sie für Schatteneffekte.

action-portrait6

Schlagschatten werfen

Wer mag, aktiviert die Ebene mit dem Model und über Ebene > Ebenenstil > Schlagschatten einen Schattenwurf an die Wand im Hintergrund. Wichtig ist, dass Sie die Größe und den Abstand relativ hoch setzen und die Deckkraft stark verringern.

action-portrait7

Bild-Look umsetzen

Drücken Sie Umschalt+Strg+Alt+E, um alle Ebenen wie reduziert auf eine Ebene zu kopieren. Gehen Sie auf Filter > Für Smartfilter konvertieren und dann auf Filter > Camera Raw-Filter. In älteren Photoshop-Versionen speichern Sie das Bild als reduzierte Version ab und öffnen es erneut über die Bridge in Camera Raw.

Spielen Sie mit der Farbtemperatur (etwa +10) und dem Farbton (hier +5). Stellen Sie den Kontrast auf 25, die Lichter auf 10, die Tiefen auf -20, die Klarheit auf +60, die Dynamik auf +30 und die Sättigung auf -40. Wechseln Sie zum Reiter Details und schärfen Sie das Bild.

action-portrait8

Feinschliff und Nebel

Zuletzt spielen Sie noch mit den allgemeinen Korrekturen, wie etwa Helligkeit/Kontrast, Tonwertkorrektur oder die Gradationskurven. Für einen Nebeleffekt erzeugen Sie eine neue Ebene über Umschalt+Strg+N. Drücken Sie den Buchstaben D für die Standardfarben und wenden Sie den Filter > Renderfilter > Wolken an. Spendieren Sie der Ebene eine Maske und wenden Sie auch darin den Wolkenfilter an.

Klicken Sie die Maske mit der rechten Maustaste an und wählen Sie Ebenenmaske anwenden aus. Klicken Sie mit gedrückter Alt-Taste auf den Button Ebenenmaske hinzufügen. So wurde die Maske komplett schwarz umgesetzt. Malen Sie mit dem Pinsel und weißer Farbe den Nebel ein.

action-portrait9

(dpe)

Kategorien
Fortbildung Inspiration Programmierung Tutorials

Pflichtprogramm für Web-Developer: Kostenloser Online-Lehrgang zu Chromes DevTools von Code School

Welcher Web-Developer kennt die Chrome DevTools nicht? Fest in den Browser integriert, liefern sie Werkzeuge, die bei der Entwicklung von Web-Apps, vor allem deren Debugging, helfen. Dabei ist der Einstieg nicht unbedingt kompliziert. Aber, wie stets, eine fundierte Einleitung hat noch niemandem geschadet und senkt die Hemmschwelle für den Nachwuchs. Genau einen solchen Einstieg liefert Code School mit dem kostenlosen Video-Tutorial “Explore and Master Chrome DevTools”.

codeschool-devtools-01
Explore and Master DevTools: Code School, sponsored by Google

Code School: Immer für einen professionellen Online-Lehrgang gut

Aufmerksame Dr. Web Leserinnen und Leser haben bereits im Januar Bekanntschaft mit Code School gemacht. Gemeinsam mit dem Anbieter konnten wir einen kompletten Sass-Kurs kostenlos anbieten. Nach Aussage der Betreiber der Code School wurde davon reichlich Gebrauch gemacht.

Sie haben den Beitrag damals nicht gelesen? Nicht schlimm, hier die wichtigsten Infos: Code School ist eine Online-Schulungseinrichtung. In der vertrauten Umgebung des eigenen Lieblingsbrowsers lernt man grundlegende, aber auch fortgeschrittene Web-Technologien in seiner individuellen Geschwindigkeit. Jeder Kursus besteht aus einer unterschiedlichen Zahl von Einheiten in der Form von Schulungsvideos. Nach jeder Einheit kann man das erworbene Wissen im Rahmen sogenannter Challenges interaktiv überprüfen und gleichzeitig vertiefen. Im Erfolgsfalle werden einem sogenannte Badges verliehen, die den erfolgreichen Abschluss dokumentieren.

codeschool-welcome

Die Onlinekurse bei Code School sind grundsätzlich kostenpflichtig. Dabei können einzelne Schulungen gebucht werden, Code School setzt allerdings stärker auf das Prinzip des “Einschreibens”. Bei dieser Variante schreibt man sich bei Code School als Student ein, wie man das von der Uni kennt, zahlt einen Obolus von monatlich 25 USD als Flatrate und kann dann alle verfügbaren und später verfügbar werdenden Kurse konsumieren. Bindungsfristen gibt es nicht, man kann monatlich aussteigen.

Was an den Video-Tutorials und den diese begleitenden Challenges, also den Vertiefungsübungen, auffällt, ist der hohe Grad der Professionalität nicht nur der “Professoren”, sondern der Produktion insgesamt. Diesem Standard wird auch “Explore and Master Chrome DevTools” absolut gerecht.

“Explore and Master Chrome DevTools” von Code School, gesponsort durch Google

“Explore and Master Chrome DevTools” ist komplett kostenlos, dabei jedoch auf dem gleichen hohen Niveau, wie die übrigen Produkte des Hauses. Kostenlos ist der Lehrgang durch die Übernahme der Sponsorschaft durch Google. An dieser Stelle darf man als Web-Developer ruhig mal kurz “Danke, Google” sagen, denn der Kurs ist tatsächlich schon fast als Pflichtprogramm für jeden Entwickler zu bezeichnen.

codeschool-devtools-04

17 Videos mit Laufzeiten zwischen etwas mehr als einer Minute und knapp fünf Minuten kumulieren sich zu einer Gesamtdauer von knapp 51 Minuten. Im Schnitt ist jedes Video-Tutorial demnach drei Minuten lang und eignet sich daher auch für den schnellen Konsum zwischendurch. 75 der sogenannten Challenges begleiten die Tutorials. Diese sind durchweg praxisnah und orientieren sich tatsächlich sehr nah an den Inhalten der vorangegangenen Videos, was ich nicht bei allen Code School-Produkten, deren Videos übrigens zumeist zwischen fünf und 15 Minuten lang sind, in dieser Klarheit feststellen konnte.

codeschool-devtools-06

Um auf “Explore and Master Chrome DevTools” zugreifen zu können, bedarf es keiner Registrierung. Diese ist natürlich nützlich, wenn man den Kurs nicht am Stück durchlaufen will, denn mit einem Account ausgestattet, lassen sich Bearbeitungsstände auch zu späteren Zeitpunkten wieder abrufen. Anders als in den sonstigen Kursen des Anbieters, können Sie sich in “Explore and Master Chrome DevTools” frei bewegen. Eine Reihenfolge im didaktischen Sinne ist zwar gegeben, aber nicht zwingend zu durchlaufen. Auf diese Weise greifen Sie direkt auf die Bereiche zu, die sie interessieren oder bei denen Sie noch Schwächen sehen und lassen die bekannten Grundlagen links liegen.

Sämtliche Videos stehen als MP4 in SD, wie auch HD zum Download zur Verfügung, so dass Sie sie nach dem Herunterladen schauen können, wo, wie und so oft Sie das wollen. Eine Straßenbahnfahrt zur Arbeit kann so zu einem produktiven Ereignis werden. Auch der Toilettengang erfährt neben dem Offensichtlichen zusätzlichen Nutzwert.

codeschool-devtools-05

“Explore and Master Chrome DevTools” besteht aus sieben Lektionen, die sich mit den verschiedenen Aspekten des Web-Development auseinandersetzen. Im Einzelnen wird geboten:

  • Level 1: Getting Started & Basic DOM and Styles
  • Level 2: Advanced DOM and Styles
  • Level 3: Working With the Console
  • Level 4: Debugging JavaScript
  • Level 5: Improving Network Performance
  • Level 6: Improving Performance
  • Level 7: Memory Profiling

Mir persönlich haben die Level 5 und 6 am meisten gegeben. Insbesondere die Tipps zur Reduzierung der Netzwerklast durch weniger Requests haben sich im Hinterstübchen verankert. “Explore and Master Chrome DevTools” ist ein Angebot, das man nicht nicht empfehlen kann. Und das nicht nur, wie zuweilen gern getan, weil es kostenlos ist, sondern weil es so gut ist, dass man sogar damit zufrieden würde, wenn man dafür bezahlte.

Web-Developer, die zwei bis drei Stunden (inkl. Challenges) ihrer Zeit für den Lehrgang erübrigen, werden sicherlich nicht enttäuscht und vor allem hinterher nicht weniger schlau als zuvor sein. Wer rein auf Bewegtbild steht, kommt sogar mit unter einer Stunde Aufwand weg. Los geht’s!

Links zum Beitrag:

  • Explore and Master Chrome DevTools – Code School
  • Code School + Dr. Web bieten eine komplette Sass-Schulung kostenlos – Dr. Web Magazin

Kategorien
Design Essentials HTML/CSS Icons & Fonts

Typefacts vermittelt anschaulich die wichtigsten Regeln der Typografie – auch für Webdesigner

Typografie ist eine Wissenschaft für sich. Nicht ohne Grund gibt es zahlreiche Bücher, darunter Nachschlagewerke und dicke Wälzer, die sich mit dem Thema beschäftigen. Denn richtige Typografie ist aufgrund zahlreicher Regeln und Fallstricke keine einfache Sache. Hat man es früher im Internet mit korrekter Typografie nicht so ernst genommen (noch heute dient das Zoll-Zeichen oft als Anführungszeichen), werden mittlerweile auch Websites – vor allem dank Webfonts – typografisch immer ansprechender. Typefacts versucht, Typografie ansehnlich und verständlich zu vermitteln.


Typefacts

Die wichtigsten Regeln anschaulich erklärt

Typefacts, welches vom Schriftentwickler Christoph Köblin betrieben wird, richtet sich vor allem an jene, die mit Typografie bislang wenig am Hut hatten. Die wichtigsten typografischen Regeln werden daher sehr anschaulich und praxisbezogen erläutert. Auch wenn sich Typefacts nicht explizit an Webdesigner richtet, ist es eine gute Anlaufstelle, um einen Einstieg in das große Thema Typografie zu finden.


Schaubild auf Typefacts

Die Darreichungsform ist zudem auch für Kinder der Generation Sesamstraße mit extrem kurzen Aufmerksamkeitsspannen leicht verdaulich. In kleinen Beiträgen mit zahlreichen Bildern stellt Köblin das Regelwerk vor. Wer sich da durchgearbeitet hat, dem dürften grobe Schnitzer nicht mehr unterlaufen. Neben den bereits genannten Anführungzeichen wird unter anderem auf Binde- und Gedankenstriche, Ligaturen sowie das Apostroph eingegangen. Gerade beim Apostroph scheint Aufklärungsbedarf. Neben der Wahl des falschen Zeichens (Minutenzeichen oder Akzent) wird das Apostroph auch gerne an falscher Stelle eingesetzt (zum Beispiel bei der Pluralbildung oder im Falle des sogenannten Deppenapostroph).

Schriften und Zusatzinfos

Neben typografischen Regeln stellt Christoph Köblin auch einige Schriften vor. Zudem hat er eine kleine Rubrik eingerichtet, in der er Alternativen zu bekannten und viel verbreiteten Schriften auflistet. Denn nicht immer sind Helvetica oder Gill vorhanden, sodass auf adäquaten Ersatz zurückgegriffen werden will, wenn kann. Außerdem gibt es eine Übersicht namhafter Unternehmen und ihrer verwendeten Hausschriften.


Buchempfehlungen auf Typefacts

Darüber hinaus gibt es weitere nützliche Infoseiten. Es werden Tastenkombinationen für typografische Zeichen, die nicht auf der Tastatur zu finden sind, vorgestellt, sowie Symbole, die sich standardmäßig in vielen Schriften wiederfinden.

Fazit: Typefacts ist für Einsteiger und typografische Laien eine gute Anlaufstelle. Da es sich nicht explizit an Webdesigner richtet, fehlen spezifische Infos rund um Webfonts, Entities und CSS-Typografie; aber damit haben Webdesigner in der Regel ja keine Probleme.

(dpe)