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)


Es kommt oft vor, dass man in seine Webseite Bilder einbinden will/muss - denkt man beispielsweise an Bildergalerien oder einzelne Fotos. Wie aber schützt man solche Bilder vor unerlaubter Weitergabe? Hierfür gibt es ganz unterschiedliche, mehr oder weniger hilfreiche Methoden. Eine sehr effiziente Variante ist dabei sicherlich, die Bilder mit einem Copyright-Hinweis auszustatten.

Bilder


 
Auf diese Weise sind die Bilder vor unerlaubter Weiterverwendung geschützt. (Natürlich könnte man den unteren Bildrand abschneiden und somit den Copyright-Hinweis entfernen, das ist aber ein anderes Thema. Um sich bzw. seine Bilder davor zu schützen, könnte man den Text auch diagonal über das Bild legen. Auch das wäre eine Möglichkeit).

Wie aber macht man so etwas am besten, wie fügt man also einen Text in das Bild ein? Eine Möglichkeit besteht sicherlich darin, den Copyright-Hinweis manuell via Bildbearbeitungsprogramm einzufügen. Dazu muss man das Bild aber manuell öffnen, bearbeiten und speichern. Eleganter wäre es doch, wenn sich das dynamisch erledigen ließe. Und genau so etwas ist mittels PHP und der GD-Bibliothek möglich.

Im folgenden Beispiel wird eine Grafik zunächst mittels PHP-Skript eingelesen. In diese Grafik wird über die GD-Bibliothek ein Text eingefügt. Anschließend wird die Grafik, in der nun der Text enthalten ist, unter einem neuen Namen abgespeichert. Voraussetzung ist also zunächst einmal eine Grafik, die als Ausgangspunkt dient.

Bilder


 
Im nächsten Schritt wird das eigentliche Skript definiert. Das folgende Beispiel zeigt, wie so etwas aussehen kann.

<?php
$grafik = 'logo.png';
$beschriftete_grafik = 'logo_beschriftet.png';
$text = "copyright by www.psd-tutorials.de";
$font = 4;
$bild = imageCreateFromPng($grafik); 
$textfarbe = imageColorAllocate($bild, 0, 0, 0);
$y = imageSy($bild);
$hoehe = imageFontHeight($font);
$y = $y - $hoehe - 6;
imageString($bild, $font, 6, $y, $text, $textfarbe); 
imagePng($bild, $beschriftete_grafik);
imageDestroy($bild);
?>


Ruft man dieses Skript im Browser auf, ergibt sich bereits das gewünschte Bild.

Bilder


 
Also bitte nicht wundern - das Browserfenster bleibt tatsächlich leer. Dennoch wurde der Grafik ein Schriftzug hinzugefügt. Nachfolgend wird das für diese Ausgabe verantwortliche Skript noch einmal Schritt für Schritt erklärt. Zuvor aber noch einmal der Hinweis, dass die Originalgrafik unverändert erhalten bleibt.

Bilder


 
Zunächst einmal wird die Grafik benötigt, die eingelesen werden soll. Im aktuellen Beispiel handelt es sich dabei um eine PNG-Grafik. Es sind allerdings auch andere Grafikformate möglich. Mehr dazu im weiteren Verlauf dieses Tutorials.

$grafik = 'logo.png';


Der Name der Grafik – ggf. auch mit Pfadangabe – wird innerhalb der Variablen $grafik gespeichert.

Es ist bereits angeklungen, dass die Grafik geladen, dann mit einem Text versehen und abschließend unter einem anderen Namen gespeichert wird. Dieser Name wird innerhalb der Variablen $beschriftete_grafik gespeichert. (Die Originalgrafik bleibt dadurch unverändert erhalten).

$beschriftete_grafik = 'logo_beschriftet.png';


Auch wenn im aktuellen Beispiel lediglich eine Grafik beschriftet wird, so bestünde auch die Möglichkeit, das gleich für mehrere Grafiken zu erledigen. In diesem Fall müssten die Grafiken in einem Array gespeichert und dann jeweils mit einer Schleife durchlaufen werden.

Im nächsten Schritt wird der Text definiert, der in die Grafik eingefügt werden soll. Im aktuellen Beispiel ist das ein herkömmlicher Copyright-Hinweis.

$text = "copyright by www.psd-tutorials.de";


Dieser Text wird innerhalb der Variablen $text gespeichert. Weiter geht es mit der Definition der Schriftgröße, die im aktuellen Beispiel auf 4 gesetzt wird. Wobei der Wert 4 für eine große Schrift steht.

$font = 4;


 
Nun muss die Grafik eingelesen werden, die manipuliert werden soll. Die Grafikressource wird dann in der Variable $bild hinterlegt. Neben imageCreateFromPng() gibt es übrigens noch andere Funktionen, über die sich Grafiken einlesen lassen. Mehr dazu dann aber im weiteren Verlauf dieses Tutorials. Zunächst einmal zurück zum aktuellen Beispiel.

$bild = imageCreateFromPng($grafik);


Weiter geht es mit den Einstellungen für den Text, der auf der Grafik angezeigt werden soll. Dazu werden die Höhe der Grafik und der Schrift ermittelt. Beide Werte werden verwendet, um den Text in der linken unteren Ecke der Grafik zu positionieren. Zunächst aber die Definition der Schriftfarbe, die im aktuellen Beispiel auf Schwarz gesetzt wird.

$textfarbe = imageColorAllocate($bild, 0, 0, 0);


Über imageSy() wird die Höhe der Grafik ermittelt. Wer die Breite der Grafik herausfinden will/muss, kann übrigens die Funktion imageSx() verwenden.

$y = imageSy($bild);


Ebenso einfach lässt sich die Schrifthöhe auslesen. Verwendet wird dafür die Funktion imageFontHeight().

$hoehe = imageFontHeight($font);


Mit den beiden Werten Höhe der Grafik und Höhe der Schrift können die Koordinaten für die Beschriftung auf der y-Koordinate berechnet werden.

$y = $y - $hoehe - 6;


 
Dazu wird die Schrifthöhe von der Bildhöhe subtrahiert. Dadurch allein erreicht man aber noch nicht das gewünschte Ergebnis, da der Text dann am Bildrand "kleben" würde.

Bilder


Um das zu verhindern, wird durch eine Subtraktion von sechs Pixeln ein entsprechender Abstand am unteren Bildrand eingefügt. Nun kann der Text an den unteren Bildschirmrand geschrieben werden. Verwendet wird dafür die Funktion imageString().

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


 
Der Funktion imageString() werden verschiedene Parameter übergeben.

• $bild – Das ist das eingelesene Bild.
• $font – Hierbei handelt es sich um die Schriftgröße.
• 6 – Der Abstand zum linken Rand der Grafik.
• $y – Der Abstand der Schrift zum unteren Rand der Grafik.
• $text – Das ist der Text, der auf der Grafik angezeigt werden soll.
• $textfarbe – Hierüber wird die Textfarbe bestimmt.

Nachdem die Grafik beschriftet wurde, kann sie unter einem neuen Namen gespeichert werden. Der Name lautet in diesem Fall logo_beschriftet.png.

imagePng($bild, $beschriftete_grafik);


Und schlussendlich wird der Speicher wieder freigegeben, der von der Grafik belegt ist.

imageDestroy($bild);


Mehr ist tatsächlich nicht nötig, um den Copyright-Hinweis in die Grafik einzufügen.

Neben der in diesem Beispiel verwendeten Funktion imageCreateFromPng() gibt es auch noch andere Varianten, die je nach Dateityp verwendet werden können.

• Imagecreatefromgif() – Wird zum Einlesen von GIF-Grafiken verwendet.
• Imagecreatefromjpeg() – Wird zum Einlesen von JPEG-Grafiken verwendet.
• imagecreatefrompng() – Wird zum Einlesen von PNG-Grafiken verwendet.
• imagecreatefromwbmp() – Wird zum Einlesen von WBMP-Grafiken verwendet.
• imagecreatefromxbm() – Wird zum Einlesen von XBM-Grafiken verwendet.
• imagecreatefromxpm() – Wird zum Einlesen von XPM-Grafiken verwendet.

Mit diesen Funktionen könnt ihr beinahe alle verfügbaren Bildtypen für die Beschriftung via PHP verwenden.
vBulletin 0.044 • ZF-App 0.292 • Total 0.336