Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 2200 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 500 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 1000 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Das Punktesystem

Einen winzigen Haken gibt es noch. Es gibt bei uns ein Punktesystem. Damit soll erreicht werden, dass Mitglieder sich aktiv in unserer Community beteiligen. Sobald du im Forum schreibst oder Tutorials kommentierst, bekommst du Punkte. Mit diesen Punkten kannst du wiederum Tutorials anschauen oder Downloads herunterladen. Mit der Registrierung bei PSD-Tutorials.de erhältst du ein Startguthaben von 100 Punkten, womit du schon ein gutes Stück weit kommst.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir unsere:

PHP-Workshop-DVD - Basics & Tricks

  • 12 Stunden Video-Training, 480 PDF-Seiten Tutorials
  • Basics, Formulare, Datenbanken, XML und Co.
  • 4 Stunden Bonusmaterial zum Webdesign (mit Photoshop
Jetzt informieren

Kommentare


Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Tutorial empfehlen

 

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


In vorhandene oder selbst generierte Grafiken können mittels PHP Texte eingefügt werden. Zunächst ein einführendes Beispiel dazu, wie sich so etwas umsetzen lässt.

<?php
$x = 300;
$y = 200;
$text = 'Hallo, Welt!';
$bild = imageCreateTrueColor($x, $y);    
$farbe = imageColorAllocate($bild, 120, 130, 180);
$textfarbe = imageColorAllocate($bild, 0, 0, 0);
imageFilledRectangle($bild, 0, 0, $x, $y, $farbe);
imageString($bild, 4, 15, 40, $text, $textfarbe); 
imagePng($bild);
imageDestroy($bild);
?>


Ihr seht an dieser Syntax zunächst einmal, dass hier weitestgehend altbekannte Elemente eingesetzt werden. Wirklich neu ist eigentlich nur die Funktion imageString(), über die letztendlich der Text in die Grafik eingefügt wird. Als ersten Parameter übergibt man dieser Funktion die Grafikressource. Über den zweiten Parameter wird die Schriftgröße bestimmt. Als Schriftgrößen können Werte zwischen 1 (sehr klein) und 5 (sehr groß) angegeben werden. Alternativ dazu sind auch Schlüsselwörter möglich.

• tiny
• small
• medium
• bold
• large
• giant

 
Als dritten und vierten Parameter werden die x- und y-Koordinaten des ersten Buchstaben des Textes angegeben, wobei hier von der oberen linken Ecke ausgegangen wird. Der fünfte Parameter enthält den eigentlichen Text. Über den letzten Parameter wird die Textfarbe bestimmt.

<img src="text.php" width="300" height="200" />


Das Ergebnis sieht folgendermaßen aus:

Bilder


 

TrueType-Schriften verwenden

Kommt die Sprache auf das Einfügen von Texten, stellt sich zunächst natürlich die Frage, welche Schriftarten hier denn eigentlich verwendet werden können? Die GD-Bibliothek bringt einige eingebaute Schriftarten mit. Damit hat man allerdings nicht sehr viel Gestaltungsspielraum. Es gibt jedoch auch die Möglichkeit, TrueType-Fonts einzubinden. Damit das funktioniert, muss die GD-Bibliothek mit der Option --enable-gd-native-ttf kompiliert worden sein. Außerdem müssen die gewünschten Schriftarten auf dem System vorhanden sein und man muss die exakten Pfade zu denen kennen.

Unter Windows findet ihr die installierten Schriftarten z.B. im Fonts-Verzeichnis des Windows-Verzeichnisses.

Bilder


 
Interessant sind dort die ttf-Dateien. Diese müsst ihr in euren PHP-Skripten einbinden, wenn ihr diese Dateien nutzen wollt. Wenn euch die Auswahl nicht genügen sollte, werdet ihr beispielsweise auf der Seite http://www.myfont.de/ fündig. Von dort könnt ihr zahlreiche Schriftarten herunterladen. Achtet vor dem Einsatz von TrueType-Schriftarten aber unbedingt auf die Copyright-Hinweise der einzelnen Anbieter. Denn nur dann, wenn eine Schriftart wirklich als frei gekennzeichnet ist, könnt ihr diese auch kostenlos verwenden. Anderenfalls werden Lizenzgebühren fällig.

Im folgenden Beispiel wird davon ausgegangen, dass die Schriftartendatei im selben Verzeichnis wie die PHP-Datei liegt.

<?php
header('Content-Type: image/png');
$x = 300;
$y = 200;
$text = 'Hallo, Welt!';
$font = "verdana.ttf";
$bild = imageCreateTrueColor($x, $y);    
$farbe = imageColorAllocate($bild, 120, 130, 180);
$textfarbe = imageColorAllocate($bild, 0, 0, 0);
imageFilledRectangle($bild, 0, 0, $x, $y, $farbe);
imageTtfText($bild, 19, 0, 40, 100, $textfarbe, $font, $text); 
imagePng($bild);
imageDestroy($bild);
?>


Zwei Dinge sind an dieser Syntax besonders interessant. Da wäre zunächst die Definition der Variablen $font. Dieser Variablen werden Pfad und Name der Schriftartendaten übergeben.

$font = "verdana.ttf";


 
Außerdem wird die Funktion imageTtfText() verwendet. Diese Funktion zeichnet einen Text mit einer TrueType-Schriftart in die Grafik.

Bilder


Der Funktion können zahlreiche Parameter übergeben werden. Als erster Parameter wird die Bildressource angegeben. Über den zweiten Parameter bestimmt man die Schriftgröße. Interpretiert wird der übergebene numerische Wert dabei als Punkt.

 
Die Zeichenkette lässt sich drehen. Dazu gibt man als dritten Parameter einen Gradwert an. Je höher die Gradzahl, umso weiter wird der Schriftzug entgegen dem Uhrzeigersinn gedreht. 90 Grad entsprechen einer senkrechten Ausrichtung.

imageTtfText($bild, 19, 90, 140, 200, $textfarbe, $font, $text);


Das Ergebnis sähe in diesem Fall folgendermaßen aus:

Bilder


Über die Parameter vier und fünf werden die x- und y-Koordinaten definiert. Deren Ursprung liegt jeweils in der linken oberen Ecke und deren Bezugspunkt in der linken unteren Ecke des ersten Buchstabens der angegebenen Zeichenkette.

Die Schriftfarbe übergibt man über den sechsten Parameter. Die eigentliche Schriftart wird als siebter Parameter festgelegt. Schlussendlich muss dann noch der Text notiert werden, was über den achten Parameter geschieht.


 

Texte zentrieren

Eine Anwendung, die man immer wieder braucht, ist das Zentrieren von Texten innerhalb einer Grafik. Eine einfache Zentrierung, wie ihr das aus HTML oder CSS kennt, ist dabei leider nicht möglich. Hier muss vielmehr eine kleine Berechnung angestellt werden. Im folgenden Beispiel werden dafür die Höhe und die Breite der Grafik ins Verhältnis zu der Breite des Textes gesetzt. Dabei wird davon ausgegangen, dass der Text weniger Platz als die eigentliche Grafik beansprucht. (Ein automatischer Zeilenumbruch wird also nicht generiert).

Auch hier zunächst das eigentliche Beispiel in seiner Gesamtheit.

<?php
header('Content-Type: image/png');
$x = 300;
$y = 200;
$text = 'Hallo, Welt!';
$font = 3;
$bild = imageCreateTrueColor($x, $y);   
$farbe = imageColorAllocate($bild, 120, 130, 180);
$textfarbe = imageColorAllocate($bild, 0, 0, 0);
imageFilledRectangle($bild, 0, 0, $x, $y, $farbe);
$breite = imageFontWidth($font) * strlen($text);
$hoehe = imageFontHeight($font);
$x = ($x - $breite) / 2;
$y = ($y - $hoehe) / 2;
imageString($bild, $font, $x, $y, $text, $textfarbe); 
imagePng($bild);
imageDestroy($bild);
?>


Eingebunden wird die Datei dann wieder auf dem bekannten Weg:

<img src="zentrieren.php" width="300" height="200" />


 
Und jetzt ein Blick auf die wichtigsten Elemente des gezeigten Codes bzw. auf die, die für die Zentrierung verantwortlich sind.

Bilder


 
Zunächst muss die Breite der übergebenen Zeichenkette ermittelt werden. Dazu weist man der Funktion imageFontWidth() die Breite eines einzelnen Zeichens zu und multipliziert das Ganze mit der Anzahl der in der Zeichenkette vorhandenen Zeichen.

$breite = imageFontWidth($font) * strlen($text);


Einfacher funktioniert das bei der Berechnung der Höhe. Dort kann man nämlich einfach die Funktion imageFontHeight() verwenden.

$hoehe = imageFontHeight($font);


Im nächsten Schritt müssen die Koordinaten berechnet werden, anhand derer sich der Text letztendlich zentrieren lässt. Dazu wird die Breite der Zeichenkette von der Breite der Grafik abgezogen. Dieses Ergebnis wird dann noch einmal halbiert. Dieses Prozedere wird für die Höhe und die Breite gemacht.

$x = ($x - $breite) / 2;
$y = ($y - $hoehe) / 2;


Mit den erhaltenen Werten kann dann der Text zentriert in die Grafik eingetragen werden.

imageString($bild, $font, $x, $y, $text, $textfarbe);


vBulletin 0.04 • ZF-App 0.316 • Total 0.356